:root {
  --bg: #000000;
  --panel: #0a0a0a;
  --text: #f5f5f5;
  --muted: #888888;
  --accent: #4ea1ff;
  --border: #1c1c1c;
  /* Top-nav layout: --sb is the legacy sidebar half-width baked into every overlay's
     horizontal position. 0 keeps the old sidebar centering; 120px re-centers the whole
     presentation for the full-width top-nav layout (a uniform, distortion-free shift). */
  --sb: 120px;
  --nav-h: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  /* Rigid lockup: no page scroll, no rubber-band overscroll, so nothing drifts/bounces */
  overflow: hidden;
  overscroll-behavior: none;
  background-color: #000000;
  background-image: radial-gradient(circle farthest-corner, #060A33, #000000);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: block;
  min-height: 100vh;
}

/* MX + orb grouped lockup, centered in the content panel. Transforms as one unit. */
#lockup {
  position: fixed;
  top: 50%;
  left: calc(50% + 120px - var(--sb)); /* center within the content panel (offset by half the 240px sidebar) */
  width: max-content;       /* shrink-wrap the MX wordmark so left edge = left edge of M */
  transform: translate(-50%, -50%);
  transform-origin: left center; /* Part 2 scales about the M's left edge */
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 20;
  pointer-events: none;
}
/* Part 2 Step 1: scale to 60% about the M's left edge (vertically centered, anchored left) */
body.formed #lockup {
  transform: translate(-50%, -50%) scale(0.6);
}
/* Stage 3: orb slides to the center of the content panel (+165px lands it on content center) */
body.centered #lockup {
  transform: translateX(165px) translate(-50%, -50%) scale(0.6);
}

.top-logo {
  position: relative; /* establishes the box for the absolute M+X overlay */
  transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* Next step: the MX wordmark drifts up and fades out (orb stays put, never fades) */
body.cleared #lockup .top-logo {
  opacity: 0;
  transform: translateY(-40px);
}
/* Full MOX wordmark sets the box size (Layer 1) */
.top-logo .logo-full {
  display: block;
  height: 308px;
  width: auto;
  fill: var(--text);
  opacity: 1; /* initial state 100% */
  transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* On scroll, the O fades away with the rest of Layer 1, revealing the orb beneath */
body.revealed .top-logo .logo-full {
  opacity: 0;
}
/* M+X overlay fills the exact same box -> pixel-perfect alignment */
.top-logo .logo-mx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: var(--text);
}

/* Top nav */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: #000000;
  border-bottom: 1px solid #1c2a4a;
  padding: 0 24px;
  display: flex;
  align-items: center;
  z-index: 100; /* above all content overlays (orb/atom/flywheel/copy, z-index up to 30) */
}

.brand {
  display: flex;
  align-items: center;
  margin-right: 28px;
}

.brand-logo {
  height: 26px;
  width: auto;
  fill: var(--muted);
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 100%;
}

/* Each tab + its dropdown */
.navitem {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.tab {
  position: relative;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s ease;
}

.tab:hover { color: var(--text); }

/* Active tab: underline instead of a filled pill */
.tab.active { color: var(--text); }
.tab.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: #2f6bff;
}

/* Dropdown of sub-sections under a tab */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  background: #0a0a0a;
  border: 1px solid #1c2a4a;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s;
  z-index: 50;
}
.navitem:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.subtab {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.subtab:hover { color: var(--text); background: #131313; }
.subtab.active { color: var(--text); }
/* A section panel (e.g. Product) is the active tab -> no subtab stays highlighted */
body.subview .subtab.active { color: var(--muted); }
body.subview .subtab:hover { color: var(--text); }

/* While jumping between sections, suppress transitions so it snaps instantly */
body.no-anim *, body.no-anim *::before, body.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* Content */
.content {
  padding: calc(var(--nav-h) + 32px) 64px 64px;
  max-width: 1100px;
}

.panel { display: none; animation: fade 0.4s ease; }
.panel.active { display: block; }

.panel.active { display: block; }

/* Orb sits at the O position inside the lockup (center matches the old +48px nudge) */
.orb-stage {
  position: absolute;
  left: 532px;       /* M-left + 532 ≈ center of the O */
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(60vh, 60vw, 620px);
  aspect-ratio: 1 / 1;
  /* Layer 3 starts hidden; crossfades in on scroll (easeInOutCubic, 1000ms) */
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 1400ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.revealed .orb-stage {
  opacity: 1;
}
#orb-canvas { width: 100%; height: 100%; display: block; }

/* Part 2: CORE wordmark, revealed letter-by-letter to the right of the lockup */
#core {
  position: fixed;
  top: 50%;
  left: calc(50% + 238px - var(--sb)); /* right of the 60%-scaled MOX; group stays centered in content */
  transform: translateY(-50%);
  transform-style: preserve-3d;
  perspective: 900px; /* gives the per-letter Y rotation real depth toward the camera */
  z-index: 20;
  pointer-events: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0.6em; /* very wide tracking (~one char between letters) */
  color: #1230ff;        /* the cobalt blue used by the orb's diamond core */
  white-space: nowrap;
  transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* Next step: CORE drifts up and fades out alongside the MX */
body.cleared #core {
  opacity: 0;
  transform: translateY(calc(-50% - 30px));
}
/* Each letter starts edge-on and rotates to face the camera as it fades in */
#core span {
  display: inline-block;
  opacity: 0;
  transform: rotateY(90deg);
  transform-origin: 50% 50%;
  transition: opacity 450ms cubic-bezier(0.33, 1, 0.68, 1),
              transform 650ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* Reveal C -> O -> R -> E after the 800ms formation completes, ~120ms apart */
body.formed #core span { opacity: 1; transform: rotateY(0deg); }
body.formed #core span:nth-child(1) { transition-delay: 400ms; }
body.formed #core span:nth-child(2) { transition-delay: 520ms; }
body.formed #core span:nth-child(3) { transition-delay: 640ms; }
body.formed #core span:nth-child(4) { transition-delay: 760ms; }

/* Tagline: centered vertically with the orb, ~24px to its right; fades up on clear */
#tagline {
  position: fixed;
  top: 50%;
  left: calc(50% + 82px - var(--sb)); /* ~36px to the right of the orb's edge */
  transform: translateY(calc(-50% + 18px)); /* starts low, fades up into place */
  opacity: 0;
  transition: opacity 700ms ease,
              transform 700ms cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
  z-index: 20;
  pointer-events: none;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(19.5px, 1.875vw, 30px); /* scales to fit beside the orb (−25%) */
  line-height: 1.1;
  color: #ffffff;
  white-space: nowrap;
}
#tagline span { color: #2f6bff; } /* "compounds" highlighted in blue */
body.cleared #tagline {
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: 400ms; /* lands after MX + CORE have started clearing */
}
/* Stage 3: tagline travels right with the orb (+165px, same as the orb) so the gap
   stays constant the whole time, while it fades out */
body.centered #tagline {
  opacity: 0;
  transform: translateY(-50%) translateX(165px);
  transition: opacity 800ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0ms;
}

/* Stage 4: Assets column — right-aligned, vertically centered with the orb, 40px to its left.
   The container is centered as a whole; as the list expands, the title rises automatically. */
#assets {
  position: fixed;
  top: 50%;
  right: calc(50% + 30px + var(--sb)); /* right edge sits left of the orb */
  width: max-content;
  text-align: right;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  z-index: 20;
  pointer-events: none;
  transform: translateY(-50%); /* bare "Assets" appears centered on the orb */
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* As the list reveals, shift up so the LIST (not the whole column) centers on the orb.
   Delayed so the bare "Assets" stays centered when it first appears, then rises with the list. */
body.assets #assets {
  transform: translateY(calc(-50% - 25px));
  transition-delay: 600ms;
}
/* Stage 5: the column slides left to open room for the data tunnel (immediate) */
body.tunnel #assets {
  transform: translateY(calc(-50% - 25px)) translateX(-184px);
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0ms;
}

/* Stage 5: Data Tunnel overlay between the list and the orb */
#tunnel {
  position: fixed;
  top: 50%;
  left: calc(50% - 206px - var(--sb)); /* ~8px right of the shifted list */
  width: 326px;            /* flared end follows the list; right end stays on the orb */
  height: 540px;
  transform: translateY(-50%);
  z-index: 10;             /* behind the text and orb */
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
#tunnel canvas { display: block; }
body.tunnel #tunnel {
  opacity: 1;
  transition-delay: 300ms; /* fades in just after the column starts sliding */
}

/* Status label centered under the orb, ~24px below it; appears with the funnel */
/* Intro eyebrow above the MOX logo — same blue treatment as the orb label */
#evolution-label {
  position: fixed;
  top: calc(50% - 218px);          /* its bottom lands ~64px above the MOX top (50% - 154px) */
  left: calc(50% + 172px - var(--sb));         /* nudged right of the lockup center */
  transform: translate(-50%, -100%);
  z-index: 20;
  pointer-events: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 19pt;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #4ea1ff;
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.revealed #evolution-label { opacity: 0; } /* fades out with the full-logo O on first scroll */

#orb-label {
  position: fixed;
  top: calc(50% + 120px);
  left: calc(50% + 120px - var(--sb)); /* content panel center (orb center) */
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11pt;
  line-height: 2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #4ea1ff;
  opacity: 0;
  transition: opacity 700ms ease;
}
body.tunnel #orb-label {
  opacity: 1;
  transition-delay: 1000ms; /* after the column move + funnel have appeared */
}
/* "Assets" heading: fades in moving right -> left, then rises with the column */
.assets-title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 500ms ease,
              transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
}
body.assets #assets .assets-title {
  opacity: 1;
  transform: translateX(0);
}
/* List expands (which lifts the title) while each line fades in, one after another */
.assets-list {
  color: #aeb2b8; /* light gray body text (title stays white) */
  max-height: 0;
  overflow: hidden;
  /* gap lives here (clipped while collapsed) so the bare "Assets" centers on the orb */
  padding-top: 24px;
  transition: max-height 1200ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.assets #assets .assets-list {
  max-height: 540px; /* fits all 18 larger lines */
  transition-delay: 600ms; /* pause after the heading lands */
}
.assets-list p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  opacity: 0;
  transform: translateX(-24px); /* Assets slides in from the left */
  transition: opacity 450ms ease,
              transform 600ms cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
}
body.assets #assets .assets-list p {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(600ms + var(--i) * 70ms); /* line by line */
}
/* Scroll-up reverse: fade the whole column out together, frozen in place (heading stays
   lined up with the body), then it resets once hidden. */
body.assets-out #assets .assets-title,
body.assets-out #assets .assets-list p {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 450ms ease;
  transition-delay: 0ms;
}

/* ============ Operations column — mirror of Assets, right of the orb ============ */
#operations {
  position: fixed;
  top: 50%;
  left: calc(50% + 270px - var(--sb)); /* left edge sits right of the orb */
  width: max-content;
  text-align: left;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  z-index: 20;
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.operations #operations {
  transform: translateY(calc(-50% - 25px));
  transition-delay: 600ms;
}
/* Stage 7: column slides right to open room for the mirrored tunnel */
body.tunnel-right #operations {
  transform: translateY(calc(-50% - 25px)) translateX(184px);
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0ms;
}
/* "Operations" heading enters from the left (mirror of Assets) */
#operations .assets-title { transform: translateX(-40px); }
body.operations #operations .assets-title { opacity: 1; transform: translateX(0); }
#operations .assets-list p { transform: translateX(24px); } /* slides in from the right (mirror) */
body.operations #operations .assets-list {
  max-height: 540px;
  transition-delay: 600ms;
}
body.operations #operations .assets-list p {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(600ms + var(--i) * 70ms);
}
/* Scroll-up reverse: fade out together, frozen in place */
body.operations-out #operations .assets-title,
body.operations-out #operations .assets-list p {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 450ms ease;
  transition-delay: 0ms;
}

/* Mirrored Data Tunnel — right of the orb, flared end toward Operations */
#tunnel-right {
  position: fixed;
  top: 50%;
  left: calc(50% + 120px - var(--sb)); /* left edge on the orb center (bundle side) */
  width: 326px;
  height: 540px;
  transform: translateY(-50%) scaleX(-1); /* mirror: flared end faces right */
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
body.tunnel-right #tunnel-right {
  opacity: 1;
  transition-delay: 300ms;
}

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}

h1 {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.lead {
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
}

.hero-orb {
  margin-top: 48px;
}
.hero-orb img {
  width: 260px;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 0 60px rgba(78, 161, 255, 0.35));
}
.hero-orb.small img { width: 180px; height: 180px; }

.cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 760px;
}
.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  background: var(--panel);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover { border-color: #2a2a2a; transform: translateY(-3px); }
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.5; }

.list {
  margin-top: 40px;
  list-style: none;
  max-width: 620px;
}
.list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 400;
}
.list li span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.contact-link {
  display: inline-block;
  margin-top: 36px;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  transition: opacity 0.18s ease;
}
.contact-link:hover { opacity: 0.7; }

@media (max-width: 720px) {
  .topnav { padding: 0 14px; }
  .brand { margin-right: 16px; }
  .tab { padding: 8px 10px; font-size: 14px; }
  .content { padding: calc(var(--nav-h) + 24px) 24px 48px; }
  h1 { font-size: 38px; }
}

/* ============ Final stage: zoom into the core ============
   Everything fades out (columns, funnels, label); the orb + mark scale up huge and
   fade to 10%. Placed last so it overrides the per-stage reveal opacities. */
body.expand #assets, body.learning #assets,
body.expand #operations, body.learning #operations,
body.expand #tunnel, body.learning #tunnel,
body.expand #tunnel-right, body.learning #tunnel-right,
body.expand #orb-label, body.learning #orb-label {
  opacity: 0;
  transition: opacity 420ms ease;
}
/* Stage 9 (Learning loop): orb + mark start 8x (800%) the connected size and shrink to it. */
@keyframes orbLearnIn {
  from { transform: translate(-50%, -50%) scale(8); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
body.unexpanding .orb-stage {
  animation: orbLearnIn 1000ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/* Atom shrinks back in sync with the orb (same 1000ms + easing). */
body.unexpanding #atom {
  transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1),
              left 1000ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* Decision-atoms copy scrolls up and fades out together as we leave for the Learning loop. */
@keyframes atomCopyOut {
  from { opacity: 1; transform: translateY(calc(-50% + 8px)); }
  to   { opacity: 0; transform: translateY(calc(-50% - 88px)); }
}
body.unexpanding #atom-copy {
  animation: atomCopyOut 520ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
body.expand .orb-stage {
  transform: translate(-50%, -50%) scale(15);
  opacity: 0;
}

/* Atom GLB animation — appears with the final orb expansion.
   Starts 10px tall, 0% opacity, at viewport center; ends 450px tall, 100% opacity,
   centered in the left half. Timed (1400ms) to finish with the orb scale transition. */
#atom {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1120px;
  height: 900px;
  transform: translate(-50%, -50%) scale(0.0111); /* ~10px tall (10/900) */
  opacity: 0;
  transition: transform 1400ms cubic-bezier(0.65, 0, 0.35, 1),
              left 1400ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 1400ms ease;
  z-index: 30;
  pointer-events: none;
}
#atom canvas { display: block; width: 100%; height: 100%; }
body.expand #atom {
  left: calc(25% + 174px - var(--sb)); /* horizontal center of the first content column (200px sidebar), +24px */
  transform: translate(-50%, -50%) scale(1); /* full 450px tall */
  opacity: 1;
}

/* Atom screen copy — second content column, appears with the atom (body.expand) */
#atom-copy {
  position: fixed;
  top: 50%;
  left: calc(50% + 160px - var(--sb)); /* into the second content column */
  transform: translateY(calc(-50% + 8px));
  width: 512px;
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
body.expand #atom-copy {
  opacity: 1;
  transition-delay: 700ms; /* lands after the atom has grown in */
}
#atom-copy .ac-stat {
  margin: 0 0 22px 0;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--accent);
}
#atom-copy .ac-head {
  margin: 0 0 18px 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
#atom-copy .ac-body {
  margin: 0 0 16px 0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  color: #c2c7d0;
}
/* Example atom card */
#atom-copy .ac-card {
  margin: 40px 0;
  padding: 32px;
  background: rgba(22, 38, 79, 0.32);
  border: 1px solid #1c2a4a;
  border-radius: 20px;
}
#atom-copy .ac-card .ac-body { margin-bottom: 0; }
#atom-copy .ac-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
#atom-copy .ac-icon {
  color: var(--accent);
  font-size: 20px;
}
#atom-copy .ac-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  display: inline-block;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Scrolling back from Decision atoms: crossfade to the connected state. Orb + atom use
   opacity-only transitions so their scale snaps (no expand-reverse animation). */
body.xfade .orb-stage,
body.xfade #atom {
  transition: opacity 600ms ease;
}
body.xfade #atom-copy {
  transition: opacity 300ms ease; /* copy fades out fast on the way back */
}


/* ============ Learning loop flywheel ============ */
#flywheel {
  position: fixed;
  top: 50%;
  left: calc(50% + 120px - var(--sb)); /* centered on the orb */
  width: 0; height: 0;
  z-index: 18;
  pointer-events: none;
  visibility: hidden;            /* nothing renders outside the Learning loop */
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 900ms;
}
body.learning #flywheel {
  visibility: visible;
  /* keep the transform transition (matches #lockup) so the compound move-over stays in sync;
     only the visibility flip is instant */
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0s;
}
.fw-arrows {
  position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px;
  transform: translate(-50%, -50%);
  overflow: visible;
}
/* arrows draw tile-to-tile (stroke-dashoffset) */
.fw-arrows > path {
  stroke: #3b82f6; stroke-width: 2; opacity: 0.85;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 160; stroke-dashoffset: 160;
  transition: stroke-dashoffset 380ms ease;
}
body.learning .fw-arrows > path { stroke-dashoffset: 0; }
/* tiles rotate + fade in on the Y axis */
.fw-tile {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) perspective(800px) rotateY(90deg);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1), opacity 450ms ease;
  width: 120px; height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px;
  border: 2px solid transparent; border-radius: 16px;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(22,64,246,0) 25.5%, rgba(22,64,246,0) 48%, rgba(22,64,246,0.3) 100%);
  background-color: rgba(8, 12, 28, 0.6);
}
/* Gradient outline only (fill untouched): 45deg top-left -> bottom-right.
   A masked pseudo-element paints a 2px ring; the center is masked out so nothing covers the fill. */
.fw-tile::before {
  content: "";
  position: absolute;
  inset: -2px;            /* cover the full border-box */
  border-radius: 16px;
  padding: 2px;           /* ring thickness */
  background: linear-gradient(135deg, #83a3f1 0%, #0f2a6c 64%, rgba(255,255,255,0.8) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
body.learning .fw-tile {
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) perspective(800px) rotateY(0deg);
  opacity: 1;
}
body.learning .fw-tile:nth-of-type(1) { transition-delay: 700ms; }
body.learning .fw-tile:nth-of-type(2) { transition-delay: 880ms; }
body.learning .fw-tile:nth-of-type(3) { transition-delay: 1060ms; }
body.learning .fw-tile:nth-of-type(4) { transition-delay: 1240ms; }
body.learning .fw-tile:nth-of-type(5) { transition-delay: 1420ms; }
body.learning .fw-tile:nth-of-type(6) { transition-delay: 1600ms; }
body.learning .fw-tile:nth-of-type(7) { transition-delay: 1780ms; }
body.learning .fw-tile:nth-of-type(8) { transition-delay: 1960ms; }
body.learning .fw-arrows > path:nth-of-type(1) { transition-delay: 820ms; }
body.learning .fw-arrows > path:nth-of-type(2) { transition-delay: 1000ms; }
body.learning .fw-arrows > path:nth-of-type(3) { transition-delay: 1180ms; }
body.learning .fw-arrows > path:nth-of-type(4) { transition-delay: 1360ms; }
body.learning .fw-arrows > path:nth-of-type(5) { transition-delay: 1540ms; }
body.learning .fw-arrows > path:nth-of-type(6) { transition-delay: 1720ms; }
body.learning .fw-arrows > path:nth-of-type(7) { transition-delay: 1900ms; }
body.learning .fw-arrows > path:nth-of-type(8) { transition-delay: 2080ms; }
.fw-icon { font-size: 34px; color: #2f6bff; }
.fw-label { font-family: "Inter", sans-serif; font-size: 16px; color: #fff; text-align: center; line-height: 1.1; }

/* ============ Compound stage: flywheel moves right, copy appears left ============ */
body.compound #flywheel { transform: translateX(198px); }
body.compound #lockup { transform: translateX(363px) translate(-50%, -50%) scale(0.6); }
#compound-copy {
  position: fixed;
  top: 50%;
  left: calc(50% - 500px - var(--sb));
  transform: translateY(-50%);
  width: 392px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  font-family: "Inter", system-ui, sans-serif;
}
body.compound #compound-copy { opacity: 1; transition-delay: 500ms; }
#compound-copy .cc-head { margin: 0 0 20px 0; font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
#compound-copy .cc-head span { color: #2f6bff; } /* "compounds" highlighted in blue */
#compound-copy .cc-body { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 300; color: #c2c7d0; }
#compound-copy .cc-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: #2f6bff;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto; /* parent #compound-copy is pointer-events:none */
  transition: background 0.18s ease;
}
#compound-copy .cc-cta:hover { background: #2257d6; }
#compound-copy .cc-cta .cc-arrow { font-size: 20px; transition: transform 0.18s ease; }
#compound-copy .cc-cta:hover .cc-arrow { transform: translateX(3px); }

/* Mouse pointer rendered as a small blue dot everywhere */
*, *::before, *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='%232f6bff'/%3E%3C/svg%3E") 10 10, auto;
}

/* ============ Embed panels (Operations / Development) — full-bleed ============ */
.embed-panel { padding: 0; }
.embed-panel.active {
  position: fixed;
  top: var(--nav-h);      /* below the top nav */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;            /* above presentation overlays (≤30), below the nav (100) */
  background: #000;
  display: block;
  overflow: hidden;       /* clip the embedded app to the panel bounds */
}

/* Operations & Development embeds fill their panel */
.dev-embed { width: 100%; height: 100%; border: 0; display: block; }

/* When a section panel is open, hide the scroll-presentation overlays behind it */
body.subview #lockup,
body.subview #core,
body.subview #tagline,
body.subview #orb-label,
body.subview #evolution-label,
body.subview #atom,
body.subview #atom-copy,
body.subview #compound-copy,
body.subview #flywheel,
body.subview #tunnel,
body.subview #tunnel-right { display: none; }

/* ============ Approach — slide deck (scroll-snap, full-bleed) ============ */
.deck-panel { padding: 0; }
/* Approach view: drop the blue radial gradient, fill every background with the slides' black */
body:has(.deck-panel.active) {
  background-image: none !important;
  background-color: #000000 !important;
}
body:has(.deck-panel.active) .topnav { background: #000000; }
.deck-panel.active {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #000000;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.deck { display: flex; flex-direction: column; }
.deck .slide {
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  padding: 24px 48px;
  box-sizing: border-box;
}
.deck .slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}