:root {
  color-scheme: light;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --canvas: #f8f7fb;
  --paper: #ffffff;
  --paper-warm: #fffcf7;
  --oat: #f7f1e5;
  --ink: #161423;
  --ink-soft: #343044;
  --muted: #716d7d;
  --line: rgba(30, 25, 48, 0.1);
  --line-strong: rgba(30, 25, 48, 0.17);
  --blue: #315dff;
  --blue-deep: #1839be;
  --violet: #8252f5;
  --pink: #c95ecb;
  --gold: #d6a84b;
  --terracotta: #c96f52;
  --cocoa: #3f3027;
  --sage: #6f8a68;
  --glass: rgba(255, 255, 255, 0.64);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --shadow-sm: 0 10px 30px rgba(37, 28, 79, 0.08);
  --shadow-md: 0 24px 70px rgba(37, 28, 79, 0.12);
  --shadow-lg: 0 44px 120px rgba(37, 28, 79, 0.16);
  --radius-lg: 34px;
  --radius: 26px;
  --radius-sm: 18px;
  --page-gutter: max(4.25vw, calc((100vw - 1420px) / 2));
  --container: min(91.5vw, 1420px);
  --ease-spring: cubic-bezier(0.2, 0.82, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 48px;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -16rem, rgba(255, 255, 255, 0.98), transparent 48rem),
    linear-gradient(145deg, #fdfcff 0%, var(--canvas) 48%, #f8f4ff 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.56;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
}

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

h1,
h2,
h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  text-wrap: balance;
}

p {
  margin-bottom: 1.25em;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

::selection {
  background: rgba(49, 93, 255, 0.18);
  color: var(--ink);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font-size: 14px;
  font-weight: 700;
}

.skip-link:focus {
  transform: none;
}

.section-shell {
  width: var(--container);
  margin-inline: auto;
}

.interactive {
  transition:
    transform 340ms var(--ease-spring),
    box-shadow 340ms var(--ease-spring),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.interactive:hover {
  transform: translateY(-3px) scale(1.018);
}

.interactive:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

.interactive:focus-visible,
.nav-link:focus-visible,
.loop-step:focus-visible,
.marquee:focus-visible,
.footer-columns a:focus-visible,
.footer-columns button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 65%, white);
  outline-offset: 3px;
}

.glass {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(40px) saturate(175%);
  backdrop-filter: blur(40px) saturate(175%);
}

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.79), rgba(255, 255, 255, 0.5));
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(38px) saturate(180%);
  backdrop-filter: blur(38px) saturate(180%);
}

.glass-card::after,
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.glass-card > *,
.topbar > * {
  position: relative;
  z-index: 1;
}

.aurora-field {
  position: fixed;
  inset: -28vh -18vw;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.aurora {
  position: absolute;
  width: max(48vw, 560px);
  aspect-ratio: 1;
  border-radius: 43% 57% 65% 35% / 44% 38% 62% 56%;
  filter: blur(100px);
  opacity: 0.19;
  mix-blend-mode: multiply;
  animation: aurora-drift 25s ease-in-out infinite alternate;
}

.aurora-blue {
  top: 2%;
  left: 8%;
  background: radial-gradient(circle, #2148ff 0%, #6387ff 42%, transparent 73%);
}

.aurora-violet {
  top: 8%;
  right: 0;
  background: radial-gradient(circle, #6d37ff 0%, #b480ff 39%, transparent 72%);
  animation-delay: -8s;
  animation-duration: 31s;
}

.aurora-indigo {
  top: 42%;
  left: 39%;
  width: max(38vw, 480px);
  background: radial-gradient(circle, #3039aa 0%, #9a68dd 40%, transparent 72%);
  opacity: 0.11;
  animation-delay: -16s;
  animation-duration: 36s;
}

@keyframes aurora-drift {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(0.96); }
  45% { transform: translate3d(10%, 6%, 0) rotate(16deg) scale(1.08); }
  100% { transform: translate3d(-2%, 15%, 0) rotate(-8deg) scale(1.02); }
}

.topbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 84px;
  padding: max(10px, env(safe-area-inset-top)) var(--page-gutter) 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(250, 250, 255, 0.84), rgba(250, 250, 255, 0.62));
  box-shadow: 0 18px 55px rgba(40, 32, 78, 0.07);
  transform: none;
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  transition:
    transform 520ms var(--ease-spring),
    opacity 280ms ease;
}

.topbar.nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-110%);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 11px;
  padding: 10px 0;
  border-radius: 10px;
}

.brand:hover {
  box-shadow: none;
}

.brand-mark {
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(80, 51, 36, 0.08);
  border-radius: 12px;
  background: #fffaf4;
  box-shadow: 0 5px 14px rgba(102, 64, 40, 0.08);
}

.brand-mark img {
  width: 24px;
  height: 30px;
  object-fit: cover;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.15vw, 18px);
}

.nav-link {
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 590;
  letter-spacing: -0.008em;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.nav-link[aria-current="page"] {
  color: var(--ink);
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
}

.nav-link:hover {
  background: rgba(36, 28, 61, 0.055);
  color: var(--ink);
  transform: translateY(-1px);
}

.nav-cta,
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.nav-cta {
  justify-self: end;
  min-height: 50px;
  padding-inline: 19px;
  background: var(--ink);
  color: white;
  box-shadow: 0 10px 24px rgba(22, 20, 35, 0.18);
}

.nav-cta:hover {
  box-shadow: 0 16px 34px rgba(22, 20, 35, 0.24);
}

.nav-cta svg,
.button svg {
  width: 18px;
}

.menu-button,
.mobile-menu {
  display: none;
}

.hero {
  --hero-top-padding: clamp(112px, 15.5vh, 210px);
  --phone-stage-offset: clamp(40px, calc(4.2vh + 6px), 60px);
  --hero-stage-height: clamp(
    556px,
    calc(100svh - var(--hero-top-padding) - var(--hero-top-padding) - var(--phone-stage-offset) + 84px),
    900px
  );
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.64fr);
  align-content: start;
  align-items: center;
  gap: clamp(36px, 4.5vw, 76px);
  padding-top: var(--hero-top-padding);
  padding-bottom: 16px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  height: var(--hero-stage-height);
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 30px;
  padding-top: var(--phone-stage-offset);
}

.section-kicker,
.card-kicker {
  color: #4a5080;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-category {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: min(100%, 240px);
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4b4958;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-category::before {
  display: none;
}

.hero-category-copy {
  display: block;
  flex: 0 0 auto;
}

.hero-category-copy strong {
  font-size: clamp(15px, 1.08vw, 17px);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.hero-motion-accent {
  position: relative;
  width: 224px;
  height: 30px;
  overflow: hidden;
  opacity: 0.82;
}

.hero-motion-accent::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 8px;
  left: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76, 103, 255, 0.24), rgba(118, 80, 241, 0.52), rgba(76, 103, 255, 0.2), transparent);
  background-size: 210% 100%;
  animation: hero-accent-flow 7.2s linear infinite;
}

.hero-motion-accent::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 70px;
  height: 22px;
  border-top: 1px solid rgba(111, 81, 238, 0.17);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.hero-motion-dot {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #6c5af0;
  box-shadow: 0 0 0 5px rgba(102, 87, 239, 0.06), 0 0 14px rgba(78, 92, 241, 0.24);
  animation: hero-accent-float 5.6s ease-in-out infinite;
}

.hero-motion-dot-one {
  top: 13px;
  left: 18px;
}

.hero-motion-dot-two {
  top: 13px;
  left: 104px;
  width: 4px;
  height: 4px;
  opacity: 0.72;
  animation-delay: -1.8s;
}

.hero-motion-dot-three {
  top: 8px;
  right: 24px;
  width: 6px;
  height: 6px;
  background: #8e5dec;
  animation-delay: -3.4s;
}

@keyframes hero-accent-flow {
  to {
    background-position: -210% 0;
  }
}

@keyframes hero-accent-float {
  0%,
  100% {
    transform: translateY(1px) scale(0.94);
  }

  50% {
    transform: translateY(-3px) scale(1.06);
  }
}

.hero-context-visual {
  display: flex;
  width: min(100%, 352px);
  height: 58px;
  align-items: center;
}

.context-source-stack {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

.context-source {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 25px rgba(56, 49, 101, 0.09), inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  animation: context-source-float 4.8s ease-in-out infinite;
}

.context-source + .context-source {
  margin-left: -8px;
}

.context-source-health {
  z-index: 3;
}

.context-source-calendar {
  z-index: 2;
  animation-delay: -1.6s;
}

.context-source-reminders {
  z-index: 1;
  animation-delay: -3.2s;
}

.context-source-maps {
  z-index: 0;
  animation-delay: -4.1s;
}

.context-source img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.context-source-calendar {
  background: rgba(255, 255, 255, 0.88);
}

.apple-calendar-icon {
  display: grid;
  align-content: center;
  justify-items: center;
  line-height: 1;
}

.apple-calendar-icon small {
  margin-bottom: 2px;
  color: #ff3b30;
  font-size: 6px;
  font-weight: 780;
  letter-spacing: 0.07em;
}

.apple-calendar-icon strong {
  color: #292632;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.055em;
}

.apple-reminders-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 7px 7px, #ff5b57 0 2.2px, transparent 2.4px),
    radial-gradient(circle at 7px 15px, #ffbf3e 0 2.2px, transparent 2.4px),
    radial-gradient(circle at 7px 23px, #32c75a 0 2.2px, transparent 2.4px),
    linear-gradient(#ffffff, #fbfbfd);
  box-shadow: inset 0 0 0 0.5px rgba(40, 36, 53, 0.04);
}

.apple-reminders-icon::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 5px;
  width: 14px;
  height: 2px;
  border-radius: 99px;
  background: #c9c8ce;
  box-shadow: 0 8px 0 #c9c8ce, 0 16px 0 #c9c8ce;
}

.apple-maps-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(31deg, transparent 0 36%, rgba(255, 255, 255, 0.82) 36% 44%, transparent 44%),
    linear-gradient(112deg, transparent 0 47%, rgba(255, 255, 255, 0.84) 47% 55%, transparent 55%),
    linear-gradient(135deg, #cce8ff 0 31%, #dff5cf 31% 63%, #f9dfac 63% 100%);
  box-shadow: inset 0 0 0 0.5px rgba(40, 36, 53, 0.05);
}

.apple-maps-icon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  width: 4px;
  height: 42px;
  border-radius: 99px;
  background: #4f7cff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
  transform: rotate(38deg);
}

.apple-maps-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50% 50% 50% 0;
  background: #ff4b4f;
  box-shadow: 0 2px 4px rgba(87, 39, 61, 0.18);
  transform: rotate(-45deg);
}

.context-flow-line {
  position: relative;
  width: 126px;
  height: 24px;
  flex: 0 0 126px;
  overflow: hidden;
}

.context-flow-line::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(78, 103, 255, 0.16), rgba(101, 77, 239, 0.72));
}

.context-flow-line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #6b57ed;
  box-shadow: 0 0 0 5px rgba(99, 84, 238, 0.08), 0 0 16px rgba(82, 88, 244, 0.42);
  transform: translate(-50%, -50%);
  animation: context-flow 2.8s var(--ease-spring) infinite;
}

.context-doni-orb {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 38%, rgba(116, 95, 240, 0.16) 58%, transparent 74%);
  box-shadow: 0 12px 34px rgba(75, 61, 147, 0.11);
}

.context-doni-orb::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(107, 87, 237, 0.18);
  border-radius: 50%;
  animation: context-orb-pulse 2.8s ease-out infinite;
}

.context-doni-orb img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 0 52%, rgba(0, 0, 0, 0.88) 62%, transparent 76%);
  mask-image: radial-gradient(circle, #000 0 52%, rgba(0, 0, 0, 0.88) 62%, transparent 76%);
}

@keyframes context-source-float {
  0%,
  100% {
    transform: translateY(1px);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes context-flow {
  0% {
    opacity: 0;
    left: 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: 100%;
  }
}

@keyframes context-orb-pulse {
  0%,
  55% {
    box-shadow: 0 0 0 0 rgba(107, 87, 237, 0.2);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(107, 87, 237, 0);
  }
}

.hero-signal-tail {
  position: relative;
  height: 18px;
  min-width: 48px;
  flex: 1 1 auto;
  overflow: hidden;
}

.hero-signal-tail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(88, 78, 240, 0.68), rgba(111, 83, 241, 0.48), rgba(88, 78, 240, 0));
  clip-path: polygon(0 48%, 28% 48%, 34% 38%, 39% 48%, 44% 48%, 48% 8%, 54% 90%, 60% 48%, 100% 48%);
  transform-origin: center;
  animation: signal-heartbeat 1.8s ease-in-out infinite;
}

@keyframes signal-heartbeat {
  0%,
  32%,
  68%,
  100% {
    opacity: 0.38;
    transform: scaleY(0.42);
  }

  42% {
    opacity: 0.9;
    transform: scaleY(1);
  }

  51% {
    opacity: 0.58;
    transform: scaleY(0.72);
  }
}

.hero-main {
  align-self: end;
  transform: translateY(10px);
}

.hero h1 {
  max-width: 1000px;
  margin-bottom: 22px;
  font-size: clamp(64px, 5.75vw, 94px);
  font-weight: 730;
  letter-spacing: -0.042em;
  line-height: 0.92;
}

.headline-line {
  display: block;
  white-space: nowrap;
}

.gradient-text {
  display: block;
  padding-right: 0.05em;
  background: linear-gradient(92deg, #315dff 2%, #7250f4 48%, #bd62d5 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.hero-lede {
  max-width: 900px;
  margin-bottom: 24px;
  color: #6f6a79;
  font-size: clamp(19px, 1.45vw, 22px);
  letter-spacing: -0.012em;
  line-height: 1.54;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .button {
  min-height: 58px;
  padding-inline: 26px;
  font-size: 15px;
}

.button-primary {
  min-height: 56px;
  padding-inline: 24px;
  background: var(--ink);
  color: white;
  box-shadow: 0 16px 35px rgba(22, 20, 35, 0.2);
}

.button-primary:hover {
  box-shadow: 0 22px 44px rgba(22, 20, 35, 0.28);
}

.button-soft {
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-sm), inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}

.button-soft:hover {
  border-color: rgba(69, 55, 111, 0.15);
  box-shadow: var(--shadow-md);
}

.hero-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
  padding-top: 0;
}

.hero-values article {
  position: relative;
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  overflow: hidden;
  padding: 20px 18px 24px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, var(--value-wash), transparent 46%),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 30px rgba(45, 39, 87, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring);
}

.hero-values article::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6px;
  bottom: 3px;
  width: 132px;
  height: 72px;
  pointer-events: none;
  opacity: 0.36;
  -webkit-mask-image: linear-gradient(135deg, transparent 2%, #000 86%);
  mask-image: linear-gradient(135deg, transparent 2%, #000 86%);
}

.hero-values article::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 2px;
  border-radius: 99px 99px 0 0;
  background: var(--value-accent);
  opacity: 0.7;
}

.hero-values article > * {
  position: relative;
  z-index: 1;
}

.hero-values article:hover {
  box-shadow: 0 18px 38px rgba(45, 39, 87, 0.11), inset 0 1px 0 white;
  transform: translateY(-3px);
}

.value-card-blue {
  --value-accent: #416aff;
  --value-wash: rgba(65, 106, 255, 0.11);
}

.value-card-blue::before {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--value-accent) 64%, transparent) 1.2px, transparent 1.5px);
  background-size: 11px 11px;
}

.value-card-violet {
  --value-accent: #8757f4;
  --value-wash: rgba(135, 87, 244, 0.11);
}

.value-card-violet::before {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    color-mix(in srgb, var(--value-accent) 54%, transparent) 9px 10px,
    transparent 10px 18px
  );
}

.value-card-sage {
  --value-accent: #74936b;
  --value-wash: rgba(116, 147, 107, 0.12);
}

.value-card-sage::before {
  right: -20px;
  bottom: -23px;
  width: 154px;
  height: 108px;
  border-radius: 50%;
  background-image: repeating-radial-gradient(
    circle at 100% 100%,
    transparent 0 11px,
    color-mix(in srgb, var(--value-accent) 58%, transparent) 12px 13px,
    transparent 14px 23px
  );
}

.value-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.value-outcome {
  color: color-mix(in srgb, var(--value-accent) 72%, var(--ink));
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-values strong,
.hero-values small {
  display: block;
}

.hero-values strong {
  margin: 0;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.022em;
}

.hero-values small {
  color: #696474;
  font-size: 13px;
  letter-spacing: -0.004em;
  line-height: 1.48;
}

.hero-values small span {
  display: block;
  white-space: nowrap;
}

.hero-values small span:last-child {
  width: 88%;
}

.hero-product {
  position: relative;
  height: var(--hero-stage-height);
  min-height: 0;
}

.product-halo {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 125%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 74, 244, 0.18), rgba(79, 115, 255, 0.08) 43%, transparent 69%);
  filter: blur(10px);
  transform: translateX(-50%);
}

.iphone {
  position: absolute;
  z-index: 3;
  top: var(--phone-stage-offset);
  left: 50%;
  width: auto;
  height: calc(100% - var(--phone-stage-offset));
  aspect-ratio: 78 / 163.4;
  transform: translateX(-50%);
  filter: drop-shadow(0 48px 60px rgba(38, 31, 77, 0.2));
}

.iphone-shell {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 78 / 163.4;
  padding: 10px;
  border: 1px solid rgba(15, 13, 22, 0.55);
  border-radius: 58px;
  background: linear-gradient(145deg, #2b2830, #6e6578 42%, #1b1920 80%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 0 0 5px #16131b;
}

.iphone-screen {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 18px 18px 26px;
  border-radius: 49px;
  background:
    radial-gradient(circle at 75% 16%, rgba(198, 153, 255, 0.23), transparent 31%),
    radial-gradient(circle at 16% 48%, rgba(93, 134, 255, 0.16), transparent 35%),
    linear-gradient(155deg, #fcfbff 0%, #f4f0fb 48%, #f9f6ff 100%);
}

.iphone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.phone-status,
.phone-header,
.today-card,
.doni-message,
.route-result,
.phone-action,
.permission-note,
.ai-skeleton {
  position: relative;
  z-index: 2;
}

.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 760;
}

.phone-status div {
  display: flex;
  gap: 3px;
}

.phone-status i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.dynamic-island {
  position: absolute;
  z-index: 4;
  top: 13px;
  left: 50%;
  width: 102px;
  height: 28px;
  border-radius: 99px;
  background: #17141c;
  transform: translateX(-50%);
}

.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 35px;
  padding-inline: 2px;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.profile-dot {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(235, 229, 255, 0.72);
  box-shadow: none;
}

.profile-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
}

.today-card {
  margin-top: 24px;
  padding: 22px 20px 19px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 40px rgba(63, 45, 102, 0.09), inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.today-label {
  display: block;
  margin-bottom: 7px;
  color: #6f6790;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.today-card > strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.signal-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 21px;
}

.signal-row span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.signal-row b {
  font-size: 14px;
  letter-spacing: -0.02em;
}

.signal-row small {
  color: var(--muted);
  font-size: 9px;
}

.doni-message {
  display: block;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 23px;
  background: rgba(235, 229, 255, 0.72);
}

.doni-message span {
  font-size: 11px;
  font-weight: 760;
}

.doni-message p {
  margin: 5px 0 0;
  color: #4f4960;
  font-size: 12px;
  line-height: 1.5;
}

.ai-skeleton {
  display: none;
  margin-top: 15px;
  padding: 17px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
}

.ai-skeleton .skeleton {
  height: 10px;
  margin-bottom: 9px;
  border-radius: 99px;
}

.ai-skeleton .skeleton:nth-child(2) {
  width: 82%;
}

.ai-skeleton .skeleton:nth-child(3) {
  width: 58%;
  margin-bottom: 0;
}

.iphone.is-processing .doni-message {
  display: none;
}

.iphone.is-processing .ai-skeleton {
  display: block;
}

.route-result {
  display: none;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
  padding: 14px;
  border: 1px solid rgba(87, 134, 104, 0.2);
  border-radius: 20px;
  background: rgba(240, 250, 243, 0.9);
}

.iphone.is-complete .route-result {
  display: grid;
  animation: result-in 520ms var(--ease-spring) both;
}

.iphone.is-complete .doni-message,
.iphone.is-complete .ai-skeleton {
  display: none;
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.result-check {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #e1f2e6;
  color: #447554;
}

.result-check svg {
  width: 20px;
}

.route-result small,
.route-result strong {
  display: block;
}

.route-result small {
  color: #5d7d67;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-result strong {
  margin-top: 2px;
  font-size: 11px;
}

.phone-action {
  width: 100%;
  min-height: 49px;
  margin-top: 16px;
  border-radius: 16px;
  background: var(--ink);
  color: white;
  box-shadow: 0 15px 30px rgba(25, 21, 39, 0.2);
}

.phone-action:hover {
  box-shadow: 0 19px 38px rgba(25, 21, 39, 0.27);
}

.phone-action svg {
  width: 17px;
}

.permission-note {
  margin: 10px 0 0;
  color: #8a8492;
  font-size: 9px;
  text-align: center;
}

.floating-context {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 208px;
  padding: 14px;
  border-radius: 20px;
}

.context-sleep {
  top: 20%;
  left: -14%;
  animation: float-card 7s ease-in-out infinite;
}

.context-benefit {
  right: 0;
  bottom: 22%;
  animation: float-card 8s ease-in-out -2.5s infinite reverse;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

.context-brand-icon {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
}

.apple-health-icon {
  border-radius: 10px;
  background: #fff;
  clip-path: inset(0 round 10px);
  filter: brightness(1.035) saturate(1.02);
  transform: scale(0.9);
  transform-origin: center;
}

.floating-context small,
.floating-context strong {
  display: block;
}

.floating-context small {
  margin-bottom: 2px;
  color: #8a8497;
  font-size: 9px;
}

.floating-context strong {
  font-size: 11px;
}

.problem-section {
  padding-bottom: clamp(90px, 9vw, 140px);
}

.problem-grid,
.benefit-gap-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}

.problem-grid > article,
.benefit-gap-grid > article {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.benefit-gap {
  margin: 0 0 clamp(18px, 1.7vw, 24px);
  padding-top: clamp(72px, 7vw, 108px);
}

.action-economics {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding-block: calc(clamp(68px, 7.4vw, 112px) + clamp(54px, 6vw, 86px)) calc(clamp(50px, 5vw, 76px) + clamp(54px, 6vw, 86px));
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(244, 248, 255, 0) 0%, rgba(237, 244, 255, 0.9) 13%, rgba(249, 246, 255, 0.88) 52%, rgba(242, 238, 255, 0.9) 87%, rgba(248, 249, 255, 0) 100%);
  color: var(--ink);
}

.action-economics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  z-index: 0;
  opacity: 0.06;
  -webkit-mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent);
}

.action-economics::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -18%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(74, 106, 255, 0.18) 43%, rgba(180, 97, 244, 0.16) 58%, transparent 82%);
  filter: blur(54px);
  opacity: 0.72;
  animation: action-aurora 17s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.action-economics-inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
}

.action-economics-heading {
  margin-bottom: clamp(28px, 3.4vw, 46px);
}

.action-economics-heading h3 {
  margin: 0;
  color: #4b4f78;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 780;
  letter-spacing: 0.105em;
  line-height: 1.25;
  text-transform: uppercase;
}

.action-economics-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.action-bento {
  --glow-x: 50%;
  --glow-y: 50%;
  --motion-x: 0px;
  --motion-y: 0px;
  position: relative;
  min-height: 288px;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 20px 55px rgba(56, 56, 104, 0.1), inset 0 1px rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  transition: box-shadow 420ms var(--ease-spring), border-color 320ms ease, translate 520ms var(--ease-spring), scale 160ms ease-out;
}

.action-bento.in-view:nth-child(1) { animation: action-card-drift 8s 1.8s ease-in-out infinite; }
.action-bento.in-view:nth-child(3) { animation: action-card-drift 9s 2.8s ease-in-out infinite reverse; }
.action-bento:hover {
  border-color: rgba(115, 97, 232, 0.27);
  box-shadow: 0 28px 62px rgba(61, 53, 123, 0.16), inset 0 1px rgba(255, 255, 255, 0.82);
  translate: 0 -5px;
}

.action-bento::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 50%);
}

.action-bento::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.72), rgba(122, 105, 240, 0.09) 38%, transparent 70%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.action-bento:hover::after {
  opacity: 0.72;
}

.action-bento:active {
  scale: 0.995;
  transition-duration: 90ms;
}

.coverage-orbit,
.self-funding-plot,
.cost-trend-plot {
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
  transition: transform 440ms var(--ease-spring);
  will-change: transform;
}

.action-bento.is-tracking .coverage-orbit,
.action-bento.is-tracking .self-funding-plot,
.action-bento.is-tracking .cost-trend-plot {
  transition: none;
}

.action-bento-coverage {
  grid-column: span 5;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(239, 244, 255, 0.62));
}

.action-bento-funding {
  grid-column: span 3;
  min-height: 310px;
  background: linear-gradient(145deg, rgba(232, 239, 255, 0.78), rgba(239, 229, 255, 0.6));
}

.action-bento-cost {
  grid-column: span 4;
  background: linear-gradient(145deg, rgba(246, 242, 255, 0.78), rgba(230, 238, 255, 0.68));
}

.action-bento-copy {
  position: relative;
  z-index: 1;
}

.action-bento-copy > span {
  display: block;
  color: #5b5b87;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.action-bento-copy > strong {
  display: block;
  margin: 13px 0 8px;
  color: var(--ink);
  font-size: clamp(58px, 6vw, 92px);
  font-weight: 710;
  letter-spacing: -0.06em;
  line-height: 0.82;
}

.action-metric > b { font-weight: inherit; }

.action-bento-copy em {
  margin-left: 3px;
  color: var(--violet);
  font-size: 0.42em;
  font-style: normal;
  letter-spacing: -0.035em;
}

.action-bento-copy p {
  max-width: 23ch;
  margin: 0;
  color: #625e77;
  font-size: 13px;
  font-weight: 570;
  line-height: 1.4;
}

.action-bento-copy small {
  display: block;
  margin-top: 9px;
  color: #878197;
  font-size: 10px;
  font-weight: 600;
}

.action-bento-funding .action-bento-copy p {
  font-size: 11px;
  white-space: nowrap;
}

.coverage-orbit {
  position: absolute;
  right: clamp(20px, 2.6vw, 38px);
  bottom: 25px;
  display: grid;
  width: clamp(106px, 11vw, 148px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 32px rgba(79, 75, 138, 0.12), inset 0 1px rgba(255, 255, 255, 0.85);
  animation: coverage-orbit-float 5.6s 1.3s ease-in-out infinite;
}

.coverage-orbit::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(114, 101, 245, 0.22), transparent 68%);
  filter: blur(7px);
  animation: coverage-orbit-glow 4.8s 1.4s ease-in-out infinite;
}

.coverage-orbit::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 66%, rgba(103, 92, 238, 0.2) 72%, rgba(255, 255, 255, 0.82) 76%, transparent 82%);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 67% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 65%, #000 67% 70%, transparent 72%);
  opacity: 0.72;
  animation: coverage-dial-spin 12s linear infinite;
}

.coverage-orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.coverage-orbit circle {
  fill: none;
  stroke-width: 4;
}

.coverage-ring-base { stroke: rgba(84, 91, 162, 0.12); }
.coverage-ring-progress {
  stroke: #7167ee;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(101, 89, 238, 0.45));
  transition: stroke-dashoffset 1.6s 0.2s var(--ease-spring);
}
.action-bento-coverage.in-view .coverage-ring-progress { stroke-dashoffset: 8; }

.coverage-orbit > span {
  position: relative;
  z-index: 1;
  color: #5c5781;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.11em;
}

.coverage-satellite {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: #7565ef;
  box-shadow: 0 0 0 5px rgba(113, 98, 235, 0.11), 0 0 15px rgba(93, 84, 232, 0.5);
  animation: coverage-satellite-orbit 7.6s 1.4s linear infinite;
}

.self-funding-plot {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 26px;
  left: 24px;
  display: grid;
  gap: 14px;
}

.self-funding-plot > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 5px 9px;
  align-items: center;
}

.self-funding-plot span {
  color: #6d6880;
  font-size: 10px;
  font-weight: 620;
}

.self-funding-plot i {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(102, 96, 160, 0.11);
}

.self-funding-plot i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 28%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0;
}

.action-bento-funding.in-view .self-funding-plot i::after {
  animation: funding-sheen 4.8s 1.7s ease-in-out infinite;
}

.self-funding-plot b {
  position: relative;
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4c72ff, #9c60ef);
  box-shadow: 0 3px 10px rgba(99, 84, 231, 0.3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-spring);
}

.self-funding-plot b::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #8b63ee;
  box-shadow: 0 0 0 0 rgba(119, 91, 231, 0.2);
  opacity: 0;
  transform: translate(50%, -50%) scale(0.5);
}

.action-bento-funding.in-view .self-funding-plot b { transform: scaleX(1); }
.action-bento-funding.in-view .self-funding-plot b::after {
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
  animation: funding-node-pulse 3.6s 1.6s ease-out infinite;
  transition: opacity 260ms 1.05s ease, transform 480ms 1.02s var(--ease-spring);
}

.self-funding-plot strong {
  color: #4f4771;
  font-size: 10px;
  font-weight: 760;
  text-align: right;
}

.cost-trend-plot {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 24px;
  left: 24px;
}

.cost-trend-plot svg {
  display: block;
  width: 100%;
  height: 92px;
  overflow: visible;
}

.cost-trend-area { fill: #8a6cf2; opacity: 0.14; }
.cost-trend-line {
  fill: none;
  stroke: #7a66ee;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  filter: drop-shadow(0 4px 5px rgba(91, 74, 222, 0.25));
  transition: stroke-dashoffset 1.45s 0.18s var(--ease-spring);
}
.cost-trend-endpoint {
  fill: #8967f2;
  opacity: 0;
  transform-origin: 260px 12px;
  transition: opacity 0.2s 1.2s, transform 0.45s 1.2s var(--ease-spring);
  transform: scale(0);
}
.action-bento-cost.in-view .cost-trend-line { stroke-dashoffset: 0; }
.action-bento-cost.in-view .cost-trend-endpoint { opacity: 1; transform: scale(1); }
.action-bento-cost.in-view .cost-trend-line { animation: cost-line-breathe 3.8s 1.7s ease-in-out infinite; }
.action-bento-cost.in-view .cost-trend-endpoint { animation: cost-node-pulse 3.8s 1.8s ease-in-out infinite; }

.cost-trend-tracer {
  fill: #5f73ff;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(85, 92, 241, 0.78));
  opacity: 0;
  transition: opacity 320ms 1.4s ease;
}

.action-bento-cost.in-view .cost-trend-tracer {
  opacity: 0.92;
}

.cost-trend-plot > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  color: #77728a;
  font-size: 9px;
  font-weight: 620;
}

.cost-trend-plot > div strong {
  color: #4d4770;
  font-size: 11px;
  font-weight: 760;
}

.cost-trend-plot > div small {
  color: #888297;
  font-size: 9px;
  font-weight: 570;
}

.action-adherence-panel {
  --glow-x: 50%;
  --glow-y: 50%;
  --motion-x: 0px;
  --motion-y: 0px;
  position: relative;
  display: grid;
  min-height: 210px;
  grid-template-columns: minmax(190px, 0.68fr) minmax(430px, 1.65fr) minmax(210px, 0.72fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 16px;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(rgba(101, 96, 167, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 96, 167, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.67), rgba(239, 238, 255, 0.52));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 0 22px 54px rgba(68, 65, 119, 0.1), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  transition: border-color 320ms ease, box-shadow 440ms var(--ease-spring), translate 440ms var(--ease-spring);
}

.action-adherence-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  opacity: 0.035;
}

.action-adherence-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(310px circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.82), rgba(117, 97, 236, 0.1) 44%, transparent 72%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.action-adherence-panel:hover {
  border-color: rgba(116, 96, 231, 0.25);
  box-shadow: 0 29px 65px rgba(68, 57, 137, 0.15), inset 0 1px rgba(255, 255, 255, 0.94);
  translate: 0 -3px;
}

.action-adherence-panel:hover::after {
  opacity: 0.72;
}

.adherence-summary,
.adherence-distribution,
.adherence-outcome {
  position: relative;
  z-index: 1;
}

.adherence-summary > span,
.adherence-distribution figcaption > span,
.adherence-outcome small {
  display: block;
  color: #5b5b87;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.adherence-summary > strong {
  display: flex;
  align-items: baseline;
  margin: 10px 0 5px;
  color: var(--ink);
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 720;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.adherence-summary > strong b {
  font-weight: inherit;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease, transform 650ms var(--ease-spring);
}

.adherence-summary > strong b:nth-of-type(2) {
  transition-delay: 140ms;
}

.action-adherence-panel.in-view .adherence-summary > strong b {
  opacity: 1;
  transform: none;
}

.adherence-summary > strong i {
  margin-inline: 2px;
  color: #7069a6;
  font-size: 0.7em;
  font-style: normal;
}

.adherence-summary > strong em {
  margin-left: 3px;
  color: var(--violet);
  font-size: 0.43em;
  font-style: normal;
}

.adherence-summary p {
  margin: 0;
  color: #716b80;
  font-size: 11px;
  font-weight: 620;
}

.adherence-distribution {
  margin: 0;
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
  transition: transform 440ms var(--ease-spring);
  will-change: transform;
}

.action-adherence-panel.is-tracking .adherence-distribution {
  transition: none;
}

.adherence-distribution figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 9px;
}

.adherence-distribution figcaption strong {
  color: #5d5776;
  font-size: 10px;
  font-weight: 690;
}

.adherence-distribution svg {
  display: block;
  width: 100%;
  height: 116px;
  overflow: visible;
}

.adherence-baseline {
  fill: none;
  stroke: rgba(84, 80, 134, 0.15);
  stroke-width: 1;
}

.adherence-range-band {
  fill: rgba(125, 103, 239, 0.07);
  stroke: rgba(124, 102, 238, 0.18);
  stroke-width: 1;
  opacity: 0;
  transform-origin: 88px 98px;
  transform: scaleY(0.2);
  transition: opacity 450ms 420ms ease, transform 820ms 350ms var(--ease-spring);
}

.adherence-bell-area {
  fill: url(#adherenceFill);
  opacity: 0;
  transform-origin: 88px 98px;
  transform: scaleY(0);
  transition: opacity 500ms 330ms ease, transform 980ms 280ms var(--ease-spring);
}

.adherence-bell-line,
.adherence-effect-path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.25s 420ms var(--ease-spring);
}

.adherence-bell-line {
  stroke: #7169ed;
  stroke-width: 2.5;
  filter: drop-shadow(0 3px 5px rgba(103, 87, 225, 0.25));
}

.adherence-effect-path {
  stroke: url(#adherenceFlow);
  stroke-width: 2.4;
  transition-delay: 920ms;
}

.action-adherence-panel.in-view .adherence-range-band,
.action-adherence-panel.in-view .adherence-bell-area {
  opacity: 1;
  transform: scaleY(1);
}

.action-adherence-panel.in-view .adherence-bell-line,
.action-adherence-panel.in-view .adherence-effect-path {
  stroke-dashoffset: 0;
}

.adherence-tracer {
  fill: #6577f2;
  stroke: white;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(94, 92, 236, 0.75));
  opacity: 0;
  transition: opacity 320ms 1.35s ease;
}

.action-adherence-panel.in-view .adherence-tracer {
  opacity: 1;
}

.adherence-outcome-node {
  fill: #9a61e8;
  stroke: white;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(137, 86, 229, 0.6));
  opacity: 0;
  transform-origin: 347px 31px;
  transform: scale(0);
}

.action-adherence-panel.in-view .adherence-outcome-node {
  opacity: 1;
  transform: scale(1);
  animation: adherence-node-pulse 3.8s 1.5s ease-out infinite;
  transition: opacity 260ms 1.22s ease, transform 520ms 1.18s var(--ease-spring);
}

.adherence-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: #8b8597;
  font-size: 8px;
  font-weight: 620;
}

.adherence-axis strong {
  color: #6658bd;
  font-size: 9px;
}

.adherence-outcome {
  display: grid;
  justify-items: start;
}

.adherence-outcome-icon {
  position: relative;
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(92, 112, 255, 0.95), rgba(154, 91, 232, 0.95));
  box-shadow: 0 14px 30px rgba(94, 76, 206, 0.24);
}

.adherence-outcome-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: inherit;
}

.adherence-outcome-icon svg {
  width: 30px;
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.adherence-outcome-icon circle {
  opacity: 0.42;
}

.adherence-outcome-icon path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 720ms 1.1s var(--ease-spring);
}

.action-adherence-panel.in-view .adherence-outcome-icon path {
  stroke-dashoffset: 0;
}

.action-adherence-panel.in-view .adherence-outcome-icon {
  animation: adherence-icon-float 5.2s 1.7s ease-in-out infinite;
}

.adherence-outcome > strong {
  max-width: 19ch;
  margin-top: 7px;
  color: #37334c;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

 .action-economics-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 20px;
  color: #8a849d;
  font-size: 10px;
}

.action-economics-sources > span {
  color: #6e6885;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.action-economics-sources a {
  color: inherit;
  text-decoration-color: rgba(98, 87, 163, 0.26);
  text-underline-offset: 3px;
}

.action-economics-sources a:hover {
  color: #564fbb;
  text-decoration-color: currentColor;
}

@keyframes action-aurora {
  from { transform: translate3d(-4%, -2%, 0) rotate(-4deg); }
  to { transform: translate3d(5%, 4%, 0) rotate(4deg); }
}

@keyframes action-card-drift {
  50% { translate: 0 -3px; }
}

@keyframes coverage-orbit-float {
  50% { translate: 0 -5px; }
}

@keyframes coverage-orbit-glow {
  50% { opacity: 0.58; transform: scale(1.1); }
}

@keyframes coverage-dial-spin {
  to { transform: rotate(360deg); }
}

@keyframes coverage-satellite-orbit {
  from { transform: rotate(0deg) translateX(clamp(44px, 4.7vw, 60px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(clamp(44px, 4.7vw, 60px)) rotate(-360deg); }
}

@keyframes funding-sheen {
  10%, 100% { opacity: 0; transform: translateX(0); }
  35%, 58% { opacity: 1; }
  72% { opacity: 0; transform: translateX(520%); }
}

@keyframes funding-node-pulse {
  0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(119, 91, 231, 0.24), 0 0 8px rgba(119, 91, 231, 0.16); }
  72% { box-shadow: 0 0 0 7px rgba(119, 91, 231, 0), 0 0 14px rgba(119, 91, 231, 0.42); }
}

@keyframes cost-line-breathe {
  50% { filter: drop-shadow(0 5px 8px rgba(91, 74, 222, 0.47)); opacity: 0.8; }
}

@keyframes cost-node-pulse {
  50% { filter: drop-shadow(0 0 7px rgba(113, 87, 235, 0.84)); }
}

@keyframes rail-flow {
  0%, 20% { transform: translateX(0); opacity: 0; }
  38% { opacity: 1; }
  75%, 100% { transform: translateX(430%); opacity: 0; }
}

@keyframes action-node-pulse {
  50% { box-shadow: 0 10px 27px rgba(99, 80, 224, 0.42), 0 0 0 7px rgba(121, 96, 241, 0.08); }
}

@keyframes adherence-node-pulse {
  0%, 58%, 100% { filter: drop-shadow(0 0 5px rgba(137, 86, 229, 0.42)); }
  72% { filter: drop-shadow(0 0 13px rgba(137, 86, 229, 0.9)); }
}

@keyframes adherence-icon-float {
  50% {
    box-shadow: 0 19px 37px rgba(94, 76, 206, 0.33), 0 0 0 8px rgba(116, 92, 226, 0.06);
    transform: translateY(-4px);
  }
}

@media (max-width: 980px) {
  .action-bento-coverage { grid-column: span 7; }
  .action-bento-funding { grid-column: span 5; }
  .action-bento-cost { grid-column: 1 / -1; }
  .action-bento-cost .cost-trend-plot { left: 50%; }
  .action-adherence-panel {
    grid-template-columns: minmax(180px, 0.7fr) minmax(380px, 1.3fr);
  }

  .adherence-outcome {
    grid-column: 1 / -1;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0 16px;
  }

  .adherence-outcome-icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .adherence-outcome > strong {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .action-economics {
    margin-top: 0;
    padding-block: 110px 94px;
  }

  .action-economics-heading h3 { font-size: 14px; }
  .action-economics-bento { gap: 12px; }
  .action-bento { grid-column: 1 / -1; min-height: 254px; padding: 23px; }
  .action-bento-funding { min-height: 288px; }
  .action-bento-copy > strong { font-size: 70px; }
  .coverage-orbit { width: 112px; right: 21px; bottom: 22px; }
  .action-bento-cost { min-height: 270px; }
  .action-bento-cost .cost-trend-plot { right: 23px; bottom: 21px; left: 23px; }
  .cost-trend-plot svg { height: 85px; }
  .action-adherence-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 22px;
  }

  .adherence-summary > strong {
    font-size: 54px;
  }

  .adherence-distribution svg {
    height: 104px;
  }

  .adherence-distribution figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .adherence-outcome {
    grid-column: auto;
  }
  .action-economics-sources { gap: 7px 12px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .coverage-orbit::after,
  .coverage-satellite,
  .self-funding-plot b::after,
  .cost-trend-tracer,
  .adherence-tracer,
  .adherence-outcome-node,
  .adherence-outcome-icon {
    animation: none !important;
  }

  .cost-trend-tracer,
  .adherence-tracer {
    display: none;
  }

  .coverage-orbit,
  .self-funding-plot,
  .cost-trend-plot {
    transform: none !important;
  }

  .adherence-distribution {
    transform: none !important;
  }
}

.cross-device-visual {
  display: block;
  min-height: 500px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(118, 94, 226, 0.09), transparent 34%),
    linear-gradient(rgba(104, 88, 175, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 88, 175, 0.026) 1px, transparent 1px),
    rgba(255, 255, 255, 0.4);
  background-size: auto, 24px 24px, 24px 24px, auto;
}

.cross-device-grid {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 112px;
  left: 30px;
}

.cross-device-grid::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: 48%;
  background:
    repeating-radial-gradient(circle at center, rgba(106, 90, 215, 0.05) 0 1px, transparent 1px 42px);
  -webkit-mask-image: radial-gradient(circle, #000, transparent 74%);
  mask-image: radial-gradient(circle, #000, transparent 74%);
}

.cross-app {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 136px;
  min-height: 68px;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 32px rgba(54, 43, 97, 0.085);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.cross-app > i {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(72, 126, 247, 0.16), rgba(143, 85, 225, 0.18));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}

.cross-app svg {
  width: 19px;
  fill: none;
  stroke: #6e5dd5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.cross-app small {
  align-self: end;
  color: #8a8392;
  font-size: 8px;
  font-weight: 680;
}

.cross-app strong {
  align-self: start;
  color: #484050;
  font-size: 10px;
}

.cross-benefits { top: 0; left: 0; }
.cross-identity { top: 0; right: 0; }
.cross-calendar { bottom: 0; left: 0; }
.cross-message { right: 0; bottom: 0; }

.cross-device-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cross-device-lines path {
  fill: none;
  stroke: rgba(106, 89, 215, 0.24);
  stroke-dasharray: 4 8;
  stroke-linecap: round;
  stroke-width: 1.4;
  animation: execution-line-flow 5.8s linear infinite;
}

.cross-packet {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #765fde;
  box-shadow: 0 0 0 7px rgba(107, 91, 216, 0.07), 0 0 16px rgba(107, 91, 216, 0.28);
}

.cross-packet-one {
  animation: cross-packet-one 5.8s ease-in-out infinite;
}

.cross-packet-two {
  animation: cross-packet-two 5.8s 1.5s ease-in-out infinite;
}

@keyframes cross-packet-one {
  0%, 8% { left: 12%; top: 16%; opacity: 0; }
  18% { opacity: 1; }
  50% { left: 49%; top: 48%; }
  90% { left: 88%; top: 16%; opacity: 1; }
  100% { left: 88%; top: 16%; opacity: 0; }
}

@keyframes cross-packet-two {
  0%, 8% { left: 12%; top: 82%; opacity: 0; }
  18% { opacity: 1; }
  50% { left: 49%; top: 48%; }
  90% { left: 88%; top: 82%; opacity: 1; }
  100% { left: 88%; top: 82%; opacity: 0; }
}

.cross-live-activity {
  position: absolute;
  right: 30px;
  bottom: 28px;
  left: 30px;
  z-index: 6;
  display: grid;
  min-height: 68px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(244, 247, 255, 0.88), rgba(242, 234, 254, 0.82));
  box-shadow: 0 18px 38px rgba(54, 42, 100, 0.11);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
}

.cross-live-activity > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.cross-live-activity img {
  width: 34px;
}

.cross-live-activity p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.cross-live-activity small {
  color: #898292;
  font-size: 7px;
  font-weight: 720;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cross-live-activity strong {
  color: #3f3849;
  font-size: 11px;
}

.cross-live-activity b {
  padding: 9px 12px;
  border-radius: 9px;
  background: #1c1827;
  color: white;
  font-size: 9px;
}

.organization-journey strong.is-changing {
  animation: organization-story-change 520ms var(--ease-spring);
}

@keyframes organization-story-change {
  from { opacity: 0; transform: translateY(7px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 640px) {
  .cross-device-visual {
    min-height: 430px;
  }

  .cross-device-grid {
    top: 24px;
    right: 18px;
    bottom: 108px;
    left: 18px;
  }

  .cross-app {
    width: 108px;
    min-height: 58px;
    grid-template-columns: 30px 1fr;
    padding: 8px;
  }

  .cross-app > i {
    width: 30px;
    height: 30px;
  }

  .cross-live-activity {
    right: 18px;
    left: 18px;
  }

  .cross-live-activity b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cross-device-lines path,
  .cross-packet {
    animation: none !important;
  }
}

/* Product page final composition: continuous surfaces, expressive motion and Z-flow. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-fade-out 180ms ease both;
}

::view-transition-new(root) {
  animation: page-fade-in 420ms var(--ease-spring) both;
}

@keyframes page-fade-out {
  to { opacity: 0; transform: translateY(-5px); }
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Live workspace */
.workspace-demo[data-phase="router"] .workspace-insight[data-workspace-panel="router"] {
  grid-template-columns: minmax(274px, 0.76fr) minmax(470px, 1.24fr);
  gap: 4px;
  overflow: visible;
  padding: 12px 2px 12px 18px;
}

.workspace-demo[data-phase="router"] .workspace-insight-copy > strong {
  max-width: none;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: 0;
  white-space: nowrap;
}

.router-skill-viz {
  min-height: 326px;
  margin: -34px -38px -34px -12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(113, 96, 226, 0.08), transparent 46%),
    transparent;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 66%, rgba(0, 0, 0, 0.72) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 66%, rgba(0, 0, 0, 0.72) 82%, transparent 100%);
}

.router-skill-viz::before,
.router-skill-viz::after {
  display: none;
}

.router-graph-canvas {
  position: absolute !important;
  inset: -4% !important;
  display: block;
  width: 108% !important;
  height: 108% !important;
  opacity: 1;
  filter: saturate(1.08) contrast(1.02);
}

.workspace-commandbar {
  grid-template-columns: minmax(430px, 0.96fr) minmax(420px, 1.04fr);
  gap: 10px;
}

.workspace-agent-cli {
  position: relative;
  display: grid;
  min-height: 58px;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 6px 8px 6px 12px;
  border: 1px solid rgba(104, 88, 160, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(rgba(107, 93, 185, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 93, 185, 0.035) 1px, transparent 1px),
    linear-gradient(110deg, rgba(235, 241, 255, 0.72), rgba(248, 244, 255, 0.72));
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.92),
    0 12px 28px rgba(46, 38, 84, 0.045);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.agent-cli-header {
  display: grid;
  gap: 5px;
}

.agent-cli-header > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4e485e;
  font-size: 9px;
  font-weight: 780;
}

.agent-cli-header > span > i {
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #4e7bff, #8b5be7);
  box-shadow: 0 0 0 5px rgba(104, 91, 219, 0.07);
}

.agent-cli-header > span small {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(111, 93, 219, 0.08);
  color: #7864d8;
  font-size: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-cli-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
}

.agent-cli-tabs button {
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8a8493;
  font: inherit;
  font-size: 7px;
  font-weight: 720;
  cursor: pointer;
  transition: 180ms ease;
}

.agent-cli-tabs button.is-active {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 12px rgba(50, 41, 86, 0.07);
  color: #5d4fb5;
}

.agent-cli-command {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(85, 72, 137, 0.08);
  border-radius: 10px;
  background: rgba(25, 22, 36, 0.94);
  box-shadow: 0 10px 24px rgba(31, 25, 54, 0.14);
  color: white;
  cursor: pointer;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease, background 220ms ease;
}

.agent-cli-command:hover {
  transform: translateY(-1px) scale(1.008);
  box-shadow: 0 14px 30px rgba(31, 25, 54, 0.2);
}

.agent-cli-command code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  font: 650 8px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.agent-cli-command code span {
  margin-right: 7px;
  color: #9f8aff;
}

.agent-cli-command code b {
  font-weight: inherit;
}

.agent-cli-command svg {
  flex: 0 0 auto;
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 240ms var(--ease-spring);
}

.agent-cli-command.is-copied {
  background: linear-gradient(135deg, #29233c, #4f3c86);
}

.agent-cli-command.is-copied svg {
  transform: scale(1.18) rotate(-5deg);
}

.orchestrator-action-viz {
  position: relative;
  min-height: 290px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(118, 96, 225, 0.09), transparent 44%),
    transparent;
  box-shadow: none;
}

.orchestrator-action-viz::before {
  content: "";
  position: absolute;
  inset: 4% 2% 12%;
  border-radius: 45%;
  background:
    repeating-radial-gradient(circle at center, rgba(112, 98, 219, 0.055) 0 1px, transparent 1px 32px);
  opacity: 0.66;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 72%);
  mask-image: radial-gradient(circle, #000, transparent 72%);
}

.orchestrator-action-viz > .execution-route {
  position: absolute;
  inset: 4px 10px 76px;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
}

.execution-app {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 86px;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 22px rgba(56, 44, 102, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.execution-app > i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(93, 133, 255, 0.15), rgba(147, 89, 229, 0.17));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.execution-app svg {
  width: 15px;
  fill: none;
  stroke: #6d5fd0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.execution-app img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.execution-app small {
  color: #5d5768;
  font-size: 8px;
  font-weight: 760;
}

.app-benefit { top: 4%; left: 2%; }
.app-mail { top: 4%; right: 2%; }
.app-calendar { bottom: 5%; left: 2%; }
.app-doni { right: 2%; bottom: 5%; }

.execution-route-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: url("#execution-gradient");
}

.execution-route-lines path {
  fill: none;
  stroke: rgba(109, 91, 221, 0.25);
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  stroke-width: 1.4;
  animation: execution-line-flow 5s linear infinite;
}

@keyframes execution-line-flow {
  to { stroke-dashoffset: -48; }
}

.execution-packet {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #735fe0;
  box-shadow: 0 0 0 7px rgba(111, 92, 222, 0.08), 0 0 16px rgba(111, 92, 222, 0.38);
}

.packet-one {
  animation: execution-packet-one 5s ease-in-out infinite;
}

.packet-two {
  animation: execution-packet-two 5s 1.2s ease-in-out infinite;
}

@keyframes execution-packet-one {
  0%, 8% { left: 13%; top: 20%; opacity: 0; }
  18% { opacity: 1; }
  48% { left: 45%; top: 48%; }
  74% { left: 70%; top: 20%; }
  92% { left: 87%; top: 77%; opacity: 1; }
  100% { left: 87%; top: 77%; opacity: 0; }
}

@keyframes execution-packet-two {
  0%, 8% { left: 13%; top: 77%; opacity: 0; }
  18% { opacity: 1; }
  62% { left: 45%; top: 48%; }
  92% { left: 87%; top: 77%; opacity: 1; }
  100% { left: 87%; top: 77%; opacity: 0; }
}

.orchestrator-action-viz > .execution-live-activity {
  position: absolute;
  right: 8%;
  bottom: 8px;
  left: 8%;
  z-index: 6;
  display: grid;
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background:
    linear-gradient(115deg, rgba(244, 247, 255, 0.86), rgba(241, 233, 254, 0.78));
  box-shadow: 0 15px 34px rgba(54, 42, 100, 0.1);
  opacity: 1;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.execution-live-activity > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
}

.execution-live-activity img {
  width: 27px;
}

.execution-live-activity p,
.execution-live-activity small,
.execution-live-activity strong {
  display: block;
  margin: 0;
}

.execution-live-activity small {
  margin-bottom: 2px;
  color: #8b8496;
  font-size: 6px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.execution-live-activity strong {
  color: #40394d;
  font-size: 9px;
}

.execution-live-activity > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #1c1828;
}

.execution-live-activity > i svg {
  width: 15px;
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* Architecture overview */
.product-architecture {
  min-height: 0;
  gap: 10px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.architecture-interface {
  min-height: 104px;
  border-color: rgba(255, 255, 255, 0.54);
  background:
    radial-gradient(circle at 10% 50%, rgba(83, 124, 245, 0.065), transparent 25%),
    radial-gradient(circle at 76% 45%, rgba(142, 85, 226, 0.06), transparent 34%),
    rgba(255, 255, 255, 0.38);
}

.architecture-task-chain {
  position: relative;
  min-height: 154px;
  gap: 9px;
  overflow: hidden;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(81, 124, 245, 0.035), rgba(146, 87, 224, 0.045)),
    linear-gradient(rgba(109, 92, 180, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 92, 180, 0.025) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  box-shadow: none;
}

.architecture-task-chain > span {
  min-height: 134px;
  padding: 11px 12px 9px;
  border-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68);
}

.architecture-core {
  min-height: 148px;
  gap: 10px;
}

.architecture-core > i {
  width: 18px;
  color: rgba(100, 84, 165, 0.25);
}

.architecture-node {
  min-height: 148px;
  padding: 24px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.48);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 14%, rgba(127, 94, 225, 0.08), transparent 30%),
    linear-gradient(rgba(111, 93, 181, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 93, 181, 0.025) 1px, transparent 1px),
    rgba(255, 255, 255, 0.3);
  background-size: auto, 20px 20px, 20px 20px, auto;
  box-shadow: 0 16px 36px rgba(51, 42, 87, 0.035);
}

.architecture-memory {
  min-height: 188px;
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 68% 48%, rgba(112, 101, 229, 0.08), transparent 25%),
    linear-gradient(110deg, rgba(84, 126, 245, 0.035), rgba(144, 86, 225, 0.055)),
    linear-gradient(rgba(111, 93, 181, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 93, 181, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
  box-shadow: 0 18px 46px rgba(51, 42, 87, 0.035);
}

.architecture-memory-graph {
  height: 164px;
}

/* Five-capability Z timeline */
.product-modules {
  padding-top: 54px;
}

.product-modules-heading {
  min-height: 176px;
  align-items: center;
  padding: 20px 0 12px;
}

.product-modules-heading > div:first-child {
  align-self: center;
  padding: 0 0 0 2px;
}

.product-modules-heading h2 {
  white-space: nowrap;
}

.module-nebula-shell {
  align-self: center;
  height: 142px;
  margin: 0;
}

.module-nebula-shell > span {
  display: none;
}

.module-timeline {
  position: relative;
  gap: 0;
}

.module-timeline::before {
  top: 86px;
  bottom: 86px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(104, 89, 213, 0.18) 12%, rgba(104, 89, 213, 0.18) 88%, transparent);
}

.product-module,
.product-module:nth-child(even) {
  min-height: 650px;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
  align-items: stretch;
  gap: clamp(56px, 6.4vw, 112px);
  padding: 70px 0;
  border: 0;
}

.product-module::before {
  content: "";
  position: absolute;
  top: 84px;
  left: 50%;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #4c7df8, #8c59df);
  box-shadow: 0 0 0 9px rgba(105, 91, 216, 0.055), 0 0 24px rgba(105, 91, 216, 0.18);
  transform: translateX(-50%);
}

.product-module::after {
  top: 4%;
  bottom: 4%;
  opacity: 0.58;
}

.module-copy {
  align-self: stretch;
  display: grid;
  min-height: 500px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  column-gap: 14px;
  row-gap: 0;
  padding: 24px 0 18px;
}

.module-number {
  position: static;
  grid-row: 1;
  grid-column: 1;
  width: 48px;
  height: 38px;
  border-color: rgba(92, 76, 149, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 22px rgba(49, 40, 82, 0.055);
}

.module-copy .section-kicker {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  margin: 0;
  letter-spacing: 0.12em;
}

.module-copy h3 {
  grid-row: 2;
  grid-column: 1 / -1;
  max-width: 610px;
  margin: 26px 0 0;
}

.module-copy > p {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: start;
  max-width: 610px;
  margin: 26px 0 0;
}

.module-copy ul {
  grid-row: 4;
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 28px 0 0;
}

.module-copy li {
  min-height: 64px;
  padding: 13px 12px 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(244, 240, 253, 0.34));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7);
}

.module-copy li::before {
  top: 17px;
  left: 12px;
}

.module-visual {
  align-self: stretch;
  min-height: 500px;
  border-color: rgba(255, 255, 255, 0.62);
  border-radius: 20px;
}

.module-doni .module-copy,
.module-router .module-copy,
.module-memory .module-copy {
  order: 1;
}

.module-doni .module-visual,
.module-router .module-visual,
.module-memory .module-visual {
  order: 2;
}

.module-decoder .module-copy,
.module-orchestrator .module-copy {
  order: 2;
}

.module-decoder .module-visual,
.module-orchestrator .module-visual {
  order: 1;
}

.product-module.reveal .module-copy,
.product-module.reveal .module-visual {
  opacity: 0;
  transition:
    opacity 680ms ease,
    transform 900ms var(--ease-spring);
}

.product-module.reveal .module-copy {
  transform: translateX(-22px);
}

.product-module.reveal .module-visual {
  transform: translateX(22px) scale(0.985);
}

.product-module:nth-child(even).reveal .module-copy {
  transform: translateX(22px);
}

.product-module:nth-child(even).reveal .module-visual {
  transform: translateX(-22px) scale(0.985);
}

.product-module.reveal.in-view .module-copy,
.product-module.reveal.in-view .module-visual {
  opacity: 1;
  transform: none;
}

/* Interactive high-density memory */
.memory-visual {
  min-height: 520px;
  overflow: hidden;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.54);
  background:
    radial-gradient(circle at 54% 48%, rgba(113, 96, 226, 0.09), transparent 36%),
    linear-gradient(rgba(103, 88, 178, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 88, 178, 0.026) 1px, transparent 1px),
    rgba(255, 255, 255, 0.35);
  background-size: auto, 24px 24px, 24px 24px, auto;
  cursor: crosshair;
}

.memory-brain-canvas {
  position: absolute;
  z-index: 1;
  inset: -3%;
  display: block;
  width: 106%;
  height: 106%;
  filter: saturate(1.14) contrast(1.08);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 72%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 72%, transparent 100%);
}

.memory-field-legend {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.memory-field-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(75, 69, 88, 0.68);
  font-size: 8px;
  font-weight: 720;
}

.memory-field-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7161da;
  box-shadow: 0 0 0 5px rgba(106, 95, 218, 0.06);
}

.memory-feedback-loop {
  position: absolute;
  right: 8%;
  bottom: 22px;
  left: 8%;
  z-index: 4;
  display: grid;
  min-height: 54px;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 14px 34px rgba(49, 40, 87, 0.075);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.memory-feedback-loop span,
.memory-feedback-loop strong {
  color: #5a5269;
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}

.memory-feedback-loop strong {
  color: #6552c1;
}

.memory-feedback-loop i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(83, 123, 245, 0.12), rgba(128, 85, 222, 0.44), rgba(83, 123, 245, 0.12));
}

.memory-feedback-loop i::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px #745fe0;
  animation: memory-loop-packet 2.8s ease-in-out infinite;
}

@keyframes memory-loop-packet {
  from { left: -5px; }
  to { left: 100%; }
}

/* Tailored organization solutions */
.product-employers {
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 96px;
  color: #191522;
  background:
    radial-gradient(circle at 10% 12%, rgba(65, 120, 247, 0.13), transparent 30%),
    radial-gradient(circle at 90% 78%, rgba(145, 82, 224, 0.14), transparent 34%),
    linear-gradient(145deg, #f3f6ff 0%, #f7f4ff 55%, #f2eefb 100%);
}

.product-employers::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(109, 91, 177, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 91, 177, 0.026) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 84%);
  mask-image: radial-gradient(ellipse at center, #000, transparent 84%);
}

.organization-solution {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 1510px;
  margin: 0 auto;
  grid-template-columns: minmax(330px, 0.78fr) minmax(560px, 1.22fr);
  gap: 18px;
}

.product-employer-copy {
  grid-row: 1 / span 2;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 12%, rgba(76, 123, 247, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.45);
  box-shadow: 0 24px 64px rgba(55, 44, 93, 0.09);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}

.product-employer-copy .section-kicker {
  color: #5b5f8c;
}

.product-employer-copy h2 {
  max-width: 660px;
  margin: 20px 0 0;
  color: #17131f;
  font-size: clamp(42px, 4.5vw, 72px);
  letter-spacing: -0.038em;
  line-height: 0.98;
}

.product-employer-copy p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #696370;
  font-size: 15px;
  line-height: 1.6;
}

.organization-types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 32px;
}

.organization-types button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(91, 78, 141, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #68616f;
  font: inherit;
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
}

.organization-types button.is-active {
  background: #1d1928;
  box-shadow: 0 10px 22px rgba(32, 25, 55, 0.16);
  color: white;
}

.organization-types button.is-secondary {
  opacity: 0.72;
}

.organization-journey {
  position: relative;
  display: grid;
  min-height: 166px;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  align-items: center;
  gap: 7px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 20px 48px rgba(55, 44, 93, 0.065);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
}

.organization-journey span {
  display: grid;
  gap: 8px;
  min-height: 94px;
  align-content: center;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
}

.organization-journey small {
  color: #8c8593;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.organization-journey strong {
  color: #443d50;
  font-size: 12px;
  line-height: 1.3;
}

.organization-journey > i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(74, 124, 247, 0.14), rgba(132, 83, 221, 0.45));
}

.organization-journey > i::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 9px #765de0;
  animation: organization-packet 3.2s ease-in-out infinite;
}

.organization-journey > i:nth-of-type(2)::after {
  animation-delay: 1.1s;
}

@keyframes organization-packet {
  from { left: -5px; }
  to { left: 100%; }
}

.product-employer-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-employer-outcomes article {
  position: relative;
  display: grid;
  min-height: 160px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 42px rgba(55, 44, 93, 0.055);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.product-employer-outcomes article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: rgba(109, 91, 219, 0.08);
  color: #6f5fd0;
  font-size: 8px;
  font-weight: 780;
}

.product-employer-outcomes article div {
  display: grid;
  gap: 6px;
}

.product-employer-outcomes small {
  color: #8b8492;
  font-size: 8px;
  font-weight: 680;
}

.product-employer-outcomes strong {
  color: #282230;
  font-size: 14px;
}

.product-employer-outcomes article > i {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(109, 91, 219, 0.07);
}

.product-employer-outcomes article > i > b {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4e7bf8, #8d59e2);
  transform-origin: left;
  animation: outcome-fill 4.8s var(--ease-spring) infinite alternate;
}

.product-employer-outcomes article:nth-child(2) > i > b { width: 86%; animation-delay: 500ms; }
.product-employer-outcomes article:nth-child(3) > i > b { width: 72%; animation-delay: 900ms; }

@keyframes outcome-fill {
  from { transform: scaleX(0.25); opacity: 0.48; }
  to { transform: scaleX(1); opacity: 1; }
}

.product-partner-cta {
  grid-column: 1 / -1;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.62), rgba(237, 231, 251, 0.58));
  box-shadow: 0 20px 46px rgba(55, 44, 93, 0.07);
}

.product-partner-cta div {
  display: grid;
  gap: 8px;
}

.product-partner-cta span {
  color: #7e7590;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-partner-cta strong {
  color: #282230;
  font-size: clamp(18px, 2vw, 28px);
}

@media (max-width: 1180px) {
  .workspace-demo[data-phase="router"] .workspace-insight[data-workspace-panel="router"] {
    grid-template-columns: minmax(250px, 0.86fr) minmax(360px, 1.14fr);
  }

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

  .product-employer-copy {
    grid-row: auto;
    min-height: 380px;
  }

  .product-module,
  .product-module:nth-child(even) {
    grid-template-columns: minmax(320px, 0.88fr) minmax(440px, 1.12fr);
    gap: 54px;
  }
}

@media (max-width: 820px) {
  .workspace-demo[data-phase="router"] .workspace-insight[data-workspace-panel="router"] {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .workspace-demo[data-phase="router"] .workspace-insight-copy > strong {
    white-space: normal;
  }

  .router-skill-viz {
    min-height: 250px;
    margin: -8px -10px -18px;
  }

  .workspace-commandbar {
    grid-template-columns: 1fr;
  }

  .workspace-agent-cli {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .architecture-task-chain {
    min-height: 300px;
    padding: 8px 0;
  }

  .architecture-task-chain > span {
    min-height: 136px;
  }

  .architecture-core {
    grid-template-columns: 1fr;
  }

  .architecture-core > i {
    display: none;
  }

  .product-modules {
    padding-top: 34px;
  }

  .product-modules-heading {
    min-height: 220px;
    grid-template-columns: 1fr;
  }

  .product-modules-heading h2 {
    white-space: normal;
  }

  .module-nebula-shell {
    height: 116px;
  }

  .module-timeline::before,
  .product-module::before {
    display: none;
  }

  .product-module,
  .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 52px 0;
  }

  .module-copy,
  .module-visual,
  .module-doni .module-copy,
  .module-router .module-copy,
  .module-memory .module-copy,
  .module-decoder .module-copy,
  .module-orchestrator .module-copy,
  .module-doni .module-visual,
  .module-router .module-visual,
  .module-memory .module-visual,
  .module-decoder .module-visual,
  .module-orchestrator .module-visual {
    order: initial;
  }

  .module-copy {
    min-height: 0;
  }

  .module-visual {
    min-height: 430px;
  }

  .module-copy ul {
    grid-template-columns: 1fr;
  }

  .memory-visual {
    min-height: 460px;
  }

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

  .organization-journey > i {
    width: 1px;
    height: 22px;
    justify-self: center;
  }

  .product-employer-outcomes {
    grid-template-columns: 1fr;
  }

  .product-partner-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .workspace-agent-cli {
    grid-template-columns: 1fr;
  }

  .agent-cli-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .orchestrator-action-viz {
    min-height: 250px;
  }

  .execution-app {
    width: 76px;
    padding: 6px;
  }

  .execution-app > i {
    width: 24px;
    height: 24px;
  }

  .module-copy h3 {
    font-size: 34px;
  }

  .module-visual,
  .memory-visual {
    min-height: 390px;
  }

  .memory-field-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .memory-feedback-loop {
    right: 12px;
    left: 12px;
    grid-template-columns: auto 1fr auto;
  }

  .memory-feedback-loop i:nth-of-type(2),
  .memory-feedback-loop strong {
    display: none;
  }

  .product-employers {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .product-employer-copy {
    min-height: 0;
    padding: 30px 22px;
  }

  .organization-journey,
  .product-partner-cta {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .execution-route-lines path,
  .execution-packet,
  .memory-feedback-loop i::after,
  .organization-journey > i::after,
  .product-employer-outcomes article > i > b {
    animation: none !important;
  }
}

/* Product workspace precision pass */
.workspace-title {
  gap: 0;
  padding-left: 0;
}

.workspace-title::before {
  display: none;
}

.workspace-title > span {
  align-items: start;
  text-align: left;
}

.workspace-google-play-link {
  border-color: rgba(255, 255, 255, 0.08);
  background: #17141e;
  color: #fff;
}

.workspace-google-play-link .google-play-mark {
  fill: currentColor;
}

.workspace-user-signal {
  position: relative;
  min-height: 54px;
  grid-template-columns: 36px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  padding: 7px 12px;
  border-color: rgba(95, 81, 155, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 40%, rgba(81, 123, 255, 0.11), transparent 24%),
    radial-gradient(circle at 88% 45%, rgba(147, 88, 229, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    0 14px 30px rgba(50, 41, 92, 0.065),
    inset 0 1px rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.workspace-user-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.workspace-voice-symbol,
.workspace-voice-copy,
.workspace-voice-wave {
  position: relative;
  z-index: 2;
}

.workspace-voice-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(232, 239, 255, 0.94), rgba(236, 225, 251, 0.9));
  box-shadow:
    0 9px 22px rgba(70, 55, 144, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.94);
}

.workspace-voice-symbol > i {
  display: none;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #675bd1;
}

.workspace-voice-symbol svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.workspace-demo[data-phase="doni"] [data-voice-phase="doni"],
.workspace-demo[data-phase="decoder"] [data-voice-phase="decoder"],
.workspace-demo[data-phase="router"] [data-voice-phase="router"],
.workspace-demo[data-phase="orchestrator"] [data-voice-phase="orchestrator"] {
  display: grid;
  animation: workspace-voice-symbol-arrive 480ms var(--ease-spring) both;
}

.workspace-voice-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-user-signal .workspace-voice-copy small {
  color: #6e6780;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.workspace-user-signal .workspace-voice-copy p {
  overflow: hidden;
  color: #36313d;
  font-size: 10px;
  font-weight: 610;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-voice-wave {
  display: flex;
  height: 25px;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.workspace-voice-wave i {
  width: 3px;
  height: 24%;
  border-radius: 99px;
  background: linear-gradient(180deg, #6a86ff, #9a5ee5);
  box-shadow: 0 0 8px rgba(111, 96, 225, 0.2);
  transform-origin: center;
  animation: workspace-voice-wave 1.05s ease-in-out infinite alternate;
}

.workspace-voice-wave i:nth-child(2) { animation-delay: -620ms; }
.workspace-voice-wave i:nth-child(3) { animation-delay: -180ms; }
.workspace-voice-wave i:nth-child(4) { animation-delay: -780ms; }
.workspace-voice-wave i:nth-child(5) { animation-delay: -340ms; }
.workspace-voice-wave i:nth-child(6) { animation-delay: -900ms; }
.workspace-voice-wave i:nth-child(7) { animation-delay: -470ms; }

.workspace-demo[data-phase="router"] .workspace-voice-wave i,
.workspace-demo[data-phase="orchestrator"] .workspace-voice-wave i {
  animation-duration: 1.45s;
}

.workspace-user-signal.is-switching .workspace-voice-copy {
  animation: workspace-voice-copy-switch 440ms ease both;
}

@keyframes workspace-voice-symbol-arrive {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

@keyframes workspace-voice-copy-switch {
  0% { opacity: 0.2; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

@keyframes workspace-voice-wave {
  0% { height: 20%; opacity: 0.45; }
  100% { height: 90%; opacity: 0.95; }
}

/* Router: a visual knowledge field, without repeated labels */
.router-skill-viz {
  --viz-rx: 0deg;
  --viz-ry: 0deg;
  overflow: hidden;
  perspective: 700px;
  isolation: isolate;
}

.router-graph-canvas {
  inset: 2%;
  width: 96%;
  height: 96%;
  opacity: 0.98;
  transition: transform 280ms ease-out;
  transform: perspective(700px) rotateX(var(--viz-rx)) rotateY(var(--viz-ry)) scale(1.02);
}

.router-skill-viz > i {
  display: none;
}

.router-brain-core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 68px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 46% 54% 48% 52% / 54% 44% 56% 46%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.96), rgba(214, 224, 255, 0.86) 36%, rgba(194, 178, 239, 0.76) 72%);
  box-shadow:
    0 0 0 17px rgba(100, 93, 218, 0.045),
    0 0 0 34px rgba(77, 119, 244, 0.022),
    0 20px 45px rgba(67, 50, 143, 0.16);
  transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry));
  transform-style: preserve-3d;
  animation: router-brain-breathe 4.2s ease-in-out infinite;
}

.router-brain-core::before,
.router-brain-core::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(101, 91, 218, 0.18);
  border-radius: inherit;
  transform: rotate(34deg) translateZ(10px);
}

.router-brain-core::after {
  inset: 20px;
  border-color: rgba(86, 126, 244, 0.25);
  transform: rotate(-28deg) translateZ(18px);
}

.router-brain-core > i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7765e4;
  box-shadow: 0 0 0 6px rgba(111, 95, 220, 0.08);
}

.router-brain-core > i:nth-child(1) { top: 18px; left: 15px; }
.router-brain-core > i:nth-child(2) { top: 27px; right: 13px; animation-delay: -900ms; }
.router-brain-core > i:nth-child(3) { right: 27px; bottom: 13px; animation-delay: -1.8s; }

.workspace-insight.is-active .router-brain-core > i {
  animation: router-core-node 2.7s ease-in-out infinite;
}

.router-skill {
  position: absolute;
  z-index: 6;
  display: grid;
  width: 92px;
  min-height: 38px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(96, 80, 164, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.77);
  box-shadow:
    0 12px 27px rgba(63, 48, 126, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.router-skill > i {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 30%, #fff, rgba(112, 132, 245, 0.7) 42%, rgba(140, 88, 226, 0.62));
  box-shadow: 0 5px 13px rgba(79, 62, 166, 0.14);
}

.router-skill strong {
  overflow: hidden;
  color: #585062;
  font-size: 7px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-cbti { top: 8%; left: 2%; }
.skill-coach { top: 9%; right: 2%; }
.skill-stress { right: 8%; bottom: 7%; }

@keyframes router-brain-breathe {
  50% {
    border-radius: 53% 47% 55% 45% / 46% 56% 44% 54%;
    box-shadow:
      0 0 0 24px rgba(100, 93, 218, 0.052),
      0 0 0 45px rgba(77, 119, 244, 0.025),
      0 24px 52px rgba(67, 50, 143, 0.19);
    transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry)) scale(1.045);
  }
}

@keyframes router-core-node {
  50% { opacity: 0.55; transform: translateZ(14px) scale(0.75); }
}

/* Orchestrator: compact cross-app execution constellation */
.orchestrator-action-viz {
  --viz-rx: 0deg;
  --viz-ry: 0deg;
  overflow: hidden;
  perspective: 700px;
  isolation: isolate;
}

.orchestrator-action-viz::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, rgba(112, 93, 222, 0.09) 0 1px, transparent 1px 25px);
  opacity: 0.72;
  transform: perspective(700px) rotateX(var(--viz-rx)) rotateY(var(--viz-ry));
  transition: transform 280ms ease-out;
}

.orchestrator-action-viz > .execution-hub {
  width: 70px;
  height: 70px;
  background:
    conic-gradient(from 190deg, rgba(91, 128, 255, 0.84), rgba(156, 86, 229, 0.72), rgba(255, 255, 255, 0.95), rgba(91, 128, 255, 0.84));
  box-shadow:
    0 0 0 15px rgba(106, 94, 220, 0.04),
    0 0 0 31px rgba(79, 116, 240, 0.022),
    0 20px 45px rgba(66, 51, 136, 0.17);
  transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry));
}

.execution-hub::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96), rgba(226, 225, 255, 0.74) 44%, rgba(201, 183, 241, 0.54));
}

.execution-hub > i {
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
}

.execution-endpoint {
  width: 96px;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 7px;
  border-radius: 10px;
}

.execution-endpoint > i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.execution-endpoint svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.orchestrator-action-viz .execution-endpoint strong {
  font-size: 7.5px;
}

.endpoint-benefit { top: 8%; left: 3%; }
.endpoint-email { top: 9%; right: 3%; }
.endpoint-calendar { bottom: 12%; left: 4%; }
.endpoint-ios { right: 4%; bottom: 11%; }

.orchestrator-action-viz > .execution-link {
  width: 42%;
}

.orchestrator-action-viz > b {
  display: flex;
  bottom: 6px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 8px;
  font-size: 7px;
}

.orchestrator-action-viz > b > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

@keyframes execution-hub-pulse {
  50% {
    box-shadow:
      0 0 0 22px rgba(104, 93, 213, 0.05),
      0 0 0 42px rgba(79, 114, 238, 0.024),
      0 24px 52px rgba(66, 51, 136, 0.19);
    transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry)) scale(1.045);
  }
}

/* Native entry surfaces scale with their containers */
.architecture-interface {
  min-height: 126px;
  grid-template-columns: minmax(188px, 0.3fr) minmax(690px, 1fr);
}

.architecture-surface-list {
  align-items: stretch;
}

.architecture-surface-list b {
  min-height: 66px;
  gap: 13px;
  padding-inline: 16px;
  border-radius: 12px;
}

.architecture-surface-list b > span {
  font-size: 11px;
  font-weight: 720;
}

.architecture-surface-list .surface-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.architecture-surface-list .icon-island::before {
  top: 12px;
  left: 3px;
  width: 32px;
  height: 14px;
}

.architecture-surface-list .icon-island::after {
  top: 17px;
  right: 5px;
}

.architecture-surface-list .icon-siri {
  width: 35px;
  height: 35px;
}

.architecture-surface-list .icon-shortcuts::before,
.architecture-surface-list .icon-shortcuts::after {
  width: 17px;
  height: 17px;
}

.architecture-surface-list .icon-backtap::before {
  top: 2px;
  left: 9px;
  width: 20px;
  height: 32px;
  border-radius: 8px;
}

.architecture-surface-list .icon-backtap::after {
  top: 15px;
  left: 16px;
}

/* Context-to-action data bus */
.architecture-task-chain {
  min-height: 126px;
  gap: 10px;
  padding: 16px 22px;
  border-color: rgba(91, 78, 145, 0.055);
  border-radius: 15px;
  background:
    linear-gradient(rgba(101, 89, 159, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 89, 159, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 11% 50%, rgba(74, 116, 255, 0.1), transparent 22%),
    radial-gradient(circle at 89% 50%, rgba(137, 88, 229, 0.1), transparent 24%),
    rgba(255, 255, 255, 0.5);
  background-size: 16px 16px, 16px 16px, auto, auto, auto;
}

.architecture-task-chain::before {
  right: 9%;
  left: 9%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78, 120, 246, 0.46), rgba(119, 91, 226, 0.66), rgba(148, 86, 224, 0.4), transparent);
  box-shadow: 0 0 18px rgba(102, 91, 222, 0.12);
}

.architecture-task-chain > span {
  min-height: 78px;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 1px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 80, 160, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.63);
  box-shadow:
    0 12px 27px rgba(60, 48, 116, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.architecture-task-chain > span > i {
  width: 18px;
  height: 18px;
  grid-row: 1 / 3;
  margin: 0;
  align-self: center;
}

.architecture-task-chain > span small {
  align-self: end;
  font-size: 6px;
}

.architecture-task-chain > span strong {
  align-self: start;
  font-size: 11px;
}

.architecture-task-chain > span em {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: #8a8392;
  font-size: 6.5px;
  font-style: normal;
}

.architecture-task-chain::after {
  top: calc(50% - 5px);
  z-index: 4;
  width: 10px;
  height: 10px;
}

/* Memory behaves like an explorable field, not a static diagram */
.architecture-memory {
  min-height: 218px;
  grid-template-columns: minmax(470px, 0.95fr) minmax(500px, 1.05fr);
  gap: 18px;
  padding: 20px 24px;
}

.architecture-memory-copy > strong {
  max-width: none;
  font-size: 21px;
  line-height: 1.08;
  white-space: nowrap;
}

.architecture-memory-copy > small {
  max-width: 560px;
}

.architecture-memory-graph {
  --memory-rx: 4deg;
  --memory-ry: -4deg;
  height: 176px;
  transform: perspective(850px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry));
  transition: transform 180ms ease-out;
}

.architecture-memory:hover .architecture-memory-graph {
  transform: perspective(850px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry)) scale(1.012);
}

.architecture-memory-graph > div {
  width: 66px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(214, 222, 255, 0.84) 48%, rgba(214, 195, 245, 0.8));
  clip-path: polygon(50% 0, 88% 18%, 100% 55%, 78% 91%, 38% 100%, 5% 72%, 6% 28%);
  box-shadow:
    0 0 0 17px rgba(102, 91, 213, 0.038),
    0 0 0 34px rgba(78, 121, 242, 0.022),
    0 18px 38px rgba(69, 52, 143, 0.14);
}

.architecture-memory-graph > div strong {
  font-size: 7px;
}

@keyframes architecture-memory-core {
  50% {
    box-shadow:
      0 0 0 24px rgba(102, 91, 213, 0.05),
      0 0 0 44px rgba(78, 121, 242, 0.025),
      0 24px 50px rgba(69, 52, 143, 0.19);
    transform: translate(-50%, -50%) translateZ(30px) rotate(4deg) scale(1.045);
  }
}

/* Capability heading lives inside its own scene */
.product-modules {
  padding-top: 92px;
}

.product-modules-heading {
  min-height: 246px;
  align-items: end;
  padding-bottom: 38px;
}

.module-nebula-shell {
  height: 184px;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, 0.72) 66%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, 0.72) 66%, transparent 96%);
}

.module-nebula {
  inset: -12%;
  width: 124%;
  height: 124%;
}

.module-nebula-shell > span {
  width: 52px;
  opacity: 0.72;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.94), rgba(202, 213, 255, 0.64) 26%, rgba(133, 96, 229, 0.25) 54%, transparent 74%);
}

/* Keep module identity and sequence together */
.module-copy {
  grid-template-columns: auto minmax(0, 1.02fr) minmax(210px, 0.72fr);
  column-gap: 12px;
}

.module-number {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 36px;
  margin: 0;
}

.module-copy .section-kicker {
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.module-copy h3 {
  grid-column: 1 / -1;
  margin-top: 23px;
}

.module-copy > p {
  grid-column: 1 / 3;
}

.module-copy ul {
  grid-column: 3;
}

@media (max-width: 1180px) {
  .workspace-user-signal {
    grid-template-columns: 34px minmax(0, 1fr) 68px;
  }

  .architecture-interface {
    grid-template-columns: minmax(160px, 0.25fr) minmax(560px, 1fr);
  }

  .architecture-surface-list b {
    min-height: 58px;
    padding-inline: 11px;
  }

  .architecture-surface-list b > span {
    font-size: 9px;
  }

  .architecture-task-chain > span {
    padding-inline: 9px;
  }

  .architecture-memory {
    grid-template-columns: minmax(390px, 0.9fr) minmax(420px, 1.1fr);
  }
}

@media (max-width: 820px) {
  .workspace-user-signal {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .workspace-voice-wave {
    display: none;
  }

  .architecture-interface {
    grid-template-columns: 1fr;
  }

  .architecture-surface-list b > span {
    font-size: 10px;
  }

  .architecture-task-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 208px;
  }

  .architecture-task-chain::before,
  .architecture-task-chain::after {
    display: none;
  }

  .architecture-memory {
    grid-template-columns: 1fr;
  }

  .architecture-memory-copy > strong {
    white-space: normal;
  }

  .module-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-copy .section-kicker {
    grid-column: 2;
  }

  .module-copy h3,
  .module-copy > p,
  .module-copy ul {
    grid-column: 1 / -1;
  }

  .module-copy ul {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .workspace-user-signal .workspace-voice-copy p {
    font-size: 9px;
  }

  .router-skill,
  .execution-endpoint {
    width: 88px;
  }

  .architecture-interface {
    min-height: 0;
  }

  .architecture-surface-list b {
    min-height: 56px;
  }

  .architecture-task-chain {
    padding: 10px;
  }

  .architecture-memory-copy > strong {
    font-size: 18px;
  }

  .product-modules {
    padding-top: 70px;
  }

  .product-modules-heading {
    min-height: 260px;
    padding-bottom: 24px;
  }
}

/* Transition band and phase rail refinements */
.product-modules {
  padding-top: 126px;
}

.product-modules-heading {
  min-height: 286px;
  align-items: end;
  padding-top: 74px;
  padding-bottom: 44px;
}

.product-modules-heading > div:first-child {
  align-self: end;
  padding-bottom: 22px;
}

.module-nebula-shell {
  position: relative;
  align-self: end;
  height: 206px;
  margin-bottom: -4px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(128, 97, 235, 0.09), transparent 34%),
    radial-gradient(ellipse at center, rgba(231, 235, 255, 0.24), transparent 68%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.module-nebula-shell::before,
.module-nebula-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(18px);
}

.module-nebula-shell::before {
  inset: 27% 29%;
  background: radial-gradient(circle, rgba(111, 126, 247, 0.2), rgba(139, 91, 228, 0.07) 44%, transparent 72%);
  animation: module-nebula-core 6.8s ease-in-out infinite;
}

.module-nebula-shell::after {
  width: 44%;
  height: 38%;
  top: 31%;
  left: 28%;
  border: 1px solid rgba(111, 103, 223, 0.11);
  box-shadow:
    0 0 0 18px rgba(94, 117, 236, 0.025),
    0 0 0 42px rgba(135, 91, 229, 0.018);
  animation: module-nebula-orbit 10s linear infinite;
}

.module-nebula {
  z-index: 1;
  inset: 4% 5%;
  width: 90%;
  height: 92%;
}

.module-nebula-shell > span {
  z-index: 2;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.98), rgba(173, 186, 255, 0.76) 19%, rgba(130, 92, 226, 0.42) 47%, rgba(97, 77, 186, 0.12) 68%, transparent 72%);
  box-shadow:
    0 0 0 13px rgba(112, 105, 225, 0.045),
    0 0 42px rgba(109, 91, 224, 0.22);
}

.workspace-progress {
  grid-template-columns: auto minmax(34px, 1fr) auto minmax(34px, 1fr) auto minmax(34px, 1fr) auto;
  min-height: 54px;
  gap: 7px;
  padding: 7px;
  border-color: rgba(91, 83, 126, 0.07);
  border-radius: 15px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(249, 248, 255, 0.45)),
    linear-gradient(90deg, rgba(93, 119, 234, 0.025), rgba(132, 90, 224, 0.06));
}

.workspace-progress::after {
  background:
    linear-gradient(90deg, transparent, rgba(116, 97, 225, 0.065) 44%, transparent 72%),
    radial-gradient(circle at 45% 50%, rgba(120, 92, 226, 0.08), transparent 34%);
}

.workspace-progress span {
  display: inline-flex;
  min-width: 72px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(92, 82, 125, 0.06);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.34);
  color: #756f7e;
  font-size: 8px;
  line-height: 1;
}

.workspace-progress span::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(98, 88, 139, 0.08);
  border-radius: 7px;
  background: rgba(241, 239, 249, 0.78);
  box-shadow: none;
  color: #8f879c;
  font-size: 5.5px;
  font-weight: 780;
  opacity: 1;
}

.workspace-progress span:nth-of-type(1)::before {
  content: "01";
}

.workspace-progress span:nth-of-type(2)::before {
  content: "02";
}

.workspace-progress span:nth-of-type(3)::before {
  content: "03";
}

.workspace-progress span:nth-of-type(4)::before {
  content: "04";
}

.workspace-progress span.is-active {
  min-width: 84px;
  border-color: rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(140deg, rgba(93, 116, 239, 0.96), rgba(130, 83, 222, 0.96));
  box-shadow:
    0 10px 23px rgba(76, 57, 172, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
}

.workspace-progress span.is-active::before {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.17);
  color: #fff;
  animation: workspace-index-breathe 1.9s ease-in-out infinite;
}

.workspace-progress span.is-complete::before {
  background: rgba(101, 96, 182, 0.08);
  color: #6f6792;
}

.workspace-progress i {
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(91, 115, 232, 0.13), rgba(130, 87, 224, 0.36), rgba(91, 115, 232, 0.13));
}

.workspace-progress i::after {
  top: -2px;
  width: 6px;
  height: 6px;
  box-shadow:
    0 0 0 4px rgba(112, 94, 222, 0.055),
    0 0 12px rgba(112, 94, 222, 0.28);
}

@keyframes module-nebula-core {
  50% {
    opacity: 0.68;
    transform: scale(1.12) translate3d(2%, -2%, 0);
  }
}

@keyframes module-nebula-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes workspace-index-breathe {
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.075);
    transform: scale(0.94);
  }
}

@media (max-width: 820px) {
  .product-modules {
    padding-top: 92px;
  }

  .product-modules-heading {
    min-height: 252px;
    padding-top: 52px;
    padding-bottom: 28px;
  }

  .module-nebula-shell {
    height: 164px;
  }

  .workspace-progress span {
    min-width: 46px;
    gap: 0;
    padding-inline: 7px;
  }

  .workspace-progress span::before {
    display: none;
  }

  .workspace-progress span.is-active {
    min-width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-nebula-shell::before,
  .module-nebula-shell::after,
  .workspace-progress span.is-active::before {
    animation: none;
  }
}

/* Context architecture, native prompt and real-world model */
.doni-island-dialogue {
  display: none !important;
}

.workspace-user-signal {
  isolation: isolate;
  min-height: 52px;
  border-radius: 999px;
  transition:
    border-radius 520ms var(--ease-spring),
    box-shadow 520ms ease,
    transform 520ms var(--ease-spring);
  animation: workspace-glass-island 6s ease-in-out infinite;
}

.workspace-user-signal::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -18%;
  width: 52%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  filter: blur(8px);
  opacity: 0;
  transform: rotate(10deg);
  animation: workspace-island-sheen 5.8s ease-in-out infinite;
}

.workspace-demo[data-phase="decoder"] .workspace-user-signal {
  box-shadow:
    0 15px 34px rgba(58, 66, 139, 0.075),
    inset 0 1px rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(103, 123, 235, 0.045);
}

.workspace-demo[data-phase="router"] .workspace-user-signal {
  box-shadow:
    0 15px 34px rgba(82, 48, 151, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(136, 94, 226, 0.052);
}

.workspace-demo[data-phase="orchestrator"] .workspace-user-signal {
  box-shadow:
    0 17px 38px rgba(60, 52, 133, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(102, 98, 220, 0.06);
}

.workspace-voice-symbol {
  border-radius: 50%;
  transition:
    border-radius 480ms var(--ease-spring),
    transform 480ms var(--ease-spring);
}

.workspace-demo[data-phase="decoder"] .workspace-voice-symbol {
  border-radius: 12px;
  transform: rotate(-2deg) scale(0.96);
}

.workspace-demo[data-phase="router"] .workspace-voice-symbol {
  border-radius: 13px 50% 50% 13px;
  transform: rotate(2deg);
}

.workspace-demo[data-phase="orchestrator"] .workspace-voice-symbol {
  border-radius: 11px;
  transform: scale(0.96);
}

.workspace-voice-copy p,
.workspace-voice-copy small {
  animation: workspace-voice-copy-in 520ms var(--ease-spring);
}

.workspace-voice-wave i {
  transform-origin: center;
  animation-duration: 1.05s;
}

.architecture-task-chain {
  min-height: 188px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 0;
  background:
    radial-gradient(circle at 12% 44%, rgba(76, 119, 245, 0.1), transparent 23%),
    radial-gradient(circle at 88% 50%, rgba(143, 88, 226, 0.09), transparent 25%),
    rgba(255, 255, 255, 0.33);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.86),
    0 16px 40px rgba(48, 40, 92, 0.035);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.architecture-task-chain::before {
  top: 50%;
  right: 11%;
  left: 11%;
  height: 1px;
  background: linear-gradient(90deg, rgba(80, 120, 241, 0.12), rgba(126, 94, 227, 0.25), rgba(146, 87, 218, 0.12));
}

.architecture-task-chain::after {
  top: calc(50% - 3px);
  left: 11%;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: #7566e6;
  box-shadow: 0 0 0 7px rgba(108, 98, 226, 0.07), 0 0 18px rgba(108, 98, 226, 0.32);
  animation: task-chain-packet 7.2s ease-in-out infinite;
}

.architecture-task-chain > span {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 158px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 1px 8px;
  overflow: hidden;
  padding: 13px 13px 11px;
  border: 1px solid rgba(99, 85, 157, 0.055);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(250, 248, 255, 0.48));
  box-shadow:
    0 14px 30px rgba(55, 44, 104, 0.045),
    inset 0 1px rgba(255, 255, 255, 0.96);
  transition: transform 420ms var(--ease-spring), box-shadow 420ms ease;
}

.architecture-task-chain > span:hover {
  z-index: 2;
  box-shadow:
    0 20px 38px rgba(62, 46, 130, 0.075),
    inset 0 1px rgba(255, 255, 255, 0.98);
  transform: translateY(-3px);
}

.architecture-task-chain > span small {
  display: grid;
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 8px;
  background: rgba(101, 105, 214, 0.07);
  color: #70688e;
  font-size: 6px;
  font-weight: 780;
}

.architecture-task-chain > span strong {
  align-self: end;
  font-size: 12px;
  line-height: 1;
}

.architecture-task-chain > span em {
  grid-column: 2;
  margin: 2px 0 0;
  color: #898291;
  font-size: 6.5px;
  font-style: normal;
}

.architecture-task-chain > span > b {
  position: relative;
  display: block;
  min-height: 60px;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(117, 98, 225, 0.075), transparent 58%),
    rgba(244, 243, 252, 0.48);
}

.architecture-task-chain > span > q {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: #746e7c;
  font-size: 6.5px;
  font-weight: 620;
  line-height: 1.2;
  quotes: none;
}

.architecture-task-chain > span > q::before,
.architecture-task-chain > span > q::after {
  content: "";
}

.task-context-map > i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(95, 101, 211, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 5px 12px rgba(69, 54, 129, 0.06);
}

.task-context-map > i:nth-child(1) {
  top: 8px;
  left: 12%;
}

.task-context-map > i:nth-child(2) {
  top: 33px;
  left: 23%;
}

.task-context-map > i:nth-child(3) {
  top: 17px;
  right: 12%;
}

.task-context-map > u {
  position: absolute;
  top: 24px;
  left: 44%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, #8794ed 42%, #765ed5 70%);
  box-shadow: 0 0 0 9px rgba(110, 106, 225, 0.055);
  text-decoration: none;
  animation: task-context-focus 2.8s ease-in-out infinite;
}

.task-context-map::before,
.task-context-map::after {
  content: "";
  position: absolute;
  top: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 96, 218, 0.34), transparent);
}

.task-context-map::before {
  left: 18%;
  width: 34%;
  transform: rotate(12deg);
}

.task-context-map::after {
  right: 17%;
  width: 35%;
  transform: rotate(-8deg);
}

.task-need-map {
  display: grid !important;
  align-content: center;
  gap: 6px;
  padding: 10px 12px;
}

.task-need-map > i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(80, 119, 241, 0.16), rgba(128, 89, 227, 0.64), rgba(128, 89, 227, 0.08));
  transform-origin: left;
  animation: task-need-structure 3.2s ease-in-out infinite;
}

.task-need-map > i:nth-child(2) {
  width: 76%;
  animation-delay: 120ms;
}

.task-need-map > i:nth-child(3) {
  width: 58%;
  animation-delay: 240ms;
}

.task-skills-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.task-skills-map > i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7662df;
  box-shadow: 0 0 0 5px rgba(108, 96, 220, 0.08);
}

.task-skills-map > i:nth-of-type(1) {
  top: 13px;
  left: 19%;
}

.task-skills-map > i:nth-of-type(2) {
  top: 31px;
  left: 48%;
}

.task-skills-map > i:nth-of-type(3) {
  top: 16px;
  right: 15%;
}

.task-action-map {
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
}

.task-action-map::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18%;
  left: 18%;
  height: 2px;
  background: linear-gradient(90deg, #8696ed, #7f65df);
  transform-origin: left;
  animation: task-action-progress 3.4s ease-in-out infinite;
}

.task-action-map > i {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #7663de;
  box-shadow: 0 0 0 5px rgba(111, 98, 224, 0.07);
}

.decoder-world-visual,
.router-capability-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(98, 82, 161, 0.06);
  background:
    radial-gradient(circle at 75% 32%, rgba(145, 93, 230, 0.105), transparent 26%),
    radial-gradient(circle at 24% 72%, rgba(74, 123, 248, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.48);
}

.decoder-world-canvas,
.router-capability-visual > canvas {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.94;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 64%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 0 64%, transparent 96%);
}

.decoder-world-scene {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 6%;
  width: 56%;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 48%, rgba(110, 105, 224, 0.1), transparent 30%),
    linear-gradient(rgba(96, 93, 155, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 93, 155, 0.032) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
  transform: perspective(900px) rotateY(4deg);
  transform-style: preserve-3d;
}

.decoder-world-scene > span {
  position: absolute;
  display: grid;
  min-width: 116px;
  grid-template-columns: 24px 1fr;
  gap: 0 7px;
  padding: 8px 10px;
  border: 1px solid rgba(103, 88, 157, 0.065);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 12px 25px rgba(53, 43, 95, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: world-signal-float 5.2s ease-in-out infinite;
}

.decoder-world-scene > span > i {
  position: relative;
  width: 22px;
  height: 22px;
  grid-row: 1 / 3;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(99, 125, 239, 0.16), rgba(141, 92, 226, 0.1));
}

.decoder-world-scene > span > i::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #7563dc;
  box-shadow: 0 0 0 4px rgba(111, 97, 222, 0.08);
}

.decoder-world-scene > span small {
  color: #9992a1;
  font-size: 6px;
}

.decoder-world-scene > span strong {
  color: #514b5a;
  font-size: 8px;
}

.world-time {
  top: 8%;
  left: 7%;
}

.world-place {
  top: 18%;
  right: 4%;
  animation-delay: -1.2s !important;
}

.world-load {
  bottom: 18%;
  left: 4%;
  animation-delay: -2.4s !important;
}

.world-calendar {
  right: 6%;
  bottom: 10%;
  animation-delay: -3.4s !important;
}

.world-person {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(222, 227, 255, 0.62) 48%, rgba(129, 100, 222, 0.1) 70%, transparent 72%);
  box-shadow:
    0 0 0 24px rgba(104, 113, 229, 0.035),
    0 0 0 48px rgba(126, 92, 224, 0.018);
  transform: translate(-50%, -50%) translateZ(24px);
}

.world-person > i:first-child {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, white, #9ba9f4 42%, #765ed4 74%);
  box-shadow: 0 20px 0 -2px rgba(117, 102, 219, 0.42);
}

.world-person > i:nth-child(2),
.world-person > i:nth-child(3) {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7864e0;
  box-shadow: 0 0 0 5px rgba(111, 98, 223, 0.07);
  animation: world-orbit 5.5s linear infinite;
}

.world-person > i:nth-child(3) {
  animation-delay: -2.7s;
  animation-duration: 7.5s;
}

.world-person > span {
  position: absolute;
  bottom: 14px;
  color: #6d667b;
  font-size: 6.5px;
  font-weight: 720;
}

.world-dialogue {
  position: absolute;
  right: 8%;
  bottom: 3%;
  left: 8%;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 24px rgba(58, 45, 111, 0.065);
  color: #686172;
  font-size: 7px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.world-dialogue > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #7662dd;
  box-shadow: 0 0 0 5px rgba(111, 96, 222, 0.08);
}

.decoder-world-focus {
  position: absolute;
  top: 23%;
  right: 5%;
  display: grid;
  width: 34%;
  min-height: 54%;
  align-content: center;
  justify-items: start;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 25%, rgba(109, 130, 240, 0.14), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(149, 92, 226, 0.13), transparent 34%),
    rgba(248, 247, 255, 0.64);
  box-shadow:
    0 24px 52px rgba(52, 39, 111, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.decoder-world-focus::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(109, 98, 219, 0.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(110, 99, 221, 0.035),
    0 0 0 22px rgba(110, 99, 221, 0.018);
  animation: world-focus-scan 4s ease-in-out infinite;
}

.decoder-world-focus > i {
  display: none;
}

.decoder-world-focus small {
  color: #6b6290;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.decoder-world-focus strong {
  max-width: 190px;
  margin: 8px 0 18px;
  font-size: 20px;
  line-height: 1.05;
}

.decoder-world-focus span {
  display: inline-flex;
  margin: 3px 4px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: #777080;
  font-size: 6.5px;
  font-weight: 660;
}

.router-capability-visual > canvas {
  z-index: -1;
}

.router-source-stack {
  position: absolute;
  top: 13%;
  bottom: 18%;
  left: 5%;
  display: grid;
  width: 22%;
  align-content: center;
  gap: 9px;
}

.router-source-stack span {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(100, 83, 157, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 9px 20px rgba(54, 41, 101, 0.045);
  color: #6e6777;
  font-size: 7px;
  font-weight: 690;
}

.router-source-stack i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7764df;
  box-shadow: 0 0 0 5px rgba(109, 96, 220, 0.065);
}

.router-need-core {
  position: absolute;
  top: 50%;
  left: 45%;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 33%, rgba(255, 255, 255, 0.98), rgba(224, 227, 255, 0.78) 48%, rgba(139, 103, 226, 0.15) 72%);
  box-shadow:
    0 0 0 20px rgba(102, 111, 226, 0.035),
    0 0 0 41px rgba(126, 91, 222, 0.018);
  text-align: center;
  transform: translate(-50%, -50%);
}

.router-need-core small {
  align-self: end;
  color: #89819b;
  font-size: 6px;
}

.router-need-core strong {
  align-self: start;
  max-width: 74px;
  font-size: 12px;
  line-height: 1.05;
}

.router-need-core i {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7763de;
  box-shadow: 0 0 0 5px rgba(111, 97, 222, 0.08);
  animation: router-core-orbit 6s linear infinite;
}

.router-need-core i:last-child {
  animation-delay: -3s;
  animation-duration: 8s;
}

.router-capability-nodes span {
  position: absolute;
  display: grid;
  min-width: 106px;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 12px 25px rgba(53, 40, 102, 0.055);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.router-capability-nodes small {
  color: #9b93a2;
  font-size: 5.5px;
  text-transform: uppercase;
}

.router-capability-nodes strong {
  color: #5c5567;
  font-size: 7.5px;
}

.capability-human {
  top: 13%;
  left: 53%;
}

.capability-ai {
  top: 43%;
  left: 55%;
}

.capability-provider {
  bottom: 17%;
  left: 48%;
}

.router-ranked-output {
  position: absolute;
  top: 25%;
  right: 4%;
  display: grid;
  width: 25%;
  min-height: 44%;
  align-content: center;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 17px;
  background:
    radial-gradient(circle at 84% 18%, rgba(145, 91, 227, 0.14), transparent 31%),
    rgba(249, 248, 255, 0.7);
  box-shadow:
    0 20px 42px rgba(58, 42, 117, 0.085),
    inset 0 1px rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.router-ranked-output small {
  color: #6d6491;
  font-size: 6px;
  font-weight: 750;
  text-transform: uppercase;
}

.router-ranked-output strong {
  margin: 7px 0 12px;
  font-size: 12px;
  line-height: 1.12;
}

.router-ranked-output span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6f6877;
  font-size: 6.5px;
}

.router-ranked-output span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7764df;
  box-shadow: 0 0 0 4px rgba(111, 97, 222, 0.07);
}

.router-ranked-output b {
  justify-self: start;
  margin-top: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: linear-gradient(140deg, #6279ec, #855be0);
  color: white;
  font-size: 7px;
  box-shadow: 0 9px 18px rgba(82, 62, 172, 0.17);
}

.router-learning-chip {
  position: absolute;
  right: 7%;
  bottom: 5%;
  left: 7%;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.94),
    0 10px 23px rgba(52, 40, 101, 0.045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.router-learning-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7662de;
  box-shadow: 0 0 0 5px rgba(112, 97, 223, 0.07);
  animation: router-learning-pulse 2.6s ease-in-out infinite;
}

.router-learning-chip span {
  color: #716a79;
  font-size: 6px;
  font-weight: 680;
}

.router-learning-chip span + span::before {
  content: "·";
  margin-right: 8px;
  color: #a29bad;
}

.architecture-memory {
  overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(circle at 66% 50%, rgba(123, 97, 225, 0.075), transparent 23%),
    radial-gradient(circle at 82% 28%, rgba(82, 126, 247, 0.065), transparent 28%),
    rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.82),
    0 20px 46px rgba(50, 40, 94, 0.035);
}

.architecture-memory-graph {
  border: 0;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 98%);
}

.architecture-memory-graph canvas {
  opacity: 1;
  image-rendering: auto;
}

.architecture-memory-graph > div {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.98), rgba(176, 188, 251, 0.72) 23%, rgba(119, 93, 220, 0.34) 51%, transparent 72%);
  box-shadow:
    0 0 0 16px rgba(110, 100, 223, 0.035),
    0 0 48px rgba(101, 91, 213, 0.16);
  clip-path: none;
}

.architecture-memory-graph > div > i {
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7664df;
  box-shadow: 0 0 0 6px rgba(111, 98, 222, 0.07);
}

.architecture-memory-graph > .memory-node {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(80, 73, 94, 0.76);
  font-size: 6px;
  font-weight: 690;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.architecture-memory-graph > .memory-node::before,
.architecture-memory-graph > .memory-node::after {
  display: none;
}

.architecture-memory-graph > .memory-node > i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7465db;
  box-shadow: 0 0 0 5px rgba(109, 98, 221, 0.055);
}

.memory-human {
  top: 22%;
  left: 8%;
}

.memory-service {
  top: 20%;
  right: 7%;
}

.memory-workflow {
  right: 14%;
  bottom: 15%;
}

@keyframes workspace-glass-island {
  50% {
    border-radius: 19px;
    transform: translateY(-1px);
  }
}

@keyframes workspace-island-sheen {
  0%,
  20% {
    left: -30%;
    opacity: 0;
  }
  45% {
    opacity: 0.5;
  }
  75%,
  100% {
    left: 105%;
    opacity: 0;
  }
}

@keyframes workspace-voice-copy-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes task-chain-packet {
  0%,
  8% {
    left: 11%;
    opacity: 0;
  }
  14%,
  84% {
    opacity: 1;
  }
  92%,
  100% {
    left: 88%;
    opacity: 0;
  }
}

@keyframes task-context-focus {
  50% {
    box-shadow: 0 0 0 14px rgba(110, 106, 225, 0.035);
    transform: scale(1.08);
  }
}

@keyframes task-need-structure {
  0%,
  18% {
    transform: scaleX(0.22);
    opacity: 0.42;
  }
  48%,
  82% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    opacity: 0.64;
  }
}

@keyframes task-action-progress {
  0%,
  12% {
    transform: scaleX(0);
  }
  72%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes world-signal-float {
  50% {
    transform: translateY(-4px) translateZ(10px);
  }
}

@keyframes world-orbit {
  from {
    transform: rotate(0deg) translateX(68px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(68px) rotate(-360deg);
  }
}

@keyframes world-focus-scan {
  50% {
    opacity: 0.48;
    transform: scale(1.14);
  }
}

@keyframes router-core-orbit {
  from {
    transform: rotate(0deg) translateX(72px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(72px) rotate(-360deg);
  }
}

@keyframes router-learning-pulse {
  50% {
    box-shadow: 0 0 0 9px rgba(112, 97, 223, 0.035);
    transform: scale(0.88);
  }
}

@media (max-width: 1180px) {
  .architecture-task-chain > span > q {
    font-size: 5.7px;
  }

  .router-capability-nodes span {
    min-width: 88px;
  }
}

@media (max-width: 820px) {
  .architecture-task-chain {
    min-height: 332px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-task-chain > span {
    min-height: 145px;
  }

  .decoder-world-scene {
    right: 6%;
    bottom: 39%;
    width: auto;
  }

  .decoder-world-focus {
    right: 8%;
    bottom: 5%;
    left: 8%;
    top: auto;
    width: auto;
    min-height: 29%;
  }

  .router-source-stack {
    width: 28%;
  }

  .router-ranked-output {
    width: 31%;
  }

  .router-capability-nodes {
    display: none;
  }
}

@media (max-width: 640px) {
  .workspace-user-signal {
    min-height: 50px;
  }

  .architecture-task-chain {
    min-height: 326px;
  }

  .architecture-task-chain > span {
    min-height: 142px;
    padding: 10px;
  }

  .architecture-task-chain > span > q {
    display: none;
  }

  .router-source-stack span:nth-child(n + 3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-user-signal,
  .workspace-user-signal::before,
  .task-context-map > u,
  .task-need-map > i,
  .task-action-map::before,
  .architecture-task-chain::after,
  .decoder-world-scene > span,
  .world-person > i,
  .decoder-world-focus::before,
  .router-need-core i,
  .router-learning-chip i {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-voice-symbol > i,
  .workspace-voice-wave i,
  .workspace-voice-copy,
  .router-brain-core,
  .router-brain-core > i,
  .execution-hub,
  .architecture-task-chain::after,
  .architecture-memory-graph {
    animation: none !important;
    transition: none !important;
  }
}

.benefit-gap-heading {
  display: block;
  margin-bottom: clamp(30px, 3.2vw, 46px);
}

.benefit-gap-heading::before {
  display: none;
}

.benefit-gap-heading::after {
  display: none;
}

.benefit-gap-heading h3 {
  margin: 0;
  color: #4b4f78;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 780;
  letter-spacing: 0.105em;
  line-height: 1.25;
  text-transform: uppercase;
}

.benefit-gap-heading strong {
  color: inherit;
  font-weight: inherit;
}

.problem-cost {
  grid-column: span 5;
  min-height: 440px;
  padding: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(circle at 86% 18%, rgba(117, 88, 240, 0.1), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(65, 108, 255, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(248, 247, 255, 0.58));
}

.problem-benefits {
  grid-column: span 7;
  display: grid;
  min-height: 440px;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 1.18fr);
  align-items: center;
  gap: 30px;
  padding: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.44), transparent 28%),
    linear-gradient(145deg, #e0e8ff, #e3d8ff 58%, #f1dcf4);
  box-shadow: var(--shadow-md);
}

.problem-friction {
  grid-column: span 7;
  min-height: 390px;
  padding: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(circle at 8% 12%, rgba(73, 105, 255, 0.1), transparent 28%),
    radial-gradient(circle at 90% 92%, rgba(139, 88, 242, 0.09), transparent 31%),
    rgba(255, 255, 255, 0.68);
}

.problem-outcomes {
  grid-column: span 5;
  min-height: 390px;
  padding: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(circle at 92% 8%, rgba(133, 86, 238, 0.1), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(71, 111, 255, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.7);
}

.problem-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 24px;
}

.problem-card-head > span,
.problem-label {
  color: #57516a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.problem-card-head > span,
.problem-outcomes > .problem-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.problem-card-head > span::before,
.problem-outcomes > .problem-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #6258eb;
  box-shadow: 0 0 0 5px rgba(98, 88, 235, 0.09);
}

.problem-card-head small {
  max-width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #898391;
  font-size: 9px;
  line-height: 1.3;
  text-align: right;
}

.problem-stat {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: clamp(84px, 8vw, 132px);
  font-weight: 740;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.problem-stat span {
  margin-left: 4px;
  color: var(--violet);
  font-size: 0.4em;
  letter-spacing: -0.04em;
}

.problem-cost > p {
  max-width: 430px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.52;
  text-wrap: balance;
}

.cost-chart {
  position: absolute;
  right: 35px;
  bottom: 35px;
  left: 35px;
  display: flex;
  height: 108px;
  align-items: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-bottom: 1px solid var(--line);
}

.cost-chart span {
  width: 100%;
  height: var(--bar);
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #8a66f0, #456bff);
  opacity: 0.55;
}

.problem-benefits > div:first-child {
  position: relative;
  z-index: 2;
}

.problem-benefits strong {
  display: block;
  margin: 13px 0 8px;
  color: #272541;
  font-size: clamp(52px, 5.5vw, 88px);
  font-weight: 720;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.problem-benefits p {
  width: 340px;
  max-width: none;
  margin-bottom: 0;
  color: #625d75;
  font-size: 14px;
  text-wrap: balance;
}

.benefit-cloud {
  position: relative;
  width: calc(100% - 94px);
  min-height: 330px;
  margin-left: 94px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.benefit-cloud::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 7%, transparent 8% 22%, rgba(255, 255, 255, 0.2) 23% 23.5%, transparent 24% 41%, rgba(255, 255, 255, 0.16) 42% 42.5%, transparent 43%),
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 74%);
  mask-image: radial-gradient(circle, #000 16%, transparent 74%);
}

.benefit-cloud::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  aspect-ratio: 1;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: conic-gradient(from 25deg, rgba(70, 111, 255, 0.09), transparent 26%, rgba(141, 90, 241, 0.14), transparent 64%, rgba(70, 111, 255, 0.09));
  opacity: 0.7;
  transform: translate(-50%, -50%);
  animation: benefit-orbit-spin 16s linear infinite;
}

.benefit-cloud-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 102px;
  height: 102px;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 22px 48px rgba(63, 49, 132, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #302b4a;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

.benefit-cloud-core i {
  width: 8px;
  height: 8px;
  margin: 0 auto 7px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 7px rgba(97, 79, 231, 0.1);
}

.benefit-cloud-core strong,
.benefit-cloud-core small {
  display: block;
  margin: 0;
  letter-spacing: 0;
}

.benefit-cloud-core strong {
  font-size: 13px;
  line-height: 1.15;
}

.benefit-cloud-core small {
  margin-top: 4px;
  color: #7b748a;
  font-size: 8px;
}

.benefit-cloud .company-node {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 22px rgba(50, 40, 91, 0.09);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  animation: benefit-node-float 5.6s ease-in-out infinite alternate;
  transition:
    box-shadow 360ms var(--ease-spring),
    transform 360ms var(--ease-spring);
}

.benefit-cloud .company-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(83, 112, 255, 0.16), transparent 42%, rgba(145, 91, 239, 0.13));
  opacity: 0;
  transition: opacity 260ms ease;
}

.benefit-cloud .company-node:hover {
  z-index: 4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 17px 34px rgba(64, 49, 135, 0.15);
  transform: translateY(-4px) scale(1.09);
}

.benefit-cloud .company-node:hover::after {
  opacity: 1;
}

.benefit-cloud .company-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  filter: grayscale(0.18) saturate(0.78);
  transition: filter 260ms ease;
}

.benefit-cloud .company-node:hover img {
  filter: none;
}

.benefit-cloud .company-node:nth-child(4n) {
  width: 46px;
  height: 46px;
}

.benefit-cloud .company-node:nth-child(7n + 2) {
  width: 34px;
  height: 34px;
}

.benefit-cloud .company-node:nth-child(2) { top: 7%; left: 8%; }
.benefit-cloud .company-node:nth-child(3) { top: 3%; left: 29%; }
.benefit-cloud .company-node:nth-child(4) { top: 9%; left: 55%; }
.benefit-cloud .company-node:nth-child(5) { top: 4%; left: 82%; }
.benefit-cloud .company-node:nth-child(6) { top: 25%; left: 2%; }
.benefit-cloud .company-node:nth-child(7) { top: 28%; left: 20%; }
.benefit-cloud .company-node:nth-child(8) { top: 27%; left: 72%; }
.benefit-cloud .company-node:nth-child(9) { top: 25%; left: 84%; }
.benefit-cloud .company-node:nth-child(10) { top: 45%; left: 9%; }
.benefit-cloud .company-node:nth-child(11) { top: 48%; left: 27%; }
.benefit-cloud .company-node:nth-child(12) { top: 47%; left: 75%; }
.benefit-cloud .company-node:nth-child(13) { top: 47%; left: 85%; }
.benefit-cloud .company-node:nth-child(14) { top: 67%; left: 2%; }
.benefit-cloud .company-node:nth-child(15) { top: 68%; left: 20%; }
.benefit-cloud .company-node:nth-child(16) { top: 69%; left: 70%; }
.benefit-cloud .company-node:nth-child(17) { top: 68%; left: 84%; }
.benefit-cloud .company-node:nth-child(18) { top: 84%; left: 9%; }
.benefit-cloud .company-node:nth-child(19) { top: 86%; left: 30%; }
.benefit-cloud .company-node:nth-child(20) { top: 83%; left: 52%; }
.benefit-cloud .company-node:nth-child(21) { top: 85%; left: 77%; }
.benefit-cloud .company-node:nth-child(22) { top: 13%; left: 42%; }
.benefit-cloud .company-node:nth-child(23) { top: 31%; left: 43%; }
.benefit-cloud .company-node:nth-child(24) { top: 63%; left: 43%; }
.benefit-cloud .company-node:nth-child(25) { top: 83%; left: 86%; }

.benefit-cloud .company-node:nth-child(3n + 1) { animation-delay: -1.4s; }
.benefit-cloud .company-node:nth-child(3n + 2) { animation-delay: -3.1s; }
.benefit-cloud .company-node:nth-child(3n) { animation-delay: -4.8s; }

@keyframes benefit-node-float {
  from { margin-top: -4px; }
  to { margin-top: 5px; }
}

@keyframes benefit-orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.friction-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.friction-path::before,
.friction-path::after {
  display: none;
}

.friction-path span {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 150px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 13px;
  border: 1px solid rgba(92, 82, 222, 0.13);
  border-radius: 17px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(247, 246, 255, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 30px rgba(69, 58, 135, 0.045);
  color: #625d6e;
  font-size: 11px;
  font-weight: 650;
}

.friction-path span::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(101, 87, 237, 0.1) 48%, transparent 74%);
  opacity: 0;
  transform: translateX(-110%);
}

.problem-friction.in-view .friction-path span::before {
  animation: friction-card-charge 5.2s ease-out infinite;
}

.problem-friction.in-view .friction-path span:nth-child(2)::before { animation-delay: 340ms; }
.problem-friction.in-view .friction-path span:nth-child(3)::before { animation-delay: 680ms; }
.problem-friction.in-view .friction-path span:nth-child(4)::before { animation-delay: 1020ms; }
.problem-friction.in-view .friction-path span:nth-child(5)::before { animation-delay: 1360ms; }

@keyframes friction-card-charge {
  0%, 9% {
    opacity: 0;
    transform: translateX(-110%);
  }
  18%, 31% {
    opacity: 1;
  }
  42%, 100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

.friction-path span::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 13px;
  width: 34px;
  height: 24px;
  opacity: 0.3;
  background: repeating-linear-gradient(
    90deg,
    rgba(89, 82, 226, 0.55) 0 2px,
    transparent 2px 7px
  );
  clip-path: polygon(0 66%, 15% 51%, 30% 72%, 45% 29%, 60% 60%, 76% 18%, 91% 43%, 100% 28%, 100% 100%, 0 100%);
}

.friction-path span:nth-child(2)::after { opacity: 0.25; transform: scaleY(0.88); }
.friction-path span:nth-child(3)::after { opacity: 0.2; transform: scaleY(0.7); }
.friction-path span:nth-child(4)::after { opacity: 0.15; transform: scaleY(0.52); }
.friction-path span:nth-child(5)::after { opacity: 0.1; transform: scaleY(0.34); }

.friction-path i {
  position: relative;
  z-index: 4;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(99, 88, 235, 0.12);
  border-radius: 8px;
  background: rgba(245, 244, 255, 0.96);
  box-shadow: 0 5px 13px rgba(87, 74, 186, 0.08);
  color: #6459d8;
  font-size: 8px;
  font-weight: 760;
  font-style: normal;
}

.problem-friction.in-view .friction-path i {
  animation: friction-index-pulse 4.8s ease-in-out infinite;
}

.problem-friction.in-view .friction-path span:nth-child(2) i { animation-delay: 280ms; }
.problem-friction.in-view .friction-path span:nth-child(3) i { animation-delay: 560ms; }
.problem-friction.in-view .friction-path span:nth-child(4) i { animation-delay: 840ms; }
.problem-friction.in-view .friction-path span:nth-child(5) i { animation-delay: 1120ms; }

@keyframes friction-index-pulse {
  0%, 13%, 100% {
    border-color: rgba(99, 88, 235, 0.12);
    box-shadow: 0 5px 13px rgba(87, 74, 186, 0.08);
    transform: scale(1);
  }
  23%, 34% {
    border-color: rgba(99, 88, 235, 0.34);
    box-shadow:
      0 5px 13px rgba(87, 74, 186, 0.08),
      0 0 0 6px rgba(99, 88, 235, 0.08);
    transform: scale(1.05);
  }
}
.friction-path span:nth-child(3),
.friction-path span:nth-child(5) {
  transform: none;
}

.friction-path strong {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  overflow: hidden;
  margin-top: 15px;
  padding: 13px;
  border: 1px solid rgba(105, 85, 229, 0.11);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(68, 111, 255, 0.08), rgba(132, 83, 240, 0.15));
  color: #6555c8;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.friction-path strong::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  transform: skewX(-18deg);
}

.problem-friction.in-view .friction-path strong::before {
  animation: dropoff-scan 5.2s ease-in-out 2.8s infinite;
}

.friction-path strong::after {
  content: "↓";
  position: absolute;
  top: 50%;
  right: 15px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(102, 83, 213, 0.1);
  transform: translateY(-50%);
}

@keyframes dropoff-scan {
  0%, 20% { left: -24%; opacity: 0; }
  35%, 55% { opacity: 1; }
  75%, 100% { left: 104%; opacity: 0; }
}

.problem-outcomes > .problem-label {
  display: inline-flex;
  margin-bottom: 28px;
}

.outcome-meter {
  margin-bottom: 22px;
}

.outcome-meter div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.outcome-meter div span {
  color: #645e6c;
  font-size: 12px;
  font-weight: 630;
}

.outcome-meter div strong {
  color: #6558d8;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outcome-meter > i {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(108, 92, 227, 0.07) 17px 18px),
    #eceaf5;
}

.outcome-meter b {
  position: relative;
  display: block;
  width: var(--meter);
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #4774ff, #745dee 62%, #965bea);
  box-shadow: 0 0 15px rgba(103, 89, 235, 0.25);
  transform: scaleX(0);
  transform-origin: left center;
}

.problem-outcomes.in-view .outcome-meter b {
  transform: scaleX(1);
  transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

.problem-outcomes.in-view .outcome-meter + .outcome-meter b {
  transition-delay: 140ms;
}

.outcome-meter b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 15%, rgba(255, 255, 255, 0.72) 50%, transparent 85%);
  transform: translateX(-110%);
}

.problem-outcomes.in-view .outcome-meter b::after {
  animation: utilization-glint 2.8s ease-in-out 1.1s infinite;
}

@keyframes utilization-glint {
  0%, 28% { transform: translateX(-110%); }
  62%, 100% { transform: translateX(115%); }
}

.admin-cost {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  gap: 17px;
  margin-top: 31px;
  overflow: hidden;
  padding: 22px 96px 22px 20px;
  border: 1px solid rgba(100, 86, 226, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(249, 249, 255, 0.84), rgba(239, 235, 255, 0.63));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-cost strong {
  position: relative;
  z-index: 2;
  font-size: clamp(40px, 4vw, 61px);
  letter-spacing: -0.045em;
}

.admin-cost span {
  position: relative;
  z-index: 2;
  max-width: 150px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.admin-cost::before,
.admin-cost::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 27px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.admin-cost::before {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(97, 83, 229, 0.16);
  background:
    radial-gradient(circle, #6659eb 0 4px, rgba(102, 89, 235, 0.13) 5px 9px, transparent 10px),
    conic-gradient(from 40deg, #4775ff, #8b5cef, rgba(139, 92, 239, 0.08) 72%, #4775ff);
  box-shadow:
    inset 0 0 0 11px rgba(249, 248, 255, 0.92),
    0 0 0 7px rgba(103, 88, 235, 0.045);
}

.admin-cost::after {
  right: 51px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(100, 86, 230, 0.12);
  transform: translateY(-50%) translateX(28px);
  transform-origin: -28px 50%;
}

.problem-outcomes.in-view .admin-cost::before {
  animation: admin-orbit-spin 6s linear infinite;
}

.problem-outcomes.in-view .admin-cost::after {
  animation: admin-orbit-node 3.2s linear infinite;
}

@keyframes admin-orbit-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes admin-orbit-node {
  to { transform: translateY(-50%) translateX(28px) rotate(360deg); }
}

.research-note {
  margin: 18px 4px 0;
  color: #97919d;
  font-size: 10px;
}

.access-section {
  position: relative;
  padding-block: clamp(100px, 11vw, 170px);
  background:
    linear-gradient(180deg, rgba(247, 248, 255, 0) 0%, rgba(247, 248, 255, 0.84) 14%, rgba(242, 240, 255, 0.76) 86%, rgba(247, 248, 255, 0) 100%),
    radial-gradient(circle at 86% 4%, rgba(141, 91, 241, 0.14), transparent 34%),
    radial-gradient(circle at 3% 96%, rgba(69, 109, 255, 0.12), transparent 38%);
}

.access-heading {
  display: block;
  margin-bottom: clamp(32px, 3.4vw, 48px);
}

.access-heading .section-kicker,
.team-section-heading .section-kicker {
  margin-bottom: 0;
  color: #4b4f78;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 780;
  letter-spacing: 0.105em;
  line-height: 1.25;
}

.access-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}

.access-card {
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-sm), inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.access-type {
  margin-bottom: 22px;
}

.access-type span,
.access-type strong {
  display: block;
}

.access-type span {
  margin-bottom: 7px;
  color: #817a8d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.access-type strong {
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 680;
  letter-spacing: -0.025em;
}

.access-card > p {
  max-width: 580px;
  min-height: 48px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 14px;
}

.access-progress {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.access-progress span {
  display: grid;
  min-height: 72px;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f4f2f7;
  color: #77717f;
  font-size: 10px;
  font-weight: 650;
  text-align: center;
}

.access-progress .done {
  border-color: rgba(87, 130, 99, 0.16);
  background: #eef5ef;
  color: #597360;
}

.access-progress i {
  color: #aaa4b0;
  font-size: 13px;
  font-style: normal;
}

.access-card > small {
  display: block;
  margin-top: 20px;
  color: #928c99;
  font-size: 10px;
}

.access-thesis {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(250px, auto) 1fr;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--ink);
  box-shadow: 0 22px 55px rgba(22, 20, 35, 0.17);
  color: white;
}

.access-thesis > span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 700;
}

.access-thesis > i {
  color: rgba(255, 255, 255, 0.38);
  font-size: 14px;
  font-style: normal;
}

.access-thesis > strong {
  background: linear-gradient(90deg, #87a5ff, #c99cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.access-thesis > p {
  margin: 0 0 0 18px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.problem-journey {
  overflow: hidden;
  padding: clamp(30px, 3.5vw, 52px);
  border-radius: clamp(28px, 3vw, 42px);
  background:
    radial-gradient(circle at 12% 10%, rgba(74, 109, 255, 0.1), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(152, 93, 239, 0.09), transparent 32%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(250, 248, 255, 0.6));
}

.advice-band {
  display: grid;
  grid-template-columns: minmax(590px, 1.16fr) minmax(320px, 0.84fr);
  align-items: stretch;
  gap: clamp(30px, 6vw, 90px);
  padding-bottom: clamp(28px, 3vw, 42px);
  border-bottom: 1px solid rgba(88, 79, 114, 0.1);
}

.advice-signal {
  min-width: 0;
}

.advice-flow {
  display: grid;
  grid-template-columns:
    minmax(82px, 0.88fr)
    minmax(30px, 0.42fr)
    minmax(116px, 1.14fr)
    minmax(30px, 0.42fr)
    minmax(88px, 0.92fr)
    minmax(56px, 0.68fr)
    minmax(88px, 0.92fr);
  align-items: center;
  gap: 0;
  margin-top: 14px;
}

.advice-stage {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 11px 14px;
  border: 1px solid rgba(67, 55, 107, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 247, 255, 0.72));
  box-shadow:
    0 12px 28px rgba(47, 40, 82, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.advice-stage-glyph {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: block;
  width: 32px;
  height: 20px;
  color: rgba(91, 80, 225, 0.48);
  pointer-events: none;
}

.advice-stage-data .advice-stage-glyph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
}

.advice-stage-data .advice-stage-glyph i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #8e64f2, #5274ff);
  box-shadow: 0 0 8px rgba(92, 91, 239, 0.15);
}

.advice-stage-data .advice-stage-glyph i:nth-child(1) { height: 7px; }
.advice-stage-data .advice-stage-glyph i:nth-child(2) { height: 16px; }
.advice-stage-data .advice-stage-glyph i:nth-child(3) { height: 10px; }
.advice-stage-data .advice-stage-glyph i:nth-child(4) { height: 20px; }
.advice-stage-data .advice-stage-glyph i:nth-child(5) { height: 12px; }

.problem-journey.in-view .advice-stage-data .advice-stage-glyph i {
  transform-origin: bottom;
  animation: advice-data-level 2100ms ease-in-out infinite alternate;
}

.problem-journey.in-view .advice-stage-data .advice-stage-glyph i:nth-child(2) { animation-delay: -720ms; }
.problem-journey.in-view .advice-stage-data .advice-stage-glyph i:nth-child(3) { animation-delay: -1340ms; }
.problem-journey.in-view .advice-stage-data .advice-stage-glyph i:nth-child(4) { animation-delay: -380ms; }
.problem-journey.in-view .advice-stage-data .advice-stage-glyph i:nth-child(5) { animation-delay: -1050ms; }

@keyframes advice-data-level {
  0%, 18% { transform: scaleY(0.52); opacity: 0.48; }
  68%, 100% { transform: scaleY(1); opacity: 1; }
}

.advice-stage-diagnosis .advice-stage-glyph {
  top: 9px;
  right: 10px;
  bottom: auto;
  width: 30px;
  height: 30px;
}

.advice-stage-diagnosis .advice-stage-glyph i {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.advice-stage-diagnosis .advice-stage-glyph i:nth-child(1) {
  width: 28px;
  height: 28px;
  border-color: rgba(108, 87, 237, 0.18);
  border-top-color: rgba(108, 87, 237, 0.82);
  border-right-color: rgba(108, 87, 237, 0.42);
  opacity: 0.82;
}

.advice-stage-diagnosis .advice-stage-glyph i:nth-child(2) {
  width: 17px;
  height: 17px;
  border-style: dashed;
  border-color: rgba(83, 107, 246, 0.5);
  opacity: 0.72;
}

.advice-stage-diagnosis .advice-stage-glyph i:nth-child(3) {
  width: 5px;
  height: 5px;
  border: 0;
  background: #725af1;
  box-shadow: 0 0 0 5px rgba(114, 90, 241, 0.08);
}

.problem-journey.in-view .advice-stage-diagnosis .advice-stage-glyph i:nth-child(1) {
  animation: advice-diagnosis-orbit 3200ms linear infinite;
}

.problem-journey.in-view .advice-stage-diagnosis .advice-stage-glyph i:nth-child(2) {
  animation: advice-diagnosis-lock 2100ms ease-in-out infinite;
}

@keyframes advice-diagnosis-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes advice-diagnosis-lock {
  0%, 24% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.78); }
  58%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
}

.advice-stage-advice .advice-stage-glyph {
  top: 10px;
  right: 10px;
  bottom: auto;
  display: grid;
  align-content: center;
  gap: 4px;
}

.advice-stage-advice .advice-stage-glyph i {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(98, 83, 230, 0.2), rgba(98, 83, 230, 0.7));
}

.advice-stage-advice .advice-stage-glyph i:nth-child(1) { width: 20px; }
.advice-stage-advice .advice-stage-glyph i:nth-child(2) { width: 27px; }
.advice-stage-advice .advice-stage-glyph i:nth-child(3) { width: 15px; }

.problem-journey.in-view .advice-stage-advice .advice-stage-glyph i {
  transform-origin: left;
  animation: advice-output-line 2200ms ease-in-out infinite;
}

.problem-journey.in-view .advice-stage-advice .advice-stage-glyph i:nth-child(2) { animation-delay: -1400ms; }
.problem-journey.in-view .advice-stage-advice .advice-stage-glyph i:nth-child(3) { animation-delay: -700ms; }

@keyframes advice-output-line {
  0%, 22% { opacity: 0.32; transform: scaleX(0.45); }
  68%, 100% { opacity: 1; transform: scaleX(1); }
}

.advice-stage-advice .advice-stage-glyph::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border: solid #775ef0;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}

.advice-stage small {
  margin-bottom: 5px;
  color: #7066c7;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.advice-stage strong {
  position: relative;
  z-index: 2;
  color: #383449;
  font-size: clamp(17px, 1.45vw, 23px);
  font-weight: 700;
  letter-spacing: -0.022em;
}

.advice-stage-diagnosis,
.advice-stage-advice {
  padding-right: 48px;
}

.advice-stage-diagnosis strong,
.advice-stage-advice strong {
  font-size: clamp(16px, 1.28vw, 21px);
}

.advice-stage-action {
  border-style: dashed;
  border-color: rgba(105, 94, 135, 0.2);
  background: rgba(249, 248, 252, 0.48);
  box-shadow: none;
}

.advice-stage-action small,
.advice-stage-action strong {
  color: #9993a3;
}

.advice-stage-action::after {
  opacity: 0.16;
}

.advice-connector {
  position: relative;
  z-index: 1;
  display: block;
  height: 2px;
  overflow: visible;
  background: linear-gradient(90deg, rgba(72, 102, 255, 0.45), rgba(122, 79, 239, 0.68));
}

.advice-connector-sampling {
  height: 12px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(74, 105, 255, 0.7) 0 5px,
      rgba(74, 105, 255, 0.16) 5px 8px,
      transparent 8px 11px
    ) center / 100% 1px no-repeat;
}

.advice-connector-sampling::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 1px;
  left: 0;
  opacity: 0.38;
  background:
      linear-gradient(90deg, transparent 0 18%, rgba(83, 111, 255, 0.8) 18% 21%, transparent 21% 47%, rgba(83, 111, 255, 0.68) 47% 50%, transparent 50% 78%, rgba(83, 111, 255, 0.62) 78% 81%, transparent 81%);
}

.advice-connector-sampling::after,
.advice-connector-converge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 34%;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91, 107, 255, 0.32), transparent 68%);
  opacity: 0;
  transform: translate(-120%, -50%);
  will-change: transform, opacity;
}

.problem-journey.in-view .advice-connector-sampling::after {
  animation: advice-rail-sweep 2900ms ease-in-out infinite;
}

.advice-connector-converge {
  height: 14px;
  background:
    linear-gradient(7deg, transparent 0 47%, rgba(110, 83, 239, 0.44) 48% 52%, transparent 53%) center / 100% 50% no-repeat,
    linear-gradient(-7deg, transparent 0 47%, rgba(110, 83, 239, 0.32) 48% 52%, transparent 53%) center / 100% 50% no-repeat;
}

.advice-connector-converge::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(113, 83, 239, 0.76));
  transform: translateY(-50%);
}

.advice-connector-converge::after {
  background: radial-gradient(ellipse, rgba(126, 83, 239, 0.34), transparent 68%);
}

.problem-journey.in-view .advice-connector-converge::after {
  animation: advice-rail-sweep 2900ms ease-in-out 520ms infinite;
}

@keyframes advice-rail-sweep {
  0%, 14% {
    opacity: 0;
    transform: translate(-120%, -50%);
  }
  32% { opacity: 1; }
  72%, 100% {
    opacity: 0;
    transform: translate(340%, -50%);
  }
}

.advice-connector > i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: #725af1;
  box-shadow: 0 0 0 0 rgba(103, 83, 239, 0.22);
  transform: translate(-50%, -50%);
}

.problem-journey.in-view .advice-connector:not(.advice-connector-blocked) > i {
  animation: advice-signal-pass 2900ms cubic-bezier(0.44, 0, 0.2, 1) infinite;
}

.advice-connector-converge > i {
  animation-delay: 520ms !important;
}

@keyframes advice-signal-pass {
  0%, 16% {
    left: 0;
    box-shadow: 0 0 0 0 rgba(103, 83, 239, 0.3);
  }
  58%, 68% {
    left: 100%;
    box-shadow: 0 0 0 8px rgba(103, 83, 239, 0);
  }
  100% {
    left: 100%;
    opacity: 0.12;
  }
}

.advice-connector-blocked {
  background:
    linear-gradient(
      90deg,
      rgba(122, 79, 239, 0.68) 0 46%,
      transparent 46% 58%,
      rgba(115, 106, 139, 0.12) 58% 100%
    );
}

.advice-connector-blocked > i {
  left: 0;
}

.problem-journey.in-view .advice-connector-blocked > i {
  animation: advice-signal-blocked 2400ms cubic-bezier(0.4, 0, 0.2, 1) 880ms infinite;
}

.advice-connector-blocked > b {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 7px;
  height: 27px;
  border: solid rgba(112, 83, 231, 0.76);
  border-width: 0 2px;
  transform: translate(-50%, -50%) skewY(-18deg);
}

.advice-connector-blocked > b::before,
.advice-connector-blocked > b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(114, 90, 237, 0.34);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.problem-journey.in-view .advice-connector-blocked > b::before {
  animation: advice-barrier-wave 2400ms ease-out 1.62s infinite;
}

.problem-journey.in-view .advice-connector-blocked > b::after {
  animation: advice-barrier-wave 2400ms ease-out 1.82s infinite;
}

@keyframes advice-signal-blocked {
  0%, 14% {
    left: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  48%, 58% {
    left: 43%;
    transform: translate(-50%, -50%) scale(1.18);
  }
  72% {
    left: 29%;
    transform: translate(-50%, -50%) scale(0.88);
  }
  100% {
    left: 0;
    opacity: 0.18;
  }
}

@keyframes advice-barrier-wave {
  0% {
    width: 8px;
    height: 8px;
    opacity: 0.54;
  }
  72%, 100% {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}

.advice-thesis {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0 2px;
}

.advice-thesis > span {
  color: #6559b5;
  font-size: 9px;
  font-weight: 790;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.advice-thesis > p {
  margin: 0;
  max-width: 43ch;
  color: #625d6d;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.008em;
  line-height: 1.48;
}

.journey-axis {
  position: relative;
  margin-top: clamp(38px, 4.5vw, 64px);
}

.journey-rail {
  position: absolute;
  z-index: 0;
  top: 23px;
  right: 5.5%;
  left: 5.5%;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(104, 94, 133, 0.12);
}

.journey-rail span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #315dff, #8252f5 54%, #526df8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.journey-sequence {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(80px, 0.7fr)
    minmax(188px, 1.34fr)
    minmax(80px, 0.7fr)
    minmax(188px, 1.34fr)
    minmax(80px, 0.7fr)
    minmax(188px, 1.34fr)
    minmax(80px, 0.7fr);
  align-items: start;
  gap: clamp(8px, 1vw, 14px);
}

.journey-step {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 520ms ease,
    transform 680ms var(--ease-spring);
  transition-delay: calc(var(--sequence) * 90ms + 260ms);
}

.problem-journey.in-view .journey-rail span {
  transform: scaleX(1);
}

.problem-journey.in-view .journey-step {
  opacity: 1;
  transform: none;
}

.journey-stage {
  text-align: center;
}

.journey-node {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 11px 28px rgba(50, 43, 86, 0.1), inset 0 1px 0 white;
  color: #6d6590;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.journey-stage strong,
.journey-stage small {
  display: block;
}

.journey-stage strong {
  margin-bottom: 7px;
  color: #262333;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 710;
  letter-spacing: -0.03em;
}

.journey-stage small {
  color: #898290;
  font-size: 10px;
  line-height: 1.45;
}

.journey-friction {
  position: relative;
  height: 200px;
  min-height: 200px;
  margin-top: 58px;
  padding: 18px 16px;
  overflow: hidden;
  border: 1px solid rgba(91, 79, 230, 0.15);
  border-radius: 19px;
  background:
    radial-gradient(circle at 50% 0%, rgba(98, 82, 235, 0.11), transparent 38%),
    rgba(251, 250, 255, 0.76);
  box-shadow: 0 14px 30px rgba(62, 51, 128, 0.07);
}

.journey-friction::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 92px;
  height: 92px;
  opacity: 0.34;
  pointer-events: none;
}

.journey-friction:nth-child(2)::after {
  border: 1px solid rgba(94, 80, 226, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(94, 80, 226, 0.045),
    0 0 0 25px rgba(94, 80, 226, 0.03);
}

.journey-friction:nth-child(4)::after {
  background:
    linear-gradient(135deg, transparent 0 32%, rgba(112, 87, 235, 0.16) 32% 34%, transparent 34% 49%, rgba(112, 87, 235, 0.12) 49% 51%, transparent 51% 66%, rgba(112, 87, 235, 0.09) 66% 68%, transparent 68%);
  transform: rotate(-7deg);
}

.journey-friction:nth-child(6)::after {
  right: -9px;
  bottom: -16px;
  width: 86px;
  height: 70px;
  border: 1px solid rgba(91, 78, 221, 0.17);
  border-radius: 13px;
  box-shadow:
    -10px -10px 0 -1px rgba(255, 255, 255, 0.3),
    -10px -10px 0 0 rgba(91, 78, 221, 0.1),
    -20px -20px 0 -1px rgba(255, 255, 255, 0.22),
    -20px -20px 0 0 rgba(91, 78, 221, 0.07);
}

.journey-friction::before {
  content: "";
  position: absolute;
  top: -44px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #6b57ed;
  box-shadow: 0 0 0 0 rgba(107, 87, 237, 0.26);
  transform: translateX(-50%);
}

.problem-journey.in-view .journey-friction::before {
  animation: friction-pulse 2600ms ease-out infinite;
  animation-delay: calc(var(--sequence) * 130ms + 900ms);
}

@keyframes friction-pulse {
  0%, 42% { box-shadow: 0 0 0 0 rgba(107, 87, 237, 0.28); }
  72%, 100% { box-shadow: 0 0 0 11px rgba(107, 87, 237, 0); }
}

.journey-friction > span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 9px;
  color: #6255c7;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-friction > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 9px;
  color: #39334f;
  font-size: 13px;
  line-height: 1.25;
}

.journey-friction > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #746f80;
  font-size: 10px;
  line-height: 1.48;
}

.friction-question-single {
  white-space: nowrap;
}

.journey-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(30px, 3.5vw, 48px);
  padding: 15px 18px;
  border-radius: 16px;
  background: rgba(34, 29, 48, 0.94);
  color: white;
}

.journey-break span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 650;
}

.journey-break i {
  color: #9a83f8;
  font-size: 16px;
  font-style: normal;
}

.journey-break strong {
  background: linear-gradient(90deg, #91aaff, #c29af4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 14px;
  letter-spacing: -0.015em;
}

.problem-stat-range {
  font-size: clamp(70px, 6.6vw, 106px);
}

.coverage-signal {
  position: absolute;
  right: clamp(34px, 3vw, 46px);
  bottom: 104px;
  left: clamp(34px, 3vw, 46px);
  height: 82px;
  overflow: hidden;
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.coverage-signal::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  background:
    repeating-radial-gradient(
      ellipse at 50% 115%,
      transparent 0 13px,
      rgba(83, 91, 223, 0.13) 14px 15px,
      transparent 16px 27px
    );
}

.coverage-signal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(99, 91, 237, 0.16), transparent);
  filter: blur(8px);
  animation: coverage-scan 6.8s ease-in-out infinite;
}

.coverage-signal > span {
  position: absolute;
  top: 14px;
  bottom: 9px;
  left: var(--signal-x);
  width: 1px;
  background: linear-gradient(transparent, rgba(80, 99, 232, 0.24), transparent);
}

.coverage-signal > span:nth-of-type(1) { --signal-x: 23%; }
.coverage-signal > span:nth-of-type(2) { --signal-x: 51%; }
.coverage-signal > span:nth-of-type(3) { --signal-x: 78%; }

.coverage-signal > span i {
  position: absolute;
  top: var(--signal-y, 36%);
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 6px rgba(87, 91, 229, 0.08);
  transform: translate(-50%, -50%);
  animation: coverage-node 3.8s ease-in-out infinite;
}

.coverage-signal > span:nth-of-type(2) i { --signal-y: 66%; animation-delay: -1.3s; }
.coverage-signal > span:nth-of-type(3) i { --signal-y: 25%; animation-delay: -2.6s; }

.coverage-signal > b {
  position: absolute;
  bottom: 9px;
  left: var(--dot-x);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(94, 82, 227, 0.42);
}

.coverage-signal > b:nth-of-type(1) { --dot-x: 12%; }
.coverage-signal > b:nth-of-type(2) { --dot-x: 38%; }
.coverage-signal > b:nth-of-type(3) { --dot-x: 65%; }
.coverage-signal > b:nth-of-type(4) { --dot-x: 89%; }

@keyframes coverage-scan {
  0%, 100% { left: -34%; opacity: 0; }
  18%, 78% { opacity: 1; }
  88% { left: 102%; opacity: 0; }
}

@keyframes coverage-node {
  0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}

.coverage-meter {
  position: absolute;
  right: 35px;
  bottom: 40px;
  left: 35px;
}

.coverage-meter > span {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(81, 71, 112, 0.08);
}

.coverage-meter i {
  display: block;
  width: 92%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #456dff, #8d5af4);
  box-shadow: 0 0 18px rgba(100, 82, 239, 0.24);
}

.coverage-meter small {
  display: block;
  margin-top: 9px;
  color: #8b8493;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.industry-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.industry-timeline::before {
  display: none;
}

.industry-stage {
  --stage-accent: #516eff;
  --stage-soft: rgba(81, 110, 255, 0.1);
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 410px;
  overflow: hidden;
  flex-direction: column;
  padding: clamp(22px, 2.3vw, 34px);
  border: 1px solid rgba(94, 83, 222, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, var(--stage-soft), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(249, 248, 255, 0.61));
  box-shadow:
    0 18px 45px rgba(54, 45, 116, 0.07),
    inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transition:
    border-color 260ms ease,
    box-shadow 420ms var(--ease-spring),
    transform 420ms var(--ease-spring);
}

.industry-stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, transparent, var(--stage-accent), transparent);
  opacity: 0.72;
}

.industry-stage::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: 82px;
  width: 116px;
  height: 116px;
  opacity: 0.27;
  pointer-events: none;
}

.industry-stage > * {
  position: relative;
  z-index: 1;
}

.industry-stage:hover {
  border-color: rgba(94, 83, 222, 0.22);
  box-shadow:
    0 24px 58px rgba(54, 45, 116, 0.12),
    inset 0 1px 0 white;
  transform: translateY(-5px);
}

.industry-stage:nth-child(2) {
  --stage-accent: #665cef;
  --stage-soft: rgba(102, 92, 239, 0.1);
  background:
    radial-gradient(circle at 100% 0%, var(--stage-soft), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(248, 247, 255, 0.61));
}

.industry-stage:nth-child(3) {
  --stage-accent: #8158ed;
  --stage-soft: rgba(129, 88, 237, 0.11);
  background:
    radial-gradient(circle at 100% 0%, var(--stage-soft), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(249, 246, 255, 0.61));
}

.industry-stage:nth-child(4) {
  --stage-accent: #9a55ea;
  --stage-soft: rgba(154, 85, 234, 0.11);
  background:
    radial-gradient(circle at 100% 0%, var(--stage-soft), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(251, 246, 255, 0.61));
}

.industry-stage:nth-child(1)::after {
  background:
    radial-gradient(circle, var(--stage-accent) 0 2px, transparent 3px) 0 0 / 18px 18px;
}

.industry-stage:nth-child(2)::after {
  width: 128px;
  height: 88px;
  border: 1px solid rgba(102, 92, 239, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(102, 92, 239, 0.25) 0 28%, transparent 28%) 16px 16px / 62px 3px no-repeat,
    linear-gradient(90deg, rgba(102, 92, 239, 0.13) 0 74%, transparent 74%) 16px 27px / 84px 3px no-repeat,
    rgba(255, 255, 255, 0.34);
  box-shadow:
    -12px -12px 0 -1px rgba(255, 255, 255, 0.38),
    -12px -12px 0 0 rgba(102, 92, 239, 0.14),
    -24px -24px 0 -1px rgba(255, 255, 255, 0.24),
    -24px -24px 0 0 rgba(102, 92, 239, 0.09);
  opacity: 0.34;
  transform-origin: 50% 50%;
  will-change: transform, box-shadow;
}

.industry-stage:nth-child(3)::after {
  border: 1px solid rgba(129, 88, 237, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 5%, rgba(129, 88, 237, 0.9) 0 4px, rgba(255, 255, 255, 0.9) 5px 7px, transparent 8px),
    conic-gradient(
      from 12deg,
      rgba(129, 88, 237, 0.45) 0 4%,
      transparent 4% 31%,
      rgba(81, 110, 255, 0.28) 31% 35%,
      transparent 35% 72%,
      rgba(129, 88, 237, 0.3) 72% 76%,
      transparent 76%
    );
  box-shadow:
    0 0 0 18px rgba(129, 88, 237, 0.045),
    0 0 0 36px rgba(129, 88, 237, 0.028);
  opacity: 0.38;
  will-change: transform;
}

.industry-stage.in-view:nth-child(2)::after {
  animation: industry-portal-converge 5.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.industry-stage.in-view:nth-child(3)::after {
  animation: industry-navigator-route 7.2s linear infinite;
}

.industry-stage:nth-child(4)::after {
  display: none;
}

.industry-stage:nth-child(4) .industry-solved {
  padding-right: 82px;
}

.chatbot-robot {
  position: absolute !important;
  right: 25px;
  bottom: 99px;
  z-index: 3 !important;
  width: 66px;
  height: 65px;
  pointer-events: none;
  filter: drop-shadow(0 13px 18px rgba(95, 70, 188, 0.2));
  transform-origin: 50% 82%;
  animation: chatbot-robot-float 4.4s ease-in-out infinite;
  will-change: transform;
}

.robot-antenna {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(#b48bf5, #7764ee);
  transform: translateX(-50%);
}

.robot-antenna::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(145deg, #6a73ff, #ac62ef);
  box-shadow: 0 0 0 5px rgba(135, 91, 237, 0.09);
  transform: translateX(-50%);
  animation: chatbot-antenna-pulse 2.4s ease-in-out infinite;
}

.robot-head {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  width: 58px;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 17px 17px 14px 14px;
  background:
    radial-gradient(circle at 25% 12%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(145deg, rgba(252, 252, 255, 0.94), rgba(222, 216, 255, 0.84));
  box-shadow:
    0 10px 24px rgba(74, 58, 147, 0.17),
    inset 0 1px 0 white;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.robot-head::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 6px;
  left: 7px;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(115, 91, 225, 0.22), transparent);
}

.robot-head > i {
  width: 7px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, #576fff, #8f5ae9);
  box-shadow: 0 0 0 4px rgba(113, 92, 234, 0.08);
  animation: chatbot-eye-blink 4.8s ease-in-out infinite;
}

.robot-head > i:nth-child(2) {
  animation-delay: 70ms;
}

.robot-head > b {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 10px;
  height: 3px;
  border-bottom: 1.5px solid #7664d9;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
}

.robot-body {
  position: absolute;
  top: 47px;
  left: 50%;
  width: 40px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(145deg, rgba(235, 239, 255, 0.92), rgba(206, 194, 253, 0.82));
  box-shadow: inset 0 1px 0 white;
  transform: translateX(-50%);
}

.robot-body::before,
.robot-body::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 10px;
  height: 4px;
  border-radius: 99px;
  background: rgba(119, 94, 224, 0.48);
}

.robot-body::before {
  left: -8px;
  transform: rotate(28deg);
}

.robot-body::after {
  right: -8px;
  transform: rotate(-28deg);
  animation: chatbot-arm-wave 2.8s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes chatbot-robot-float {
  0%,
  100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-5px) rotate(1.2deg); }
}

@keyframes chatbot-antenna-pulse {
  0%,
  100% { box-shadow: 0 0 0 3px rgba(135, 91, 237, 0.06); transform: translateX(-50%) scale(0.92); }
  50% { box-shadow: 0 0 0 8px rgba(135, 91, 237, 0.12); transform: translateX(-50%) scale(1); }
}

@keyframes chatbot-eye-blink {
  0%,
  42%,
  48%,
  100% { transform: scaleY(1); }
  45% { transform: scaleY(0.12); }
}

@keyframes chatbot-arm-wave {
  0%,
  100% { transform: rotate(-28deg); }
  50% { transform: rotate(-54deg); }
}

@keyframes industry-portal-converge {
  0%,
  14%,
  100% {
    transform: translate3d(14px, 8px, 0) rotate(2.5deg);
    box-shadow:
      -42px -12px 0 -1px rgba(255, 255, 255, 0.36),
      -42px -12px 0 0 rgba(102, 92, 239, 0.12),
      12px -32px 0 -1px rgba(255, 255, 255, 0.24),
      12px -32px 0 0 rgba(102, 92, 239, 0.08);
  }

  48%,
  68% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    box-shadow:
      -12px -12px 0 -1px rgba(255, 255, 255, 0.42),
      -12px -12px 0 0 rgba(102, 92, 239, 0.16),
      -24px -24px 0 -1px rgba(255, 255, 255, 0.28),
      -24px -24px 0 0 rgba(102, 92, 239, 0.1);
  }
}

@keyframes industry-navigator-route {
  from { transform: rotate(-18deg) scale(0.96); }
  50% { transform: rotate(162deg) scale(1); }
  to { transform: rotate(342deg) scale(0.96); }
}

.industry-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 30px;
}

.industry-stage-head > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 9px 20px rgba(50, 42, 85, 0.08);
  color: var(--stage-accent);
  font-size: 9px;
  font-weight: 760;
}

.industry-stage-head > small {
  color: #8a8391;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: 0.075em;
  text-align: right;
  text-transform: uppercase;
}

.industry-stage h3 {
  margin: 0 0 15px;
  color: #272432;
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 720;
  letter-spacing: -0.035em;
}

.industry-stage > p {
  min-height: 92px;
  margin: 0;
  color: #6f6a7b;
  font-size: 12.5px;
  line-height: 1.52;
}

.industry-stage-copy > span,
.industry-friction-copy > span {
  display: block;
}

.industry-solved {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(94, 83, 222, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(74, 110, 255, 0.08), rgba(139, 86, 241, 0.1));
}

.industry-solved span,
.industry-solved strong {
  display: block;
}

.industry-solved span {
  margin-bottom: 5px;
  color: var(--stage-accent);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.015em;
}

.industry-solved strong {
  color: #4d466b;
  font-size: 13px;
}

.industry-stage > small {
  position: relative;
  display: block;
  min-height: 0;
  margin-top: 15px;
  padding-left: 10px;
  color: #8b8494;
  font-size: 9.5px;
  line-height: 1.5;
}

.industry-stage > small::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.42em;
  left: 0;
  width: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--stage-accent) 42%, transparent);
}

.industry-stage > small b {
  color: #635b7a;
  font-weight: 760;
}

.evolution-thesis {
  grid-template-columns: minmax(0, auto) minmax(220px, auto) 1fr;
  background:
    radial-gradient(circle at 80% 0%, rgba(120, 91, 240, 0.17), transparent 34%),
    #171523;
}

.evolution-chain {
  display: flex;
  align-items: center;
  gap: 8px;
}

.evolution-chain span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
}

.evolution-chain i {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-style: normal;
}

.evolution-thesis > p {
  margin-left: 8px;
}

.content-section {
  padding-block: clamp(104px, 11vw, 176px);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 0.5fr);
  align-items: center;
  gap: clamp(42px, 6vw, 96px);
  margin-bottom: clamp(38px, 4vw, 60px);
}

.section-kicker {
  display: block;
  margin-bottom: 16px;
}

.section-heading h1,
.section-heading h2,
.doni-copy h2,
.contact-card h2 {
  margin-bottom: 0;
  font-size: clamp(38px, 3.65vw, 56px);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.06;
}

.product-page .product-main > .content-section:first-child {
  padding-top: clamp(156px, 13vw, 210px);
}

.section-heading > p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: -0.004em;
  line-height: 1.54;
}

.problem-heading {
  display: block;
  margin-bottom: clamp(30px, 3.2vw, 46px);
}

.problem-heading h2 {
  color: #4b4f78;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 780;
  letter-spacing: 0.105em;
  line-height: 1.25;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: clamp(16px, 1.7vw, 24px);
}

.bento-card {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius-lg);
}

.bento-frictionless {
  grid-column: span 7;
}

.bento-proactive {
  grid-column: span 5;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.45), transparent 28%),
    linear-gradient(148deg, #e4e9ff 0%, #ddd4ff 54%, #f2dcfa 100%);
  box-shadow: var(--shadow-md);
}

.bento-native {
  grid-column: span 12;
  display: grid;
  min-height: 330px;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: 50px;
}

.card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 17px;
}

.card-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #827d91;
  font-size: 11px;
  font-weight: 760;
}

.card-kicker {
  display: block;
  margin: 3px 0 10px;
}

.bento-card h3 {
  max-width: 560px;
  margin-bottom: 13px;
  font-size: clamp(28px, 2.3vw, 39px);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.bento-card p {
  max-width: 570px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: -0.006em;
  line-height: 1.56;
}

.portal-collapse {
  position: absolute;
  right: 3%;
  bottom: 0;
  left: 3%;
  height: 53%;
}

.portal-stack span {
  position: absolute;
  display: grid;
  width: 94px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(61, 51, 93, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 15px 32px rgba(50, 40, 88, 0.09);
  color: #6e687a;
  font-size: 10px;
  font-weight: 700;
}

.portal-stack span:nth-child(1) { top: 10%; left: 3%; }
.portal-stack span:nth-child(2) { bottom: 18%; left: 9%; }
.portal-stack span:nth-child(3) { top: 9%; right: 3%; }
.portal-stack span:nth-child(4) { right: 8%; bottom: 18%; }

.portal-collapse > svg {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 48%;
  color: rgba(95, 83, 133, 0.28);
  transform: translateX(-50%);
}

.one-action {
  position: absolute;
  top: 25%;
  left: 50%;
  display: flex;
  width: 118px;
  height: 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 50px rgba(56, 42, 104, 0.15), 0 0 0 15px rgba(116, 82, 239, 0.05);
  transform: translateX(-50%);
}

.one-action img {
  width: 24px;
  height: 33px;
  object-fit: cover;
}

.one-action span {
  color: #554c65;
  font-size: 9px;
  font-weight: 760;
}

.proactive-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 54%;
}

.time-ring {
  position: absolute;
  right: -10%;
  bottom: -42%;
  width: 88%;
  aspect-ratio: 1;
  border: 1px solid rgba(89, 67, 155, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(255, 255, 255, 0.1),
    0 0 0 64px rgba(255, 255, 255, 0.08);
}

.time-hand {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 2px;
  height: 31%;
  border-radius: 99px;
  background: linear-gradient(var(--violet), rgba(130, 82, 245, 0.15));
  transform-origin: bottom center;
  animation: time-sweep 11s linear infinite;
}

@keyframes time-sweep {
  to { transform: rotate(360deg); }
}

.time-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--violet);
  transform: translate(-50%, -50%);
}

.proactive-notice {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 16%;
  display: flex;
  width: min(84%, 330px);
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 21px;
  animation: notice-pulse 6s ease-in-out infinite;
}

@keyframes notice-pulse {
  0%, 65%, 100% { transform: translateY(0) scale(1); }
  73% { transform: translateY(-8px) scale(1.015); }
}

.proactive-notice img {
  width: 25px;
  height: 35px;
  object-fit: cover;
}

.proactive-notice small,
.proactive-notice strong {
  display: block;
}

.proactive-notice small {
  color: #817a92;
  font-size: 9px;
}

.proactive-notice strong {
  font-size: 12px;
}

.native-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.native-stack span {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(238, 235, 252, 0.62));
  box-shadow: 0 15px 35px rgba(47, 37, 85, 0.08), inset 0 1px 0 white;
  color: #524a64;
  font-size: 12px;
  font-weight: 700;
}

.native-stack span:nth-child(even) {
  transform: translateY(16px);
}

.native-symbol {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #eef1ff, #e7ddff);
  color: var(--violet);
  font-size: 25px;
  font-style: normal;
}

.loop-section {
  padding-top: clamp(40px, 4vw, 70px);
}

.loop-experience {
  padding: clamp(22px, 3vw, 42px);
  border-radius: var(--radius-lg);
}

.loop-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1.1fr;
  align-items: center;
  gap: 10px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.loop-rail > i {
  color: #aaa5b3;
  font-size: 18px;
  font-style: normal;
}

.loop-step {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: transparent;
  color: #7a7484;
  cursor: pointer;
  text-align: left;
}

.loop-step span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 760;
}

.loop-step strong {
  font-size: 13px;
}

.loop-step.active {
  background: var(--ink);
  color: white;
  box-shadow: 0 13px 30px rgba(22, 20, 35, 0.2);
}

.loop-step.active span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.loop-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  min-height: 255px;
  padding: 36px 10px 10px;
}

.loop-icon {
  display: grid;
  width: 100px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 30px;
  background: linear-gradient(145deg, #e6edff, #eee5ff);
  color: var(--blue);
  box-shadow: inset 0 1px 0 white;
  transition: background 300ms ease, color 300ms ease, transform 420ms var(--ease-spring);
}

.loop-icon.changing {
  transform: scale(0.88) rotate(-5deg);
}

.loop-icon svg {
  width: 44px;
}

.loop-detail [data-loop-kicker] {
  display: block;
  margin-bottom: 8px;
  color: #716890;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loop-detail h3 {
  max-width: 680px;
  margin-bottom: 10px;
  font-size: clamp(26px, 3vw, 43px);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.loop-detail p {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
}

.loop-proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.loop-proof span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  color: #736d7e;
  font-size: 10px;
  font-weight: 680;
}

.action-note {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.46);
}

.action-note span,
.action-note strong {
  padding: 16px;
  border-right: 1px solid var(--line);
  color: #777180;
  font-size: 11px;
  text-align: center;
}

.action-note strong {
  border-right: 0;
  background: #eef6f0;
  color: #52725c;
}

.doni-section {
  padding-block: clamp(50px, 7vw, 100px) clamp(100px, 11vw, 170px);
}

.doni-panel {
  position: relative;
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(0, 0.95fr) minmax(450px, 0.85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
  overflow: hidden;
  padding: clamp(42px, 6vw, 86px);
  border: 1px solid rgba(115, 86, 49, 0.08);
  border-radius: 46px;
  background:
    radial-gradient(circle at 78% 35%, rgba(226, 185, 99, 0.25), transparent 30%),
    radial-gradient(circle at 57% 105%, rgba(133, 155, 114, 0.15), transparent 35%),
    linear-gradient(145deg, #fffcf7 0%, #f7f1e5 100%);
  box-shadow: 0 32px 90px rgba(70, 48, 31, 0.1);
}

.doni-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.28'/%3E%3C/svg%3E");
}

.doni-copy {
  position: relative;
  z-index: 2;
}

.doni-copy h2 {
  margin-bottom: 24px;
  color: var(--cocoa);
}

.doni-copy h2 span {
  color: var(--terracotta);
}

.doni-copy > p {
  max-width: 650px;
  margin-bottom: 36px;
  color: #766b62;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
}

.doni-traits {
  display: grid;
  gap: 12px;
}

.doni-traits article {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 17px 0;
  border-top: 1px solid rgba(85, 64, 46, 0.12);
}

.doni-traits article:last-child {
  border-bottom: 1px solid rgba(85, 64, 46, 0.12);
}

.doni-traits span {
  color: var(--cocoa);
  font-size: 13px;
  font-weight: 760;
}

.doni-traits p {
  margin-bottom: 0;
  color: #80756c;
  font-size: 13px;
}

.doni-stage {
  position: relative;
  z-index: 2;
  min-height: 520px;
}

.doni-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: 190px;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(255, 252, 247, 0.86);
  box-shadow: 0 28px 75px rgba(92, 61, 40, 0.17), 0 0 0 22px rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
}

.doni-core img {
  width: 60px;
  height: 84px;
  object-fit: cover;
}

.doni-core span {
  color: var(--cocoa);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.doni-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(121, 89, 60, 0.13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-one {
  width: 72%;
  animation: orbit-breathe 8s ease-in-out infinite;
}

.orbit-two {
  width: 98%;
  border-style: dashed;
  animation: orbit-rotate 45s linear infinite;
}

@keyframes orbit-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.97); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes orbit-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.doni-quote {
  position: absolute;
  z-index: 4;
  padding: 13px 16px;
  border-radius: 16px;
  color: #67594f;
  font-size: 11px;
  font-weight: 700;
  animation: quote-float 7s ease-in-out infinite;
}

.quote-one {
  top: 16%;
  left: -2%;
}

.quote-two {
  top: 28%;
  right: -3%;
  animation-delay: -2.3s;
}

.quote-three {
  right: 10%;
  bottom: 15%;
  animation-delay: -4.6s;
}

@keyframes quote-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.employer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: stretch;
}

.employer-story {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 4vw, 62px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 85%, rgba(167, 131, 255, 0.25), transparent 35%),
    linear-gradient(145deg, #2c3068 0%, #4657a8 46%, #7552a5 100%);
  box-shadow: var(--shadow-lg);
  color: white;
}

.story-quote {
  max-width: 780px;
  margin-bottom: 50px;
  font-size: clamp(28px, 3.15vw, 50px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.story-flow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.story-flow span,
.story-flow strong {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-flow span {
  color: rgba(255, 255, 255, 0.6);
}

.story-flow i {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
}

.employer-outcomes {
  display: grid;
}

.employer-outcomes article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 20px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.employer-outcomes article:last-child {
  border-bottom: 1px solid var(--line);
}

.outcome-icon {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #edf0ff, #eee6ff);
  color: var(--violet);
}

.outcome-icon svg {
  width: 25px;
}

.employer-outcomes h3 {
  margin-bottom: 7px;
  font-size: 20px;
  letter-spacing: -0.018em;
}

.employer-outcomes p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.team-section {
  padding-bottom: clamp(52px, 6vw, 88px);
}

.team-section-heading {
  display: block;
  margin-bottom: clamp(30px, 3.2vw, 46px);
}

.team-section-heading .section-kicker {
  margin-bottom: 0;
}

.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 25px);
  margin-bottom: clamp(16px, 1.8vw, 25px);
}

.founder-grid .team-tile {
  display: block;
  margin: 0;
}

.founder-grid .portrait {
  min-height: clamp(390px, 36vw, 520px);
}

.team-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 25px);
}

.team-masonry .team-tile {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

.team-masonry .portrait {
  width: 100%;
  min-height: clamp(300px, 25vw, 390px);
  flex: 1 1 auto;
}

.team-tile {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(16px, 1.8vw, 25px);
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.team-tile:hover {
  box-shadow: var(--shadow-md);
}

.portrait {
  position: relative;
  display: flex;
  min-height: 280px;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.team-tile-featured .portrait {
  min-height: 430px;
}

.portrait::after {
  content: "";
  position: absolute;
  right: -15%;
  bottom: -30%;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.09), 0 0 0 58px rgba(255, 255, 255, 0.06);
}

.portrait img {
  position: relative;
  z-index: 2;
  width: 88%;
  max-height: 440px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 22px 22px rgba(32, 25, 50, 0.14));
}

.portrait-blue { background: linear-gradient(145deg, #dce8ff, #c9d4f4); }
.portrait-violet { background: linear-gradient(145deg, #e8ddff, #d3c6f0); }
.portrait-warm { background: linear-gradient(145deg, #faeadc, #f0d2c3); }
.portrait-sage { background: linear-gradient(145deg, #deebdf, #c9dccf); }
.portrait-pink { background: linear-gradient(145deg, #f4e0ef, #e4c5dc); }
.portrait-gold { background: linear-gradient(145deg, #f6e8c8, #e8d49f); }
.portrait-mint { background: linear-gradient(145deg, #dff1eb, #c4e2d7); }
.portrait-lilac { background: linear-gradient(145deg, #eee8fb, #d9ccf2); }

.team-tile figcaption {
  padding: 21px 23px 24px;
}

.team-tile figcaption span,
.team-tile figcaption strong,
.team-tile figcaption small {
  display: block;
}

.team-tile figcaption span {
  margin-bottom: 5px;
  color: #7b7585;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-tile figcaption strong {
  margin-bottom: 3px;
  font-size: 19px;
  letter-spacing: -0.018em;
}

.team-tile figcaption small {
  color: var(--muted);
  font-size: 12px;
}

.team-marquee-section {
  position: relative;
  margin-block: 10px;
  padding-block: 0;
  overflow: hidden;
  background: transparent;
}

.team-marquee-heading {
  display: flex;
  width: var(--container);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto clamp(20px, 2.2vw, 30px);
}

.team-marquee-heading .section-kicker {
  margin: 0;
  color: #50577e;
  font-size: clamp(12px, 1vw, 15px);
}

.team-marquee-heading > span:last-child {
  color: #827c8e;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.marquee.team-marquee {
  padding-block: 6px 8px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track.team-marquee-track {
  gap: 0;
  padding-left: 0;
  animation-duration: 104s;
  animation-direction: reverse;
}

.team-sequence {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(14px, 1.3vw, 20px);
  padding-right: clamp(14px, 1.3vw, 20px);
}

.team-marquee-card {
  position: relative;
  display: flex;
  width: clamp(230px, 18.2vw, 292px);
  height: clamp(322px, 24vw, 372px);
  margin: 0;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68);
  transform: translateZ(0);
  transition:
    box-shadow 420ms var(--ease-spring),
    transform 420ms var(--ease-spring);
}

.team-marquee-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.36) 49%, transparent 67%);
  opacity: 0;
  transform: translateX(-78%);
  transition: opacity 220ms ease, transform 720ms var(--ease-spring);
}

.team-marquee-card:nth-child(3n + 2) {
  animation: team-card-drift 5.8s ease-in-out infinite alternate;
}

.team-marquee-card:nth-child(3n) {
  animation: team-card-drift 6.8s ease-in-out -2.4s infinite alternate;
}

.team-marquee-card:hover {
  z-index: 2;
  box-shadow: 0 14px 28px rgba(49, 38, 100, 0.1), inset 0 1px white;
  transform: translateY(-4px) scale(1.015);
}

.team-marquee-card:hover::after {
  opacity: 1;
  transform: translateX(78%);
}

.team-marquee-portrait {
  position: relative;
  display: flex;
  min-height: 0;
  height: 68%;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 16px 8px 0;
}

.team-marquee-portrait::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -18%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.09), 0 0 0 48px rgba(255, 255, 255, 0.055);
}

.team-marquee-portrait img {
  position: relative;
  z-index: 1;
  width: 94%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 20px rgba(31, 24, 50, 0.16));
  transition: transform 520ms var(--ease-spring), filter 360ms ease;
}

.team-marquee-card:hover .team-marquee-portrait img {
  filter: drop-shadow(0 22px 25px rgba(31, 24, 50, 0.22));
  transform: scale(1.045) translateY(-2px);
}

.team-marquee-card figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: center;
  gap: 5px;
  padding: 16px 18px 18px;
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.team-marquee-card figcaption span {
  color: #797286;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.1em;
}

.team-marquee-card figcaption strong {
  color: #201d2c;
  font-size: 17px;
  line-height: 1.1;
}

.team-marquee-card figcaption small {
  color: #716b7a;
  font-size: 10px;
  line-height: 1.35;
}

@keyframes team-card-drift {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

@media (max-width: 640px) {
  .team-marquee-section {
    margin-block: 12px;
  }

  .marquee.team-marquee {
    padding-block: 4px 6px;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .marquee-track.team-marquee-track {
    animation-duration: 92s;
  }

  .team-sequence {
    gap: 12px;
    padding-right: 12px;
  }

  .team-marquee-card {
    width: min(258px, calc(100vw - 96px));
    height: 332px;
    border-radius: 15px;
  }

  .team-marquee-card figcaption {
    padding: 15px 16px 16px;
  }
}

.marquee-section {
  position: relative;
  padding-block: 26px 30px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 255, 0.5) 18%, rgba(247, 247, 255, 0.5) 82%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 15% 22%, rgba(81, 110, 255, 0.055), transparent 32%),
    radial-gradient(circle at 84% 78%, rgba(154, 85, 234, 0.055), transparent 34%);
}

.marquee-label,
.ecosystem-note {
  display: block;
  width: var(--container);
  margin-inline: auto;
}

.marquee-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  color: #6e687b;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.marquee-label::before {
  content: "";
  width: 20px;
  height: 2px;
  flex: 0 0 20px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
}

.marquee-label-second {
  margin-top: 26px;
}

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 25px;
  padding-left: 25px;
  animation: marquee 36s linear infinite;
}

.marquee-reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 54s;
}

.marquee:hover .marquee-track,
.marquee:focus .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  white-space: nowrap;
  color: #4d4857;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.wordmark-track span {
  color: #6b6575;
  font-size: 22px;
  font-weight: 790;
  letter-spacing: -0.03em;
}

.marquee-track i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: linear-gradient(var(--blue), var(--violet));
}

.logo-marquee {
  padding-block: 2px;
}

.university-marquee + .company-marquee {
  margin-top: 16px;
}

.logo-marquee-track {
  gap: 0;
  padding-left: 0;
  animation-duration: 72s;
}

.logo-sequence {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
}

.logo-chip {
  position: relative;
  display: grid;
  width: clamp(126px, 9.5vw, 164px);
  height: 58px;
  margin: 0;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 5px 14px rgba(49, 42, 91, 0.035);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  transition:
    border-color 260ms ease,
    box-shadow 360ms var(--ease-spring),
    transform 360ms var(--ease-spring);
}

.logo-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.58) 46%, transparent 68%);
  opacity: 0;
  transform: translateX(-70%);
  transition:
    opacity 220ms ease,
    transform 600ms var(--ease-spring);
}

.logo-chip:hover {
  z-index: 2;
  border-color: rgba(112, 91, 238, 0.2);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 10px 22px rgba(52, 42, 112, 0.08);
  transform: translateY(-2px) scale(1.015);
}

.logo-chip:hover::after {
  opacity: 1;
  transform: translateX(70%);
}

.logo-chip img {
  position: relative;
  z-index: 1;
  width: calc(100% - 28px);
  height: 34px;
  object-fit: contain;
  filter: saturate(0.78) contrast(0.96);
  opacity: 0.88;
  transition:
    filter 260ms ease,
    opacity 260ms ease,
    transform 360ms var(--ease-spring);
}

.logo-chip:hover img {
  filter: saturate(1) contrast(1);
  opacity: 1;
  transform: scale(1.035);
}

.company-marquee .logo-chip {
  width: clamp(116px, 8.6vw, 148px);
  height: 54px;
  border-radius: 10px;
}

.company-marquee .logo-chip img {
  height: 31px;
}

.logo-chip .logo-wordmark {
  position: relative;
  z-index: 1;
  color: #292630;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1;
}

.logo-chip .logo-wordmark-mit {
  color: #a31f34;
  font-size: 27px;
  font-weight: 850;
}

.logo-chip .logo-wordmark-ual {
  color: #17151c;
  font-size: 27px;
  font-weight: 820;
  text-transform: lowercase;
}

.logo-chip .logo-wordmark-apple {
  font-size: 22px;
  font-weight: 690;
}

.logo-chip .logo-wordmark-oura {
  color: #17151c;
  font-size: 18px;
  font-weight: 560;
}

.logo-chip .logo-wordmark-whoop {
  color: #111318;
  font-size: 17px;
  font-weight: 850;
  transform: skewX(-8deg);
}

.logo-chip .logo-wordmark-garmin {
  color: #164375;
  font-size: 16px;
  font-weight: 820;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.ecosystem-note {
  margin-top: 22px;
  color: #97919d;
  font-size: 10px;
}

.doni-download-dialog {
  width: min(610px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.doni-download-dialog::backdrop {
  background: rgba(29, 25, 43, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.doni-download-panel {
  position: relative;
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 255, 255, 0.94), transparent 26%),
    radial-gradient(circle at 88% 84%, rgba(150, 92, 239, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(241, 245, 255, 0.94), rgba(238, 230, 255, 0.92) 58%, rgba(250, 236, 250, 0.9));
  box-shadow:
    0 42px 110px rgba(28, 23, 53, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  animation: early-access-materialize 420ms var(--ease-spring) both;
  -webkit-backdrop-filter: blur(44px) saturate(165%);
  backdrop-filter: blur(44px) saturate(165%);
}

.doni-download-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.doni-download-panel > * {
  position: relative;
  z-index: 1;
}

.doni-download-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding-right: 44px;
}

.doni-download-icon {
  display: grid;
  width: 78px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow:
    0 18px 38px rgba(72, 53, 146, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.doni-download-icon img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.doni-download-copy {
  display: flex;
  min-width: 0;
  height: 78px;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 2px 1px;
}

.doni-download-copy .modal-kicker {
  line-height: 1;
}

.doni-download-intro h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 0.96;
  white-space: nowrap;
}

.doni-platform-links {
  display: grid;
  gap: 0;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(67, 56, 96, 0.11);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 18px 46px rgba(58, 45, 108, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.doni-platform-link {
  display: grid;
  min-height: 72px;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid rgba(67, 56, 96, 0.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.doni-platform-link:last-child {
  border-bottom: 0;
}

.doni-platform-link span,
.doni-platform-link strong,
.doni-platform-link small {
  display: block;
  letter-spacing: 0;
}

.doni-platform-link strong {
  margin-top: 1px;
  font-size: 15px;
}

.doni-platform-link small {
  color: #7c7585;
  font-size: 10px;
  font-weight: 600;
}

.platform-mark {
  width: 23px;
  height: 27px;
  justify-self: center;
  fill: currentColor;
}

.platform-mark-play {
  width: 26px;
}

.platform-mark-play path:last-child {
  opacity: 0.54;
}

.platform-arrow {
  width: 18px;
  color: #777080;
}

.doni-platform-link:hover {
  transform: scale(0.995);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.doni-platform-link:hover .platform-arrow {
  transform: translateX(3px);
  color: #4d4366;
}

.doni-platform-link:active {
  transform: scale(0.982);
}

.doni-platform-link .platform-arrow {
  transition:
    transform 280ms var(--ease-spring),
    color 180ms ease;
}

.early-access-dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.early-access-dialog::backdrop {
  background: rgba(31, 26, 49, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.early-access-panel {
  position: relative;
  display: grid;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 34px;
  background: rgba(250, 249, 255, 0.9);
  box-shadow:
    0 44px 120px rgba(27, 22, 54, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(44px) saturate(165%);
  backdrop-filter: blur(44px) saturate(165%);
  animation: early-access-materialize 460ms var(--ease-spring) both;
}

.early-access-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.early-access-panel > * {
  position: relative;
  z-index: 1;
}

.dialog-close {
  position: absolute;
  z-index: 5;
  top: 17px;
  right: 17px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(75, 65, 108, 0.09);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 22px rgba(38, 31, 69, 0.08);
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.dialog-close svg {
  width: 17px;
}

.early-access-aside {
  position: relative;
  display: flex;
  min-height: 690px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 36px 38px;
  border-radius: 33px 0 0 33px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.9), transparent 27%),
    radial-gradient(circle at 86% 80%, rgba(187, 104, 232, 0.2), transparent 34%),
    linear-gradient(148deg, rgba(222, 232, 255, 0.96), rgba(226, 215, 255, 0.95) 58%, rgba(245, 222, 248, 0.93));
}

.early-access-aside > * {
  position: relative;
  z-index: 1;
}

.modal-kicker {
  color: #676081;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal-orbit {
  position: absolute;
  z-index: 0;
  top: 11%;
  right: -28%;
  width: 270px;
  aspect-ratio: 1;
  border: 1px solid rgba(106, 83, 222, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 40px rgba(116, 88, 232, 0.035),
    0 0 0 82px rgba(81, 110, 255, 0.025);
}

.modal-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 6px rgba(109, 84, 230, 0.09);
}

.modal-orbit i:nth-child(1) { transform: translate(116px, -5px); }
.modal-orbit i:nth-child(2) { transform: translate(-102px, 58px) scale(0.75); }
.modal-orbit i:nth-child(3) { transform: translate(-8px, -136px) scale(0.58); }

.early-access-aside img {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(83, 62, 153, 0.18));
}

.early-access-aside h2 {
  max-width: 9.5ch;
  margin-bottom: 17px;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 740;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.early-access-aside p {
  max-width: 30ch;
  margin-bottom: 0;
  color: #676071;
  font-size: 14px;
  line-height: 1.55;
}

.early-access-aside ul {
  display: grid;
  gap: 10px;
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
}

.early-access-aside li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4f4961;
  font-size: 11px;
  font-weight: 650;
}

.early-access-aside li span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.54);
  color: #7559df;
  font-size: 8px;
}

.early-access-content {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 50px 48px 38px;
  background: rgba(255, 255, 255, 0.5);
}

.early-access-form,
.early-access-success {
  width: 100%;
}

.early-access-form > header {
  margin-bottom: 25px;
}

.early-access-form h2,
.early-access-success h2 {
  margin: 5px 0 9px;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 740;
  letter-spacing: -0.048em;
  line-height: 1;
}

.early-access-form header p,
.early-access-success p {
  max-width: 46ch;
  margin-bottom: 0;
  color: #756f7f;
  font-size: 13px;
  line-height: 1.55;
}

.audience-fieldset {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.audience-fieldset legend,
.early-access-fields label > span {
  margin-bottom: 8px;
  color: #5f596a;
  font-size: 10px;
  font-weight: 710;
  letter-spacing: 0.015em;
}

.audience-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.audience-options label {
  cursor: pointer;
}

.audience-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.audience-options label > span {
  display: block;
  padding: 8px 11px;
  border: 1px solid rgba(58, 49, 88, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.68);
  color: #6b6575;
  font-size: 10px;
  font-weight: 680;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 260ms ease,
    color 220ms ease,
    transform 260ms var(--ease-spring);
}

.audience-options label:hover > span {
  border-color: rgba(92, 73, 200, 0.18);
  box-shadow: 0 8px 18px rgba(64, 50, 123, 0.08);
  transform: translateY(-1px);
}

.audience-options input:checked + span {
  border-color: transparent;
  background: linear-gradient(135deg, #566dff, #8557ee);
  box-shadow: 0 9px 20px rgba(94, 76, 211, 0.2);
  color: white;
}

.audience-options input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, white);
  outline-offset: 2px;
}

.early-access-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.early-access-fields label {
  display: grid;
  min-width: 0;
}

.early-access-fields label > span {
  display: block;
}

.early-access-fields input,
.early-access-fields select,
.early-access-fields textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(54, 45, 84, 0.11);
  border-radius: 13px;
  outline: 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: 500 13px/1.35 inherit;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 260ms ease;
}

.early-access-fields textarea {
  min-height: 78px;
  resize: vertical;
}

.early-access-fields input::placeholder,
.early-access-fields textarea::placeholder {
  color: #aaa4b1;
}

.early-access-fields input:focus,
.early-access-fields select:focus,
.early-access-fields textarea:focus {
  border-color: rgba(86, 98, 229, 0.46);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 4px rgba(87, 99, 230, 0.09);
}

.early-access-fields .field-wide {
  grid-column: 1 / -1;
}

.early-access-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.early-access-actions > a {
  color: #6e6878;
  font-size: 11px;
  font-weight: 650;
}

.early-access-actions > a:hover {
  color: var(--ink);
}

.early-access-actions [aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

.form-privacy {
  margin: 14px 0 0;
  color: #9a94a1;
  font-size: 9px;
  line-height: 1.45;
}

.early-access-success {
  display: grid;
  justify-items: start;
}

.early-access-success[hidden] {
  display: none;
}

.success-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 25px;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(81, 110, 255, 0.12), rgba(130, 82, 245, 0.14));
  color: #6659e8;
  box-shadow: 0 16px 34px rgba(81, 64, 164, 0.12);
}

.success-mark svg {
  width: 27px;
}

.early-access-success > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}

@keyframes early-access-materialize {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.download-section {
  padding-block: clamp(60px, 8vw, 120px) clamp(120px, 13vw, 190px);
}

.download-card {
  position: relative;
  display: grid;
  min-height: 590px;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  padding: clamp(42px, 6vw, 88px);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: clamp(34px, 4vw, 54px);
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.76), transparent 26%),
    radial-gradient(circle at 20% 100%, rgba(75, 108, 255, 0.13), transparent 36%),
    linear-gradient(138deg, rgba(231, 237, 255, 0.91), rgba(229, 219, 255, 0.86) 55%, rgba(246, 224, 249, 0.86));
  box-shadow:
    0 36px 90px rgba(61, 50, 121, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.download-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.download-copy,
.download-visual {
  position: relative;
  z-index: 1;
}

.download-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.download-brand > img {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(46, 38, 92, 0.16);
  object-fit: cover;
}

.download-brand span,
.download-brand strong,
.download-brand small {
  display: block;
}

.download-brand strong {
  margin-bottom: 3px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.download-brand small {
  color: #777085;
  font-size: 11px;
}

.download-copy h2 {
  max-width: 9ch;
  margin-bottom: 20px;
  color: #201d2c;
  font-size: clamp(46px, 5vw, 74px);
  font-weight: 740;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.download-copy > p {
  max-width: 38ch;
  margin-bottom: 30px;
  color: #696475;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
}

.app-store-button {
  display: inline-flex;
  min-height: 68px;
  align-items: center;
  gap: 13px;
  padding: 10px 20px 10px 17px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: #171522;
  box-shadow: 0 17px 38px rgba(24, 21, 37, 0.22);
  color: white;
}

.app-store-button:hover {
  box-shadow: 0 23px 48px rgba(24, 21, 37, 0.3);
}

.app-store-button > svg {
  width: 28px;
  fill: currentColor;
}

.app-store-button span,
.app-store-button small,
.app-store-button strong {
  display: block;
}

.app-store-button small {
  margin-bottom: 1px;
  font-size: 9px;
  line-height: 1;
}

.app-store-button strong {
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.download-note {
  display: block;
  margin-top: 13px;
  color: #837d8c;
  font-size: 10px;
}

.download-visual {
  min-height: 420px;
}

.download-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(106, 88, 225, 0.17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.download-orbit-one {
  width: 310px;
  box-shadow: 0 0 0 36px rgba(124, 94, 237, 0.035), 0 0 0 72px rgba(81, 110, 255, 0.025);
}

.download-orbit-two {
  width: 205px;
  border-style: dashed;
  animation: download-orbit-spin 15s linear infinite;
}

.download-doni {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 46px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(238, 232, 255, 0.62));
  box-shadow: 0 26px 70px rgba(78, 59, 155, 0.18), inset 0 1px 0 white;
  transform: translate(-50%, -50%) rotate(2deg);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.download-doni img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.install-card {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 7%;
  display: grid;
  width: min(100%, 390px);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  animation: install-card-float 5.6s ease-in-out infinite;
}

.install-card > img {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  object-fit: cover;
}

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

.install-card small {
  margin-bottom: 4px;
  color: #766e8f;
  font-size: 8px;
  font-weight: 740;
  letter-spacing: 0.08em;
}

.install-card strong {
  margin-bottom: 3px;
  color: #2b2738;
  font-size: 14px;
}

.install-card span {
  color: #85808c;
  font-size: 10px;
}

.install-card > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(112, 86, 239, 0.1);
  color: #7356e8;
  font-style: normal;
}

@keyframes download-orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes install-card-float {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}

.contact-section {
  padding-block: 0 clamp(88px, 9vw, 138px);
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 410px;
  align-items: center;
  gap: 50px;
  overflow: hidden;
  padding: clamp(45px, 6vw, 82px);
  border-radius: 42px;
  background:
    radial-gradient(circle at 88% 10%, rgba(199, 159, 255, 0.25), transparent 34%),
    radial-gradient(circle at 10% 100%, rgba(91, 124, 255, 0.2), transparent 40%),
    #f2f1fb;
  box-shadow: var(--shadow-md);
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.23'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: -80%;
  right: -10%;
  width: 45%;
  aspect-ratio: 1;
  border: 1px solid rgba(98, 75, 161, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.08), 0 0 0 96px rgba(255, 255, 255, 0.05);
}

.contact-card > * {
  position: relative;
  z-index: 2;
}

.contact-card h2 {
  max-width: 820px;
  margin-bottom: 20px;
}

.contact-card p {
  max-width: 780px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.56;
}

.contact-thesis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.contact-thesis span,
.contact-thesis strong {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.52);
  color: #655f72;
  font-size: 10px;
  font-weight: 690;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.contact-thesis strong {
  background: linear-gradient(135deg, rgba(81, 110, 255, 0.12), rgba(130, 82, 245, 0.14));
  color: #594bc4;
}

.contact-thesis i {
  color: #857c9d;
  font-size: 11px;
  font-style: normal;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 250px;
}

.contact-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 4px;
  color: #6f687c;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.025em;
}

.contact-status i {
  position: relative;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #6d59ec;
  box-shadow: 0 0 0 5px rgba(109, 89, 236, 0.1);
}

.contact-status i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(109, 89, 236, 0.28);
  border-radius: inherit;
  animation: contact-status-pulse 2.2s ease-out infinite;
}

@keyframes contact-status-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.5);
  }
  68%,
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.site-footer {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(81, 110, 255, 0.06), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(130, 82, 245, 0.07), transparent 34%),
    rgba(250, 249, 253, 0.6);
}

.footer-top {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% - 112px);
  margin-inline: auto;
  padding: 58px 0 0;
}

.footer-identity {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand {
  display: flex;
  width: fit-content;
  align-items: center;
  align-self: start;
  padding: 0;
  border-radius: 7px;
}

.footer-brand strong {
  font-size: 22px;
  letter-spacing: 0;
}

.footer-mission {
  margin: 9px 0 7px;
  color: #393442;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.soc-badge {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.footer-columns {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-self: end;
}

.footer-columns div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-columns div:last-child {
  align-items: flex-end;
  text-align: right;
}

.footer-columns div > span {
  margin-bottom: 5px;
  color: #8d8793;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-columns a,
.footer-columns button {
  padding: 0;
  background: transparent;
  color: #514c59;
  cursor: pointer;
  font-size: 13px;
}

.footer-columns a:hover,
.footer-columns button:hover {
  color: var(--blue);
}

.footer-root {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: calc(100% - 112px);
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 0 max(9px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.footer-root p {
  margin-bottom: 0;
  color: #908a96;
  font-size: 11px;
}

.footer-root a {
  padding: 4px 0;
  border-radius: 7px;
  color: #5f5966;
  font-size: 11px;
  font-weight: 650;
  pointer-events: auto;
}

.footer-wordmark {
  position: absolute;
  z-index: 0;
  bottom: 20px;
  left: 50%;
  display: block;
  width: calc(100% - 112px);
  height: 280px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: center bottom;
  -webkit-user-select: none;
  user-select: none;
}

.footer-wordmark text {
  fill: rgba(45, 39, 61, 0.035);
  stroke: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 300px;
  font-weight: 830;
  letter-spacing: 0;
}

.toast {
  position: fixed;
  z-index: 1000;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(27, 25, 33, 0.92);
  box-shadow: 0 18px 50px rgba(13, 11, 20, 0.26);
  color: white;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 22px) scale(0.96);
  transition: opacity 220ms ease, transform 360ms var(--ease-spring);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: #2e9c59;
}

.toast-icon svg {
  width: 16px;
}

.toast > span:last-child {
  font-size: 12px;
  font-weight: 650;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 720ms ease,
    transform 850ms var(--ease-spring);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.loading-screen {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f8f7fb;
  transition: opacity 420ms ease, visibility 420ms ease;
}

body:not(.is-loading) .loading-screen {
  visibility: hidden;
  opacity: 0;
}

.loading-frame {
  width: min(91vw, 1280px);
}

.loading-nav {
  width: min(100%, 1120px);
  height: 68px;
  margin: 0 auto 76px;
  border-radius: 22px;
}

.loading-hero {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  align-items: center;
  gap: 10%;
}

.loading-line {
  height: 20px;
  margin-bottom: 15px;
  border-radius: 9px;
}

.loading-line-small {
  width: 25%;
  height: 12px;
  margin-bottom: 30px;
}

.loading-line-title {
  width: 90%;
  height: clamp(44px, 6vw, 80px);
}

.loading-line-title.short {
  width: 70%;
}

.loading-line-copy {
  width: 75%;
  height: 17px;
  margin-top: 30px;
}

.loading-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.loading-actions span {
  width: 150px;
  height: 54px;
  border-radius: 16px;
}

.loading-phone {
  width: min(100%, 350px);
  height: 610px;
  justify-self: center;
  border-radius: 58px;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: #e8e6ed;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.35s infinite;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

@media (max-width: 1600px) {
  .footer-top,
  .footer-root,
  .footer-wordmark {
    width: calc(100% - 80px);
  }

  .footer-wordmark {
    bottom: 18px;
    height: 230px;
  }

  .footer-top {
    padding-top: 102px;
  }
}

@media (max-width: 1300px) {
  .footer-wordmark {
    height: 208px;
  }

  .footer-top {
    padding-top: 120px;
  }
}

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

  .floating-context {
    width: 178px;
  }

  .context-sleep {
    left: -8%;
  }

  .context-benefit {
    right: 0;
  }

  .bento-native {
    grid-template-columns: 1fr;
  }

  .doni-panel {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.76fr);
    padding-inline: 52px;
  }

  .footer-top {
    padding-top: 138px;
  }

  .footer-wordmark {
    height: 180px;
  }

  .problem-benefits {
    grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr);
  }
}

@media (max-height: 820px) and (min-width: 921px) {
  .hero {
    --hero-top-padding: 104px;
    --phone-stage-offset: 40px;
    min-height: 100svh;
    padding-bottom: 14px;
  }

  .hero-category {
    min-height: 22px;
  }

  .hero h1 {
    margin-bottom: 15px;
    font-size: clamp(48px, 4.2vw, 64px);
  }

  .hero-lede {
    margin-bottom: 16px;
    font-size: clamp(17px, 1.25vw, 19px);
  }

  .hero-main {
    transform: translateY(8px);
  }

  .hero-copy {
    row-gap: 18px;
  }

  .hero-actions .button {
    min-height: 50px;
  }

  .hero-values {
    margin-top: 0;
    padding-top: 0;
  }

  .hero-values article {
    min-height: 130px;
    gap: 12px;
    padding: 14px 14px 17px;
  }

  .value-card-top {
    gap: 6px;
  }

  .hero-values strong {
    font-size: 17px;
  }

  .value-outcome {
    font-size: 9px;
    letter-spacing: 0.025em;
  }
}

@media (max-width: 920px) {
  :root {
    --container: min(92vw, 780px);
  }

  .desktop-nav {
    display: none;
  }

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

  .menu-button {
    display: grid;
    width: 48px;
    height: 48px;
    place-content: center;
    gap: 6px;
    border-radius: 15px;
    background: var(--ink);
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 19px;
    height: 1.5px;
    border-radius: 99px;
    background: white;
    transition: transform 260ms var(--ease-spring);
  }

  .topbar.menu-open .menu-button span:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }

  .topbar.menu-open .menu-button span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
  }

  .mobile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 220ms ease, transform 320ms var(--ease-spring);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    backdrop-filter: blur(34px) saturate(180%);
  }

  .topbar.menu-open .mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-menu a {
    padding: 13px 15px;
    border-radius: 13px;
    color: #4d4858;
    font-size: 14px;
    font-weight: 650;
  }

  .mobile-menu a:hover {
    background: rgba(43, 35, 65, 0.05);
  }

  .mobile-menu .mobile-menu-cta {
    margin-top: 4px;
    background: var(--ink);
    color: white;
    text-align: center;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 70px;
    padding-top: 150px;
    padding-bottom: 100px;
    text-align: center;
  }

  .hero-copy {
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }

  .hero-main {
    width: 100%;
    transform: none;
  }

  .hero h1 {
    max-width: 760px;
  }

  .hero-lede {
    max-width: 680px;
  }

  .hero-category {
    align-self: center;
  }

  .hero-product {
    height: auto;
    min-height: 660px;
  }

  .iphone {
    top: 50%;
    width: min(76vw, 380px);
    height: auto;
    aspect-ratio: auto;
    transform: translate(-50%, -50%) rotate(1deg);
  }

  .iphone-shell {
    height: auto;
  }

  .context-sleep {
    left: 7%;
  }

  .context-benefit {
    right: 3%;
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 23px;
  }

  .section-heading > p {
    max-width: 680px;
  }

  .problem-cost,
  .problem-benefits,
  .problem-friction,
  .problem-outcomes {
    grid-column: span 12;
  }

  .problem-benefits {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  }

  .access-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 23px;
  }

  .access-heading .section-kicker {
    grid-column: auto;
    margin-bottom: 0;
  }

  .access-heading > p {
    max-width: 680px;
  }

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

  .access-thesis > p {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
  }

  .bento-frictionless,
  .bento-proactive,
  .bento-native {
    grid-column: span 12;
  }

  .bento-native {
    grid-template-columns: 1fr;
  }

  .loop-rail {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .loop-rail > i {
    display: none;
  }

  .loop-step {
    min-height: 54px;
  }

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

  .loop-proof {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 126px;
  }

  .doni-panel {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .doni-stage {
    min-height: 520px;
  }

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

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

  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    flex-direction: row;
    min-width: 0;
  }

  .footer-top {
    width: var(--container);
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-root,
  .footer-wordmark {
    width: var(--container);
  }

  .footer-wordmark {
    height: 124px;
  }
}

@media (max-width: 640px) {
  :root {
    --container: calc(100vw - 32px);
    --radius-lg: 28px;
  }

  html {
    scroll-padding-top: 24px;
  }

  .topbar {
    top: 0;
    width: 100%;
    min-height: 72px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    border-radius: 0;
  }

  .nav-cta {
    min-height: 44px;
    gap: 7px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .nav-cta svg {
    width: 16px;
  }

  .brand-mark {
    width: 36px;
  }

  .brand-name {
    font-size: 17px;
  }

  .menu-button {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .hero {
    gap: 40px;
    padding-top: 132px;
    padding-bottom: 70px;
    text-align: left;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .hero h1 {
    margin-bottom: 22px;
    font-size: clamp(48px, 14vw, 58px);
    letter-spacing: -0.04em;
    line-height: 0.95;
  }

  .headline-line {
    white-space: normal;
  }

  .gradient-text {
    white-space: normal;
  }

  .hero-category {
    width: 100%;
    max-width: 100%;
    align-self: flex-start;
    margin-bottom: 20px;
  }

  .hero-main {
    min-width: 0;
  }

  .hero-lede {
    font-size: 17px;
    line-height: 1.55;
  }

  .hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: 10px;
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
    font-size: 13px;
  }

  .hero-values {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 34px;
  }

  .hero-values article {
    min-height: 134px;
    padding: 17px;
  }

  .hero-values small {
    font-size: 13px;
  }

  .hero-product {
    min-height: 750px;
  }

  .iphone {
    top: 48%;
    width: min(86vw, 342px);
  }

  .iphone-screen {
    min-height: 0;
  }

  .floating-context {
    z-index: 6;
    width: 162px;
    padding: 11px;
  }

  .context-sleep {
    top: 7%;
    left: -2%;
  }

  .context-benefit {
    right: 0;
    bottom: 5%;
  }

  .context-brand-icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  .floating-context strong {
    font-size: 9px;
  }

  .hero-values small span {
    width: 100%;
    text-align: left;
    text-align-last: auto;
    white-space: normal;
  }

  .content-section {
    padding-block: 94px;
  }

  .section-heading h2,
  .access-heading h2,
  .doni-copy h2,
  .contact-card h2 {
    font-size: clamp(34px, 9.5vw, 44px);
  }

  .problem-grid,
  .benefit-gap-grid {
    gap: 13px;
  }

  .problem-grid > article,
  .benefit-gap-grid > article {
    min-height: auto;
  }

  .problem-cost,
  .problem-benefits,
  .problem-friction,
  .problem-outcomes {
    padding: 25px 22px;
  }

  .problem-cost {
    min-height: 420px !important;
  }

  .problem-benefits {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .problem-benefits p {
    width: auto;
    max-width: 100%;
  }

  .benefit-cloud {
    width: 100%;
    min-height: 280px;
    margin-left: 0;
    border-radius: 22px;
  }

  .benefit-cloud-core {
    width: 90px;
    height: 90px;
  }

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

  .friction-path::before,
  .friction-path::after {
    display: none;
  }

  .friction-path span {
    min-height: 105px;
  }

  .friction-path span:nth-child(3),
  .friction-path span:nth-child(5) {
    transform: none;
  }

  .friction-path span:nth-child(5),
  .friction-path strong {
    grid-column: 1 / -1;
  }

  .access-section {
    padding-block: 94px;
  }

  .access-comparison {
    grid-template-columns: 1fr;
  }

  .access-card {
    padding: 25px 22px;
  }

  .access-progress {
    grid-template-columns: 1fr;
  }

  .access-progress i {
    display: none;
  }

  .access-progress span {
    min-height: 55px;
  }

  .access-thesis {
    grid-template-columns: auto auto auto auto;
    padding: 22px;
  }

  .access-thesis > strong {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 21px;
  }

  .bento-card {
    min-height: 480px;
    padding: 25px 22px;
  }

  .bento-native {
    min-height: 610px;
  }

  .card-copy {
    grid-template-columns: 1fr;
  }

  .card-number {
    width: 35px;
    height: 35px;
  }

  .portal-collapse {
    right: -4%;
    left: -4%;
  }

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

  .native-stack span {
    min-height: 125px;
  }

  .native-stack span:nth-child(even) {
    transform: none;
  }

  .loop-experience {
    padding: 16px;
  }

  .loop-detail {
    grid-template-columns: 1fr;
    gap: 19px;
    padding: 27px 5px 9px;
  }

  .loop-icon {
    width: 75px;
    border-radius: 23px;
  }

  .loop-proof {
    grid-column: auto;
    padding-left: 0;
  }

  .action-note {
    grid-template-columns: 1fr 1fr;
  }

  .action-note span:nth-child(2) {
    border-right: 0;
  }

  .action-note span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .doni-section {
    width: 100%;
  }

  .doni-panel {
    padding: 48px 22px 22px;
    border-radius: 0;
  }

  .doni-traits article {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .doni-stage {
    min-height: 440px;
  }

  .doni-core {
    width: 150px;
  }

  .doni-core img {
    width: 48px;
    height: 67px;
  }

  .quote-one {
    left: 1%;
  }

  .quote-two {
    right: 0;
  }

  .quote-three {
    right: 2%;
  }

  .employer-story {
    min-height: 430px;
  }

  .story-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .story-flow i {
    width: 100%;
  }

  .team-masonry {
    grid-template-columns: 1fr;
  }

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

  .portrait,
  .team-tile-featured .portrait,
  .founder-grid .portrait {
    min-height: 380px;
  }

  .contact-card {
    padding: 38px 23px;
    border-radius: 30px;
  }

  .contact-actions {
    flex-direction: column;
  }

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

  .footer-columns div:last-child {
    align-items: flex-start;
    text-align: left;
  }

  .footer-root {
    align-items: flex-end;
    gap: 20px;
  }

  .footer-wordmark {
    height: 88px;
  }

  .loading-nav {
    margin-bottom: 50px;
  }

  .loading-hero {
    grid-template-columns: 1fr;
  }

  .loading-phone {
    display: none;
  }

  .toast {
    width: max-content;
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 1100px) {
  .industry-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-timeline::before {
    display: none;
  }
}

@media (max-width: 920px) {
  .advice-band {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .journey-axis {
    margin-top: 34px;
  }

  .journey-rail {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 22px;
    width: 2px;
    height: auto;
  }

  .journey-rail span {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }

  .problem-journey.in-view .journey-rail span {
    transform: scaleY(1);
  }

  .journey-sequence {
    grid-template-columns: 1fr;
    gap: 13px;
    padding-left: 62px;
  }

  .journey-stage {
    position: relative;
    min-height: 76px;
    padding: 9px 14px;
    text-align: left;
  }

  .journey-node {
    position: absolute;
    top: 5px;
    left: -62px;
    margin: 0;
  }

  .journey-friction {
    height: auto;
    min-height: auto;
    margin-top: 0;
    padding: 17px;
  }

  .friction-question-single {
    white-space: normal;
  }

  .journey-friction::before {
    top: 22px;
    left: -40px;
  }

  .evolution-thesis {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .evolution-thesis > p {
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .problem-journey {
    padding: 24px 20px;
    border-radius: 28px;
  }

  .advice-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .advice-stage {
    min-height: 58px;
    padding: 10px 13px;
  }

  .advice-stage strong {
    font-size: 16px;
  }

  .advice-connector {
    width: 2px;
    height: 26px;
    margin-left: 24px;
    background: linear-gradient(180deg, rgba(72, 102, 255, 0.45), rgba(122, 79, 239, 0.68));
  }

  .advice-connector > i {
    top: 0;
    left: 50%;
  }

  .advice-connector-converge > i {
    animation-delay: 0ms !important;
  }

  .advice-connector-sampling::before,
  .advice-connector-sampling::after,
  .advice-connector-converge::before,
  .advice-connector-converge::after {
    display: none;
  }

  .advice-connector-blocked {
    background:
      linear-gradient(
        180deg,
        rgba(122, 79, 239, 0.68) 0 42%,
        transparent 42% 60%,
        rgba(115, 106, 139, 0.12) 60% 100%
      );
  }

  .advice-connector-blocked > b {
    top: 51%;
    left: 50%;
    width: 27px;
    height: 7px;
    border-width: 2px 0;
    transform: translate(-50%, -50%) skewX(-18deg);
  }

  .problem-journey.in-view .advice-connector > i,
  .problem-journey.in-view .advice-connector-blocked > i {
    animation: none;
  }

  .journey-break {
    flex-wrap: wrap;
    gap: 9px;
    text-align: center;
  }

  .benefit-gap {
    margin-top: 64px;
  }

  .benefit-gap-heading {
    margin-bottom: 14px;
  }

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

  .industry-stage {
    min-height: 320px;
  }

  .evolution-chain {
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  .early-access-dialog {
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .early-access-panel {
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr;
  }

  .early-access-aside {
    min-height: 0;
    padding: 34px 34px 30px;
    border-radius: 33px 33px 0 0;
  }

  .early-access-aside > div:last-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 24px;
  }

  .early-access-aside img {
    grid-row: span 3;
    margin: 0;
  }

  .early-access-aside h2 {
    max-width: none;
    margin-bottom: 10px;
    font-size: clamp(31px, 6vw, 42px);
  }

  .early-access-aside ul {
    display: none;
  }

  .early-access-content {
    padding: 34px;
  }

  .download-card {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .download-copy h2 {
    max-width: 11ch;
  }

  .download-visual {
    min-height: 430px;
  }

  .install-card {
    right: 0;
    bottom: 2%;
  }
}

@media (max-width: 640px) {
  .contact-section {
    padding-bottom: 72px;
  }

  .doni-download-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .doni-download-panel {
    max-height: calc(100dvh - 16px);
    padding: 24px 20px 22px;
    border-radius: 24px;
  }

  .doni-download-intro {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 15px;
    padding-right: 28px;
  }

  .doni-download-icon {
    width: 62px;
    border-radius: 18px;
  }

  .doni-download-copy {
    height: 62px;
    padding-block: 1px 0;
  }

  .doni-download-intro h2 {
    font-size: 23px;
  }

  .doni-download-intro p {
    grid-column: 1 / -1;
    margin-top: 13px;
    font-size: 12px;
  }

  .doni-download-steps {
    margin-block: 20px 18px;
  }

  .doni-download-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: 0;
    gap: 32px;
  }

  .contact-card h2 {
    margin-bottom: 16px;
  }

  .contact-card p {
    font-size: 14px;
  }

  .contact-thesis {
    gap: 6px;
    margin-top: 22px;
  }

  .contact-thesis span,
  .contact-thesis strong {
    padding: 7px 9px;
    font-size: 9px;
  }

  .contact-actions {
    gap: 10px;
  }

  .early-access-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .early-access-panel {
    max-height: calc(100dvh - 16px);
    border-radius: 26px;
  }

  .dialog-close {
    top: 11px;
    right: 11px;
    width: 38px;
    height: 38px;
  }

  .early-access-aside {
    padding: 28px 20px 23px;
    border-radius: 25px 25px 0 0;
  }

  .early-access-aside > div:last-child {
    display: block;
  }

  .early-access-aside img {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
  }

  .early-access-aside h2 {
    padding-right: 34px;
    font-size: 29px;
  }

  .early-access-aside p {
    max-width: 34ch;
    font-size: 12px;
  }

  .modal-orbit {
    top: -30%;
    right: -16%;
    width: 210px;
  }

  .early-access-content {
    padding: 27px 20px 24px;
  }

  .early-access-form > header {
    margin-bottom: 20px;
  }

  .early-access-form h2,
  .early-access-success h2 {
    font-size: 30px;
  }

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

  .audience-options label > span {
    height: 100%;
    text-align: center;
  }

  .early-access-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .early-access-fields .field-wide {
    grid-column: auto;
  }

  .early-access-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .early-access-actions .button {
    width: 100%;
  }

  .download-section {
    padding-block: 64px 96px;
  }

  .download-card {
    gap: 24px;
    padding: 30px 22px 24px;
    border-radius: 31px;
  }

  .download-copy h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .download-visual {
    min-height: 350px;
  }

  .download-orbit-one {
    width: min(72vw, 275px);
  }

  .download-orbit-two {
    width: min(48vw, 185px);
  }

  .download-doni {
    width: 124px;
    border-radius: 38px;
  }

  .install-card {
    width: min(100%, 330px);
    padding: 13px;
    border-radius: 20px;
  }

  .site-footer {
    min-height: 0;
  }

  .footer-top {
    width: var(--container);
    gap: 22px;
    padding: 28px 0 38px;
  }

  .footer-root {
    width: var(--container);
    align-items: center;
  }

  .footer-mission {
    font-size: 12px;
  }

  .footer-wordmark {
    bottom: 72px;
  }

  .footer-wordmark text {
    fill: rgba(45, 39, 61, 0.028);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Product page */
.product-page {
  --product-line: rgba(72, 65, 91, 0.12);
  --product-surface: rgba(255, 255, 255, 0.62);
  --product-strong: #171521;
}

.product-main {
  overflow: hidden;
}

.product-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 0.8fr) minmax(560px, 1.08fr);
  align-items: center;
  gap: 70px;
  padding-top: 132px;
  padding-bottom: 58px;
}

.product-hero::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  width: 62%;
  aspect-ratio: 1.2;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 45%, rgba(58, 102, 255, 0.12), transparent 35%),
    radial-gradient(circle at 68% 48%, rgba(141, 75, 236, 0.12), transparent 38%);
  filter: blur(32px);
  animation: product-hero-aura 18s ease-in-out infinite alternate;
}

@keyframes product-hero-aura {
  to {
    opacity: 0.72;
    transform: translate3d(-4%, 3%, 0) scale(1.04);
  }
}

.product-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.product-hero-copy .section-kicker {
  margin-bottom: 22px;
  color: #555a89;
}

.product-hero-copy h1 {
  margin: 0;
  font-size: 74px;
  font-weight: 750;
  letter-spacing: -0.047em;
  line-height: 0.98;
}

.product-hero-copy > p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #67616e;
  font-size: 19px;
  line-height: 1.55;
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 32px;
}

.product-hero-actions .button {
  min-height: 54px;
  padding-inline: 20px;
}

.button-platform-mark {
  width: 18px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.product-try-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: #5e5867;
  font-size: 13px;
  font-weight: 680;
}

.product-try-button svg,
.product-text-link svg {
  width: 17px;
}

.product-loop-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  color: #8d8793;
  font-size: 10px;
  font-weight: 680;
  text-transform: uppercase;
}

.product-loop-line i {
  color: #b4afbb;
  font-style: normal;
}

.product-loop-line strong {
  color: #554d6c;
}

.product-demo {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(136, 93, 239, 0.16), transparent 30%),
    radial-gradient(circle at 10% 84%, rgba(71, 116, 255, 0.12), transparent 30%),
    rgba(249, 248, 253, 0.72);
  box-shadow:
    0 38px 100px rgba(35, 28, 64, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(42px) saturate(155%);
  backdrop-filter: blur(42px) saturate(155%);
}

.product-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.product-demo > * {
  position: relative;
  z-index: 1;
}

.product-demo-header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--product-line);
}

.product-demo-header div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-demo-header strong {
  font-size: 13px;
}

.product-demo-header small {
  color: #8c8693;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4d78ff;
  box-shadow: 0 0 0 5px rgba(77, 120, 255, 0.08);
  animation: demo-status-pulse 2.8s ease-out infinite;
}

@keyframes demo-status-pulse {
  0%,
  55% {
    box-shadow: 0 0 0 0 rgba(77, 120, 255, 0.2);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(77, 120, 255, 0);
  }
}

.product-demo-thread {
  display: grid;
  min-height: 350px;
  align-content: center;
  gap: 15px;
  padding: 24px 12px 18px;
}

.demo-message {
  max-width: 88%;
  padding: 16px 18px;
  border-radius: 18px;
}

.demo-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.demo-message-user {
  justify-self: end;
  border: 1px solid rgba(91, 76, 138, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(49, 40, 88, 0.06);
}

.demo-message-user small {
  display: block;
  margin-bottom: 5px;
  color: #8d8793;
  font-size: 9px;
  font-weight: 680;
}

.demo-message-heylth {
  justify-self: start;
  border: 1px solid rgba(112, 84, 212, 0.11);
  background: linear-gradient(145deg, rgba(237, 241, 255, 0.88), rgba(242, 232, 252, 0.86));
  box-shadow: 0 15px 34px rgba(57, 43, 118, 0.09);
}

.demo-message-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.demo-message-brand img {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  object-fit: cover;
}

.demo-message-brand span,
.demo-message-brand small,
.demo-message-brand strong {
  display: block;
}

.demo-message-brand small {
  margin-bottom: 2px;
  color: #7d7493;
  font-size: 9px;
}

.demo-message-brand strong {
  font-size: 12px;
}

.demo-approval {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--product-strong);
  box-shadow: 0 12px 24px rgba(23, 21, 33, 0.14);
  color: white;
  font-size: 11px;
  font-weight: 690;
}

.demo-approval svg {
  width: 16px;
}

.demo-permission {
  display: block;
  margin-top: 8px;
  color: #8e8798;
  font-size: 8px;
  text-align: center;
}

.demo-thinking {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  padding: 15px 17px;
  border-radius: 17px;
  background: rgba(238, 234, 250, 0.86);
}

.demo-thinking[hidden] {
  display: none;
}

.demo-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7866db;
  animation: demo-thinking 900ms ease-in-out infinite alternate;
}

.demo-thinking span:nth-child(2) {
  animation-delay: 180ms;
}

.demo-thinking span:nth-child(3) {
  animation-delay: 360ms;
}

@keyframes demo-thinking {
  to {
    opacity: 0.35;
    transform: translateY(-3px);
  }
}

.demo-system-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--product-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.42);
}

.demo-system-rail span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #6f6879;
  font-size: 9px;
  font-weight: 700;
}

.demo-system-rail span i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #b8b2c2;
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    transform 320ms var(--ease-spring);
}

.demo-system-rail span.is-active i {
  background: #765ce5;
  box-shadow: 0 0 0 5px rgba(118, 92, 229, 0.09);
  transform: scale(1.08);
}

.demo-system-rail b {
  color: #aaa3b0;
  font-size: 9px;
}

.demo-prompts {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
}

.demo-prompts::-webkit-scrollbar {
  display: none;
}

.demo-prompts button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(82, 72, 103, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.52);
  color: #716b78;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

.demo-prompts button.is-active {
  border-color: rgba(100, 80, 220, 0.2);
  background: rgba(237, 234, 252, 0.88);
  color: #5d4cb3;
}

.product-demo-composer {
  display: grid;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 6px 6px 15px;
  border: 1px solid rgba(75, 66, 95, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.product-demo-composer:focus-within {
  border-color: rgba(85, 99, 235, 0.32);
  box-shadow: 0 0 0 4px rgba(83, 99, 235, 0.08);
}

.product-demo-composer input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.product-demo-composer input::placeholder {
  color: #9c96a2;
}

.product-demo-composer button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--product-strong);
  color: white;
}

.product-demo-composer button svg {
  width: 17px;
}

.product-overview,
.product-model,
.product-modules {
  padding-block: 144px;
}

.product-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(300px, 0.45fr);
  align-items: end;
  gap: 80px;
  margin-bottom: 58px;
}

.product-section-heading h2,
.product-employer-copy h2,
.product-closing-copy h2 {
  max-width: 860px;
  margin: 0;
  font-size: 56px;
  font-weight: 735;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.product-section-heading > p {
  max-width: 520px;
  margin: 0;
  color: #6e6875;
  font-size: 16px;
  line-height: 1.58;
}

.product-architecture {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(104, 92, 232, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.5);
  box-shadow: 0 26px 72px rgba(41, 34, 75, 0.1);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}

.architecture-interface,
.architecture-memory {
  position: relative;
  display: grid;
  min-height: 92px;
  grid-template-columns: 160px minmax(180px, 0.7fr) minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 20px 24px;
  border: 1px solid var(--product-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
}

.architecture-interface span,
.architecture-memory span {
  color: #777181;
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.architecture-interface strong,
.architecture-memory strong {
  font-size: 22px;
}

.architecture-interface small {
  color: #7b7581;
  font-size: 12px;
}

.architecture-core {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 13px;
}

.architecture-core > i {
  color: #a29baa;
  font-size: 17px;
  font-style: normal;
}

.architecture-node {
  display: grid;
  min-height: 178px;
  align-content: space-between;
  padding: 24px;
  border: 1px solid rgba(74, 65, 100, 0.1);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(47, 39, 86, 0.07);
}

.architecture-node span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.54);
  color: #675b88;
  font-size: 9px;
  font-weight: 760;
}

.architecture-node strong {
  margin-top: 26px;
  font-size: 25px;
}

.architecture-node small {
  color: #716a79;
  font-size: 11px;
}

.architecture-decoder {
  background: linear-gradient(145deg, #e7edff, #eee9ff);
}

.architecture-router {
  background: linear-gradient(145deg, #eee7ff, #f6e8f5);
}

.architecture-orchestrator {
  background: linear-gradient(145deg, #edf1e7, #f5eee4);
}

.architecture-memory {
  grid-template-columns: 190px minmax(0, 1fr) 40px;
  background: rgba(236, 241, 235, 0.72);
}

.architecture-memory i {
  color: #62806a;
  font-size: 22px;
  font-style: normal;
  text-align: right;
}

.product-model {
  border-block: 1px solid var(--product-line);
}

.model-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.model-principles article {
  min-height: 260px;
  padding: 12px 38px 0;
  border-left: 1px solid var(--product-line);
}

.model-principles article:last-child {
  border-right: 1px solid var(--product-line);
}

.model-principles article > span {
  color: #67618b;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-principles h3 {
  max-width: 330px;
  margin: 70px 0 16px;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.model-principles p {
  max-width: 350px;
  margin: 0;
  color: #716b77;
  font-size: 13px;
  line-height: 1.55;
}

.product-modules {
  padding-bottom: 80px;
}

.product-modules-heading {
  margin-bottom: 44px;
}

.module-timeline {
  position: relative;
}

.module-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(74, 105, 255, 0.4), rgba(123, 82, 229, 0.34), rgba(93, 129, 101, 0.38));
}

.product-module {
  position: relative;
  display: grid;
  min-height: 620px;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
  align-items: center;
  gap: 78px;
  padding: 70px 0 70px 92px;
  border-top: 1px solid var(--product-line);
}

.product-module:last-child {
  border-bottom: 1px solid var(--product-line);
}

.module-number {
  position: absolute;
  top: 74px;
  left: -92px;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(91, 78, 135, 0.12);
  border-radius: 12px;
  background: rgba(250, 249, 253, 0.92);
  box-shadow: 0 10px 24px rgba(48, 41, 79, 0.08);
  color: #6c6480;
  font-size: 10px;
  font-weight: 780;
}

.module-copy {
  position: relative;
}

.module-copy .section-kicker {
  margin-bottom: 16px;
}

.module-copy h3 {
  max-width: 620px;
  margin: 0;
  font-size: 42px;
  font-weight: 720;
  letter-spacing: -0.036em;
  line-height: 1.06;
}

.module-copy > p {
  max-width: 620px;
  margin: 24px 0 0;
  color: #69636f;
  font-size: 15px;
  line-height: 1.62;
}

.module-copy ul {
  display: grid;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.module-copy li {
  position: relative;
  padding-left: 18px;
  color: #5f5965;
  font-size: 12px;
  line-height: 1.45;
}

.module-copy li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4f76ff, #8d59e8);
}

.module-router .module-copy,
.module-doni .module-copy {
  order: 2;
}

.module-router .module-visual,
.module-doni .module-visual {
  order: 1;
}

.module-visual {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 26px;
  background:
    radial-gradient(circle at 80% 10%, rgba(130, 91, 232, 0.11), transparent 30%),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    0 28px 70px rgba(43, 35, 79, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}

.decoder-visual {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) 80px minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
}

.decoder-inputs {
  display: grid;
  gap: 9px;
}

.decoder-inputs span {
  padding: 12px 13px;
  border: 1px solid rgba(84, 74, 112, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(49, 41, 85, 0.05);
  color: #716a78;
  font-size: 10px;
}

.decoder-inputs span:nth-child(2),
.decoder-inputs span:nth-child(4) {
  transform: translateX(14px);
}

.decoder-beam {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.decoder-beam::before,
.decoder-beam::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 112, 255, 0.1), rgba(112, 83, 231, 0.62));
  transform-origin: right;
}

.decoder-beam::before {
  transform: rotate(24deg);
}

.decoder-beam::after {
  transform: rotate(-24deg);
}

.decoder-beam i {
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #775ce2;
  box-shadow: 0 0 0 8px rgba(119, 92, 226, 0.08);
  transform: translate(0, -50%);
  animation: decoder-node 3.4s ease-in-out infinite;
}

@keyframes decoder-node {
  50% {
    box-shadow: 0 0 0 14px rgba(119, 92, 226, 0);
    transform: translate(0, -50%) scale(1.15);
  }
}

.decoder-output {
  padding: 22px;
  border: 1px solid rgba(102, 78, 180, 0.12);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(235, 241, 255, 0.94), rgba(241, 232, 251, 0.94));
  box-shadow: 0 18px 40px rgba(65, 48, 132, 0.11);
}

.decoder-output > small,
.decoder-output > strong {
  display: block;
}

.decoder-output > small {
  margin-bottom: 7px;
  color: #746a8f;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.decoder-output > strong {
  font-size: 20px;
}

.decoder-output dl {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}

.decoder-output dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(83, 71, 119, 0.1);
}

.decoder-output dt,
.decoder-output dd {
  margin: 0;
  font-size: 9px;
}

.decoder-output dt {
  color: #837c8c;
}

.decoder-output dd {
  color: #504960;
  font-weight: 720;
}

.router-visual {
  display: grid;
  align-content: center;
  gap: 11px;
  background:
    radial-gradient(circle at 10% 90%, rgba(84, 117, 255, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(241, 237, 253, 0.75), rgba(250, 246, 250, 0.7));
}

.router-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
}

.router-criteria span {
  padding: 7px 9px;
  border: 1px solid rgba(90, 75, 131, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #7c7486;
  font-size: 9px;
  font-weight: 650;
}

.route-option {
  display: grid;
  min-height: 90px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border: 1px solid rgba(78, 69, 100, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.route-option > i {
  width: 8px;
  height: 8px;
  border: 2px solid #bcb5c3;
  border-radius: 50%;
}

.route-option div small,
.route-option div strong,
.route-option div span {
  display: block;
}

.route-option div small {
  color: #8a8391;
  font-size: 8px;
  text-transform: uppercase;
}

.route-option div strong {
  margin: 4px 0;
  font-size: 13px;
}

.route-option div span {
  color: #817a87;
  font-size: 9px;
}

.route-option > b {
  color: #777080;
  font-size: 11px;
}

.route-selected {
  border-color: rgba(88, 87, 225, 0.2);
  background: linear-gradient(145deg, rgba(231, 238, 255, 0.92), rgba(239, 232, 252, 0.92));
  box-shadow: 0 14px 34px rgba(67, 57, 143, 0.11);
  animation: route-selected-breathe 4.8s ease-in-out infinite;
}

.route-selected > i {
  border-color: white;
  background: #6870e7;
  box-shadow: 0 0 0 5px rgba(104, 112, 231, 0.1);
}

.route-selected > b {
  color: #5f56b9;
}

@keyframes route-selected-breathe {
  50% {
    box-shadow: 0 18px 42px rgba(67, 57, 143, 0.15);
    transform: translateY(-2px);
  }
}

.orchestrator-visual {
  display: grid;
  align-content: center;
  gap: 0;
}

.execution-step {
  position: relative;
  display: grid;
  min-height: 82px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--product-line);
}

.execution-step:last-child {
  border-bottom: 0;
}

.execution-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 1px;
  background: #d7d2dd;
}

.execution-step:first-child::before {
  top: 50%;
}

.execution-step:last-child::before {
  bottom: 50%;
}

.execution-step > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d4ceda;
  border-radius: 11px;
  background: #f9f8fb;
  color: #817988;
  font-size: 10px;
  font-weight: 760;
}

.execution-step div strong,
.execution-step div small {
  display: block;
}

.execution-step div strong {
  margin-bottom: 4px;
  font-size: 12px;
}

.execution-step div small {
  color: #8b8491;
  font-size: 9px;
}

.execution-step > b {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(116, 88, 222, 0.1);
  color: #6752b3;
  font-size: 8px;
  white-space: nowrap;
}

.execution-step.is-done > span {
  border-color: rgba(78, 127, 92, 0.14);
  background: #e9f2ea;
  color: #537a5e;
}

.execution-step.is-current > span {
  border-color: rgba(106, 87, 220, 0.18);
  background: #ede9fb;
  color: #6650b5;
  box-shadow: 0 0 0 7px rgba(106, 87, 220, 0.07);
}

.doni-visual {
  display: grid;
  align-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 80% 10%, rgba(162, 94, 228, 0.15), transparent 34%),
    radial-gradient(circle at 14% 90%, rgba(71, 116, 255, 0.13), transparent 32%),
    rgba(248, 246, 252, 0.72);
}

.doni-config {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(81, 71, 105, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 32px rgba(49, 40, 89, 0.08);
}

.doni-config img {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  object-fit: cover;
}

.doni-config div small,
.doni-config div strong {
  display: block;
}

.doni-config div small {
  margin-bottom: 3px;
  color: #857e8e;
  font-size: 9px;
}

.doni-config div strong {
  font-size: 14px;
}

.doni-config > span {
  padding: 7px 9px;
  border-radius: 8px;
  background: #e9f2ea;
  color: #557660;
  font-size: 9px;
  font-weight: 720;
}

.doni-surfaces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.doni-surfaces span {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(82, 71, 106, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: #716978;
  font-size: 9px;
  font-weight: 650;
}

.doni-surfaces i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #e7edff, #eee7fb);
  color: #6656b8;
  font-style: normal;
}

.doni-action {
  padding: 16px;
  border-radius: 14px;
  background: #171521;
  color: white;
}

.doni-action small,
.doni-action strong {
  display: block;
}

.doni-action small {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  text-transform: uppercase;
}

.doni-action strong {
  font-size: 13px;
}

.memory-visual {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(220px, 1fr);
  align-items: center;
  gap: 26px;
  background:
    radial-gradient(circle at 25% 50%, rgba(93, 135, 105, 0.14), transparent 35%),
    rgba(247, 249, 246, 0.74);
}

.memory-orbit {
  position: relative;
  display: grid;
  width: 190px;
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(90, 127, 101, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(93, 135, 105, 0.05), 0 0 0 50px rgba(93, 135, 105, 0.03);
  animation: memory-breathe 7s ease-in-out infinite;
}

.memory-orbit span {
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #e2eee4, #f0eee0);
  box-shadow: 0 16px 34px rgba(68, 98, 76, 0.12);
  color: #516d59;
  font-size: 12px;
  font-weight: 740;
}

.memory-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: #60866a;
  box-shadow: 0 0 0 5px rgba(96, 134, 106, 0.09);
}

.memory-orbit i:nth-child(1) {
  top: 16%;
  left: 12%;
}

.memory-orbit i:nth-child(2) {
  top: 36%;
  right: -1%;
}

.memory-orbit i:nth-child(3) {
  right: 22%;
  bottom: 6%;
}

@keyframes memory-breathe {
  50% {
    box-shadow: 0 0 0 31px rgba(93, 135, 105, 0.04), 0 0 0 58px rgba(93, 135, 105, 0.02);
    transform: scale(1.025);
  }
}

.memory-facts {
  display: grid;
  gap: 9px;
}

.memory-facts span {
  padding: 13px 14px;
  border: 1px solid rgba(78, 106, 86, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.68);
  color: #647068;
  font-size: 10px;
}

.memory-result {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border-radius: 14px;
  background: #1d2820;
  color: white;
}

.memory-result small,
.memory-result strong {
  display: block;
}

.memory-result small {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  text-transform: uppercase;
}

.memory-result strong {
  font-size: 13px;
}

.product-employers {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(620px, 1fr);
  align-items: center;
  gap: 80px;
  margin-block: 80px 144px;
  padding-block: 74px;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
}

.product-employers::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 50%;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-inline: -50vw;
  background:
    radial-gradient(circle at 10% 10%, rgba(71, 109, 255, 0.22), transparent 32%),
    radial-gradient(circle at 90% 85%, rgba(154, 85, 234, 0.18), transparent 34%),
    #191722;
}

.product-employers {
  position: relative;
  z-index: 1;
}

.product-employer-copy .section-kicker {
  color: rgba(255, 255, 255, 0.58);
}

.product-employer-copy h2 {
  color: white;
}

.product-employer-copy p {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.6;
}

.product-employer-outcomes {
  display: grid;
}

.product-employer-outcomes article {
  display: grid;
  grid-template-columns: 44px minmax(0, 0.72fr) minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.product-employer-outcomes article:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.product-employer-outcomes span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 760;
}

.product-employer-outcomes strong {
  font-size: 16px;
}

.product-employer-outcomes p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.5;
}

.product-partner-cta {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: -20px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.product-partner-cta div {
  display: grid;
  gap: 8px;
}

.product-partner-cta span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-partner-cta strong {
  font-size: 19px;
  line-height: 1.2;
}

.product-partner-cta .button {
  flex: 0 0 auto;
}

.product-closing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto;
  align-items: end;
  gap: 80px;
  padding-block: 54px 132px;
}

.product-closing-copy p {
  max-width: 620px;
  margin: 22px 0 0;
  color: #706a76;
  font-size: 16px;
}

.product-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 11px;
}

.product-text-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding-inline: 10px;
  border-radius: 8px;
  color: #5e5867;
  font-size: 12px;
  font-weight: 680;
}

@media (max-width: 1300px) {
  .product-hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1fr);
    gap: 46px;
  }

  .product-hero-copy h1 {
    font-size: 62px;
  }

  .product-demo {
    min-height: 620px;
  }

  .product-section-heading h2,
  .product-employer-copy h2,
  .product-closing-copy h2 {
    font-size: 49px;
  }

  .product-module {
    grid-template-columns: minmax(0, 0.82fr) minmax(450px, 1fr);
    gap: 54px;
  }

  .module-copy h3 {
    font-size: 37px;
  }

  .product-employers {
    grid-template-columns: minmax(0, 0.7fr) minmax(540px, 1fr);
    gap: 54px;
  }
}

@media (max-width: 1100px) {
  .product-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 150px;
    padding-bottom: 90px;
  }

  .product-hero-copy {
    max-width: 800px;
  }

  .product-demo {
    width: min(100%, 780px);
    justify-self: center;
  }

  .product-section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .product-section-heading > p {
    max-width: 700px;
  }

  .product-module {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .module-router .module-copy,
  .module-doni .module-copy,
  .module-router .module-visual,
  .module-doni .module-visual {
    order: initial;
  }

  .module-visual {
    min-height: 430px;
  }

  .product-employers {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .product-employer-copy {
    max-width: 760px;
  }

  .product-partner-cta {
    margin-top: -8px;
  }

  .product-closing {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 34px;
  }

  .product-closing-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .product-hero-copy h1 {
    font-size: 54px;
  }

  .product-hero-copy > p {
    font-size: 17px;
  }

  .product-overview,
  .product-model,
  .product-modules {
    padding-block: 104px;
  }

  .product-section-heading h2,
  .product-employer-copy h2,
  .product-closing-copy h2 {
    font-size: 43px;
  }

  .architecture-interface,
  .architecture-memory {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .architecture-core {
    grid-template-columns: 1fr;
  }

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

  .architecture-node {
    min-height: 138px;
  }

  .architecture-node strong {
    margin-top: 20px;
  }

  .model-principles {
    grid-template-columns: 1fr;
  }

  .model-principles article {
    min-height: 0;
    padding: 30px 0;
    border-top: 1px solid var(--product-line);
    border-left: 0;
  }

  .model-principles article:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--product-line);
  }

  .model-principles h3 {
    margin-top: 34px;
  }

  .product-module {
    padding-left: 72px;
  }

  .module-number {
    left: -72px;
  }

  .decoder-visual {
    grid-template-columns: 1fr;
    align-content: center;
  }

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

  .decoder-inputs span:nth-child(2),
  .decoder-inputs span:nth-child(4) {
    transform: none;
  }

  .decoder-beam {
    width: 110px;
    height: 50px;
    justify-self: center;
    transform: rotate(90deg);
  }

  .memory-visual {
    grid-template-columns: 1fr;
  }

  .product-employer-outcomes article {
    grid-template-columns: 40px 1fr;
  }

  .product-employer-outcomes p {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .product-hero {
    gap: 38px;
    padding-top: 118px;
    padding-bottom: 72px;
  }

  .product-hero-copy h1 {
    font-size: 42px;
    line-height: 1.02;
  }

  .product-hero-copy > p {
    margin-top: 22px;
    font-size: 15px;
  }

  .product-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-hero-actions .button,
  .product-try-button {
    width: 100%;
    justify-content: center;
  }

  .product-loop-line {
    gap: 6px;
    font-size: 8px;
  }

  .product-demo {
    min-height: 0;
    padding: 14px;
    border-radius: 22px;
  }

  .product-demo-thread {
    min-height: 330px;
    padding-inline: 2px;
  }

  .demo-message {
    max-width: 96%;
    padding: 14px;
  }

  .demo-message p {
    font-size: 12px;
  }

  .demo-system-rail {
    gap: 4px;
    padding-inline: 8px;
  }

  .demo-system-rail span {
    font-size: 8px;
  }

  .product-overview,
  .product-model,
  .product-modules {
    padding-block: 82px;
  }

  .product-section-heading {
    margin-bottom: 38px;
  }

  .product-section-heading h2,
  .product-employer-copy h2,
  .product-closing-copy h2 {
    font-size: 36px;
  }

  .product-section-heading > p,
  .product-employer-copy p,
  .product-closing-copy p {
    font-size: 14px;
  }

  .product-architecture {
    padding: 14px;
    border-radius: 22px;
  }

  .architecture-interface,
  .architecture-memory,
  .architecture-node {
    padding: 18px;
  }

  .architecture-interface strong,
  .architecture-memory strong {
    font-size: 19px;
  }

  .product-modules-heading {
    margin-bottom: 22px;
  }

  .module-timeline::before {
    left: 18px;
  }

  .product-module {
    gap: 32px;
    padding: 56px 0 56px 52px;
  }

  .module-number {
    top: 58px;
    left: -52px;
    width: 38px;
    height: 34px;
  }

  .module-copy h3 {
    font-size: 31px;
  }

  .module-copy > p {
    margin-top: 19px;
    font-size: 14px;
  }

  .module-visual {
    min-height: 390px;
    padding: 18px;
    border-radius: 20px;
  }

  .decoder-inputs {
    gap: 6px;
  }

  .decoder-inputs span {
    padding: 9px;
    font-size: 8px;
  }

  .route-option {
    min-height: 82px;
    padding: 12px;
  }

  .route-option > b {
    display: none;
  }

  .execution-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .execution-step > b {
    grid-column: 2;
    width: fit-content;
  }

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

  .memory-orbit {
    width: 160px;
  }

  .product-employers {
    margin-block: 50px 90px;
    padding-block: 58px;
  }

  .product-employer-outcomes article {
    gap: 10px;
  }

  .product-partner-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    padding-top: 24px;
  }

  .product-partner-cta .button {
    width: 100%;
    justify-content: center;
  }

  .product-closing {
    gap: 28px;
    padding-block: 30px 92px;
  }

  .product-closing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-closing-actions .button,
  .product-text-link {
    width: 100%;
    justify-content: center;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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

  .journey-step {
    opacity: 1;
    transform: none;
  }

  .journey-rail span {
    transform: none;
  }

  .journey-friction::before {
    animation: none !important;
  }

  .outcome-meter b {
    transform: none;
  }
}

/* Product immersion and capability narrative */
.product-page {
  --product-blue: #4d73ff;
  --product-violet: #805bea;
  --product-ink: #171521;
  --product-muted: #6d6877;
}

.product-page .topbar {
  box-shadow: 0 14px 45px rgba(38, 31, 73, 0.06);
}

.product-hero {
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  padding-top: 126px;
  padding-bottom: 72px;
}

.product-hero::before {
  top: 6%;
  right: 5%;
  left: 5%;
  width: auto;
  height: 82%;
  aspect-ratio: auto;
  opacity: 0.82;
  background:
    radial-gradient(circle at 16% 30%, rgba(57, 103, 255, 0.12), transparent 29%),
    radial-gradient(circle at 80% 34%, rgba(132, 80, 235, 0.12), transparent 31%),
    radial-gradient(circle at 50% 78%, rgba(54, 61, 173, 0.08), transparent 32%);
  filter: blur(42px);
}

.product-particle-field {
  position: absolute;
  z-index: 0;
  inset: 72px calc(var(--page-gutter) * -0.45) 26px;
  width: calc(100% + var(--page-gutter) * 0.9);
  height: calc(100% - 98px);
  pointer-events: none;
}

.product-hero-copy {
  z-index: 2;
  display: grid;
  width: min(100%, 1040px);
  justify-items: center;
  text-align: center;
}

.product-hero-copy .section-kicker {
  margin-bottom: 15px;
  color: #555b8c;
}

.product-hero-copy h1 {
  max-width: 1010px;
  font-size: 74px;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.product-hero-copy > p {
  max-width: 710px;
  margin-top: 20px;
  font-size: 17px;
}

.product-hero-actions {
  justify-content: center;
  margin-top: 24px;
}

.product-hero-actions .button,
.product-hero-actions .product-try-button {
  min-height: 48px;
}

.product-try-button {
  padding-inline: 16px;
  border: 1px solid rgba(75, 66, 95, 0.09);
  background: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.product-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  --stage-rx: 0deg;
  --stage-ry: 0deg;
}

.product-stage-aura {
  position: absolute;
  z-index: -1;
  inset: 14% 4% -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 42%, rgba(60, 112, 255, 0.2), transparent 38%),
    radial-gradient(circle at 70% 52%, rgba(135, 81, 235, 0.2), transparent 40%);
  filter: blur(72px);
  opacity: 0.72;
  animation: product-stage-breathe 9s ease-in-out infinite alternate;
}

@keyframes product-stage-breathe {
  to {
    opacity: 0.94;
    transform: translate3d(0, -2%, 0) scale(1.025);
  }
}

.product-demo {
  display: grid;
  min-height: 590px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 8%, rgba(137, 93, 239, 0.17), transparent 28%),
    radial-gradient(circle at 6% 88%, rgba(71, 116, 255, 0.13), transparent 30%),
    rgba(249, 249, 253, 0.7);
  box-shadow:
    0 44px 110px rgba(35, 28, 64, 0.16),
    0 6px 20px rgba(35, 28, 64, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: perspective(1500px) rotateX(var(--stage-rx)) rotateY(var(--stage-ry));
  transition: transform 500ms var(--ease-spring), box-shadow 420ms ease;
}

.product-stage.is-tracking .product-demo {
  box-shadow:
    0 52px 130px rgba(35, 28, 64, 0.19),
    0 8px 24px rgba(35, 28, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition: box-shadow 300ms ease;
}

.product-demo-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 42px;
  padding: 0 6px 14px;
  border-bottom-color: rgba(72, 65, 91, 0.09);
}

.product-demo-header > small {
  justify-self: end;
}

.demo-header-state {
  display: inline-flex;
  justify-self: center;
  gap: 7px;
  color: #716a7a;
  font-size: 9px;
  font-weight: 680;
}

.demo-header-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c8cff;
  box-shadow: 0 0 0 5px rgba(108, 140, 255, 0.09);
}

.product-demo-workspace {
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(180px, 0.55fr) minmax(420px, 1.5fr) minmax(205px, 0.62fr);
  gap: 16px;
  padding-block: 18px;
}

.demo-context-column,
.demo-intelligence-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(78, 69, 100, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.demo-panel-label {
  margin-bottom: 5px;
  color: #80798a;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-context-signal {
  display: grid;
  min-height: 68px;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(80, 70, 103, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 9px 22px rgba(48, 40, 82, 0.05);
}

.demo-context-signal > i {
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--product-blue);
  box-shadow: 0 0 0 5px rgba(77, 115, 255, 0.08);
}

.demo-context-signal:nth-of-type(3) > i {
  background: var(--product-violet);
}

.demo-context-signal:nth-of-type(4) > i {
  background: #688b73;
}

.demo-context-signal span,
.demo-context-signal small,
.demo-context-signal strong {
  display: block;
}

.demo-context-signal small {
  margin-bottom: 4px;
  color: #8b8492;
  font-size: 8px;
}

.demo-context-signal strong {
  overflow: hidden;
  color: #4d4755;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-context-signal.is-muted {
  opacity: 0.72;
}

.product-demo-thread {
  min-height: 0;
  align-content: center;
  padding: 12px 10px;
}

.demo-thread-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: #625b6b;
}

.demo-thread-status span {
  font-size: 9px;
  font-weight: 720;
  text-transform: uppercase;
}

.demo-thread-status small {
  color: #98919e;
  font-size: 8px;
}

.demo-message {
  max-width: 94%;
}

.demo-message-user {
  max-width: 82%;
}

.demo-message-heylth {
  max-width: 96%;
  background:
    radial-gradient(circle at 88% 0%, rgba(154, 99, 235, 0.12), transparent 31%),
    linear-gradient(145deg, rgba(235, 241, 255, 0.91), rgba(242, 232, 252, 0.9));
}

.demo-intelligence-column {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.demo-system-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 2px;
  padding: 6px 0;
  border: 0;
  background: transparent;
}

.demo-system-rail::before {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(77, 115, 255, 0.16), rgba(128, 91, 234, 0.4), rgba(87, 127, 99, 0.17));
}

.demo-system-rail span {
  position: relative;
  display: grid;
  min-height: 63px;
  grid-template-columns: 17px minmax(0, 1fr);
  align-content: center;
  column-gap: 9px;
  padding: 8px 0;
}

.demo-system-rail span i {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  grid-row: 1 / 3;
  align-self: center;
}

.demo-system-rail span b,
.demo-system-rail span small {
  display: block;
}

.demo-system-rail span b {
  color: #4f4957;
  font-size: 10px;
}

.demo-system-rail span small {
  margin-top: 3px;
  color: #8e8795;
  font-size: 8px;
}

.demo-outcome-card {
  padding: 13px;
  border: 1px solid rgba(103, 80, 183, 0.1);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(235, 241, 255, 0.86), rgba(242, 233, 252, 0.88));
  box-shadow: 0 12px 26px rgba(58, 45, 113, 0.08);
}

.demo-outcome-card span,
.demo-outcome-card strong,
.demo-outcome-card small {
  display: block;
}

.demo-outcome-card span {
  color: #71668f;
  font-size: 8px;
  font-weight: 730;
  text-transform: uppercase;
}

.demo-outcome-card strong {
  margin: 7px 0 4px;
  font-size: 12px;
}

.demo-outcome-card small {
  color: #817a88;
  font-size: 8px;
}

.product-demo-controls {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
  align-items: end;
  gap: 14px;
}

.demo-prompts,
.product-demo-composer {
  margin-top: 0;
}

.product-loop-line {
  z-index: 2;
  justify-content: center;
  margin-top: 0;
  padding: 10px 16px;
  border: 1px solid rgba(80, 70, 103, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.product-model {
  border-block: 0;
}

.product-modules {
  position: relative;
}

.product-modules-heading {
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.45fr);
  align-items: center;
  margin-bottom: 16px;
}

.module-constellation {
  position: relative;
  width: min(100%, 430px);
  height: 230px;
  justify-self: end;
}

.module-constellation::before,
.module-constellation::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(98, 81, 163, 0.11);
  border-radius: 50%;
  inset: 20px 70px;
}

.module-constellation::after {
  inset: 48px 98px;
  border-color: rgba(79, 112, 255, 0.13);
}

.module-constellation-core,
.module-constellation-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(48, 40, 83, 0.09);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.module-constellation-core {
  top: 50%;
  left: 50%;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(232, 239, 255, 0.92), rgba(240, 232, 252, 0.92));
  color: #514b69;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
}

.module-constellation-node {
  min-width: 82px;
  min-height: 35px;
  padding: 0 11px;
  border-radius: 10px;
  color: #716979;
  font-size: 8px;
  font-weight: 700;
}

.node-decoder {
  top: 17px;
  left: 36px;
}

.node-router {
  top: 6px;
  right: 51px;
}

.node-orchestrator {
  right: 2px;
  bottom: 46px;
}

.node-doni {
  bottom: 5px;
  left: 77px;
}

.node-memory {
  top: 91px;
  left: 0;
}

.module-constellation-orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--product-violet);
  box-shadow: 0 0 0 7px rgba(128, 91, 234, 0.09);
  transform-origin: -123px 0;
  animation: module-constellation-travel 9s linear infinite;
}

@keyframes module-constellation-travel {
  from { transform: translate(123px, -50%) rotate(0deg); }
  to { transform: translate(123px, -50%) rotate(360deg); }
}

.module-timeline {
  display: grid;
  gap: 0;
}

.module-timeline::before {
  display: none;
}

.product-module {
  position: relative;
  min-height: 590px;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1fr);
  gap: 64px;
  padding: 86px 0;
  border: 0;
}

.product-module::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px -8%;
  border-radius: 42px;
  opacity: 0.62;
  background:
    radial-gradient(circle at 12% 50%, rgba(71, 116, 255, 0.065), transparent 30%),
    radial-gradient(circle at 88% 50%, rgba(133, 82, 232, 0.065), transparent 32%);
}

.product-module:nth-child(even)::before {
  transform: scaleX(-1);
}

.product-module:last-child {
  border: 0;
}

.module-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(210px, 0.72fr);
  align-content: center;
  column-gap: 30px;
}

.module-number,
.module-copy .section-kicker,
.module-copy h3 {
  grid-column: 1 / -1;
}

.module-number {
  position: static;
  width: 46px;
  height: 36px;
  margin-bottom: 22px;
  border-color: rgba(93, 78, 145, 0.1);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 24px rgba(48, 41, 79, 0.06);
}

.module-copy h3 {
  max-width: 680px;
  font-size: 40px;
}

.module-copy > p {
  grid-column: 1;
  margin-top: 26px;
  font-size: 14px;
}

.module-copy ul {
  grid-column: 2;
  align-self: start;
  gap: 0;
  margin-top: 26px;
  border-left: 1px solid rgba(87, 76, 117, 0.1);
}

.module-copy li {
  min-height: 48px;
  padding: 8px 0 8px 20px;
}

.module-copy li::before {
  top: 14px;
  left: -3px;
  box-shadow: 0 0 0 5px rgba(96, 91, 225, 0.07);
}

.product-module.in-view .module-copy > * {
  animation: module-copy-enter 720ms var(--ease-spring) both;
}

.product-module.in-view .module-copy > *:nth-child(2) {
  animation-delay: 80ms;
}

.product-module.in-view .module-copy > *:nth-child(3) {
  animation-delay: 140ms;
}

.product-module.in-view .module-copy > *:nth-child(4) {
  animation-delay: 210ms;
}

.product-module.in-view .module-copy > *:nth-child(5) {
  animation-delay: 280ms;
}

@keyframes module-copy-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.module-visual {
  --visual-rx: 0deg;
  --visual-ry: 0deg;
  min-height: 470px;
  transform: perspective(1200px) rotateX(var(--visual-rx)) rotateY(var(--visual-ry));
  transition: transform 520ms var(--ease-spring), box-shadow 420ms ease;
}

.module-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.module-visual > * {
  position: relative;
  z-index: 1;
}

.module-visual.is-tracking {
  box-shadow:
    0 36px 88px rgba(43, 35, 79, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition: box-shadow 280ms ease;
}

.product-module.in-view .decoder-inputs span {
  animation: decoder-input-flow 4.2s ease-in-out infinite;
}

.product-module.in-view .decoder-inputs span:nth-child(2) {
  animation-delay: 250ms;
}

.product-module.in-view .decoder-inputs span:nth-child(3) {
  animation-delay: 500ms;
}

.product-module.in-view .decoder-inputs span:nth-child(4) {
  animation-delay: 750ms;
}

.product-module.in-view .decoder-inputs span:nth-child(5) {
  animation-delay: 1s;
}

@keyframes decoder-input-flow {
  0%,
  65%,
  100% {
    border-color: rgba(84, 74, 112, 0.09);
    box-shadow: 0 8px 18px rgba(49, 41, 85, 0.05);
  }
  18% {
    border-color: rgba(91, 104, 232, 0.22);
    box-shadow: 0 12px 28px rgba(75, 72, 174, 0.12);
  }
}

.product-module.in-view .decoder-output {
  animation: decoder-output-arrive 4.2s ease-in-out infinite;
}

@keyframes decoder-output-arrive {
  0%,
  38% {
    box-shadow: 0 18px 40px rgba(65, 48, 132, 0.08);
  }
  58% {
    box-shadow: 0 22px 48px rgba(84, 61, 171, 0.18), 0 0 0 7px rgba(103, 86, 224, 0.05);
  }
  100% {
    box-shadow: 0 18px 40px rgba(65, 48, 132, 0.08);
  }
}

.product-module.in-view .router-criteria span {
  animation: route-criteria-scan 4.8s ease-in-out infinite;
}

.product-module.in-view .router-criteria span:nth-child(2) {
  animation-delay: 300ms;
}

.product-module.in-view .router-criteria span:nth-child(3) {
  animation-delay: 600ms;
}

.product-module.in-view .router-criteria span:nth-child(4) {
  animation-delay: 900ms;
}

@keyframes route-criteria-scan {
  20% {
    border-color: rgba(101, 85, 211, 0.24);
    background: rgba(238, 235, 253, 0.9);
    color: #5d50aa;
    transform: translateY(-2px);
  }
  45%,
  100% {
    transform: none;
  }
}

.product-module.in-view .execution-step.is-done > span {
  animation: execution-confirm 3.8s ease-in-out infinite;
}

.product-module.in-view .execution-step:nth-child(2) > span {
  animation-delay: 800ms;
}

@keyframes execution-confirm {
  18% {
    box-shadow: 0 0 0 8px rgba(79, 130, 94, 0.08);
    transform: scale(1.08);
  }
  45%,
  100% {
    box-shadow: none;
    transform: none;
  }
}

.product-module.in-view .execution-step.is-current > span {
  animation: execution-current 2.6s ease-in-out infinite;
}

@keyframes execution-current {
  50% {
    box-shadow: 0 0 0 13px rgba(106, 87, 220, 0);
    transform: scale(1.06);
  }
}

.product-module.in-view .doni-surfaces span {
  animation: doni-surface-rise 5.4s ease-in-out infinite;
}

.product-module.in-view .doni-surfaces span:nth-child(2) {
  animation-delay: 350ms;
}

.product-module.in-view .doni-surfaces span:nth-child(3) {
  animation-delay: 700ms;
}

.product-module.in-view .doni-surfaces span:nth-child(4) {
  animation-delay: 1.05s;
}

.product-module.in-view .doni-surfaces span:nth-child(5) {
  animation-delay: 1.4s;
}

.product-module.in-view .doni-surfaces span:nth-child(6) {
  animation-delay: 1.75s;
}

@keyframes doni-surface-rise {
  13% {
    border-color: rgba(101, 83, 208, 0.19);
    box-shadow: 0 13px 28px rgba(64, 51, 119, 0.1);
    transform: translateY(-4px);
  }
  36%,
  100% {
    box-shadow: none;
    transform: none;
  }
}

.product-module.in-view .memory-facts span {
  animation: memory-fact-confirm 5.2s ease-in-out infinite;
}

.product-module.in-view .memory-facts span:nth-child(2) {
  animation-delay: 550ms;
}

.product-module.in-view .memory-facts span:nth-child(3) {
  animation-delay: 1.1s;
}

@keyframes memory-fact-confirm {
  16% {
    border-color: rgba(82, 122, 94, 0.2);
    color: #4f6b57;
    transform: translateX(5px);
  }
  42%,
  100% {
    transform: none;
  }
}

@media (max-width: 1300px) {
  .product-hero-copy h1 {
    font-size: 64px;
  }

  .product-demo-workspace {
    grid-template-columns: minmax(160px, 0.48fr) minmax(380px, 1.35fr) minmax(180px, 0.54fr);
    gap: 12px;
  }

  .product-module {
    grid-template-columns: minmax(0, 0.88fr) minmax(450px, 1fr);
    gap: 48px;
  }

  .module-copy {
    grid-template-columns: 1fr;
  }

  .module-copy > p,
  .module-copy ul {
    grid-column: 1;
  }

  .module-copy ul {
    border-left: 0;
  }

  .module-copy li {
    min-height: 0;
    padding-left: 18px;
  }

  .module-copy li::before {
    left: 0;
  }
}

@media (max-width: 1100px) {
  .product-hero {
    gap: 28px;
    padding-top: 132px;
    padding-bottom: 82px;
  }

  .product-demo {
    width: 100%;
  }

  .product-demo-workspace {
    grid-template-columns: minmax(150px, 0.42fr) minmax(370px, 1.25fr);
  }

  .demo-intelligence-column {
    display: none;
  }

  .product-demo-controls {
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  }

  .product-module {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 72px;
  }

  .module-router .module-copy,
  .module-doni .module-copy {
    order: initial;
  }

  .module-router .module-visual,
  .module-doni .module-visual {
    order: initial;
  }

  .module-copy {
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.75fr);
  }

  .module-copy > p {
    grid-column: 1;
  }

  .module-copy ul {
    grid-column: 2;
    border-left: 1px solid rgba(87, 76, 117, 0.1);
  }

  .module-copy li {
    min-height: 45px;
    padding-left: 20px;
  }

  .module-copy li::before {
    left: -3px;
  }
}

@media (max-width: 820px) {
  .product-hero-copy h1 {
    font-size: 54px;
  }

  .product-hero-copy > p {
    font-size: 16px;
  }

  .product-demo {
    min-height: 0;
    padding: 16px;
  }

  .product-demo-workspace {
    grid-template-columns: 1fr;
  }

  .demo-context-column {
    display: flex;
    overflow-x: auto;
    align-items: stretch;
    padding: 12px;
    scrollbar-width: none;
  }

  .demo-context-column::-webkit-scrollbar {
    display: none;
  }

  .demo-context-column .demo-panel-label {
    display: none;
  }

  .demo-context-signal {
    min-width: 170px;
  }

  .product-demo-thread {
    min-height: 360px;
  }

  .product-demo-controls {
    grid-template-columns: 1fr;
  }

  .product-modules-heading {
    grid-template-columns: 1fr;
  }

  .module-constellation {
    width: min(100%, 430px);
    justify-self: start;
  }

  .module-copy {
    grid-template-columns: 1fr;
  }

  .module-copy > p,
  .module-copy ul {
    grid-column: 1;
  }

  .module-copy ul {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .product-hero {
    gap: 24px;
    padding-top: 112px;
    padding-bottom: 68px;
  }

  .product-hero-copy h1 {
    font-size: 42px;
  }

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

  .product-hero-actions .button,
  .product-try-button {
    width: 100%;
  }

  .product-particle-field {
    inset-inline: -16px;
    width: calc(100% + 32px);
  }

  .product-demo-header {
    grid-template-columns: 1fr auto;
  }

  .demo-header-state {
    display: none;
  }

  .product-demo-workspace {
    gap: 10px;
    padding-block: 12px;
  }

  .demo-context-column {
    margin-inline: -2px;
    padding: 8px;
  }

  .demo-context-signal {
    min-width: 150px;
    min-height: 60px;
  }

  .product-demo-thread {
    min-height: 330px;
    padding-inline: 0;
  }

  .demo-thread-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .demo-message-user,
  .demo-message-heylth {
    max-width: 100%;
  }

  .product-demo-controls {
    gap: 10px;
  }

  .product-loop-line {
    width: 100%;
    gap: 5px;
    border-radius: 15px;
    font-size: 8px;
  }

  .module-constellation {
    height: 205px;
    transform: scale(0.9);
    transform-origin: left center;
  }

  .product-module {
    gap: 28px;
    padding-block: 58px;
  }

  .product-module::before {
    inset-inline: -18px;
  }

  .module-copy h3 {
    font-size: 31px;
  }

  .module-copy > p {
    font-size: 14px;
  }

  .module-visual {
    min-height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-stage-aura,
  .module-constellation-orbit,
  .product-module.in-view .module-copy > *,
  .product-module.in-view .decoder-inputs span,
  .product-module.in-view .decoder-output,
  .product-module.in-view .router-criteria span,
  .product-module.in-view .execution-step > span,
  .product-module.in-view .doni-surfaces span,
  .product-module.in-view .memory-facts span {
    animation: none !important;
  }

  .product-demo,
  .module-visual {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .product-demo,
  .demo-context-column,
  .demo-intelligence-column,
  .module-constellation-core,
  .module-constellation-node,
  .module-visual {
    background-color: #f8f7fb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Full-screen sleep workflow */
.product-hero {
  min-height: 0;
  justify-content: flex-start;
  gap: 0;
  padding-top: 100px;
  padding-bottom: 36px;
}

.product-particle-field {
  z-index: 3;
  top: 84px;
  bottom: 14px;
  opacity: 1;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0 48%, #000 84%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0 48%, #000 84%);
}

.workspace-demo {
  height: clamp(640px, calc(100svh - 200px), 760px);
  min-height: 640px;
  max-height: 760px;
  padding: 14px;
}

.workspace-demo .product-demo-header {
  grid-template-columns: minmax(210px, 1fr) auto minmax(350px, 1fr);
  min-height: 48px;
  padding: 0 5px 10px;
}

.workspace-title,
.workspace-title > span,
.workspace-title strong,
.workspace-title small {
  display: flex;
}

.workspace-title {
  align-items: center;
  gap: 10px;
}

.workspace-title > span:last-child {
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.workspace-title strong {
  color: var(--product-ink);
  font-size: 13px;
}

.workspace-title small {
  color: #8c8592;
  font-size: 8px;
}

.workspace-header-actions {
  display: flex;
  justify-self: end;
  gap: 7px;
}

.workspace-platform-link,
.workspace-replay {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(75, 66, 95, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 20px rgba(42, 35, 72, 0.05);
  color: #5c5663;
  font-size: 9px;
  font-weight: 700;
}

.workspace-platform-link:first-child,
.workspace-app-store-link {
  background: #191621;
  color: white;
}

.workspace-platform-link .button-platform-mark {
  width: 13px;
  height: 16px;
}

.workspace-replay svg {
  width: 14px;
}

.workspace-demo .product-demo-workspace {
  min-height: 0;
  grid-template-columns: minmax(210px, 0.56fr) minmax(480px, 1.45fr) minmax(250px, 0.72fr);
  gap: 14px;
  padding-block: 10px;
}

.workspace-signal-column,
.workspace-execution-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(78, 69, 100, 0.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 20% 0%, rgba(80, 119, 255, 0.07), transparent 34%),
    rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.workspace-oura-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(80, 70, 103, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 11px 25px rgba(48, 40, 82, 0.06);
}

.workspace-oura-card > div:first-child {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.workspace-oura-card img {
  width: 50px;
  height: 30px;
  object-fit: contain;
}

.workspace-oura-card span,
.workspace-oura-card small,
.workspace-oura-card strong {
  display: block;
}

.workspace-oura-card small {
  margin-bottom: 3px;
  color: #8b8492;
  font-size: 8px;
}

.workspace-oura-card strong {
  color: #4e4855;
  font-size: 10px;
  line-height: 1.25;
}

.oura-night-chart {
  position: relative;
  display: flex;
  height: 44px;
  align-items: end;
  gap: 4px;
  padding: 7px 0 17px;
  border-top: 1px solid rgba(80, 70, 103, 0.07);
}

.oura-night-chart i {
  width: 100%;
  height: 35%;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #7863e5, #6e91ff);
  opacity: 0.58;
  transform-origin: bottom;
  animation: oura-night-wave 3.8s ease-in-out infinite;
}

.oura-night-chart i:nth-child(2),
.oura-night-chart i:nth-child(5),
.oura-night-chart i:nth-child(9) {
  height: 70%;
  animation-delay: 260ms;
}

.oura-night-chart i:nth-child(3),
.oura-night-chart i:nth-child(8) {
  height: 95%;
  background: linear-gradient(180deg, #9a5ae7, #7b66e4);
  animation-delay: 520ms;
}

.oura-night-chart i:nth-child(4),
.oura-night-chart i:nth-child(10),
.oura-night-chart i:nth-child(12) {
  height: 50%;
  animation-delay: 780ms;
}

.oura-night-chart span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #7d7489;
  font-size: 7px;
  font-weight: 690;
}

@keyframes oura-night-wave {
  0%,
  100% {
    opacity: 0.48;
    transform: scaleY(0.78);
  }
  45% {
    opacity: 0.9;
    transform: scaleY(1);
  }
}

.workspace-demo[data-phase="doni"] [data-workspace-signal],
.workspace-demo[data-phase="decoder"] [data-workspace-signal] {
  animation: workspace-signal-read 2.6s ease-in-out infinite;
}

.workspace-demo:is([data-phase="doni"], [data-phase="decoder"]) [data-workspace-signal]:nth-child(3) {
  animation-delay: 220ms;
}

.workspace-demo:is([data-phase="doni"], [data-phase="decoder"]) [data-workspace-signal]:nth-child(4) {
  animation-delay: 440ms;
}

.workspace-demo:is([data-phase="doni"], [data-phase="decoder"]) [data-workspace-signal]:nth-child(5) {
  animation-delay: 660ms;
}

@keyframes workspace-signal-read {
  18% {
    border-color: rgba(85, 102, 226, 0.2);
    box-shadow: 0 14px 32px rgba(61, 57, 137, 0.12);
    transform: translateX(3px);
  }
  42%,
  100% {
    transform: none;
  }
}

.workspace-flow-board {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 11px;
  padding: 3px;
}

.workspace-user-signal {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(80, 70, 103, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 10px 24px rgba(48, 40, 82, 0.05);
}

.workspace-user-signal > span {
  color: #807887;
  font-size: 8px;
  font-weight: 720;
  text-transform: uppercase;
}

.workspace-user-signal p {
  margin: 0;
  color: #423d49;
  font-size: 11px;
  line-height: 1.45;
}

.workspace-flow-steps {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items: center;
  gap: 5px;
}

.workspace-flow-steps > i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(92, 83, 119, 0.13);
}

.workspace-flow-steps > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #7466e5, transparent);
  transform: translateX(-100%);
}

.workspace-demo[data-phase="decoder"] .workspace-flow-steps > i:nth-of-type(1)::after,
.workspace-demo[data-phase="router"] .workspace-flow-steps > i:nth-of-type(-n + 2)::after,
.workspace-demo[data-phase="orchestrator"] .workspace-flow-steps > i::after {
  animation: workspace-connector 900ms ease forwards;
}

@keyframes workspace-connector {
  to { transform: translateX(100%); }
}

.workspace-flow-steps button {
  display: grid;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-content: center;
  column-gap: 8px;
  padding: 8px;
  border: 1px solid rgba(79, 70, 101, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.46);
  text-align: left;
}

.workspace-flow-steps button > span {
  display: grid;
  width: 25px;
  height: 25px;
  grid-row: 1 / 3;
  place-items: center;
  align-self: center;
  border-radius: 8px;
  background: rgba(236, 234, 245, 0.9);
  color: #847c8c;
  font-size: 7px;
  font-weight: 760;
}

.workspace-flow-steps strong,
.workspace-flow-steps small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-flow-steps strong {
  color: #5a545f;
  font-size: 9px;
}

.workspace-flow-steps small {
  margin-top: 2px;
  color: #958e9a;
  font-size: 7px;
}

.workspace-flow-steps button.is-active {
  border-color: rgba(99, 83, 211, 0.2);
  background: linear-gradient(145deg, rgba(233, 239, 255, 0.9), rgba(240, 232, 252, 0.9));
  box-shadow: 0 14px 30px rgba(67, 55, 139, 0.11);
}

.workspace-flow-steps button.is-active > span {
  background: linear-gradient(145deg, #5978ff, #8a5be5);
  box-shadow: 0 0 0 6px rgba(103, 87, 219, 0.07);
  color: white;
}

.workspace-flow-steps button.is-complete > span {
  background: rgba(234, 231, 244, 0.92);
  box-shadow: inset 0 0 0 1px rgba(103, 89, 151, 0.08);
  color: #70687c;
}

.workspace-analysis {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(93, 75, 151, 0.09);
  border-radius: 17px;
  background:
    radial-gradient(circle at 78% 20%, rgba(143, 92, 233, 0.12), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(71, 116, 255, 0.1), transparent 33%),
    rgba(248, 248, 253, 0.66);
}

.workspace-insight {
  z-index: 2;
  grid-area: 1 / 1;
  display: none;
  align-self: center;
  max-width: 66%;
  gap: 9px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transition: none;
}

.workspace-insight.is-active {
  display: grid;
  opacity: 1;
  transform: none;
  animation: workspace-insight-enter 520ms var(--ease-spring) both;
}

@keyframes workspace-insight-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

.workspace-insight > span {
  color: #655b94;
  font-size: 8px;
  font-weight: 760;
  text-transform: uppercase;
}

.workspace-insight > strong {
  color: var(--product-ink);
  font-size: 21px;
  line-height: 1.08;
}

.workspace-insight > p {
  max-width: 400px;
  margin: 0;
  color: #6f6876;
  font-size: 10px;
  line-height: 1.48;
}

.workspace-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-skill-chips small {
  padding: 6px 8px;
  border: 1px solid rgba(94, 79, 151, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: #655b75;
  font-size: 8px;
  font-weight: 680;
}

.workspace-confidence {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.workspace-confidence i {
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #6b7eef;
  box-shadow: 0 0 0 5px rgba(107, 126, 239, 0.08);
}

.workspace-confidence small {
  color: #827b89;
  font-size: 8px;
}

.workspace-flow-orb {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10%;
  width: 126px;
  aspect-ratio: 1;
  border: 1px solid rgba(105, 85, 190, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(105, 85, 190, 0.045),
    0 0 0 56px rgba(82, 111, 236, 0.025);
  transform: translateY(-50%);
}

.workspace-flow-orb > span {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfaff, #d9ddff 47%, #c8baf1 100%);
  box-shadow: 0 18px 38px rgba(72, 60, 140, 0.15);
  animation: workspace-core-breathe 3.8s ease-in-out infinite;
}

.workspace-flow-orb i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #765fe2;
  box-shadow: 0 0 0 6px rgba(118, 95, 226, 0.08);
  transform-origin: -63px 0;
  animation: workspace-orbit 5.8s linear infinite;
}

.workspace-flow-orb i:nth-child(2) {
  background: #5e84ff;
  transform-origin: 63px 0;
  animation-direction: reverse;
  animation-duration: 7.2s;
}

@keyframes workspace-core-breathe {
  50% { transform: scale(1.08); }
}

@keyframes workspace-orbit {
  from { transform: translate(63px, -50%) rotate(0deg); }
  to { transform: translate(63px, -50%) rotate(360deg); }
}

.workspace-execution-column {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 82% 8%, rgba(139, 86, 230, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.38);
}

.workspace-funding-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(235, 232, 242, 0.66);
}

.workspace-funding-tabs span {
  display: grid;
  min-height: 28px;
  place-items: center;
  border-radius: 7px;
  color: #817986;
  font-size: 7px;
  font-weight: 700;
}

.workspace-demo[data-phase="router"] .workspace-funding-tabs span {
  animation: workspace-funding-scan 2.2s ease-in-out infinite;
}

.workspace-demo[data-phase="router"] .workspace-funding-tabs span:nth-child(2) {
  animation-delay: 300ms;
}

.workspace-demo[data-phase="router"] .workspace-funding-tabs span:nth-child(3) {
  animation-delay: 600ms;
}

@keyframes workspace-funding-scan {
  18% {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 18px rgba(57, 48, 103, 0.08);
    color: #5c50a5;
  }
  48%,
  100% {
    box-shadow: none;
  }
}

.workspace-match-card {
  padding: 11px;
  border: 1px solid rgba(85, 75, 111, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0.48;
  transform: translateY(5px);
  transition: opacity 320ms ease, transform 480ms var(--ease-spring), box-shadow 320ms ease;
}

.workspace-match-card small,
.workspace-match-card strong,
.workspace-match-card span {
  display: block;
}

.workspace-match-card > small {
  color: #898290;
  font-size: 7px;
  text-transform: uppercase;
}

.workspace-match-card > strong {
  margin: 5px 0 7px;
  color: #4a4550;
  font-size: 10px;
}

.workspace-match-card > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #696174;
  font-size: 8px;
}

.workspace-match-card > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7463dc;
}

.workspace-demo[data-phase="router"] .workspace-match-card,
.workspace-demo[data-phase="orchestrator"] .workspace-match-card {
  opacity: 1;
  transform: none;
}

.workspace-demo[data-phase="router"] .workspace-match-card:first-of-type {
  border-color: rgba(99, 83, 211, 0.18);
  box-shadow: 0 14px 30px rgba(66, 52, 129, 0.1);
}

.workspace-orchestration {
  display: grid;
  align-self: end;
  gap: 4px;
  opacity: 0.4;
  transition: opacity 320ms ease;
}

.workspace-orchestration > div {
  display: grid;
  min-height: 40px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.workspace-orchestration > div > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(88, 77, 116, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: #6c6574;
  font-size: 8px;
  font-weight: 750;
}

.workspace-orchestration p,
.workspace-orchestration strong,
.workspace-orchestration small {
  display: block;
  margin: 0;
}

.workspace-orchestration strong {
  color: #5b5561;
  font-size: 8px;
}

.workspace-orchestration small {
  margin-top: 2px;
  color: #918a96;
  font-size: 7px;
}

.workspace-demo[data-phase="orchestrator"] .workspace-orchestration {
  opacity: 1;
}

.workspace-demo[data-phase="orchestrator"] .workspace-orchestration > div > span {
  animation: workspace-check-in 1.8s ease-in-out both;
}

.workspace-demo[data-phase="orchestrator"] .workspace-orchestration > div:nth-child(2) > span {
  animation-delay: 300ms;
}

.workspace-demo[data-phase="orchestrator"] .workspace-orchestration > div:nth-child(3) > span {
  animation-delay: 600ms;
}

@keyframes workspace-check-in {
  45% {
    border-color: rgba(77, 126, 91, 0.18);
    background: #e5f0e7;
    box-shadow: 0 0 0 7px rgba(78, 126, 92, 0.06);
    color: #557761;
    transform: scale(1.08);
  }
  100% {
    border-color: rgba(77, 126, 91, 0.13);
    background: #e5f0e7;
    box-shadow: none;
    color: #557761;
  }
}

.workspace-calendar-card {
  display: grid;
  min-height: 58px;
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(106, 82, 190, 0.11);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(233, 239, 255, 0.9), rgba(241, 233, 252, 0.9));
  box-shadow: 0 12px 28px rgba(60, 47, 116, 0.08);
  opacity: 0.45;
  text-align: left;
  transform: translateY(6px);
}

.workspace-calendar-card span,
.workspace-calendar-card small,
.workspace-calendar-card strong {
  display: block;
}

.workspace-calendar-card > span:first-child {
  padding-right: 8px;
  border-right: 1px solid rgba(84, 72, 118, 0.1);
  text-align: center;
}

.workspace-calendar-card small {
  color: #807889;
  font-size: 7px;
}

.workspace-calendar-card strong {
  margin-block: 2px;
  color: #4d4658;
  font-size: 9px;
}

.workspace-calendar-card svg {
  width: 14px;
  color: #6958bd;
}

.workspace-demo[data-phase="orchestrator"] .workspace-calendar-card {
  opacity: 1;
  transform: none;
  animation: workspace-calendar-arrive 700ms var(--ease-spring) both;
}

@keyframes workspace-calendar-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

.workspace-commandbar {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 14px;
}

.workspace-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(75, 66, 95, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.46);
}

.workspace-progress span {
  display: grid;
  min-height: 30px;
  place-items: center;
  padding-inline: 8px;
  border-radius: 8px;
  color: #847d89;
  font-size: 7px;
  font-weight: 720;
}

.workspace-progress i {
  height: 1px;
  background: linear-gradient(90deg, rgba(86, 112, 231, 0.16), rgba(126, 87, 225, 0.34));
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 500ms var(--ease-spring);
}

.workspace-progress span.is-active {
  background: linear-gradient(145deg, #6078ef, #855ae1);
  box-shadow: 0 8px 18px rgba(78, 62, 170, 0.17);
  color: white;
}

.workspace-progress span.is-complete {
  background: rgba(234, 231, 244, 0.86);
  box-shadow: inset 0 0 0 1px rgba(103, 89, 151, 0.07);
  color: #70687c;
}

.workspace-progress i.is-complete {
  transform: scaleX(1);
}

.workspace-composer {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  padding: 4px 4px 4px 13px;
  border: 1px solid rgba(75, 66, 95, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.workspace-composer:focus-within {
  border-color: rgba(85, 99, 235, 0.32);
  box-shadow: 0 0 0 4px rgba(83, 99, 235, 0.08);
}

.workspace-composer input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--product-ink);
  font: inherit;
  font-size: 10px;
}

.workspace-composer input::placeholder {
  color: #9b94a0;
}

.workspace-composer button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #191621;
  color: white;
}

.workspace-composer button svg {
  width: 15px;
}

@media (max-width: 1180px) {
  .workspace-demo {
    height: auto;
    min-height: 730px;
    max-height: none;
  }

  .workspace-demo .product-demo-header {
    grid-template-columns: 1fr auto;
  }

  .workspace-demo .demo-header-state {
    display: none;
  }

  .workspace-demo .product-demo-workspace {
    grid-template-columns: minmax(190px, 0.48fr) minmax(430px, 1.3fr);
  }

  .workspace-execution-column {
    grid-column: 1 / -1;
    grid-template-columns: 130px repeat(2, minmax(180px, 1fr)) minmax(220px, 1.15fr) minmax(220px, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  .workspace-execution-column .demo-panel-label {
    grid-column: 1 / -1;
  }

  .workspace-funding-tabs {
    align-self: stretch;
  }

  .workspace-orchestration {
    align-self: center;
  }
}

@media (max-width: 820px) {
  .product-hero {
    padding-top: 90px;
  }

  .workspace-demo {
    min-height: 0;
    padding: 14px;
  }

  .workspace-demo .product-demo-header {
    align-items: start;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .workspace-header-actions {
    width: 100%;
    justify-self: stretch;
  }

  .workspace-platform-link,
  .workspace-replay {
    flex: 1;
  }

  .workspace-demo .product-demo-workspace {
    display: grid;
    grid-template-columns: 1fr;
  }

  .workspace-signal-column {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  .workspace-signal-column .demo-panel-label,
  .workspace-oura-card {
    grid-column: 1 / -1;
  }

  .workspace-signal-column .demo-context-signal {
    min-width: 0;
  }

  .workspace-flow-board {
    min-height: 520px;
  }

  .workspace-flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workspace-flow-steps > i {
    display: none;
  }

  .workspace-flow-steps button {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .workspace-flow-steps button > span {
    grid-row: auto;
  }

  .workspace-flow-steps small {
    display: none;
  }

  .workspace-insight {
    max-width: 72%;
    padding: 20px;
  }

  .workspace-flow-orb {
    right: 6%;
    width: 108px;
  }

  .workspace-execution-column {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .workspace-execution-column .demo-panel-label,
  .workspace-funding-tabs,
  .workspace-orchestration,
  .workspace-calendar-card {
    grid-column: 1 / -1;
  }

  .workspace-commandbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .product-hero {
    padding-top: 82px;
  }

  .workspace-platform-link,
  .workspace-replay {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 8px;
  }

  .workspace-signal-column {
    grid-template-columns: 1fr;
  }

  .workspace-signal-column .demo-panel-label,
  .workspace-oura-card {
    grid-column: auto;
  }

  .workspace-flow-board {
    min-height: 560px;
  }

  .workspace-user-signal {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .workspace-flow-steps {
    gap: 4px;
  }

  .workspace-flow-steps button {
    min-height: 58px;
    padding: 6px 3px;
  }

  .workspace-flow-steps strong {
    font-size: 7px;
  }

  .workspace-insight {
    max-width: 100%;
    align-self: start;
    padding: 19px;
  }

  .workspace-insight > strong {
    font-size: 18px;
  }

  .workspace-flow-orb {
    top: auto;
    right: 50%;
    bottom: 34px;
    width: 104px;
    transform: translateX(50%);
  }

  .workspace-execution-column {
    grid-template-columns: 1fr;
  }

  .workspace-execution-column .demo-panel-label,
  .workspace-funding-tabs,
  .workspace-orchestration,
  .workspace-calendar-card {
    grid-column: auto;
  }

  .workspace-progress {
    gap: 4px;
  }

  .workspace-progress span {
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oura-night-chart i,
  .workspace-demo [data-workspace-signal],
  .workspace-flow-steps > i::after,
  .workspace-flow-orb > span,
  .workspace-flow-orb i,
  .workspace-funding-tabs span,
  .workspace-orchestration > div > span,
  .workspace-calendar-card {
    animation: none !important;
  }
}

/* Architecture map and full-bleed capability story */
.product-overview {
  padding-block: 96px 62px;
}

.product-overview-heading {
  margin-bottom: 34px;
}

.product-overview-heading h2 {
  margin: 0;
  color: #555b84;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.2;
}

.product-architecture {
  gap: 12px;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(circle at 12% 12%, rgba(77, 115, 255, 0.09), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(128, 91, 234, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    0 32px 84px rgba(43, 35, 79, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.product-architecture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.architecture-interface,
.architecture-memory {
  z-index: 1;
  min-height: 82px;
  border-color: rgba(86, 75, 118, 0.06);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 12px 30px rgba(46, 38, 80, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.architecture-interface {
  grid-template-columns: 130px 100px 180px minmax(360px, 1fr);
}

.architecture-interface span,
.architecture-memory span {
  color: #666184;
  letter-spacing: 0;
}

.architecture-interface strong,
.architecture-memory strong {
  color: var(--product-ink);
  font-size: 20px;
}

.architecture-interface small,
.architecture-memory small {
  color: #7b7584;
  font-size: 10px;
}

.architecture-surface-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.architecture-surface-list b {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid rgba(91, 80, 124, 0.065);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(241, 240, 247, 0.7));
  box-shadow:
    0 8px 20px rgba(45, 38, 75, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #5f5968;
  font-size: 8px;
  font-weight: 690;
}

.architecture-surface-list b > span {
  overflow: hidden;
  color: #5f5968;
  font-size: 8px;
  font-weight: 690;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.surface-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.icon-island::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 1px;
  width: 22px;
  height: 10px;
  border-radius: 999px;
  background: #17151d;
  box-shadow:
    inset -5px 0 0 rgba(86, 108, 239, 0.34),
    0 4px 10px rgba(28, 24, 43, 0.15);
}

.icon-island::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #91a2ff;
  box-shadow: 0 0 8px rgba(103, 126, 255, 0.75);
  animation: native-island-pulse 2.8s ease-in-out infinite;
}

@keyframes native-island-pulse {
  50% {
    opacity: 0.48;
    transform: scale(0.72);
  }
}

.icon-siri {
  border-radius: 50%;
  background: conic-gradient(from 45deg, #5b8cff, #8d62e8, #df78ce, #63b9ef, #5b8cff);
  box-shadow: 0 5px 14px rgba(97, 92, 205, 0.2);
  animation: native-siri-turn 6s linear infinite;
}

.icon-siri::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

@keyframes native-siri-turn {
  to { transform: rotate(360deg); }
}

.icon-shortcuts::before,
.icon-shortcuts::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 13px;
  height: 13px;
  border: 2px solid #7a66dd;
  border-radius: 4px;
  transform: rotate(45deg);
}

.icon-shortcuts::after {
  border-color: #6288f2;
  transform: translate(4px, 4px) rotate(45deg);
}

.icon-backtap::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 14px;
  height: 22px;
  border: 1.5px solid #6e667a;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.46);
}

.icon-backtap::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 5px;
  height: 5px;
  border: 1.5px solid #7a65dd;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(122, 101, 221, 0.1),
    0 0 0 6px rgba(98, 134, 241, 0.055);
  animation: native-backtap-pulse 2.4s ease-out infinite;
}

@keyframes native-backtap-pulse {
  70% {
    box-shadow:
      0 0 0 6px rgba(122, 101, 221, 0),
      0 0 0 10px rgba(98, 134, 241, 0);
  }
}

.architecture-interface::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(87, 112, 237, 0.5), rgba(132, 88, 225, 0.44), transparent);
  transform: scaleX(0.18);
  transform-origin: left;
  animation: architecture-interface-scan 5.4s ease-in-out infinite;
}

@keyframes architecture-interface-scan {
  45%,
  70% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
    transform-origin: right;
  }
}

.architecture-core {
  position: relative;
  z-index: 1;
  gap: 10px;
}

.architecture-core > i {
  position: relative;
  width: 28px;
  height: 1px;
  overflow: visible;
  background: rgba(105, 91, 151, 0.16);
  color: transparent;
  font-size: 0;
}

.architecture-core > i::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #7363e2;
  box-shadow: 0 0 0 5px rgba(115, 99, 226, 0.07);
  animation: architecture-packet 3.2s ease-in-out infinite;
}

.architecture-core > i:nth-of-type(2)::after {
  animation-delay: 1.1s;
}

@keyframes architecture-packet {
  0%,
  18% {
    opacity: 0;
    transform: translateX(0) scale(0.7);
  }
  32%,
  76% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
    transform: translateX(22px) scale(1);
  }
}

.architecture-node,
.architecture-decoder,
.architecture-router,
.architecture-orchestrator {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  border-color: rgba(84, 73, 116, 0.06);
  background:
    radial-gradient(circle at 100% 0%, rgba(120, 91, 228, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(250, 250, 253, 0.82), rgba(243, 244, 251, 0.72));
  box-shadow:
    0 16px 38px rgba(48, 40, 83, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.architecture-node::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #637cff, #8a5de6, transparent);
  opacity: 0;
  transform: translateX(-45%);
  animation: architecture-node-scan 6.4s ease-in-out infinite;
}

.architecture-router::after {
  animation-delay: 1.2s;
}

.architecture-orchestrator::after {
  animation-delay: 2.4s;
}

@keyframes architecture-node-scan {
  12% {
    opacity: 0;
  }
  22%,
  46% {
    opacity: 0.9;
    transform: translateX(0);
  }
  60%,
  100% {
    opacity: 0;
    transform: translateX(45%);
  }
}

.architecture-node span {
  width: auto;
  height: auto;
  place-items: start;
  border: 0;
  background: transparent;
  color: #67618a;
  font-size: 8px;
  letter-spacing: 0;
}

.architecture-node strong {
  color: var(--product-ink);
}

.architecture-node small {
  max-width: 230px;
  color: #77717d;
}

.architecture-memory {
  grid-template-columns: 165px minmax(280px, 1fr) minmax(260px, 0.8fr) 36px;
  background:
    linear-gradient(90deg, rgba(237, 241, 255, 0.72), rgba(243, 237, 252, 0.7)),
    rgba(255, 255, 255, 0.58);
}

.architecture-memory i {
  color: #7463d2;
  animation: architecture-memory-turn 5s ease-in-out infinite;
}

@keyframes architecture-memory-turn {
  50% {
    color: #5578e8;
    transform: rotate(-190deg);
  }
}

.product-modules {
  padding-top: 74px;
  padding-bottom: 0;
}

.product-modules-heading {
  min-height: 210px;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 0.52fr);
  align-items: center;
  gap: 70px;
  margin-bottom: 0;
}

.product-modules-heading h2 {
  max-width: 620px;
  color: #555b84;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.15;
}

.module-nebula-shell {
  position: relative;
  width: min(100%, 440px);
  height: 190px;
  justify-self: end;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 50%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 50%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
}

.module-nebula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.module-nebula-shell > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.96), rgba(205, 211, 255, 0.74) 26%, rgba(132, 96, 229, 0.34) 54%, transparent 72%);
  filter: blur(1px);
  box-shadow:
    0 0 30px rgba(93, 119, 242, 0.22),
    0 0 72px rgba(128, 87, 226, 0.18);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: module-nebula-breathe 5.2s ease-in-out infinite;
}

@keyframes module-nebula-breathe {
  50% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.16);
  }
}

.product-module {
  isolation: isolate;
  min-height: 560px;
  padding: 74px 0;
  border: 0;
}

.product-module::before,
.product-module:nth-child(even)::before {
  inset: 0 calc(50% - 50vw);
  border-radius: 0;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(circle at 14% 48%, rgba(70, 114, 255, 0.075), transparent 30%),
    radial-gradient(circle at 86% 52%, rgba(130, 82, 231, 0.07), transparent 31%),
    linear-gradient(90deg, rgba(245, 247, 255, 0.72), rgba(249, 247, 253, 0.58));
}

.product-module:nth-child(even)::before {
  background:
    radial-gradient(circle at 84% 48%, rgba(70, 114, 255, 0.075), transparent 30%),
    radial-gradient(circle at 16% 52%, rgba(130, 82, 231, 0.07), transparent 31%),
    linear-gradient(270deg, rgba(245, 247, 255, 0.72), rgba(249, 247, 253, 0.58));
}

.product-module:nth-child(even) .module-copy {
  order: 2;
}

.product-module:nth-child(even) .module-visual {
  order: 1;
}

.module-copy > p strong {
  display: block;
  margin-bottom: 8px;
  color: #3f394a;
  font-size: 15px;
}

.module-copy ul {
  border-left-color: rgba(95, 82, 141, 0.07);
}

.module-visual {
  border: 0;
  background:
    radial-gradient(circle at 82% 8%, rgba(130, 82, 231, 0.085), transparent 32%),
    radial-gradient(circle at 12% 90%, rgba(73, 115, 255, 0.065), transparent 30%),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    0 28px 74px rgba(47, 39, 82, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.execution-step.is-done > span,
.workspace-orchestration > div > span {
  border-color: rgba(99, 84, 176, 0.11);
  background: rgba(235, 232, 249, 0.92);
  color: #6f5ec8;
}

.demo-context-signal:nth-of-type(4) > i {
  background: #7463dc;
}

.doni-config > span {
  background: rgba(235, 232, 249, 0.92);
  color: #695abc;
}

.memory-visual {
  background:
    radial-gradient(circle at 50% 44%, rgba(126, 91, 229, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.52);
}

.memory-facts span,
.memory-result {
  border-color: rgba(91, 78, 145, 0.08);
  background: rgba(255, 255, 255, 0.64);
}

@keyframes execution-confirm {
  18% {
    box-shadow: 0 0 0 8px rgba(105, 88, 210, 0.07);
    transform: scale(1.08);
  }
  45%,
  100% {
    box-shadow: none;
    transform: none;
  }
}

@keyframes workspace-check-in {
  45% {
    border-color: rgba(102, 83, 201, 0.2);
    background: rgba(235, 232, 249, 0.94);
    box-shadow: 0 0 0 7px rgba(105, 88, 210, 0.06);
    color: #6d5bc7;
    transform: scale(1.08);
  }
  100% {
    border-color: rgba(102, 83, 201, 0.13);
    background: rgba(235, 232, 249, 0.94);
    box-shadow: none;
    color: #6d5bc7;
  }
}

@keyframes memory-fact-confirm {
  16% {
    border-color: rgba(101, 83, 202, 0.2);
    color: #6555b7;
    transform: translateX(5px);
  }
  42%,
  100% {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .architecture-interface {
    grid-template-columns: 120px 90px minmax(130px, 0.7fr) minmax(320px, 1fr);
  }

  .architecture-memory {
    grid-template-columns: 150px minmax(260px, 1fr) minmax(220px, 0.7fr) 32px;
  }

  .product-module:nth-child(even) .module-copy,
  .product-module:nth-child(even) .module-visual {
    order: initial;
  }
}

@media (max-width: 820px) {
  .product-overview {
    padding-block: 72px 82px;
  }

  .product-overview-heading h2 {
    font-size: 18px;
  }

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

  .architecture-interface small {
    text-align: right;
  }

  .architecture-surface-list {
    grid-column: 1 / -1;
  }

  .architecture-core {
    grid-template-columns: 1fr;
  }

  .architecture-core > i {
    width: 1px;
    height: 20px;
    justify-self: center;
  }

  .architecture-core > i::after {
    top: 0;
    left: -3px;
    animation-name: architecture-packet-vertical;
  }

  @keyframes architecture-packet-vertical {
    0%,
    18% {
      opacity: 0;
      transform: translateY(0) scale(0.7);
    }
    32%,
    76% {
      opacity: 1;
    }
    88%,
    100% {
      opacity: 0;
      transform: translateY(15px) scale(1);
    }
  }

  .architecture-node {
    min-height: 138px;
  }

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

  .architecture-memory strong,
  .architecture-memory small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .product-architecture {
    margin-inline: -8px;
    padding: 10px;
    border-radius: 20px;
  }

  .architecture-interface,
  .architecture-memory {
    padding: 16px;
  }

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

  .product-module {
    padding-block: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .architecture-interface::after,
  .architecture-core > i::after,
  .architecture-node::after,
  .architecture-memory i {
    animation: none !important;
  }
}

/* Live contextual intelligence scenes */
.workspace-signal-column {
  gap: 6px;
}

.workspace-signal-column .demo-context-signal {
  min-height: 46px;
  padding: 7px 9px;
}

.workspace-signal-column .demo-context-signal small {
  margin-bottom: 2px;
  font-size: 7px;
}

.workspace-signal-column .demo-context-signal strong {
  font-size: 8px;
}

.workspace-demo[data-phase="doni"] [data-workspace-signal]:nth-child(4),
.workspace-demo[data-phase="decoder"] [data-workspace-signal]:nth-child(4) {
  animation-delay: 360ms;
}

.workspace-demo[data-phase="doni"] [data-workspace-signal]:nth-child(5),
.workspace-demo[data-phase="decoder"] [data-workspace-signal]:nth-child(5) {
  animation-delay: 540ms;
}

.workspace-demo[data-phase="doni"] [data-workspace-signal]:nth-child(6),
.workspace-demo[data-phase="decoder"] [data-workspace-signal]:nth-child(6) {
  animation-delay: 720ms;
}

.workspace-demo[data-phase="doni"] [data-workspace-signal]:nth-child(7),
.workspace-demo[data-phase="decoder"] [data-workspace-signal]:nth-child(7) {
  animation-delay: 900ms;
}

.workspace-insight {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(210px, 0.82fr) minmax(250px, 1.18fr);
  align-self: stretch;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}

.workspace-insight-copy {
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 9px;
}

.workspace-insight-copy > span {
  color: #655b94;
  font-size: 8px;
  font-weight: 760;
  text-transform: uppercase;
}

.workspace-insight-copy > strong {
  color: var(--product-ink);
  font-size: 20px;
  line-height: 1.08;
}

.workspace-insight-copy > p {
  max-width: 330px;
  margin: 0;
  color: #6f6876;
  font-size: 9px;
  line-height: 1.5;
}

.workspace-phase-viz {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(91, 78, 145, 0.06);
  border-radius: 16px;
  background:
    radial-gradient(circle at 75% 18%, rgba(133, 91, 230, 0.12), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(73, 115, 255, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 42px rgba(48, 40, 83, 0.045);
}

.workspace-phase-viz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.workspace-insight.is-active .workspace-phase-viz {
  animation: workspace-viz-enter 680ms var(--ease-spring) both;
}

@keyframes workspace-viz-enter {
  from {
    opacity: 0;
    transform: translateX(14px) scale(0.975);
  }
}

.doni-signal-viz::before,
.router-skill-viz::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  aspect-ratio: 1;
  border: 1px solid rgba(106, 89, 188, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(108, 90, 190, 0.04),
    0 0 0 56px rgba(78, 114, 237, 0.025);
  transform: translate(-50%, -50%);
}

.viz-core,
.router-need-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 94px;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(235, 241, 255, 0.95), rgba(242, 234, 252, 0.94));
  box-shadow: 0 18px 42px rgba(63, 50, 128, 0.13);
  transform: translate(-50%, -50%);
}

.viz-core img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.viz-core strong,
.viz-core small,
.router-need-core strong,
.router-need-core small {
  display: block;
  text-align: center;
}

.viz-core strong {
  margin-top: 3px;
  color: #50485e;
  font-size: 10px;
}

.viz-core small,
.router-need-core small {
  color: #81788c;
  font-size: 6px;
}

.viz-source,
.router-skill {
  position: absolute;
  z-index: 3;
  display: grid;
  min-height: 31px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(88, 76, 126, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(50, 42, 84, 0.07);
  color: #625b6e;
  font-size: 7px;
  font-weight: 720;
}

.source-oura {
  top: 16%;
  left: 8%;
}

.source-location {
  top: 12%;
  right: 7%;
}

.source-activity {
  right: 5%;
  bottom: 15%;
}

.source-calendar {
  bottom: 10%;
  left: 7%;
}

.doni-signal-viz > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7562dd;
  box-shadow: 0 0 0 6px rgba(117, 98, 221, 0.07);
  transform-origin: -72px 0;
  animation: workspace-source-orbit 5.8s linear infinite;
}

.doni-signal-viz > i:nth-of-type(2) {
  transform-origin: 72px 0;
  animation-direction: reverse;
  animation-duration: 7.2s;
}

.doni-signal-viz > i:nth-of-type(3) {
  transform-origin: -104px 0;
  animation-duration: 9s;
}

@keyframes workspace-source-orbit {
  from { transform: translate(72px, -50%) rotate(0deg); }
  to { transform: translate(72px, -50%) rotate(360deg); }
}

.workspace-insight.is-active .viz-source {
  animation: workspace-source-arrive 3.6s ease-in-out infinite;
}

.workspace-insight.is-active .viz-source:nth-of-type(2) {
  animation-delay: 420ms;
}

.workspace-insight.is-active .viz-source:nth-of-type(3) {
  animation-delay: 840ms;
}

.workspace-insight.is-active .viz-source:nth-of-type(4) {
  animation-delay: 1.26s;
}

@keyframes workspace-source-arrive {
  14% {
    border-color: rgba(103, 85, 206, 0.2);
    box-shadow: 0 13px 28px rgba(70, 56, 145, 0.12);
    color: #5f50ad;
    transform: translateY(-3px);
  }
  38%,
  100% {
    transform: none;
  }
}

.decoder-evidence-viz {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 20px;
}

.decoder-night-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  color: #827a8a;
  font-size: 6px;
}

.decoder-night-band > div {
  display: flex;
  height: 62px;
  align-items: end;
  gap: 5px;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(91, 77, 142, 0.14);
}

.decoder-night-band i {
  width: 100%;
  height: 35%;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #7966e4, #6f8cf3);
  opacity: 0.48;
  transform-origin: bottom;
  animation: decoder-evidence-wave 2.9s ease-in-out infinite;
}

.decoder-night-band i:nth-child(3n + 1) {
  height: 78%;
  animation-delay: 300ms;
}

.decoder-night-band i:nth-child(4n + 2) {
  height: 94%;
  background: linear-gradient(180deg, #975ce6, #7769e7);
  animation-delay: 600ms;
}

@keyframes decoder-evidence-wave {
  50% {
    opacity: 0.92;
    transform: scaleY(1.08);
  }
}

.decoder-evidence-row {
  display: grid;
  min-height: 34px;
  grid-template-columns: 48px minmax(0, 1fr) 60px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.62);
}

.decoder-evidence-row span {
  color: #847c8c;
  font-size: 6px;
  text-transform: uppercase;
}

.decoder-evidence-row strong {
  color: #59525f;
  font-size: 8px;
}

.decoder-evidence-row i {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #637df4, #8b5ee6);
  transform-origin: left;
  animation: decoder-evidence-fill 3.2s ease-in-out infinite;
}

.decoder-evidence-row:nth-child(3) i {
  animation-delay: 520ms;
}

@keyframes decoder-evidence-fill {
  0%,
  18% {
    opacity: 0.3;
    transform: scaleX(0.16);
  }
  52%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.decoder-need-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(104, 84, 190, 0.11);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(232, 239, 255, 0.88), rgba(240, 232, 252, 0.86));
  box-shadow: 0 12px 26px rgba(62, 49, 124, 0.07);
}

.decoder-need-chip small {
  color: #71658f;
  font-size: 6px;
  text-transform: uppercase;
}

.decoder-need-chip strong {
  color: #50495a;
  font-size: 9px;
}

.router-need-core {
  width: 104px;
}

.router-need-core strong {
  max-width: 74px;
  margin-top: 5px;
  color: #4d4658;
  font-size: 9px;
  line-height: 1.15;
}

.router-skill {
  min-width: 96px;
  min-height: 44px;
  align-content: center;
}

.router-skill small {
  margin-top: 3px;
  color: #8a8292;
  font-size: 6px;
  font-weight: 600;
}

.skill-cbti {
  top: 12%;
  left: 7%;
}

.skill-coach {
  top: 17%;
  right: 5%;
}

.skill-stress {
  right: 16%;
  bottom: 10%;
}

.router-skill-viz > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg, rgba(105, 87, 194, 0.46), transparent);
  transform-origin: left;
  animation: router-skill-beam 3.4s ease-in-out infinite;
}

.router-skill-viz > i:nth-of-type(1) {
  transform: rotate(-140deg);
}

.router-skill-viz > i:nth-of-type(2) {
  transform: rotate(-35deg);
  animation-delay: 450ms;
}

.router-skill-viz > i:nth-of-type(3) {
  transform: rotate(45deg);
  animation-delay: 900ms;
}

@keyframes router-skill-beam {
  0%,
  18% {
    opacity: 0.2;
    scale: 0.2 1;
  }
  52%,
  100% {
    opacity: 0.8;
    scale: 1 1;
  }
}

.workspace-insight.is-active .router-skill {
  animation: router-skill-match 3.4s ease-in-out infinite;
}

.workspace-insight.is-active .skill-coach {
  animation-delay: 450ms;
}

.workspace-insight.is-active .skill-stress {
  animation-delay: 900ms;
}

@keyframes router-skill-match {
  24% {
    border-color: rgba(103, 84, 204, 0.2);
    box-shadow: 0 14px 30px rgba(67, 54, 139, 0.12);
    transform: translateY(-3px);
  }
  50%,
  100% {
    transform: none;
  }
}

.orchestrator-action-viz {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 22px;
}

.orchestrator-action-viz > div {
  display: grid;
  min-height: 46px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(88, 76, 125, 0.07);
}

.orchestrator-action-viz > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgba(235, 232, 249, 0.92);
  color: #6e5dcc;
  font-size: 7px;
  font-weight: 760;
}

.orchestrator-action-viz strong {
  color: #514b58;
  font-size: 9px;
}

.orchestrator-action-viz small {
  color: #89818f;
  font-size: 7px;
}

.orchestrator-action-viz > i {
  width: 1px;
  height: 12px;
  margin-left: 18px;
  background: linear-gradient(180deg, rgba(99, 121, 235, 0.22), rgba(128, 91, 226, 0.5));
  transform-origin: top;
}

.orchestrator-action-viz > b {
  justify-self: end;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(145deg, #6278ee, #855ae0);
  box-shadow: 0 10px 24px rgba(78, 62, 166, 0.17);
  color: white;
  font-size: 7px;
}

.workspace-insight.is-active .orchestrator-action-viz > div,
.workspace-insight.is-active .orchestrator-action-viz > i,
.workspace-insight.is-active .orchestrator-action-viz > b {
  animation: orchestrator-step-arrive 3.6s var(--ease-spring) infinite;
}

.workspace-insight.is-active .orchestrator-action-viz > i:nth-of-type(1),
.workspace-insight.is-active .orchestrator-action-viz > div:nth-of-type(2) {
  animation-delay: 340ms;
}

.workspace-insight.is-active .orchestrator-action-viz > i:nth-of-type(2),
.workspace-insight.is-active .orchestrator-action-viz > div:nth-of-type(3) {
  animation-delay: 680ms;
}

.workspace-insight.is-active .orchestrator-action-viz > b {
  animation-delay: 1.02s;
}

@keyframes orchestrator-step-arrive {
  0%,
  12% {
    opacity: 0.32;
    transform: translateY(5px);
  }
  35%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .workspace-insight {
    grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 1.2fr);
  }

  .workspace-phase-viz {
    min-height: 220px;
  }
}

@media (max-width: 820px) {
  .workspace-insight {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    padding: 16px;
  }

  .workspace-insight-copy > p {
    max-width: none;
  }

  .workspace-phase-viz {
    min-height: 220px;
  }

  .workspace-flow-board {
    min-height: 690px;
  }

  .product-modules-heading {
    min-height: 300px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .module-nebula-shell {
    width: min(100%, 420px);
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .workspace-signal-column .demo-context-signal {
    min-height: 44px;
  }

  .workspace-flow-board {
    min-height: 720px;
  }

  .workspace-insight {
    padding: 14px;
  }

  .workspace-phase-viz {
    min-height: 210px;
  }

  .product-modules {
    padding-top: 58px;
  }

  .product-modules-heading {
    min-height: 260px;
  }

  .product-modules-heading h2 {
    font-size: 20px;
  }

  .module-nebula-shell {
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-phase-viz,
  .viz-source,
  .doni-signal-viz > i,
  .decoder-night-band i,
  .decoder-evidence-row i,
  .router-skill-viz > i,
  .router-skill,
  .orchestrator-action-viz > * {
    animation: none !important;
  }

  .module-nebula-shell > span {
    animation: none !important;
  }
}

@media (min-width: 821px) {
  .product-hero {
    min-height: 100svh;
    justify-content: center;
    padding-top: 84px;
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-island::after,
  .icon-siri,
  .icon-backtap::after {
    animation: none !important;
  }
}

/* Richer live-workspace phase storytelling */
.workspace-value-proof {
  display: grid;
  width: min(100%, 238px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.workspace-value-proof > span {
  display: grid;
  min-height: 42px;
  align-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(106, 88, 193, 0.08);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(238, 237, 255, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 9px 22px rgba(64, 52, 126, 0.055);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.workspace-value-proof strong,
.workspace-value-proof small {
  display: block;
}

.workspace-value-proof strong {
  color: #5649b4;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
}

.workspace-value-proof small {
  color: #82798e;
  font-size: 6px;
  font-weight: 650;
  text-transform: uppercase;
}

.workspace-insight.is-active .workspace-value-proof > span {
  animation: workspace-proof-arrive 620ms 160ms var(--ease-spring) both;
}

.workspace-insight.is-active .workspace-value-proof > span:nth-child(2) {
  animation-delay: 260ms;
}

@keyframes workspace-proof-arrive {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.96);
  }
}

.doni-island-dialogue {
  position: absolute;
  z-index: 6;
  top: 10px;
  left: 50%;
  display: flex;
  width: 40px;
  height: 16px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border-radius: 999px;
  background: #17141e;
  box-shadow:
    0 10px 24px rgba(30, 23, 49, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.075);
  transform: translateX(-50%);
}

.doni-island-dialogue > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a48cff;
  box-shadow: 0 0 0 4px rgba(155, 126, 255, 0.15);
}

.doni-island-dialogue > span {
  display: none;
  min-width: 0;
  opacity: 0;
}

.doni-island-dialogue small,
.doni-island-dialogue strong {
  display: block;
  overflow: hidden;
  color: white;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doni-island-dialogue small {
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 5px;
}

.doni-island-dialogue strong {
  font-size: 7px;
  font-weight: 680;
}

.workspace-insight.is-active .doni-island-dialogue {
  animation: doni-island-morph 4.2s 260ms ease-in-out infinite;
}

.workspace-insight.is-active .doni-island-dialogue > span {
  display: block;
  animation: doni-island-copy 4.2s 260ms ease-in-out infinite;
}

.workspace-insight.is-active .doni-island-dialogue > i {
  animation: doni-island-signal 1.7s ease-in-out infinite;
}

@keyframes doni-island-morph {
  0%,
  12%,
  94%,
  100% {
    width: 40px;
    height: 16px;
    justify-content: center;
    padding-inline: 0;
  }
  22%,
  78% {
    width: 174px;
    height: 38px;
    justify-content: flex-start;
    padding-inline: 13px;
  }
}

@keyframes doni-island-copy {
  0%,
  18%,
  84%,
  100% {
    opacity: 0;
    transform: translateX(-5px);
  }
  29%,
  74% {
    opacity: 1;
    transform: none;
  }
}

@keyframes doni-island-signal {
  50% {
    background: #77a0ff;
    box-shadow: 0 0 0 7px rgba(112, 145, 255, 0.1);
    transform: scale(1.12);
  }
}

.doni-signal-viz .source-oura {
  top: 27%;
}

.doni-signal-viz .source-location {
  top: 25%;
}

.router-graph-canvas {
  position: absolute;
  z-index: 1;
  inset: 3%;
  width: 94%;
  height: 94%;
  pointer-events: none;
  opacity: 0.94;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 24%, rgba(0, 0, 0, 0.94) 58%, transparent 94%);
  mask-image: radial-gradient(ellipse at center, #000 24%, rgba(0, 0, 0, 0.94) 58%, transparent 94%);
}

.router-skill-viz .router-need-core,
.router-skill-viz .router-skill {
  z-index: 4;
}

.router-skill-viz > i {
  z-index: 3;
}

.orchestrator-action-viz {
  position: relative;
  display: block;
  padding: 14px;
}

.orchestrator-action-viz > .execution-hub {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 102px;
  height: 102px;
  min-height: 0;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.98), rgba(225, 227, 255, 0.94) 48%, rgba(220, 205, 248, 0.94));
  box-shadow:
    0 0 0 21px rgba(104, 93, 213, 0.045),
    0 0 0 42px rgba(79, 114, 238, 0.025),
    0 19px 42px rgba(66, 51, 136, 0.15);
  transform: translate(-50%, -50%);
}

.execution-hub > i {
  width: 12px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(135deg, #5c7dff, #955ce8);
  box-shadow: 0 0 0 7px rgba(112, 91, 224, 0.09);
}

.orchestrator-action-viz .execution-hub strong,
.orchestrator-action-viz .execution-hub small {
  display: block;
  text-align: center;
}

.orchestrator-action-viz .execution-hub strong {
  margin-top: 3px;
  color: #4e465d;
  font-size: 9px;
}

.orchestrator-action-viz .execution-hub small {
  color: #81778d;
  font-size: 5px;
}

.execution-endpoint {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 112px;
  min-height: 40px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-content: center;
  column-gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(94, 79, 159, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.77);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 11px 26px rgba(62, 49, 122, 0.075);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.execution-endpoint > i {
  grid-row: 1 / 3;
  display: grid;
  width: 24px;
  height: 24px;
  align-self: center;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(227, 235, 255, 0.96), rgba(235, 225, 251, 0.95));
  color: #6354c7;
  font-size: 6px;
  font-style: normal;
  font-weight: 760;
}

.orchestrator-action-viz .execution-endpoint strong {
  color: #544c5f;
  font-size: 7px;
}

.orchestrator-action-viz .execution-endpoint small {
  color: #8a8191;
  font-size: 5px;
}

.endpoint-benefit {
  top: 10%;
  left: 4%;
}

.endpoint-email {
  top: 12%;
  right: 4%;
}

.endpoint-calendar {
  bottom: 14%;
  left: 5%;
}

.endpoint-ios {
  right: 5%;
  bottom: 12%;
}

.orchestrator-action-viz > .execution-link {
  --link-angle: 0deg;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 38%;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, rgba(113, 93, 222, 0.7), rgba(86, 125, 245, 0.2), transparent);
  transform: rotate(var(--link-angle)) scaleX(0.3);
  transform-origin: left center;
}

.orchestrator-action-viz > .link-benefit { --link-angle: -145deg; }
.orchestrator-action-viz > .link-email { --link-angle: -34deg; }
.orchestrator-action-viz > .link-calendar { --link-angle: 145deg; }
.orchestrator-action-viz > .link-ios { --link-angle: 34deg; }

.orchestrator-action-viz > .execution-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7564e4;
  box-shadow: 0 0 0 5px rgba(110, 94, 221, 0.08);
  transform: translate(-50%, -50%);
}

.orchestrator-action-viz > b {
  position: absolute;
  z-index: 6;
  bottom: 8px;
  left: 50%;
  justify-self: auto;
  margin: 0;
  padding: 7px 10px;
  background: linear-gradient(135deg, #607cff, #895ce4);
  transform: translateX(-50%);
  white-space: nowrap;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-hub {
  animation: execution-hub-pulse 3.6s ease-in-out infinite;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-link {
  animation: execution-beam-flow 3.6s ease-in-out infinite;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-link:nth-of-type(2) {
  animation-delay: 260ms;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-link:nth-of-type(3) {
  animation-delay: 520ms;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-link:nth-of-type(4) {
  animation-delay: 780ms;
}

.workspace-insight.is-active .orchestrator-action-viz > .execution-endpoint {
  animation: execution-endpoint-arrive 3.6s var(--ease-spring) infinite;
}

.workspace-insight.is-active .orchestrator-action-viz > .endpoint-email { animation-delay: 260ms; }
.workspace-insight.is-active .orchestrator-action-viz > .endpoint-calendar { animation-delay: 520ms; }
.workspace-insight.is-active .orchestrator-action-viz > .endpoint-ios { animation-delay: 780ms; }

.workspace-insight.is-active .orchestrator-action-viz > b {
  animation: execution-ready-pulse 3.6s 920ms ease-in-out infinite;
}

@keyframes execution-hub-pulse {
  50% {
    box-shadow:
      0 0 0 28px rgba(104, 93, 213, 0.055),
      0 0 0 54px rgba(79, 114, 238, 0.025),
      0 23px 52px rgba(66, 51, 136, 0.19);
    transform: translate(-50%, -50%) scale(1.035);
  }
}

@keyframes execution-beam-flow {
  0%,
  10% {
    opacity: 0.18;
    transform: rotate(var(--link-angle)) scaleX(0.08);
  }
  42%,
  76% {
    opacity: 0.9;
    transform: rotate(var(--link-angle)) scaleX(1);
  }
  100% {
    opacity: 0.24;
    transform: rotate(var(--link-angle)) scaleX(1);
  }
}

@keyframes execution-endpoint-arrive {
  0%,
  14% {
    opacity: 0.35;
    scale: 0.94;
  }
  36%,
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes execution-ready-pulse {
  0%,
  18% {
    opacity: 0.42;
    transform: translateX(-50%) translateY(4px);
  }
  42%,
  78% {
    opacity: 1;
    box-shadow: 0 13px 32px rgba(79, 61, 175, 0.25);
    transform: translateX(-50%);
  }
  100% {
    opacity: 0.7;
    transform: translateX(-50%);
  }
}

.workspace-execution-column {
  grid-template-rows: auto auto repeat(4, auto) minmax(0, 1fr) auto;
}

.workspace-match-card.is-tertiary {
  padding-block: 8px;
}

.workspace-match-card.is-tertiary > strong {
  margin-block: 3px 5px;
}

.workspace-demo[data-phase="router"] .workspace-match-card:nth-of-type(3),
.workspace-demo[data-phase="orchestrator"] .workspace-match-card:nth-of-type(3) {
  transition-delay: 90ms;
}

.workspace-demo[data-phase="router"] .workspace-match-card:nth-of-type(4),
.workspace-demo[data-phase="orchestrator"] .workspace-match-card:nth-of-type(4) {
  transition-delay: 170ms;
}

@media (max-width: 1180px) {
  .workspace-match-card.is-tertiary {
    display: none;
  }

  .workspace-execution-column {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 640px) {
  .workspace-value-proof {
    width: 100%;
  }

  .doni-island-dialogue {
    top: 8px;
  }

  .execution-endpoint {
    width: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-value-proof > span,
  .doni-island-dialogue,
  .doni-island-dialogue > span,
  .doni-island-dialogue > i,
  .orchestrator-action-viz > .execution-hub,
  .orchestrator-action-viz > .execution-link,
  .orchestrator-action-viz > .execution-endpoint,
  .orchestrator-action-viz > b {
    animation: none !important;
  }

  .doni-island-dialogue {
    width: 174px;
    height: 38px;
    justify-content: flex-start;
    padding-inline: 13px;
  }

  .doni-island-dialogue > span {
    display: block;
    opacity: 1;
  }
}

/* Layered AIOS architecture */
.product-architecture {
  min-height: 680px;
  gap: 13px;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.architecture-interface {
  min-height: 112px;
  grid-template-columns: minmax(190px, 0.34fr) minmax(650px, 1fr);
  gap: 24px;
  padding: 15px 18px;
  background:
    radial-gradient(circle at 9% 50%, rgba(73, 116, 255, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(246, 244, 252, 0.6));
}

.architecture-doni-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
}

.architecture-doni-lockup > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(87, 70, 173, 0.17));
  animation: architecture-doni-float 4.2s ease-in-out infinite;
}

.architecture-doni-lockup > span {
  display: grid;
  gap: 3px;
}

.architecture-doni-lockup small,
.architecture-doni-lockup strong {
  display: block;
}

.architecture-doni-lockup small {
  color: #6b6688;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.architecture-doni-lockup strong {
  color: var(--product-ink);
  font-size: 23px;
  line-height: 1;
}

@keyframes architecture-doni-float {
  50% {
    filter: drop-shadow(0 14px 20px rgba(86, 69, 175, 0.24));
    transform: translateY(-3px) rotate(2deg);
  }
}

.architecture-surface-list {
  gap: 9px;
}

.architecture-surface-list b {
  position: relative;
  min-height: 58px;
  overflow: hidden;
  gap: 11px;
  padding-inline: 13px;
  border-color: rgba(94, 81, 142, 0.08);
  background:
    radial-gradient(circle at 12% 20%, rgba(101, 126, 242, 0.08), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(239, 238, 249, 0.69));
  box-shadow:
    0 11px 26px rgba(51, 42, 92, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  animation: architecture-surface-float 5.4s ease-in-out infinite;
  transition:
    border-color 300ms ease,
    box-shadow 420ms var(--ease-spring),
    transform 420ms var(--ease-spring);
}

.architecture-surface-list b:nth-child(2) {
  animation-delay: 420ms;
  background:
    radial-gradient(circle at 14% 18%, rgba(152, 89, 230, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(242, 237, 250, 0.7));
}

.architecture-surface-list b:nth-child(3) {
  animation-delay: 840ms;
}

.architecture-surface-list b:nth-child(4) {
  animation-delay: 1.26s;
  background:
    radial-gradient(circle at 14% 18%, rgba(84, 128, 244, 0.1), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(239, 239, 250, 0.7));
}

.architecture-surface-list b::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(106, 94, 172, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 94, 172, 0.045) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 74%);
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}

.architecture-surface-list b::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  opacity: 0;
  transform: skewX(-16deg);
  animation: architecture-surface-sheen 6.2s ease-in-out infinite;
}

.architecture-surface-list b:nth-child(2)::after { animation-delay: 700ms; }
.architecture-surface-list b:nth-child(3)::after { animation-delay: 1.4s; }
.architecture-surface-list b:nth-child(4)::after { animation-delay: 2.1s; }

.architecture-surface-list b:hover {
  border-color: rgba(104, 86, 207, 0.17);
  box-shadow:
    0 17px 34px rgba(66, 52, 137, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateY(-3px) scale(1.015);
}

@keyframes architecture-surface-float {
  50% { translate: 0 -2px; }
}

@keyframes architecture-surface-sheen {
  0%,
  20% {
    left: -30%;
    opacity: 0;
  }
  35%,
  48% {
    opacity: 0.58;
  }
  68%,
  100% {
    left: 115%;
    opacity: 0;
  }
}

.surface-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  transform-origin: center;
}

.icon-island::before {
  top: 10px;
  left: 2px;
  width: 28px;
  height: 12px;
  animation: architecture-island-converse 4.4s ease-in-out infinite;
}

.icon-island::after {
  top: 14px;
  right: 5px;
  animation: architecture-island-dot 2s ease-in-out infinite;
}

@keyframes architecture-island-converse {
  0%,
  18%,
  90%,
  100% {
    left: 5px;
    width: 22px;
    border-radius: 999px;
  }
  34%,
  72% {
    left: 0;
    width: 32px;
    border-radius: 9px;
    box-shadow:
      inset -9px 0 0 rgba(92, 112, 239, 0.34),
      0 7px 15px rgba(28, 24, 43, 0.18);
  }
}

@keyframes architecture-island-dot {
  50% {
    opacity: 0.52;
    box-shadow: 0 0 13px rgba(116, 139, 255, 0.95);
    transform: scale(0.74);
  }
}

.icon-siri {
  width: 30px;
  height: 30px;
  margin: 1px;
  animation: architecture-siri-orbit 5.2s linear infinite;
}

.icon-siri::before {
  inset: 5px;
  border-width: 2px;
  animation: architecture-siri-core 2.7s ease-in-out infinite;
}

.icon-siri::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(110, 104, 235, 0.26);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(92, 139, 255, 0.055),
    0 0 18px rgba(133, 84, 223, 0.22);
  animation: architecture-siri-wave 2.7s ease-out infinite;
}

@keyframes architecture-siri-orbit {
  to { transform: rotate(360deg); }
}

@keyframes architecture-siri-core {
  50% {
    inset: 3px;
    background: rgba(255, 255, 255, 0.35);
  }
}

@keyframes architecture-siri-wave {
  70% {
    inset: -9px;
    border-color: transparent;
    box-shadow:
      0 0 0 9px rgba(92, 139, 255, 0),
      0 0 22px rgba(133, 84, 223, 0);
  }
}

.icon-shortcuts::before,
.icon-shortcuts::after {
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform-origin: center;
}

.icon-shortcuts::before {
  transform: translate(-68%, -68%) rotate(45deg);
  animation: architecture-shortcut-a 3.2s ease-in-out infinite;
}

.icon-shortcuts::after {
  transform: translate(-32%, -32%) rotate(45deg);
  animation: architecture-shortcut-b 3.2s ease-in-out infinite;
}

@keyframes architecture-shortcut-a {
  50% { transform: translate(-52%, -52%) rotate(45deg) scale(1.06); }
}

@keyframes architecture-shortcut-b {
  50% { transform: translate(-48%, -48%) rotate(45deg) scale(0.94); }
}

.icon-backtap::before {
  top: 2px;
  left: 7px;
  width: 16px;
  height: 26px;
  border-radius: 6px;
}

.icon-backtap::after {
  top: 11px;
  left: 13px;
  animation: architecture-backtap-ripple 2.5s ease-out infinite;
}

@keyframes architecture-backtap-ripple {
  72% {
    box-shadow:
      0 0 0 8px rgba(122, 101, 221, 0),
      0 0 0 13px rgba(98, 134, 241, 0);
    transform: scale(0.78);
  }
}

.architecture-task-chain {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 92px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 14px 34px;
  overflow: hidden;
  border: 1px solid rgba(91, 78, 145, 0.07);
  border-radius: 14px;
  background:
    radial-gradient(circle at 15% 50%, rgba(74, 116, 255, 0.09), transparent 25%),
    radial-gradient(circle at 84% 50%, rgba(137, 88, 229, 0.09), transparent 27%),
    rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 30px rgba(49, 40, 88, 0.045);
}

.architecture-task-chain::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 11%;
  left: 11%;
  height: 1px;
  background: linear-gradient(90deg, rgba(78, 120, 246, 0.28), rgba(119, 91, 226, 0.58), rgba(148, 86, 224, 0.3));
}

.architecture-task-chain::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: 10%;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #6f74ec;
  box-shadow:
    0 0 0 6px rgba(105, 95, 226, 0.08),
    0 0 18px rgba(92, 102, 235, 0.42);
  animation: architecture-chain-packet 4.8s ease-in-out infinite;
}

.architecture-task-chain > span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #625b70;
  letter-spacing: 0;
  text-transform: none;
}

.architecture-task-chain > span > i {
  display: block;
  width: 13px;
  height: 13px;
  margin-bottom: 4px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: linear-gradient(145deg, #5e82ff, #8d5ce4);
  box-shadow:
    0 0 0 7px rgba(106, 91, 222, 0.07),
    0 8px 18px rgba(74, 57, 159, 0.13);
}

.architecture-task-chain > span small {
  color: #8b8394;
  font-size: 6px;
  font-weight: 720;
}

.architecture-task-chain > span strong {
  color: #4f4859;
  font-size: 10px;
}

@keyframes architecture-chain-packet {
  0%,
  8% {
    left: 10%;
    opacity: 0;
  }
  16%,
  82% {
    opacity: 1;
  }
  92%,
  100% {
    left: 89%;
    opacity: 0;
  }
}

.architecture-core {
  min-height: 176px;
}

.architecture-node,
.architecture-decoder,
.architecture-router,
.architecture-orchestrator {
  min-height: 176px;
  transform-style: preserve-3d;
  transition:
    border-color 300ms ease,
    box-shadow 440ms var(--ease-spring),
    transform 440ms var(--ease-spring);
}

.architecture-node:hover {
  border-color: rgba(104, 85, 205, 0.16);
  box-shadow:
    0 23px 50px rgba(60, 47, 126, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateY(-4px) rotateX(1.5deg);
}

.architecture-memory {
  min-height: 206px;
  grid-template-columns: minmax(350px, 0.88fr) minmax(480px, 1.12fr);
  gap: 24px;
  padding: 20px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 45%, rgba(112, 91, 225, 0.13), transparent 34%),
    radial-gradient(circle at 17% 85%, rgba(76, 119, 246, 0.08), transparent 34%),
    linear-gradient(100deg, rgba(241, 244, 255, 0.78), rgba(243, 237, 252, 0.72));
}

.architecture-memory-copy {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 8px;
}

.architecture-memory-copy > span {
  color: #656087;
  font-size: 8px;
  letter-spacing: 0;
}

.architecture-memory-copy > strong {
  max-width: 500px;
  font-size: 24px;
  line-height: 1.08;
}

.architecture-memory-copy > small {
  max-width: 480px;
  color: #777080;
  font-size: 9px;
  line-height: 1.45;
}

.architecture-memory-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.architecture-memory-facets b {
  padding: 6px 8px;
  border: 1px solid rgba(96, 81, 163, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
  color: #6e6680;
  font-size: 6px;
  font-weight: 690;
}

.architecture-memory-graph {
  position: relative;
  z-index: 2;
  height: 164px;
  align-self: center;
  perspective: 900px;
  transform: rotateX(5deg) rotateY(-5deg);
  transform-style: preserve-3d;
  transition: transform 650ms var(--ease-spring);
}

.architecture-memory:hover .architecture-memory-graph {
  transform: rotateX(1deg) rotateY(-1deg) scale(1.015);
}

.architecture-memory-graph canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, 0.88) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, 0.88) 64%, transparent 100%);
}

.architecture-memory-graph > div {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98), rgba(220, 225, 255, 0.93) 43%, rgba(217, 203, 247, 0.92));
  box-shadow:
    0 0 0 20px rgba(102, 91, 213, 0.04),
    0 0 0 39px rgba(78, 121, 242, 0.025),
    0 19px 42px rgba(69, 52, 143, 0.16);
  transform: translate(-50%, -50%) translateZ(22px);
  animation: architecture-memory-core 4.2s ease-in-out infinite;
}

.architecture-memory-graph > div i {
  width: 11px;
  height: 11px;
  margin-bottom: 5px;
  border: 3px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #5d82ff, #965be5);
  box-shadow: 0 0 0 7px rgba(114, 94, 226, 0.08);
  color: transparent;
  font-size: 0;
  animation: none;
}

.architecture-memory-graph > div strong {
  color: #51495d;
  font-size: 8px;
  line-height: 1.05;
  text-align: center;
}

.architecture-memory-graph > .memory-node {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 72px;
  min-height: 30px;
  place-items: center;
  padding-inline: 8px;
  border: 1px solid rgba(94, 79, 159, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 11px 24px rgba(62, 49, 123, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.9);
  color: #665d76;
  font-size: 6px;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: architecture-memory-node 4.8s ease-in-out infinite;
}

.memory-human {
  top: 10%;
  left: 8%;
}

.memory-service {
  top: 13%;
  right: 7%;
  animation-delay: 520ms !important;
}

.memory-workflow {
  right: 15%;
  bottom: 7%;
  animation-delay: 1.04s !important;
}

@keyframes architecture-memory-core {
  50% {
    box-shadow:
      0 0 0 27px rgba(102, 91, 213, 0.05),
      0 0 0 50px rgba(78, 121, 242, 0.025),
      0 23px 52px rgba(69, 52, 143, 0.2);
    transform: translate(-50%, -50%) translateZ(30px) scale(1.04);
  }
}

@keyframes architecture-memory-node {
  50% {
    border-color: rgba(103, 84, 205, 0.18);
    box-shadow:
      0 15px 31px rgba(62, 49, 123, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.92);
    transform: translateY(-3px) translateZ(12px);
  }
}

/* Intelligent command rail */
.workspace-progress {
  position: relative;
  min-height: 52px;
  gap: 8px;
  padding: 6px 8px;
  overflow: hidden;
  border-color: rgba(92, 78, 145, 0.1);
  background:
    linear-gradient(rgba(103, 91, 166, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 91, 166, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(239, 238, 250, 0.54));
  background-size: 13px 13px, 13px 13px, auto;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.92),
    0 10px 28px rgba(51, 42, 91, 0.055);
}

.workspace-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 45% 50%, rgba(120, 92, 226, 0.1), transparent 32%);
  opacity: 0.7;
}

.workspace-progress span,
.workspace-progress i {
  position: relative;
  z-index: 1;
}

.workspace-progress span {
  min-height: 36px;
  min-width: 48px;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 7px;
  transition:
    min-width 460ms var(--ease-spring),
    border-color 300ms ease,
    box-shadow 420ms var(--ease-spring),
    transform 420ms var(--ease-spring);
}

.workspace-progress span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.38;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 8%, transparent);
}

.workspace-progress span.is-active {
  min-width: 64px;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 10px 24px rgba(76, 57, 172, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.workspace-progress span.is-active::before {
  background: white;
  opacity: 0.92;
  animation: workspace-progress-pulse 1.8s ease-in-out infinite;
}

.workspace-progress i {
  overflow: visible;
  height: 1px;
}

.workspace-progress i::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7865e3;
  box-shadow: 0 0 0 5px rgba(112, 94, 222, 0.07);
  opacity: 0;
}

.workspace-progress i.is-complete::after {
  animation: workspace-progress-packet 2.7s ease-in-out infinite;
}

@keyframes workspace-progress-pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08);
    transform: scale(0.78);
  }
}

@keyframes workspace-progress-packet {
  0%,
  14% {
    left: 0;
    opacity: 0;
  }
  30%,
  74% {
    opacity: 0.9;
  }
  90%,
  100% {
    left: calc(100% - 7px);
    opacity: 0;
  }
}

.workspace-composer {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  padding-left: 15px;
  border-color: rgba(91, 78, 145, 0.11);
  background:
    radial-gradient(circle at 20% 40%, rgba(76, 118, 246, 0.055), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(245, 241, 251, 0.72));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.95),
    0 10px 28px rgba(51, 42, 91, 0.055);
}

.workspace-composer::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -24%;
  width: 20%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  transform: skewX(-18deg);
  animation: workspace-composer-sheen 7.2s ease-in-out infinite;
}

.workspace-composer input {
  position: relative;
  z-index: 3;
  height: 40px;
}

.workspace-prompt-rotator {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 52px;
  left: 15px;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 220ms ease, transform 320ms var(--ease-spring);
}

.workspace-prompt-rotator small {
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(235, 231, 249, 0.9);
  color: #6759bb;
  font-size: 6px;
  font-weight: 760;
  text-transform: uppercase;
}

.workspace-prompt-rotator strong {
  overflow: hidden;
  color: #8c8492;
  font-size: 9px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-prompt-rotator.is-switching {
  animation: workspace-prompt-switch 440ms ease both;
}

.workspace-composer:focus-within .workspace-prompt-rotator,
.workspace-composer input:not(:placeholder-shown) ~ .workspace-prompt-rotator {
  opacity: 0;
  transform: translateY(calc(-50% + 5px));
}

@keyframes workspace-composer-sheen {
  0%,
  24% {
    left: -24%;
    opacity: 0;
  }
  38%,
  50% {
    opacity: 0.58;
  }
  72%,
  100% {
    left: 112%;
    opacity: 0;
  }
}

@keyframes workspace-prompt-switch {
  0% {
    opacity: 1;
    transform: translateY(-50%);
  }
  46% {
    opacity: 0;
    transform: translateY(calc(-50% - 5px));
  }
  54% {
    opacity: 0;
    transform: translateY(calc(-50% + 5px));
  }
  100% {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@media (max-width: 1100px) {
  .architecture-interface {
    grid-template-columns: minmax(170px, 0.32fr) minmax(560px, 1fr);
  }

  .architecture-memory {
    grid-template-columns: minmax(320px, 0.9fr) minmax(400px, 1.1fr);
  }
}

@media (max-width: 820px) {
  .product-architecture {
    min-height: 0;
  }

  .architecture-interface {
    grid-template-columns: 1fr;
  }

  .architecture-surface-list {
    grid-column: auto;
  }

  .architecture-task-chain {
    padding-inline: 12px;
  }

  .architecture-core {
    min-height: 0;
  }

  .architecture-memory {
    grid-template-columns: 1fr;
  }

  .architecture-memory-graph {
    height: 190px;
  }
}

@media (max-width: 640px) {
  .architecture-surface-list b {
    min-height: 52px;
    padding-inline: 9px;
  }

  .architecture-task-chain {
    min-height: 82px;
  }

  .architecture-task-chain > span strong {
    font-size: 8px;
  }

  .architecture-memory-copy > strong {
    font-size: 20px;
  }

  .workspace-prompt-rotator small {
    display: none;
  }

  .workspace-prompt-rotator strong {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .architecture-doni-lockup > img,
  .architecture-surface-list b,
  .architecture-surface-list b::after,
  .icon-island::before,
  .icon-island::after,
  .icon-siri,
  .icon-siri::before,
  .icon-siri::after,
  .icon-shortcuts::before,
  .icon-shortcuts::after,
  .icon-backtap::after,
  .architecture-task-chain::after,
  .architecture-memory-graph > div,
  .architecture-memory-graph > .memory-node,
  .workspace-progress span.is-active::before,
  .workspace-progress i::after,
  .workspace-composer::before,
  .workspace-prompt-rotator {
    animation: none !important;
  }
}

/* Final component ownership: keep these rules after all legacy product styles. */
.workspace-title {
  gap: 0;
  padding-left: 0;
}

.workspace-title::before {
  display: none;
}

.workspace-title > span {
  align-items: start;
  text-align: left;
}

.workspace-google-play-link {
  border-color: rgba(255, 255, 255, 0.08);
  background: #17141e;
  color: #fff;
}

.workspace-user-signal {
  position: relative;
  min-height: 54px;
  grid-template-columns: 36px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  padding: 7px 12px;
  border-color: rgba(95, 81, 155, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 40%, rgba(81, 123, 255, 0.11), transparent 24%),
    radial-gradient(circle at 88% 45%, rgba(147, 88, 229, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    0 14px 30px rgba(50, 41, 92, 0.065),
    inset 0 1px rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.workspace-user-signal > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.workspace-voice-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(232, 239, 255, 0.94), rgba(236, 225, 251, 0.9));
  box-shadow:
    0 9px 22px rgba(70, 55, 144, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.94);
}

.workspace-voice-symbol > i {
  display: none;
}

.workspace-demo[data-phase="doni"] [data-voice-phase="doni"],
.workspace-demo[data-phase="decoder"] [data-voice-phase="decoder"],
.workspace-demo[data-phase="router"] [data-voice-phase="router"],
.workspace-demo[data-phase="orchestrator"] [data-voice-phase="orchestrator"] {
  display: grid;
}

.workspace-voice-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-user-signal .workspace-voice-copy small {
  color: #6e6780;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.workspace-user-signal .workspace-voice-copy p {
  overflow: hidden;
  margin: 0;
  color: #36313d;
  font-size: 10px;
  font-weight: 610;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-voice-wave {
  display: flex;
  height: 25px;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.router-skill-viz {
  --viz-rx: 0deg;
  --viz-ry: 0deg;
  overflow: hidden;
  perspective: 700px;
  isolation: isolate;
}

.router-graph-canvas {
  inset: 2%;
  width: 96%;
  height: 96%;
  opacity: 0.98;
  transform: perspective(700px) rotateX(var(--viz-rx)) rotateY(var(--viz-ry)) scale(1.02);
}

.router-skill-viz > i {
  display: none;
}

.router-brain-core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 68px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 46% 54% 48% 52% / 54% 44% 56% 46%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.96), rgba(214, 224, 255, 0.86) 36%, rgba(194, 178, 239, 0.76) 72%);
  box-shadow:
    0 0 0 17px rgba(100, 93, 218, 0.045),
    0 0 0 34px rgba(77, 119, 244, 0.022),
    0 20px 45px rgba(67, 50, 143, 0.16);
  transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry));
}

.router-skill {
  z-index: 6;
  display: grid;
  width: 92px;
  min-height: 38px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(96, 80, 164, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.77);
  box-shadow:
    0 12px 27px rgba(63, 48, 126, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.94);
}

.router-skill > i {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 30%, #fff, rgba(112, 132, 245, 0.7) 42%, rgba(140, 88, 226, 0.62));
}

.router-skill strong {
  color: #585062;
  font-size: 7px;
  line-height: 1.1;
  white-space: nowrap;
}

.skill-cbti { top: 8%; left: 2%; }
.skill-coach { top: 9%; right: 2%; }
.skill-stress { right: 8%; bottom: 7%; }

.orchestrator-action-viz {
  --viz-rx: 0deg;
  --viz-ry: 0deg;
  overflow: hidden;
  perspective: 700px;
  isolation: isolate;
}

.orchestrator-action-viz > .execution-hub {
  width: 70px;
  height: 70px;
  min-height: 0;
  padding: 0;
  background:
    conic-gradient(from 190deg, rgba(91, 128, 255, 0.84), rgba(156, 86, 229, 0.72), rgba(255, 255, 255, 0.95), rgba(91, 128, 255, 0.84));
  box-shadow:
    0 0 0 15px rgba(106, 94, 220, 0.04),
    0 0 0 31px rgba(79, 116, 240, 0.022),
    0 20px 45px rgba(66, 51, 136, 0.17);
  transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry));
}

.execution-endpoint {
  width: 96px;
  min-height: 40px;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 7px;
}

.execution-endpoint > i {
  width: 22px;
  height: 22px;
  grid-row: auto;
}

.execution-endpoint svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.orchestrator-action-viz .execution-endpoint strong {
  font-size: 7.5px;
}

.endpoint-benefit { top: 8%; left: 3%; }
.endpoint-email { top: 9%; right: 3%; }
.endpoint-calendar { bottom: 12%; left: 4%; }
.endpoint-ios { right: 4%; bottom: 11%; }

.orchestrator-action-viz > b {
  display: flex;
  bottom: 6px;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 7px;
  transform: translateX(-50%);
}

.architecture-interface {
  min-height: 126px;
  grid-template-columns: minmax(188px, 0.3fr) minmax(690px, 1fr);
}

.architecture-surface-list b {
  min-height: 66px;
  gap: 13px;
  padding-inline: 16px;
  border-radius: 12px;
}

.architecture-surface-list b > span {
  font-size: 11px;
  font-weight: 720;
}

.architecture-surface-list .surface-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.architecture-task-chain {
  min-height: 126px;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 15px;
  background:
    linear-gradient(rgba(101, 89, 159, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 89, 159, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 11% 50%, rgba(74, 116, 255, 0.1), transparent 22%),
    radial-gradient(circle at 89% 50%, rgba(137, 88, 229, 0.1), transparent 24%),
    rgba(255, 255, 255, 0.5);
  background-size: 16px 16px, 16px 16px, auto, auto, auto;
}

.architecture-task-chain > span {
  min-height: 78px;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 1px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 80, 160, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.63);
  box-shadow:
    0 12px 27px rgba(60, 48, 116, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.94);
}

.architecture-task-chain > span > i {
  width: 18px;
  height: 18px;
  grid-row: 1 / 3;
  margin: 0;
}

.architecture-task-chain > span strong {
  font-size: 11px;
}

.architecture-task-chain > span em {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: #8a8392;
  font-size: 6.5px;
  font-style: normal;
}

.architecture-memory {
  min-height: 218px;
  grid-template-columns: minmax(470px, 0.95fr) minmax(500px, 1.05fr);
  gap: 18px;
  padding: 20px 24px;
}

.architecture-memory-copy > strong {
  max-width: none;
  font-size: 21px;
  line-height: 1.08;
  white-space: nowrap;
}

.architecture-memory-graph {
  --memory-rx: 4deg;
  --memory-ry: -4deg;
  height: 176px;
  transform: perspective(850px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry));
}

.architecture-memory:hover .architecture-memory-graph {
  transform: perspective(850px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry)) scale(1.012);
}

.architecture-memory-graph > div {
  width: 66px;
  border-radius: 22px;
  clip-path: polygon(50% 0, 88% 18%, 100% 55%, 78% 91%, 38% 100%, 5% 72%, 6% 28%);
}

.product-modules {
  padding-top: 92px;
}

.product-modules-heading {
  min-height: 246px;
  align-items: end;
  padding-bottom: 38px;
}

.module-nebula-shell {
  height: 184px;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, 0.72) 66%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, 0.72) 66%, transparent 96%);
}

.module-nebula {
  inset: -12%;
  width: 124%;
  height: 124%;
}

.module-copy {
  grid-template-columns: auto minmax(0, 1.02fr) minmax(210px, 0.72fr);
  column-gap: 12px;
}

.module-number {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 36px;
  margin: 0;
}

.module-copy .section-kicker {
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.module-copy h3 {
  grid-column: 1 / -1;
  margin-top: 23px;
}

.module-copy > p {
  grid-column: 1 / 3;
}

.module-copy ul {
  grid-column: 3;
}

@keyframes execution-hub-pulse {
  50% {
    box-shadow:
      0 0 0 22px rgba(104, 93, 213, 0.05),
      0 0 0 42px rgba(79, 114, 238, 0.024),
      0 24px 52px rgba(66, 51, 136, 0.19);
    transform: translate(-50%, -50%) rotateX(var(--viz-rx)) rotateY(var(--viz-ry)) scale(1.045);
  }
}

@media (max-width: 1180px) {
  .architecture-interface {
    grid-template-columns: minmax(160px, 0.25fr) minmax(560px, 1fr);
  }

  .architecture-memory {
    grid-template-columns: minmax(390px, 0.9fr) minmax(420px, 1.1fr);
  }
}

@media (max-width: 820px) {
  .workspace-user-signal {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .workspace-voice-wave {
    display: none;
  }

  .architecture-interface,
  .architecture-memory {
    grid-template-columns: 1fr;
  }

  .architecture-task-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 208px;
  }

  .architecture-task-chain::before,
  .architecture-task-chain::after {
    display: none;
  }

  .architecture-memory-copy > strong {
    white-space: normal;
  }

  .module-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-copy .section-kicker {
    grid-column: 2;
  }

  .module-copy h3,
  .module-copy > p,
  .module-copy ul {
    grid-column: 1 / -1;
  }
}

/* Product page definitive composition overrides */
html,
body {
  overflow-x: clip;
}

/* Keep the live workspace useful without a second, duplicate phase rail. */
.workspace-demo[data-phase="router"] .workspace-insight[data-workspace-panel="router"] {
  grid-template-columns: minmax(270px, 0.76fr) minmax(430px, 1.24fr);
}

.workspace-demo[data-phase="router"] .workspace-insight-copy > strong {
  max-width: none;
  white-space: nowrap;
}

.router-skill-viz {
  min-height: 286px;
  overflow: visible;
  border: 0;
  background:
    radial-gradient(ellipse at 52% 54%, rgba(116, 94, 226, 0.1), transparent 48%),
    linear-gradient(rgba(91, 91, 179, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 91, 179, 0.024) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  box-shadow: none;
}

.router-graph-canvas {
  position: absolute;
  inset: -12% -8%;
  width: 116%;
  height: 124%;
  filter: saturate(1.2) contrast(1.08);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 96%);
}

.workspace-agent-cli {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(135deg, rgba(250, 251, 255, 0.76), rgba(238, 234, 253, 0.62));
  box-shadow:
    0 14px 34px rgba(48, 39, 84, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.agent-cli-command {
  background:
    linear-gradient(110deg, rgba(27, 23, 39, 0.98), rgba(39, 30, 67, 0.98));
}

.orchestrator-action-viz {
  overflow: visible;
  perspective: 900px;
}

.orchestrator-action-viz > .execution-route {
  min-height: 218px;
  transform: rotateX(var(--viz-rx, 0deg)) rotateY(var(--viz-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-spring);
}

.execution-app {
  border-color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 30px rgba(48, 39, 84, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.execution-app > i {
  background: linear-gradient(145deg, rgba(92, 127, 248, 0.13), rgba(145, 91, 229, 0.16));
  color: #6d5ed3;
}

.execution-route-lines path {
  stroke: url("#execution-route-gradient");
}

.execution-live-activity {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 42px rgba(51, 40, 90, 0.11);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

/* Make the architecture read as one system rather than nested glass boxes. */
.product-architecture {
  min-height: 0;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.architecture-interface,
.architecture-task-chain,
.architecture-memory {
  border-color: rgba(91, 77, 150, 0.045);
  background-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 52px rgba(50, 40, 87, 0.045);
}

.architecture-task-chain {
  min-height: 214px;
  padding: 12px;
  background:
    linear-gradient(rgba(102, 88, 170, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 88, 170, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 48% 52%, rgba(103, 91, 224, 0.065), transparent 42%),
    rgba(255, 255, 255, 0.24);
  background-size: 26px 26px, 26px 26px, auto, auto;
}

.architecture-task-chain > span {
  min-height: 182px;
  border: 0;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.architecture-memory {
  min-height: 210px;
  padding-block: 24px;
  background:
    radial-gradient(circle at 69% 50%, rgba(118, 91, 225, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(245, 248, 255, 0.48), rgba(248, 244, 255, 0.4));
}

/* Clear Z path and matched text/visual heights for modules 01–05. */
.product-modules-heading {
  min-height: 184px;
  padding-top: 38px;
  padding-bottom: 26px;
}

.product-module,
.product-module:nth-child(even) {
  min-height: 650px;
  grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
  align-items: stretch;
  gap: clamp(54px, 6vw, 104px);
  padding-block: 72px;
}

.module-copy,
.product-module:nth-child(even) .module-copy {
  align-self: stretch;
  min-width: 0;
  min-height: 520px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 40px auto minmax(0, 1fr) auto;
  padding: 22px 0 8px;
}

.module-copy .module-number {
  position: static;
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 38px;
  border-color: rgba(90, 78, 140, 0.07);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 20px rgba(49, 40, 82, 0.05);
}

.module-copy .section-kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.module-copy h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 650px;
  margin-top: 28px;
}

.module-copy > p {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 630px;
  margin-top: 24px;
}

.module-copy ul {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
  border: 0;
}

.module-copy li {
  min-height: 72px;
  padding: 15px 12px 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.module-copy li::before {
  top: 19px;
  left: 13px;
}

.module-visual,
.product-module:nth-child(even) .module-visual {
  align-self: stretch;
  min-width: 0;
  min-height: 520px;
  border-color: rgba(255, 255, 255, 0.44);
  background:
    radial-gradient(circle at 83% 12%, rgba(133, 82, 225, 0.075), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(69, 120, 247, 0.06), transparent 32%),
    rgba(255, 255, 255, 0.36);
  box-shadow:
    0 30px 76px rgba(49, 39, 84, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.module-doni .module-copy,
.module-router .module-copy,
.module-memory .module-copy {
  order: 1;
}

.module-doni .module-visual,
.module-router .module-visual,
.module-memory .module-visual {
  order: 2;
}

.module-decoder .module-copy,
.module-orchestrator .module-copy {
  order: 2;
}

.module-decoder .module-visual,
.module-orchestrator .module-visual {
  order: 1;
}

/* Dense, pointer-responsive self-evolving memory. */
.module-memory .memory-visual {
  position: relative;
  display: block !important;
  width: 100%;
  min-height: 520px !important;
  height: 520px !important;
  max-height: 520px !important;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  cursor: crosshair;
  background:
    radial-gradient(ellipse at 54% 48%, rgba(111, 95, 226, 0.115), transparent 39%),
    linear-gradient(rgba(96, 86, 168, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 86, 168, 0.025) 1px, transparent 1px),
    rgba(255, 255, 255, 0.34);
  background-size: auto, 24px 24px, 24px 24px, auto;
}

.module-memory .memory-brain-canvas {
  position: absolute !important;
  z-index: 1;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  filter: saturate(1.22) contrast(1.12);
  -webkit-mask-image: radial-gradient(ellipse at 54% 48%, #000 0 69%, transparent 98%);
  mask-image: radial-gradient(ellipse at 54% 48%, #000 0 69%, transparent 98%);
}

.memory-field-legend {
  z-index: 3;
  top: 22px;
  right: 24px;
  left: 24px;
}

.memory-field-legend span {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  color: #635c70;
  box-shadow: 0 10px 24px rgba(52, 42, 88, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.memory-feedback-loop {
  z-index: 4;
  bottom: 22px;
  min-height: 58px;
  border-color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.58);
}

/* Organization solutions: same product palette, one continuous story. */
.product-employers.section-shell {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 72px 0 112px calc(50% - 50vw);
  padding: 104px max(24px, calc((100vw - 1510px) / 2));
  overflow: hidden;
  color: #191522;
  border: 0;
  background:
    radial-gradient(circle at 9% 15%, rgba(67, 119, 248, 0.15), transparent 31%),
    radial-gradient(circle at 91% 82%, rgba(145, 82, 225, 0.15), transparent 34%),
    linear-gradient(145deg, #f2f6ff 0%, #faf9ff 48%, #f3edfc 100%);
}

.product-employers.section-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(104, 91, 174, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 91, 174, 0.027) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 88%);
}

.organization-solution {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 1510px);
  margin: 0 auto;
  grid-template-columns: minmax(350px, 0.78fr) minmax(620px, 1.22fr);
  gap: 18px;
}

.product-employer-copy {
  grid-row: 1 / span 2;
  display: flex;
  min-height: 444px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(38px, 5vw, 70px);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 20px;
  color: #191522;
  background:
    radial-gradient(circle at 16% 12%, rgba(72, 122, 248, 0.115), transparent 34%),
    rgba(255, 255, 255, 0.5);
  box-shadow: 0 26px 68px rgba(53, 42, 91, 0.085);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  backdrop-filter: blur(32px) saturate(150%);
}

.product-employer-copy .section-kicker {
  color: #5c608d;
}

.product-employer-copy h2 {
  max-width: 700px;
  margin: 20px 0 0;
  color: #17131f;
  font-size: clamp(45px, 4.8vw, 74px);
  line-height: 0.98;
}

.product-employer-copy p {
  max-width: 620px;
  margin: 26px 0 0;
  color: #5e5965;
  font-size: 16px;
  line-height: 1.62;
}

.organization-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.organization-types button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(91, 78, 141, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #615a69;
  font: inherit;
  font-size: 11px;
  font-weight: 730;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--ease-spring);
}

.organization-types button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 28px rgba(49, 40, 83, 0.09);
}

.organization-types button.is-active {
  border-color: transparent;
  background: #1d1928;
  color: white;
  box-shadow: 0 12px 28px rgba(32, 25, 55, 0.18);
}

.organization-types button.is-secondary {
  opacity: 0.7;
}

.organization-journey {
  position: relative;
  display: grid;
  min-height: 178px;
  grid-template-columns: 1fr 62px 1fr 62px 1fr;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.43);
  box-shadow: 0 22px 56px rgba(54, 43, 93, 0.065);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.organization-journey span {
  display: grid;
  min-height: 104px;
  align-content: center;
  gap: 9px;
  padding: 15px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 10%, rgba(129, 84, 224, 0.065), transparent 43%),
    rgba(255, 255, 255, 0.44);
}

.organization-journey small {
  color: #827b8b;
  font-size: 9px;
  font-weight: 720;
  text-transform: uppercase;
}

.organization-journey strong {
  color: #3f3948;
  font-size: 13px;
  line-height: 1.35;
}

.organization-journey > i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(76, 123, 247, 0.12), rgba(134, 83, 222, 0.48));
}

.organization-journey > i::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px #715ddd;
  animation: organization-packet 3.2s ease-in-out infinite;
}

.organization-journey > i:nth-of-type(2)::after {
  animation-delay: 1.05s;
}

.product-employer-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-employer-outcomes article {
  position: relative;
  display: grid;
  min-height: 166px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 22px 22px 34px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.47);
  box-shadow: 0 18px 44px rgba(54, 43, 93, 0.055);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.product-employer-outcomes article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: rgba(105, 91, 217, 0.08);
  color: #6e5fcf;
  font-size: 9px;
  font-weight: 780;
}

.product-employer-outcomes article div {
  display: grid;
  gap: 6px;
}

.product-employer-outcomes small {
  color: #817a88;
  font-size: 9px;
}

.product-employer-outcomes strong {
  color: #27212f;
  font-size: 15px;
}

.product-employer-outcomes article > i {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(109, 91, 219, 0.07);
}

.product-employer-outcomes article > i > b {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4d7cf8, #8d58e2);
  transform-origin: left;
  animation: outcome-fill 4.8s var(--ease-spring) infinite alternate;
}

.product-employer-outcomes article:nth-child(2) > i > b {
  width: 86%;
  animation-delay: 500ms;
}

.product-employer-outcomes article:nth-child(3) > i > b {
  width: 74%;
  animation-delay: 900ms;
}

.product-partner-cta {
  grid-column: 1 / -1;
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  color: #251f2d;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.66), rgba(237, 231, 251, 0.59));
  box-shadow: 0 20px 48px rgba(54, 43, 93, 0.065);
}

.product-partner-cta span {
  color: #766e84;
}

.product-partner-cta strong {
  color: #27212f;
  font-size: clamp(18px, 2vw, 28px);
}

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

  .product-employer-copy {
    grid-row: auto;
    min-height: 390px;
  }

  .product-module,
  .product-module:nth-child(even) {
    grid-template-columns: minmax(310px, 0.84fr) minmax(440px, 1.16fr);
    gap: 50px;
  }
}

@media (max-width: 820px) {
  .workspace-demo[data-phase="router"] .workspace-insight[data-workspace-panel="router"] {
    grid-template-columns: 1fr;
  }

  .workspace-demo[data-phase="router"] .workspace-insight-copy > strong {
    white-space: normal;
  }

  .router-skill-viz {
    min-height: 260px;
  }

  .product-modules-heading {
    min-height: 210px;
    padding-top: 42px;
  }

  .product-module,
  .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 58px;
  }

  .module-copy,
  .product-module:nth-child(even) .module-copy {
    order: 1;
    width: 100%;
    min-height: 0;
    transform: translateY(18px);
  }

  .module-visual,
  .product-module:nth-child(even) .module-visual {
    order: 2;
    width: 100%;
    min-height: 430px;
    transform: translateY(18px) scale(0.99);
  }

  .product-module.reveal.in-view .module-copy,
  .product-module.reveal.in-view .module-visual {
    transform: none;
  }

  .module-copy ul {
    grid-template-columns: 1fr;
  }

  .module-copy li {
    min-height: 56px;
  }

  .module-memory .memory-visual {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
  }

  .memory-feedback-loop {
    right: 18px;
    left: 18px;
  }

  .product-employers.section-shell {
    margin-top: 44px;
    margin-bottom: 78px;
    padding: 72px 20px;
  }

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

  .organization-journey {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .organization-journey > i {
    width: 1px;
    height: 28px;
    justify-self: center;
    background: linear-gradient(rgba(76, 123, 247, 0.12), rgba(134, 83, 222, 0.48));
  }

  .organization-journey > i::after {
    top: -5px;
    left: -2px;
    animation-name: organization-packet-vertical;
  }

  .product-employer-outcomes {
    grid-template-columns: 1fr;
  }

  .product-partner-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@keyframes organization-packet-vertical {
  from { top: -5px; }
  to { top: 100%; }
}

@media (max-width: 640px) {
  .architecture-task-chain {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .architecture-task-chain > span {
    min-height: 136px;
  }

  .module-copy {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .module-copy .section-kicker {
    grid-column: 2;
  }

  .module-copy h3,
  .module-copy > p,
  .module-copy ul {
    grid-column: 1 / -1;
  }

  .memory-field-legend {
    gap: 5px;
  }

  .memory-field-legend span {
    padding: 7px;
    font-size: 7px;
  }

  .memory-feedback-loop {
    grid-template-columns: auto 1fr auto;
    gap: 7px;
  }

  .memory-feedback-loop i:last-of-type,
  .memory-feedback-loop strong {
    display: none;
  }

  .product-employer-copy {
    min-height: 0;
    padding: 34px 24px;
  }

  .product-employer-copy h2 {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .organization-journey > i::after,
  .product-employer-outcomes article > i > b,
  .memory-feedback-loop i::after {
    animation: none;
  }
}

/* Five-capability Z/F narrative and full-field diagrams */
.product-module:nth-child(odd) .module-copy {
  order: 1;
}

.product-module {
  scroll-margin-top: 92px;
}

.product-module:nth-child(odd) .module-visual {
  order: 2;
}

.product-module:nth-child(even) .module-copy {
  order: 2;
}

.product-module:nth-child(even) .module-visual {
  order: 1;
}

.decoder-world-visual,
.router-capability-visual {
  display: block;
}

.decoder-world-visual > .decoder-world-canvas,
.router-capability-visual > canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.decoder-world-visual > .decoder-world-scene {
  position: absolute;
  z-index: 2;
  top: 7%;
  bottom: 7%;
  left: 4%;
  width: 59%;
}

.decoder-world-visual > .decoder-world-focus {
  position: absolute;
  z-index: 3;
  top: 18%;
  right: 4%;
  width: 33%;
  min-height: 64%;
}

.decoder-world-scene .world-time {
  top: 6%;
  left: 4%;
}

.decoder-world-scene .world-place {
  top: 12%;
  right: 2%;
}

.decoder-world-scene .world-load {
  bottom: 19%;
  left: 2%;
}

.decoder-world-scene .world-calendar {
  right: 3%;
  bottom: 13%;
}

.decoder-world-scene .world-dialogue {
  right: 7%;
  bottom: 2%;
  left: 7%;
}

.router-capability-visual > .router-source-stack,
.router-capability-visual > .router-need-core,
.router-capability-visual > .router-capability-nodes,
.router-capability-visual > .router-ranked-output,
.router-capability-visual > .router-learning-chip {
  position: absolute;
  z-index: 2;
}

.router-capability-visual > .router-source-stack {
  top: 6%;
  right: 5%;
  bottom: auto;
  left: 5%;
}

.router-capability-visual > .router-need-core {
  top: 51%;
  left: 24%;
}

.router-capability-visual > .router-capability-nodes {
  inset: 0;
}

.router-capability-nodes .capability-human {
  top: 27%;
  left: 40%;
}

.router-capability-nodes .capability-ai {
  top: 46%;
  left: 45%;
}

.router-capability-nodes .capability-provider {
  bottom: 20%;
  left: 39%;
}

.router-capability-visual > .router-ranked-output {
  top: 29%;
  right: 4%;
  width: 29%;
  min-height: 42%;
}

.router-capability-visual > .router-learning-chip {
  right: 7%;
  bottom: 5%;
  left: 7%;
}

@media (max-width: 820px) {
  .product-module {
    scroll-margin-top: 76px;
  }

  .product-module:nth-child(odd) .module-copy,
  .product-module:nth-child(even) .module-copy {
    order: 1;
  }

  .product-module:nth-child(odd) .module-visual,
  .product-module:nth-child(even) .module-visual {
    order: 2;
  }
}

@media (max-width: 640px) {
  .architecture-surface-list b {
    min-height: 56px;
    padding-inline: 10px;
  }

  .architecture-surface-list b > span {
    font-size: 9px;
  }

  .architecture-task-chain {
    min-height: 208px;
    padding: 10px;
  }

  .architecture-memory-copy > strong {
    font-size: 18px;
  }

  .product-modules-heading {
    min-height: 260px;
    padding-bottom: 24px;
  }
}

/* Definitive product-page component layer */
.doni-island-dialogue {
  display: none !important;
}

.workspace-progress {
  min-height: 54px;
  grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto;
  gap: 7px;
  padding: 7px;
  border-color: rgba(91, 83, 126, 0.07);
  border-radius: 15px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(249, 248, 255, 0.45)),
    linear-gradient(90deg, rgba(93, 119, 234, 0.025), rgba(132, 90, 224, 0.06));
}

.workspace-progress span {
  display: inline-flex;
  min-width: 70px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(92, 82, 125, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.34);
  color: #756f7e;
  font-size: 8px;
  line-height: 1;
}

.workspace-progress span::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(98, 88, 139, 0.08);
  border-radius: 7px;
  background: rgba(241, 239, 249, 0.78);
  box-shadow: none;
  color: #8f879c;
  font-size: 5.5px;
  font-weight: 780;
  opacity: 1;
}

.workspace-progress span:nth-of-type(1)::before {
  content: "01";
}

.workspace-progress span:nth-of-type(2)::before {
  content: "02";
}

.workspace-progress span:nth-of-type(3)::before {
  content: "03";
}

.workspace-progress span:nth-of-type(4)::before {
  content: "04";
}

.workspace-progress span.is-active {
  min-width: 82px;
  border-color: rgba(255, 255, 255, 0.68);
  background: linear-gradient(140deg, rgba(93, 116, 239, 0.96), rgba(130, 83, 222, 0.96));
  box-shadow:
    0 10px 23px rgba(76, 57, 172, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.workspace-progress span.is-active::before {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.17);
  color: #fff;
  animation: workspace-index-breathe 1.9s ease-in-out infinite;
}

.workspace-progress span.is-complete::before {
  background: rgba(101, 96, 182, 0.08);
  color: #6f6792;
}

.workspace-progress i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 115, 232, 0.13), rgba(130, 87, 224, 0.36), rgba(91, 115, 232, 0.13));
}

.workspace-progress i::after {
  top: -2px;
  width: 6px;
  height: 6px;
  box-shadow:
    0 0 0 4px rgba(112, 94, 222, 0.055),
    0 0 12px rgba(112, 94, 222, 0.28);
}

.architecture-task-chain {
  min-height: 188px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 44%, rgba(76, 119, 245, 0.1), transparent 23%),
    radial-gradient(circle at 88% 50%, rgba(143, 88, 226, 0.09), transparent 25%),
    rgba(255, 255, 255, 0.33);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.86),
    0 16px 40px rgba(48, 40, 92, 0.035);
}

.architecture-task-chain::before {
  display: block;
  top: 50%;
  right: 11%;
  left: 11%;
  height: 1px;
  background: linear-gradient(90deg, rgba(80, 120, 241, 0.12), rgba(126, 94, 227, 0.25), rgba(146, 87, 218, 0.12));
}

.architecture-task-chain::after {
  display: block;
  top: calc(50% - 3px);
  left: 11%;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: #7566e6;
  box-shadow: 0 0 0 7px rgba(108, 98, 226, 0.07), 0 0 18px rgba(108, 98, 226, 0.32);
  animation: task-chain-packet 7.2s ease-in-out infinite;
}

.architecture-task-chain > span {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 158px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  justify-items: stretch;
  gap: 1px 8px;
  overflow: hidden;
  padding: 13px 13px 11px;
  border: 1px solid rgba(99, 85, 157, 0.055);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(250, 248, 255, 0.48));
  box-shadow:
    0 14px 30px rgba(55, 44, 104, 0.045),
    inset 0 1px rgba(255, 255, 255, 0.96);
}

.architecture-task-chain > span small {
  display: grid;
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 8px;
  background: rgba(101, 105, 214, 0.07);
  color: #70688e;
  font-size: 6px;
  font-weight: 780;
}

.architecture-task-chain > span strong {
  align-self: end;
  font-size: 12px;
  line-height: 1;
}

.architecture-task-chain > span em {
  grid-column: 2;
  margin: 2px 0 0;
  color: #898291;
  font-size: 6.5px;
  font-style: normal;
}

.architecture-task-chain > span > b {
  position: relative;
  display: block;
  min-height: 60px;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(117, 98, 225, 0.075), transparent 58%),
    rgba(244, 243, 252, 0.48);
}

.architecture-task-chain > span > q {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: #746e7c;
  font-size: 6.5px;
  font-weight: 620;
  line-height: 1.2;
  quotes: none;
}

.architecture-task-chain > span > q::before,
.architecture-task-chain > span > q::after {
  content: "";
}

.task-skills-map {
  width: 100%;
}

.task-skills-map canvas {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}

.architecture-memory {
  min-height: 218px;
  overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(circle at 66% 50%, rgba(123, 97, 225, 0.075), transparent 23%),
    radial-gradient(circle at 82% 28%, rgba(82, 126, 247, 0.065), transparent 28%),
    rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.82),
    0 20px 46px rgba(50, 40, 94, 0.035);
}

.architecture-memory-graph {
  --memory-rx: 4deg;
  --memory-ry: -4deg;
  height: 176px;
  border: 0;
  background: transparent;
  transform: perspective(850px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 0 68%, transparent 98%);
}

.architecture-memory-graph > div {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.98), rgba(176, 188, 251, 0.72) 23%, rgba(119, 93, 220, 0.34) 51%, transparent 72%);
  box-shadow:
    0 0 0 16px rgba(110, 100, 223, 0.035),
    0 0 48px rgba(101, 91, 213, 0.16);
  clip-path: none;
}

.architecture-memory-graph > div > i {
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #7664df;
  box-shadow: 0 0 0 6px rgba(111, 98, 222, 0.07);
}

.architecture-memory-graph > .memory-node {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(80, 73, 94, 0.76);
  font-size: 6px;
  font-weight: 690;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: none;
}

.architecture-memory-graph > .memory-node::before,
.architecture-memory-graph > .memory-node::after {
  display: none;
}

.architecture-memory-graph > .memory-node > i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7465db;
  box-shadow: 0 0 0 5px rgba(109, 98, 221, 0.055);
}

.memory-human {
  top: 22%;
  left: 8%;
}

.memory-service {
  top: 20%;
  right: 7%;
}

.memory-workflow {
  right: 14%;
  bottom: 15%;
}

.product-modules {
  padding-top: 126px;
}

.product-modules-heading {
  min-height: 286px;
  align-items: end;
  padding-top: 74px;
  padding-bottom: 44px;
}

.product-modules-heading > div:first-child {
  align-self: end;
  padding-bottom: 22px;
}

.module-nebula-shell {
  position: relative;
  align-self: end;
  height: 206px;
  margin-bottom: -4px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(128, 97, 235, 0.09), transparent 34%),
    radial-gradient(ellipse at center, rgba(231, 235, 255, 0.24), transparent 68%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.module-nebula {
  z-index: 1;
  inset: 4% 5%;
  width: 90%;
  height: 92%;
}

.module-nebula-shell > span {
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.98), rgba(173, 186, 255, 0.76) 19%, rgba(130, 92, 226, 0.42) 47%, rgba(97, 77, 186, 0.12) 68%, transparent 72%);
  box-shadow:
    0 0 0 13px rgba(112, 105, 225, 0.045),
    0 0 42px rgba(109, 91, 224, 0.22);
}

.module-timeline {
  display: grid;
  gap: 0;
}

.product-module {
  position: relative;
  min-height: 610px;
  grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(54px, 6vw, 104px);
  padding: 72px 0;
}

.product-module:nth-child(even) {
  grid-template-columns: minmax(520px, 1.22fr) minmax(330px, 0.78fr);
}

.product-module::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  right: calc(50% - 50vw);
  bottom: 12%;
  left: calc(50% - 50vw);
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 22%, rgba(83, 121, 241, 0.025) 44%, rgba(141, 88, 226, 0.042) 52%, transparent 72%);
  opacity: 0.78;
}

.product-module:nth-child(even)::after {
  background:
    linear-gradient(45deg, transparent 22%, rgba(141, 88, 226, 0.04) 46%, rgba(83, 121, 241, 0.025) 56%, transparent 75%);
}

.module-copy {
  position: relative;
  align-self: center;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.72fr);
  column-gap: 12px;
}

.module-copy h3 {
  max-width: 560px;
  margin-top: 22px;
}

.module-visual {
  min-height: 470px;
  transform-origin: center;
}

.product-module:nth-child(odd) .module-visual {
  transform-origin: left center;
}

.product-module:nth-child(even) .module-visual {
  transform-origin: right center;
}

.router-source-stack {
  top: 7%;
  right: 5%;
  bottom: auto;
  left: 5%;
  display: grid;
  width: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.router-source-stack span {
  min-height: 32px;
  justify-content: center;
  padding: 6px 7px;
  text-align: center;
}

.router-need-core {
  top: 51%;
  left: 27%;
  width: 110px;
  height: 110px;
}

.router-capability-nodes span {
  min-width: 104px;
}

.capability-human {
  top: 27%;
  left: 42%;
}

.capability-ai {
  top: 47%;
  left: 45%;
}

.capability-provider {
  bottom: 20%;
  left: 39%;
}

.router-ranked-output {
  top: 29%;
  right: 4%;
  width: 29%;
  min-height: 40%;
}

.router-learning-chip {
  bottom: 5%;
}

@media (max-width: 1180px) {
  .product-module,
  .product-module:nth-child(even) {
    grid-template-columns: minmax(300px, 0.9fr) minmax(430px, 1.1fr);
    gap: 44px;
  }

  .product-module:nth-child(even) {
    grid-template-columns: minmax(430px, 1.1fr) minmax(300px, 0.9fr);
  }

  .module-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-copy > p,
  .module-copy ul {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .workspace-progress span {
    min-width: 46px;
    gap: 0;
    padding-inline: 7px;
  }

  .workspace-progress span::before {
    display: none;
  }

  .workspace-progress span.is-active {
    min-width: 58px;
  }

  .architecture-task-chain {
    min-height: 332px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-task-chain::before,
  .architecture-task-chain::after {
    display: none;
  }

  .architecture-task-chain > span {
    min-height: 145px;
  }

  .product-modules {
    padding-top: 92px;
  }

  .product-modules-heading {
    min-height: 252px;
    padding-top: 52px;
    padding-bottom: 28px;
  }

  .module-nebula-shell {
    height: 164px;
  }

  .product-module,
  .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 58px 0;
  }

  .product-module:nth-child(even) .module-copy,
  .product-module:nth-child(even) .module-visual {
    order: 0;
  }

  .module-copy,
  .product-module:nth-child(even) .module-copy {
    order: 1;
  }

  .module-visual,
  .product-module:nth-child(even) .module-visual {
    order: 2;
    min-height: 440px;
  }

  .architecture-memory-copy > strong {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .architecture-task-chain {
    min-height: 326px;
    padding: 10px;
  }

  .architecture-task-chain > span {
    min-height: 142px;
    padding: 10px;
  }

  .architecture-task-chain > span > q {
    display: none;
  }

  .module-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-copy .section-kicker {
    grid-column: 2;
  }

  .module-copy h3,
  .module-copy > p,
  .module-copy ul {
    grid-column: 1 / -1;
  }
}

/* Highest-priority Product layout layer. Keep this block at EOF. */
.execution-route-lines path {
  fill: none;
  stroke: rgba(112, 94, 222, 0.3);
  stroke-width: 1.25;
}

.architecture-task-chain {
  min-height: 214px;
  padding: 12px;
  border: 0;
  background:
    linear-gradient(rgba(102, 88, 170, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 88, 170, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 48% 52%, rgba(103, 91, 224, 0.065), transparent 42%),
    rgba(255, 255, 255, 0.24);
  background-size: 26px 26px, 26px 26px, auto, auto;
}

.architecture-task-chain > span {
  min-height: 182px;
  border: 0;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.product-modules {
  padding-top: 112px;
}

.product-modules-heading {
  min-height: 190px;
  padding-top: 40px;
  padding-bottom: 28px;
}

.module-nebula-shell {
  height: 168px;
}

body .product-module,
body .product-module:nth-child(even) {
  min-height: 650px;
  grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
  align-items: stretch;
  gap: clamp(54px, 6vw, 104px);
  padding-block: 72px;
}

body .module-copy,
body .product-module:nth-child(even) .module-copy {
  align-self: stretch;
  min-width: 0;
  min-height: 520px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 40px auto minmax(0, 1fr) auto;
  column-gap: 14px;
  padding: 22px 0 8px;
}

body .module-copy .module-number {
  position: static;
  grid-column: 1;
  grid-row: 1;
}

body .module-copy .section-kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

body .module-copy h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 28px;
}

body .module-copy > p {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 24px;
}

body .module-copy ul {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  border: 0;
}

body .module-visual,
body .product-module:nth-child(even) .module-visual {
  align-self: stretch;
  min-width: 0;
  min-height: 520px;
}

body .module-doni .module-copy,
body .module-router .module-copy,
body .module-memory .module-copy {
  order: 1;
}

body .module-doni .module-visual,
body .module-router .module-visual,
body .module-memory .module-visual {
  order: 2;
}

body .module-decoder .module-copy,
body .module-orchestrator .module-copy {
  order: 2;
}

body .module-decoder .module-visual,
body .module-orchestrator .module-visual {
  order: 1;
}

@media (max-width: 820px) {
  .architecture-task-chain {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-task-chain > span {
    min-height: 146px;
  }

  .product-modules {
    padding-top: 80px;
  }

  .product-modules-heading {
    min-height: 214px;
    padding-top: 42px;
    padding-bottom: 28px;
  }

  .module-nebula-shell {
    height: 156px;
  }

  body .product-module,
  body .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 58px;
  }

  body .module-copy,
  body .product-module:nth-child(even) .module-copy {
    order: 1;
    width: 100%;
    min-height: 0;
    transform: translateY(18px);
  }

  body .module-visual,
  body .product-module:nth-child(even) .module-visual {
    order: 2;
    width: 100%;
    min-height: 430px;
    transform: translateY(18px) scale(0.99);
  }

  body .product-module.reveal.in-view .module-copy,
  body .product-module.reveal.in-view .module-visual {
    transform: none;
  }

  body .module-copy ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .architecture-task-chain {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .architecture-task-chain > span {
    min-height: 136px;
  }

  body .module-copy {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body .module-copy .section-kicker {
    grid-column: 2;
  }

  body .module-copy h3,
  body .module-copy > p,
  body .module-copy ul {
    grid-column: 1 / -1;
  }
}

/* Product composition reset: one continuous system, July 2026. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.workspace-agent-cli {
  display: block;
  min-height: 42px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.workspace-agent-cli .agent-cli-command {
  width: 100%;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 13px;
}

.workspace-agent-cli .agent-cli-command code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-architecture {
  isolation: isolate;
}

.architecture-task-chain {
  min-height: 146px;
  gap: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  background:
    linear-gradient(rgba(102, 88, 170, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 88, 170, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 10% 52%, rgba(79, 121, 246, 0.09), transparent 23%),
    radial-gradient(circle at 88% 52%, rgba(145, 88, 226, 0.08), transparent 26%),
    rgba(255, 255, 255, 0.22);
  background-size: 24px 24px, 24px 24px, auto, auto, auto;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

.architecture-task-chain::before {
  top: 55%;
  right: 7%;
  left: 7%;
  opacity: 0.7;
}

.architecture-task-chain::after {
  top: calc(55% - 3px);
}

.architecture-task-chain > span {
  min-height: 132px;
  grid-template-rows: auto auto 1fr auto;
  padding: 10px 12px 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.architecture-task-chain > span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16%;
  right: 0;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(transparent, rgba(104, 91, 164, 0.1), transparent);
}

.architecture-task-chain > span > b {
  min-height: 54px;
  margin-top: 4px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.architecture-task-chain > span > q {
  margin-top: 3px;
}

.architecture-memory {
  min-height: 158px;
  grid-template-columns: minmax(340px, 0.82fr) minmax(440px, 1.18fr);
  gap: 18px;
  padding: 14px 24px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 72% 50%, rgba(116, 96, 225, 0.07), transparent 41%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.38), rgba(247, 246, 255, 0.16));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68);
}

.architecture-memory-copy {
  align-self: center;
}

.architecture-memory-copy > strong {
  font-size: 19px;
  white-space: nowrap;
}

.architecture-memory-copy > small {
  max-width: 620px;
  margin-top: 5px;
}

.architecture-memory-facets {
  margin-top: 10px;
}

.architecture-memory-graph {
  height: 132px;
  margin: -4px -12px;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--memory-rx)) rotateY(var(--memory-ry));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 72%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 0 72%, transparent 98%);
}

.architecture-memory-graph canvas {
  inset: -8% -4%;
  width: 108%;
  height: 116%;
  filter: saturate(1.35) contrast(1.12);
}

.architecture-memory-graph > div {
  display: none;
}

.architecture-memory-graph > .memory-node {
  font-size: 5.5px;
  opacity: 0.76;
}

.product-modules {
  position: relative;
  isolation: isolate;
  padding-top: 38px;
  background:
    radial-gradient(circle at 15% 10%, rgba(74, 119, 244, 0.08), transparent 27%),
    radial-gradient(circle at 86% 14%, rgba(145, 86, 225, 0.08), transparent 29%);
}

.product-modules::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(50% - 50vw);
  bottom: 0;
  left: calc(50% - 50vw);
  pointer-events: none;
  background:
    linear-gradient(rgba(103, 88, 170, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 88, 170, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(248, 249, 255, 0.45), rgba(248, 246, 255, 0.18));
  background-size: 32px 32px, 32px 32px, auto;
}

.product-modules-heading {
  position: relative;
  display: grid;
  min-height: 178px;
  grid-template-columns: minmax(480px, 0.9fr) minmax(540px, 1.1fr);
  align-items: center;
  gap: 24px;
  overflow: visible;
  padding: 18px 0 8px;
}

.product-modules-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(104, 91, 168, 0.08) 20%, rgba(104, 91, 168, 0.08) 80%, transparent);
}

.product-modules-heading > div:first-child {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 0 0 0 2px;
}

.product-modules-heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(26px, 2.35vw, 38px);
  line-height: 1;
  white-space: nowrap;
}

.module-heading-flow {
  position: relative;
  display: grid;
  width: min(520px, 92%);
  height: 42px;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  margin-top: 19px;
}

.module-heading-flow::before {
  content: "";
  position: absolute;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(71, 116, 245, 0.06), rgba(100, 97, 228, 0.42), rgba(146, 83, 222, 0.08));
}

.module-heading-flow i {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  justify-self: center;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: #7467e4;
  box-shadow: 0 0 0 7px rgba(108, 98, 226, 0.055);
  animation: module-flow-pulse 4.8s ease-in-out infinite;
}

.module-heading-flow i:nth-child(2) { animation-delay: 0.45s; }
.module-heading-flow i:nth-child(3) { animation-delay: 0.9s; }
.module-heading-flow i:nth-child(4) { animation-delay: 1.35s; }
.module-heading-flow i:nth-child(5) { animation-delay: 1.8s; }

@keyframes module-flow-pulse {
  16% {
    box-shadow: 0 0 0 12px rgba(108, 98, 226, 0), 0 0 20px rgba(108, 98, 226, 0.22);
    transform: scale(1.2);
  }
  42%,
  100% {
    transform: none;
  }
}

.module-nebula-shell {
  position: absolute;
  z-index: 1;
  top: -12px;
  right: -5%;
  bottom: -16px;
  left: 42%;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 60% 50%, rgba(125, 96, 229, 0.075), transparent 39%),
    radial-gradient(ellipse at 46% 50%, rgba(78, 124, 245, 0.05), transparent 43%);
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 66%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 0 66%, transparent 98%);
  pointer-events: none;
}

.module-nebula {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  filter: saturate(1.35) contrast(1.08);
}

.module-nebula-shell > span {
  display: none;
}

.module-timeline {
  position: relative;
  gap: 0;
}

.module-timeline::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(102, 89, 168, 0.07) 9%, rgba(102, 89, 168, 0.07) 91%, transparent);
}

body .product-module,
body .product-module:nth-child(even) {
  min-height: 0;
  grid-template-columns: minmax(360px, 0.9fr) minmax(500px, 1.1fr);
  align-items: stretch;
  gap: clamp(44px, 5vw, 82px);
  padding-block: 54px;
  isolation: isolate;
}

body .product-module:nth-child(even) {
  grid-template-columns: minmax(500px, 1.1fr) minmax(360px, 0.9fr);
}

body .product-module::after {
  top: 4%;
  bottom: 4%;
  opacity: 0.66;
}

body .module-copy,
body .product-module:nth-child(even) .module-copy {
  position: relative;
  align-self: stretch;
  min-height: 480px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 40px auto auto minmax(80px, 1fr) auto;
  align-content: stretch;
  column-gap: 14px;
  overflow: hidden;
  padding: 24px 0 10px;
}

body .module-copy .module-number {
  grid-column: 1;
  grid-row: 1;
}

body .module-copy .section-kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

body .module-copy h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 680px;
  margin: 22px 0 0;
  font-size: clamp(34px, 3.15vw, 52px);
  line-height: 1.03;
}

body .module-copy > p {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 680px;
  margin: 22px 0 0;
}

body .module-copy::after {
  content: "";
  position: relative;
  display: block;
  min-height: 86px;
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: stretch;
  margin: 16px 0 5px;
  opacity: 0.66;
  background:
    radial-gradient(circle at 8% 50%, rgba(109, 99, 225, 0.48) 0 3px, transparent 4px),
    radial-gradient(circle at 32% 22%, rgba(82, 124, 244, 0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 65%, rgba(138, 88, 222, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 28%, rgba(109, 99, 225, 0.4) 0 3px, transparent 4px),
    linear-gradient(12deg, transparent 14%, rgba(106, 94, 210, 0.1) 14.2%, rgba(106, 94, 210, 0.1) 14.8%, transparent 15% 47%, rgba(106, 94, 210, 0.08) 47.2%, rgba(106, 94, 210, 0.08) 47.8%, transparent 48%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 94%);
  mask-image: linear-gradient(90deg, #000, transparent 94%);
  animation: module-signal-drift 8s ease-in-out infinite alternate;
}

body .product-module:nth-child(even) .module-copy::after {
  transform: scaleX(-1);
}

@keyframes module-signal-drift {
  to {
    background-position: 9px -3px, -8px 4px, 11px -5px, -6px 3px, 14px 0;
    opacity: 0.9;
  }
}

body .module-copy ul {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body .module-copy li {
  min-height: 74px;
  padding: 13px 12px 12px 27px;
  border: 1px solid rgba(102, 89, 158, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

body .module-copy li::before {
  top: 18px;
  left: 13px;
}

body .module-visual,
body .product-module:nth-child(even) .module-visual {
  align-self: stretch;
  min-width: 0;
  min-height: 480px;
  overflow: hidden;
  border-color: rgba(103, 89, 162, 0.045);
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 24px 60px rgba(49, 39, 86, 0.065),
    inset 0 1px rgba(255, 255, 255, 0.78);
}

body .module-doni .module-copy,
body .module-router .module-copy,
body .module-memory .module-copy {
  order: 1;
}

body .module-doni .module-visual,
body .module-router .module-visual,
body .module-memory .module-visual {
  order: 2;
}

body .module-decoder .module-copy,
body .module-orchestrator .module-copy {
  order: 2;
}

body .module-decoder .module-visual,
body .module-orchestrator .module-visual {
  order: 1;
}

.doni-visual {
  position: relative;
  align-content: center;
  gap: 16px;
  padding: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(151, 92, 228, 0.12), transparent 31%),
    radial-gradient(circle at 13% 88%, rgba(72, 119, 248, 0.11), transparent 32%),
    linear-gradient(rgba(104, 91, 165, 0.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 91, 165, 0.023) 1px, transparent 1px),
    rgba(249, 248, 255, 0.55);
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
}

.doni-config {
  min-height: 82px;
  padding: 14px 16px;
  border-color: rgba(99, 84, 154, 0.055);
  background: rgba(255, 255, 255, 0.48);
}

.doni-config > span {
  background: rgba(116, 97, 225, 0.08);
  color: #6759bd;
}

.doni-surfaces {
  gap: 10px;
}

.doni-surfaces .doni-surface {
  position: relative;
  min-height: 86px;
  gap: 13px;
  overflow: hidden;
  padding: 13px 14px;
  border: 1px solid rgba(94, 80, 151, 0.065);
  border-radius: 14px;
  background:
    linear-gradient(rgba(102, 91, 160, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 91, 160, 0.022) 1px, transparent 1px),
    rgba(255, 255, 255, 0.46);
  background-size: 15px 15px, 15px 15px, auto;
  color: #5f5969;
  font-size: 12px;
}

.doni-surfaces .doni-surface b {
  font-weight: 690;
}

.doni-surfaces .doni-surface::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -26px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118, 96, 225, 0.09), transparent 68%);
  opacity: 0;
  transition: opacity 260ms ease, transform 500ms var(--ease-spring);
}

.doni-surfaces .doni-surface:hover::after {
  opacity: 1;
  transform: translate(-8px, -8px);
}

.doni-surface-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

.doni-surface-icon.icon-siri {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 22%, transparent 24%),
    conic-gradient(from 40deg, #62c8fa, #6c7bf3, #cf78dd, #f19cc5, #62c8fa);
  box-shadow:
    0 0 0 5px rgba(120, 104, 228, 0.07),
    0 0 22px rgba(99, 139, 239, 0.24);
  animation: siri-orb-turn 4.8s linear infinite;
}

.doni-surface-icon.icon-siri::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
}

@keyframes siri-orb-turn {
  to { transform: rotate(360deg); }
}

.doni-surface-icon.icon-shortcuts {
  transform: rotate(45deg);
  border: 3px solid #6f6ee9;
  border-radius: 9px;
  box-shadow: inset 0 0 0 4px rgba(121, 107, 231, 0.08);
}

.doni-surface-icon.icon-shortcuts::before,
.doni-surface-icon.icon-shortcuts::after {
  content: "";
  position: absolute;
  inset: 7px -6px;
  border: 2px solid rgba(91, 126, 242, 0.66);
  border-radius: 7px;
}

.doni-surface-icon.icon-shortcuts::after {
  inset: -6px 7px;
  border-color: rgba(141, 83, 224, 0.56);
}

.doni-surface-icon.icon-backtap {
  width: 28px;
  height: 42px;
  margin-inline: 6px;
  border: 2px solid #696374;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(116, 98, 224, 0.06);
}

.doni-surface-icon.icon-backtap::before,
.doni-surface-icon.icon-backtap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #7368dd;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.doni-surface-icon.icon-backtap::before {
  width: 8px;
  height: 8px;
}

.doni-surface-icon.icon-backtap::after {
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: backtap-wave 2.2s ease-out infinite;
}

@keyframes backtap-wave {
  38% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.75); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.doni-surface-icon.icon-island {
  width: 42px;
  height: 20px;
  margin-inline: -1px;
  border-radius: 999px;
  background: #171521;
  box-shadow: 0 7px 16px rgba(31, 25, 48, 0.15);
  animation: doni-island-breathe 3.8s var(--ease-spring) infinite;
}

.doni-surface-icon.icon-island::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7784ef;
  box-shadow: 0 0 0 4px rgba(117, 105, 229, 0.09);
}

@keyframes doni-island-breathe {
  45% { width: 50px; }
}

.doni-surface-icon.icon-lockscreen {
  width: 30px;
  height: 40px;
  margin-inline: 5px;
  border: 2px solid #6a6572;
  border-radius: 9px;
}

.doni-surface-icon.icon-lockscreen::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 9px;
  height: 7px;
  border: 2px solid #7569df;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  transform: translateX(-50%);
}

.doni-surface-icon.icon-lockscreen::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 6px;
  left: 5px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(86, 126, 244, 0.18), rgba(139, 87, 224, 0.23));
}

.doni-surface-icon.icon-iosapp {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.95) 0 5px, transparent 6px),
    linear-gradient(145deg, #6b86f4, #8d63e2);
  box-shadow: 0 9px 20px rgba(94, 77, 197, 0.2);
}

.doni-surface-icon.icon-iosapp::before,
.doni-surface-icon.icon-iosapp::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.doni-surface-icon.icon-iosapp::after {
  bottom: 13px;
}

.doni-action {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #171521, #28203d);
}

.doni-action::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-18deg);
  animation: doni-action-sheen 5.4s ease-in-out infinite;
}

@keyframes doni-action-sheen {
  48%,
  100% { left: 125%; }
}

.workspace-demo[data-phase="router"] .workspace-insight h3 {
  max-width: none;
  white-space: nowrap;
}

.workspace-demo[data-phase="router"] .workspace-insight {
  overflow: hidden;
}

.workspace-demo[data-phase="router"] .workspace-insight-visual {
  min-height: 318px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 55% 52%, rgba(116, 96, 226, 0.065), transparent 56%),
    linear-gradient(rgba(103, 88, 170, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 88, 170, 0.018) 1px, transparent 1px);
  background-size: auto, 25px 25px, 25px 25px;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 74%, transparent 99%);
  mask-image: radial-gradient(ellipse at center, #000 0 74%, transparent 99%);
}

.workspace-demo[data-phase="router"] .router-graph-canvas {
  inset: -5%;
  width: 110%;
  height: 110%;
  filter: saturate(1.35) contrast(1.14);
}

.product-employers {
  background:
    radial-gradient(circle at 16% 20%, rgba(75, 120, 244, 0.1), transparent 34%),
    radial-gradient(circle at 84% 70%, rgba(142, 86, 224, 0.1), transparent 37%),
    linear-gradient(135deg, #f5f8ff, #f9f6ff 58%, #f5f3ff);
}

.organization-solution {
  border-color: rgba(98, 84, 156, 0.055);
  background: rgba(255, 255, 255, 0.27);
  box-shadow:
    0 26px 70px rgba(51, 40, 91, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.78);
}

@media (max-width: 1180px) {
  .product-modules-heading {
    grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr);
  }

  body .product-module,
  body .product-module:nth-child(even) {
    grid-template-columns: minmax(310px, 0.9fr) minmax(430px, 1.1fr);
    gap: 38px;
  }

  body .product-module:nth-child(even) {
    grid-template-columns: minmax(430px, 1.1fr) minmax(310px, 0.9fr);
  }

  body .module-copy ul {
    grid-template-columns: 1fr;
  }

  body .module-copy li {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .architecture-task-chain {
    min-height: 254px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-task-chain > span {
    min-height: 120px;
  }

  .architecture-memory {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .architecture-memory-copy > strong {
    white-space: normal;
  }

  .architecture-memory-graph {
    height: 116px;
  }

  .product-modules {
    padding-top: 24px;
  }

  .product-modules-heading {
    min-height: 198px;
    grid-template-columns: 1fr;
    padding: 24px 0 18px;
  }

  .product-modules-heading h2 {
    white-space: normal;
  }

  .module-heading-flow {
    width: 100%;
  }

  .module-nebula-shell {
    top: 34px;
    right: -18%;
    bottom: -12px;
    left: 30%;
    opacity: 0.72;
  }

  body .product-module,
  body .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 42px;
  }

  body .module-copy,
  body .product-module:nth-child(even) .module-copy {
    order: 1;
    min-height: 0;
    grid-template-rows: 40px auto auto 68px auto;
    transform: translateY(14px);
  }

  body .module-visual,
  body .product-module:nth-child(even) .module-visual {
    order: 2;
    min-height: 430px;
    transform: translateY(14px) scale(0.99);
  }

  body .product-module.reveal.in-view .module-copy,
  body .product-module.reveal.in-view .module-visual {
    transform: none;
  }

  body .module-copy ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .workspace-commandbar {
    grid-template-columns: 1fr;
  }

  .architecture-task-chain {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .architecture-task-chain > span {
    min-height: 108px;
  }

  .architecture-task-chain > span:not(:last-child)::after {
    top: auto;
    right: 9%;
    bottom: 0;
    left: 9%;
    width: auto;
    height: 1px;
  }

  .product-modules-heading {
    min-height: 178px;
  }

  body .module-copy,
  body .product-module:nth-child(even) .module-copy {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: 38px auto auto 54px auto;
  }

  body .module-copy h3 {
    font-size: 34px;
  }

  body .module-copy ul {
    grid-template-columns: 1fr;
  }

  body .module-visual,
  body .product-module:nth-child(even) .module-visual {
    min-height: 390px;
  }

  .doni-visual {
    padding: 16px;
  }

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

  .doni-surfaces .doni-surface {
    min-height: 74px;
  }

  .workspace-demo[data-phase="router"] .workspace-insight h3 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-heading-flow i,
  .module-copy::after,
  .doni-surface-icon,
  .doni-action::after {
    animation: none !important;
  }
}

/* Final cohesion pass: visible nebula, responsive modules and organization Bento. */
.module-nebula-shell {
  inset: -12px -5% -16px 37%;
  left: 37%;
  width: auto;
  height: auto;
  align-self: stretch;
  justify-self: stretch;
  opacity: 1;
  background:
    radial-gradient(ellipse at 68% 48%, rgba(128, 96, 232, 0.17), transparent 34%),
    radial-gradient(ellipse at 43% 54%, rgba(72, 125, 247, 0.14), transparent 38%),
    radial-gradient(ellipse at 56% 52%, rgba(255, 255, 255, 0.72), transparent 64%);
}

.module-nebula-shell::before,
.module-nebula-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.module-nebula-shell::before {
  inset: 4% 0;
  opacity: 0.78;
  background:
    radial-gradient(circle at 8% 56%, rgba(83, 126, 247, 0.75) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 31%, rgba(125, 96, 232, 0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 29% 67%, rgba(89, 132, 247, 0.66) 0 1px, transparent 2px),
    radial-gradient(circle at 39% 22%, rgba(150, 92, 229, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 54%, rgba(92, 125, 243, 0.76) 0 2px, transparent 3px),
    radial-gradient(circle at 59% 34%, rgba(139, 90, 224, 0.74) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 67% 72%, rgba(76, 128, 248, 0.66) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 19%, rgba(148, 89, 226, 0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 48%, rgba(99, 111, 238, 0.78) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 66%, rgba(151, 91, 224, 0.62) 0 1.5px, transparent 2.5px);
  background-size: 390px 150px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 96%);
  animation: heading-nebula-drift 11s ease-in-out infinite alternate;
}

.module-nebula-shell::after {
  top: 50%;
  left: 62%;
  width: min(360px, 38vw);
  aspect-ratio: 2.8 / 1;
  border: 1px solid rgba(108, 98, 225, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 19px rgba(99, 120, 238, 0.025),
    0 0 0 43px rgba(141, 90, 224, 0.018),
    0 0 42px rgba(109, 95, 226, 0.09);
  transform: translate(-50%, -50%) rotate(-5deg);
  animation: heading-nebula-orbit 8s ease-in-out infinite alternate;
}

.module-nebula {
  z-index: 2;
  opacity: 0.88;
  filter: saturate(1.6) contrast(1.18);
}

@keyframes heading-nebula-drift {
  to {
    background-position: 26px -8px, -18px 11px, 14px 7px, -22px -9px, 19px 9px, -16px -8px, 24px 4px, -17px 8px, 20px -7px, -13px 7px;
    transform: translate3d(7px, -4px, 0) scale(1.025);
  }
}

@keyframes heading-nebula-orbit {
  to {
    opacity: 0.58;
    transform: translate(-48%, -52%) rotate(4deg) scale(1.05);
  }
}

.product-employers.section-shell {
  display: block;
}

.organization-solution {
  width: min(100%, 1380px);
  grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.42fr);
  align-items: stretch;
  gap: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-employer-copy {
  min-width: 0;
  min-height: 500px;
  padding: clamp(36px, 4vw, 58px);
}

.product-employer-copy h2 {
  max-width: 520px;
  font-size: clamp(42px, 4.25vw, 62px);
  letter-spacing: 0;
  overflow-wrap: normal;
}

.organization-priority {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: #777080;
  font-size: 10px;
}

.organization-priority span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 720;
}

.organization-priority i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7164dc;
  box-shadow: 0 0 0 6px rgba(112, 99, 220, 0.07);
}

.organization-priority small {
  opacity: 0.72;
}

.organization-engine {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 10%, rgba(143, 87, 226, 0.105), transparent 31%),
    radial-gradient(circle at 11% 88%, rgba(73, 123, 247, 0.09), transparent 33%),
    rgba(255, 255, 255, 0.37);
  box-shadow: 0 26px 68px rgba(53, 42, 91, 0.07);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}

.organization-engine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(99, 87, 159, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 87, 159, 0.022) 1px, transparent 1px);
  background-size: 25px 25px;
  -webkit-mask-image: radial-gradient(ellipse at 58% 52%, #000 0 40%, transparent 90%);
  mask-image: radial-gradient(ellipse at 58% 52%, #000 0 40%, transparent 90%);
}

.organization-engine > * {
  position: relative;
  z-index: 1;
}

.organization-engine-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  color: #756e7f;
  font-size: 11px;
}

.organization-engine-head span {
  color: #5f57a0;
  font-weight: 760;
}

.organization-engine-head strong {
  color: #302a38;
  font-size: 13px;
}

.organization-journey {
  min-height: 184px;
  padding: 18px;
  border-color: rgba(104, 90, 163, 0.045);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.74);
}

.organization-journey span {
  min-height: 116px;
  background:
    radial-gradient(circle at 86% 14%, rgba(126, 94, 225, 0.075), transparent 37%),
    rgba(255, 255, 255, 0.44);
}

.product-employer-outcomes {
  align-self: stretch;
}

.product-employer-outcomes article {
  min-height: 204px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  padding: 22px 20px 26px;
  border-color: rgba(102, 88, 159, 0.045);
  background: rgba(255, 255, 255, 0.4);
}

.organization-outcome-viz {
  position: relative;
  grid-column: 1 / -1;
  display: flex !important;
  min-height: 72px;
  align-items: end;
  justify-content: center;
  gap: 8px !important;
  padding: 12px 8px 0;
}

.organization-outcome-viz::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 8px;
  left: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(104, 91, 211, 0.22), transparent);
}

.organization-outcome-viz b {
  display: block;
  width: 15%;
  min-width: 8px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #8f66e5, #5c84f5);
  box-shadow: 0 5px 14px rgba(94, 87, 208, 0.13);
  transform-origin: bottom;
  animation: organization-viz-rise 4s var(--ease-spring) infinite alternate;
}

.organization-outcome-viz b:nth-child(1) { height: 35%; }
.organization-outcome-viz b:nth-child(2) { height: 58%; animation-delay: 180ms; }
.organization-outcome-viz b:nth-child(3) { height: 82%; animation-delay: 360ms; }
.organization-outcome-viz b:nth-child(4) { height: 68%; animation-delay: 540ms; }
.organization-outcome-viz b:nth-child(5) { height: 92%; animation-delay: 720ms; }

@keyframes organization-viz-rise {
  from { opacity: 0.45; transform: scaleY(0.38); }
  to { opacity: 1; transform: scaleY(1); }
}

.product-partner-cta {
  width: 100%;
}

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

  .product-employer-copy {
    min-height: 0;
  }

  .product-employer-copy h2 {
    max-width: 760px;
  }
}

@media (max-width: 820px) {
  .module-nebula-shell {
    inset: 20px -28% -20px 22%;
  }

  .organization-engine {
    padding: 14px;
  }

  .organization-engine-head {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .product-employer-outcomes article {
    min-height: 170px;
  }

  body .product-module,
  body .module-copy,
  body .module-visual,
  body .module-copy h3,
  body .module-copy > p,
  body .module-copy ul,
  body .module-copy li {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body .product-module,
  .module-timeline,
  .product-modules {
    overflow-x: clip;
  }
}

@media (max-width: 640px) {
  .product-employers.section-shell {
    padding-inline: 14px;
  }

  .product-employer-copy {
    padding: 30px 22px;
  }

  .product-employer-copy h2 {
    font-size: 40px;
  }

  .organization-journey {
    min-height: 0;
  }

  .product-employer-outcomes {
    grid-template-columns: 1fr;
  }

  .module-nebula-shell::after {
    left: 66%;
    width: 260px;
  }

  body .module-copy .module-number {
    width: 42px;
    max-width: 42px;
  }

  body .module-copy h3,
  body .module-copy > p,
  body .module-copy li {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-nebula-shell::before,
  .module-nebula-shell::after,
  .organization-outcome-viz b {
    animation: none !important;
  }
}

/* Product page final composition pass: one continuous system, softer edges. */
body.product-page .product-architecture {
  overflow: visible;
  border-color: rgba(115, 102, 190, 0.035);
  background:
    radial-gradient(circle at 18% 20%, rgba(84, 128, 255, 0.1), transparent 31%),
    radial-gradient(circle at 82% 78%, rgba(147, 88, 230, 0.1), transparent 33%),
    rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.78),
    0 30px 70px rgba(52, 48, 91, 0.06);
}

body.product-page .architecture-task-chain {
  min-height: 178px;
  margin-block: 0;
  padding: 14px 12px;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(78, 121, 255, 0.055), rgba(255, 255, 255, 0.08) 48%, rgba(145, 87, 226, 0.055));
  box-shadow: none;
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}

body.product-page .architecture-task-chain::before {
  top: 70px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(87, 123, 244, 0.32), rgba(142, 88, 224, 0.38), transparent);
  box-shadow: 0 0 24px rgba(113, 96, 225, 0.14);
}

body.product-page .architecture-task-chain::after {
  display: none;
}

body.product-page .architecture-task-chain > span {
  min-height: 148px;
  padding: 8px 16px 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.product-page .architecture-task-chain > span:not(:last-child)::after {
  top: 65px;
  right: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(113, 99, 224, 0.38);
  border-radius: 50%;
  background: rgba(252, 251, 255, 0.94);
  box-shadow: 0 0 0 7px rgba(112, 104, 226, 0.055);
}

body.product-page .architecture-task-chain > span > b {
  min-height: 76px;
  margin-top: 7px;
  overflow: visible;
}

body.product-page .architecture-task-chain > span > q {
  margin-top: 3px;
  opacity: 0.68;
}

body.product-page .task-skills-map {
  margin-inline: -18px;
}

body.product-page .task-skills-map canvas {
  inset: -14px -30px -10px;
  width: calc(100% + 60px);
  height: calc(100% + 24px);
  filter: saturate(1.15) contrast(1.06);
}

body.product-page .architecture-memory {
  overflow: hidden;
  border-color: rgba(105, 93, 165, 0.035);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(248, 247, 255, 0.1)),
    radial-gradient(circle at 74% 50%, rgba(103, 103, 244, 0.12), transparent 36%);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

body.product-page .architecture-memory-graph {
  inset-block: -20px;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 82% 82% at 52% 50%, #000 54%, transparent 100%);
}

body.product-page .architecture-memory-graph canvas {
  inset: -12%;
  width: 124%;
  height: 124%;
  filter: saturate(1.22) contrast(1.08);
}

body.product-page .product-modules {
  gap: 0;
  padding-bottom: 64px;
}

body.product-page .product-modules::before {
  inset: 100px 0 0;
  opacity: 0.42;
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
}

body.product-page .product-modules-heading {
  min-height: clamp(230px, 27vw, 330px);
  margin-bottom: 0;
  padding-block: clamp(40px, 6vw, 78px);
  align-items: center;
  overflow: visible;
}

body.product-page .product-modules-heading::after {
  display: none;
}

body.product-page .module-nebula-shell {
  inset: 6% -3% 0 44%;
  overflow: visible;
  mask-image: radial-gradient(ellipse 76% 68% at 52% 48%, #000 30%, transparent 100%);
}

body.product-page .module-nebula {
  opacity: 0.92;
  filter: saturate(1.18) contrast(1.05);
}

body.product-page .module-timeline {
  display: grid;
  gap: clamp(24px, 5vw, 68px);
  overflow: visible;
}

body.product-page .module-timeline::before {
  left: 50%;
  width: 1px;
  opacity: 0.22;
  background: linear-gradient(180deg, transparent, rgba(102, 96, 218, 0.42) 12%, rgba(138, 91, 222, 0.3) 88%, transparent);
}

body.product-page .product-module,
body.product-page .product-module:nth-child(even) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  min-height: clamp(590px, 58vw, 760px);
  gap: clamp(38px, 7vw, 110px);
  align-items: stretch;
  margin: 0;
  padding: clamp(42px, 6vw, 84px) 0;
  overflow: visible;
  isolation: isolate;
}

body.product-page .product-module:nth-child(even) {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
}

body.product-page .product-module::before {
  content: "";
  position: absolute;
  inset: 7% -9%;
  z-index: -2;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 14% 48%, rgba(73, 126, 255, 0.075), transparent 32%),
    radial-gradient(circle at 88% 42%, rgba(151, 87, 222, 0.07), transparent 34%);
  box-shadow: none;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

body.product-page .product-module:nth-child(even)::before {
  background:
    radial-gradient(circle at 84% 50%, rgba(73, 126, 255, 0.075), transparent 31%),
    radial-gradient(circle at 14% 44%, rgba(151, 87, 222, 0.07), transparent 34%);
}

body.product-page .product-module::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid rgba(111, 94, 224, 0.34);
  border-radius: 50%;
  background: rgba(253, 252, 255, 0.92);
  box-shadow: 0 0 0 9px rgba(106, 104, 225, 0.055), 0 0 28px rgba(105, 91, 219, 0.14);
  transform: translateY(-50%);
}

body.product-page .module-copy,
body.product-page .product-module:nth-child(even) .module-copy {
  grid-column: 1;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  min-height: 100%;
  padding: clamp(16px, 2vw, 28px) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.product-page .product-module:nth-child(even) .module-copy {
  grid-column: 2;
}

body.product-page .module-copy .module-number {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: 0;
}

body.product-page .module-copy .section-kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

body.product-page .module-copy h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 690px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

body.product-page .module-copy > p {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 660px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.62;
}

body.product-page .module-copy::after {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: center;
  width: 78%;
  min-height: 90px;
  margin: 18px 0;
  opacity: 0.62;
  background:
    radial-gradient(circle at 12% 50%, rgba(89, 117, 250, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 46%, rgba(133, 91, 225, 0.32) 0 2px, transparent 3px),
    linear-gradient(15deg, transparent 48%, rgba(96, 112, 227, 0.15) 49% 50%, transparent 51%);
  background-size: 42px 42px, 62px 62px, 100% 100%;
  mask-image: linear-gradient(90deg, #000, transparent);
}

body.product-page .product-module:nth-child(even) .module-copy::after {
  justify-self: end;
  transform: scaleX(-1);
}

body.product-page .module-copy ul {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 0;
}

body.product-page .module-copy li {
  min-height: 94px;
  padding: 16px 14px 14px 34px;
  border: 1px solid rgba(100, 89, 160, 0.055);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

body.product-page .module-copy li::before {
  left: 15px;
  top: 20px;
}

body.product-page .module-visual,
body.product-page .product-module:nth-child(even) .module-visual {
  grid-column: 2;
  align-self: stretch;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 16%, rgba(146, 91, 225, 0.09), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(75, 130, 255, 0.075), transparent 33%),
    rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.72),
    0 24px 72px rgba(62, 56, 102, 0.055);
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}

body.product-page .product-module:nth-child(even) .module-visual {
  grid-column: 1;
}

body.product-page .doni-visual,
body.product-page .decoder-world-visual,
body.product-page .router-capability-visual,
body.product-page .cross-device-visual,
body.product-page .memory-visual {
  padding: clamp(24px, 3vw, 42px);
}

body.product-page .decoder-world-canvas,
body.product-page .router-capability-visual > canvas,
body.product-page .memory-brain-canvas {
  inset: -7%;
  width: 114%;
  height: 114%;
  filter: saturate(1.2) contrast(1.06);
}

body.product-page .decoder-world-scene {
  inset: 5% 4% 6% 3%;
}

body.product-page .decoder-world-focus {
  right: 4%;
  width: 37%;
  max-width: 310px;
  min-height: 48%;
  border-color: rgba(111, 94, 195, 0.08);
  background: rgba(249, 248, 255, 0.58);
  backdrop-filter: blur(24px) saturate(1.2);
}

body.product-page .router-capability-visual {
  min-height: clamp(610px, 58vw, 760px);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  mask-image: radial-gradient(ellipse 88% 82% at 52% 50%, #000 53%, transparent 100%);
}

body.product-page .router-capability-visual > canvas {
  inset: -5% -12%;
  width: 124%;
  height: 110%;
  opacity: 0.95;
}

body.product-page .router-source-stack,
body.product-page .router-need-core,
body.product-page .router-capability-nodes,
body.product-page .router-ranked-output,
body.product-page .router-learning-chip {
  backdrop-filter: blur(20px) saturate(1.2);
}

body.product-page .cross-device-visual {
  min-height: clamp(600px, 57vw, 740px);
}

body.product-page .cross-device-grid {
  inset: 10% 5% 7%;
}

body.product-page .cross-app {
  border-color: rgba(102, 86, 161, 0.07);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(245, 242, 255, 0.38));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    0 14px 36px rgba(67, 57, 105, 0.08);
  backdrop-filter: blur(22px) saturate(1.25);
}

body.product-page .cross-device-lines path {
  stroke: rgba(106, 92, 225, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 7 9;
  animation: cross-device-flow 5s linear infinite;
}

body.product-page .cross-live-activity {
  right: 7%;
  bottom: 7%;
  left: 7%;
  border-color: rgba(104, 91, 168, 0.08);
  background: rgba(252, 251, 255, 0.66);
  backdrop-filter: blur(30px) saturate(1.25);
  box-shadow: 0 18px 45px rgba(57, 48, 95, 0.09), inset 0 1px rgba(255, 255, 255, 0.9);
}

@keyframes cross-device-flow {
  to { stroke-dashoffset: -80; }
}

body.product-page .memory-visual {
  min-height: clamp(620px, 60vw, 780px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(112, 97, 239, 0.13), transparent 24%),
    radial-gradient(circle at 64% 34%, rgba(154, 87, 226, 0.08), transparent 35%),
    rgba(255, 255, 255, 0.14);
  mask-image: radial-gradient(ellipse 90% 86% at 50% 50%, #000 56%, transparent 100%);
}

body.product-page .memory-brain-canvas {
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: 0.98;
  filter: saturate(1.22) contrast(1.1);
}

body.product-page .organization-solution {
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.35fr);
  align-items: stretch;
  gap: 16px;
}

body.product-page .product-employer-copy,
body.product-page .organization-engine {
  border-color: rgba(106, 92, 168, 0.05);
  background:
    radial-gradient(circle at 18% 20%, rgba(79, 127, 255, 0.09), transparent 30%),
    rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.82);
}

body.product-page .organization-engine {
  display: grid;
  grid-template-rows: auto auto auto minmax(250px, 1fr);
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 82%, rgba(149, 89, 225, 0.12), transparent 40%),
    radial-gradient(circle at 20% 18%, rgba(75, 126, 255, 0.07), transparent 34%),
    rgba(255, 255, 255, 0.34);
}

body.product-page .organization-scene {
  position: relative;
  min-height: 280px;
  margin: 6px -20px -20px;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 8px 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(110, 99, 232, 0.1), transparent 35%),
    linear-gradient(180deg, transparent, rgba(245, 242, 255, 0.38));
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000);
}

body.product-page .organization-scene canvas {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  filter: saturate(1.18) contrast(1.08);
}

body.product-page .organization-scene-copy {
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  gap: 4px;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #272233;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 14px 32px rgba(59, 50, 96, 0.08), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.22);
}

body.product-page .organization-scene-copy span {
  font-size: 14px;
  font-weight: 760;
}

body.product-page .organization-scene-copy small {
  color: #706a7a;
  font-size: 11px;
  line-height: 1.45;
}

body.product-page .product-partner-cta {
  grid-column: 1 / -1;
  margin-top: 0;
  border-color: rgba(102, 88, 161, 0.055);
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.82);
}

body.product-page .product-closing {
  display: none !important;
}

@media (max-width: 1100px) {
  body.product-page .product-module,
  body.product-page .product-module:nth-child(even) {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 44px;
  }

  body.product-page .module-copy,
  body.product-page .product-module:nth-child(even) .module-copy,
  body.product-page .module-visual,
  body.product-page .product-module:nth-child(even) .module-visual {
    grid-column: 1;
  }

  body.product-page .module-copy {
    grid-row: 1;
  }

  body.product-page .module-visual {
    grid-row: 2;
    min-height: 600px;
  }

  body.product-page .product-module::after,
  body.product-page .module-timeline::before {
    display: none;
  }

  body.product-page .organization-solution {
    grid-template-columns: 1fr;
  }

  body.product-page .organization-engine {
    min-height: 720px;
  }
}

@media (max-width: 760px) {
  body.product-page .architecture-task-chain {
    min-height: 0;
    padding-inline: 0;
    overflow-x: auto;
    mask-image: none;
    scroll-snap-type: x mandatory;
  }

  body.product-page .architecture-task-chain > span {
    min-width: 230px;
    scroll-snap-align: start;
  }

  body.product-page .architecture-task-chain > span:not(:last-child)::after {
    display: none;
  }

  body.product-page .product-modules-heading {
    min-height: 210px;
    padding-block: 34px;
  }

  body.product-page .module-nebula-shell {
    inset: 24% -34% -5% 30%;
  }

  body.product-page .module-copy,
  body.product-page .product-module:nth-child(even) .module-copy {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-inline: 4px;
  }

  body.product-page .module-copy h3 {
    font-size: clamp(36px, 10vw, 48px);
  }

  body.product-page .module-copy::after {
    min-height: 56px;
    margin-block: 12px;
  }

  body.product-page .module-copy ul {
    grid-template-columns: 1fr;
  }

  body.product-page .module-copy li {
    min-height: 0;
  }

  body.product-page .module-visual,
  body.product-page .product-module:nth-child(even) .module-visual,
  body.product-page .router-capability-visual,
  body.product-page .cross-device-visual,
  body.product-page .memory-visual {
    min-height: 520px;
    padding: 18px;
  }

  body.product-page .organization-engine {
    min-height: 800px;
    padding: 14px;
  }

  body.product-page .organization-scene {
    min-height: 250px;
    margin: 4px -14px -14px;
  }

  body.product-page .organization-scene-copy {
    right: 16px;
    bottom: 14px;
    left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.product-page .cross-device-lines path {
    animation: none !important;
  }
}