*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 88px; }
  body { margin: 0; background: #f4f3ee; color: #0b1518; font-family: 'Manrope', system-ui, sans-serif; overflow-x: hidden; }
  body.menu-open { overflow: hidden; }
  :root {
    --ink: #0b1518;
    --paper: #f4f3ee;
    --white: #fff;
    --muted: #607074;
    --line: #cbd0cc;
    --blue: #2f72ff;
    --lime: #c8ff63;
    --coral: #ff6b5d;
    --aqua: #47d6c4;
    --yellow: #ffc857;
    --eye-x: 0px;
    --eye-y: 0px;
  }
  ::selection { background: var(--lime); color: var(--ink); }
  a { color: inherit; }
  button, input { font: inherit; }
  button { color: inherit; }
  img, video { max-width: 100%; }
  section { position: relative; }
  .shell { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }
  .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--lime); color: var(--ink); transform: translateY(-150%); }
  .skip-link:focus { transform: translateY(0); }
  .mono, .eyebrow, .section-no, .chip, .tag, .kicker { font-family: 'DM Mono', monospace; letter-spacing: 0; text-transform: uppercase; }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 12px; font-weight: 500; }
  .eyebrow::before { content: ''; width: 30px; height: 2px; background: currentColor; }
  .section-title { max-width: 820px; margin: 0; font-size: 58px; line-height: 1.02; letter-spacing: 0; font-weight: 800; }
  .section-lede { max-width: 680px; margin: 22px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
  .section-head { margin-bottom: 52px; }
  .btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; }
  .btn:hover { transform: translateY(-2px); background: var(--blue); border-color: var(--blue); }
  .btn-light { background: var(--white); color: var(--ink); border-color: var(--white); }
  .btn-light:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost:hover { color: var(--white); }
  .btn .arrow { font-size: 19px; line-height: 1; }

  /* Header */
  .site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 74px; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(11,21,24,.9); color: var(--white); backdrop-filter: blur(18px); }
  .nav-wrap { width: min(1380px, calc(100% - 56px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
  .brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-weight: 800; font-size: 18px; }
  .brand-mark { position: relative; width: 28px; height: 28px; border: 2px solid currentColor; transform: rotate(45deg); }
  .brand-mark::after { content: ''; position: absolute; width: 9px; height: 9px; right: -5px; top: -5px; background: var(--lime); border: 2px solid var(--ink); }
  .brand b { color: var(--aqua); }
  .primary-nav { display: flex; align-items: center; gap: 30px; }
  .primary-nav a { color: #c7d0d1; text-decoration: none; font-size: 13px; font-weight: 600; }
  .primary-nav a:hover { color: var(--white); }
  .nav-demo { min-height: 38px; padding: 0 15px; border: 1px solid #718083; border-radius: 4px; display: inline-flex; align-items: center; }
  .nav-demo:hover { background: var(--lime); color: var(--ink) !important; border-color: var(--lime); }
  .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid #536266; background: transparent; color: var(--white); border-radius: 4px; font-size: 22px; cursor: pointer; }

  /* Hero */
  .hero-runway { position: relative; height: 320vh; background: #121c1b; }
  .hero { position: sticky; top: 0; height: 100svh; min-height: 640px; padding-top: 74px; background: #121c1b; color: var(--white); overflow: hidden; isolation: isolate; }
  .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #314044; }
  .hero-shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: 42px; align-items: center; padding-block: 52px 38px; }
  .hero-copy { position: relative; z-index: 4; height: 100%; }
  .hero-step { position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; pointer-events: none; transform: translateY(calc(-50% + 24px)); transition: opacity .48s ease, transform .6s cubic-bezier(.22,1,.36,1); }
  .hero-step.active { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
  .hero .eyebrow { color: var(--aqua); }
  .hero h1 { max-width: 800px; margin: 0; font-size: 76px; line-height: .97; letter-spacing: 0; font-weight: 800; }
  .hero h2 { max-width: 760px; margin: 0; font-size: 64px; line-height: 1; letter-spacing: 0; font-weight: 800; }
  .hero h2 span { color: var(--lime); }
  .hero h1 span { color: var(--lime); }
  .hero-lede { max-width: 690px; margin: 28px 0 0; color: #b5c0c2; font-size: 18px; line-height: 1.7; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .hero-actions .btn-ghost { color: var(--white); border-color: #657579; }
  .hero-actions .btn-ghost:hover { border-color: var(--blue); }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 40px; }
  .proof-item { min-width: 112px; border-left: 1px solid #425156; padding-left: 14px; }
  .proof-item strong { display: block; font-size: 22px; color: var(--white); }
  .proof-item span { display: block; margin-top: 3px; color: #8fa0a4; font-size: 11px; line-height: 1.45; }
  .hero-footnote { margin: 16px 0 0; color: #788a8e; font-size: 10px; }

  .hero-visual { position: relative; height: 100%; z-index: 2; pointer-events: none; }
  .scroll-video { position: absolute; top: 50%; right: -56px; width: min(960px, 61vw); max-width: none; height: auto; display: block; transform: translateY(-50%); object-fit: contain; filter: saturate(1.03) contrast(1.02); }
  .video-status { position: absolute; right: 20px; bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #536568; background: rgba(18,28,27,.88); color: #b9c5c6; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .video-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); animation: core-pulse 2.5s ease-in-out infinite; }
  .hero-scroll-ui { position: absolute; z-index: 6; left: 50%; bottom: 24px; width: min(1240px, calc(100% - 72px)); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; color: #809194; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .scroll-track { height: 2px; background: #3b4b4e; overflow: hidden; }
  .scroll-track i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
  .scroll-chapter { color: var(--white); }

  /* Resolution-independent CSS mascot */
  .ninja-stage { position: absolute; inset: 40px 2% 0; z-index: 2; perspective: 900px; pointer-events: none; }
  .ninja-tip { position: absolute; z-index: 8; top: 10px; left: 45%; width: min(270px, 46%); min-height: 76px; padding: 14px 16px; border: 1px solid #627277; border-radius: 4px; background: var(--white); color: var(--ink); box-shadow: 10px 10px 0 var(--blue); font-size: 13px; line-height: 1.5; }
  .ninja-tip::after { content: ''; position: absolute; left: 24px; bottom: -9px; width: 16px; height: 16px; background: var(--white); border-right: 1px solid #627277; border-bottom: 1px solid #627277; transform: rotate(45deg); }
  .ninja-tip b { display: block; margin-bottom: 4px; font: 10px 'DM Mono', monospace; color: var(--blue); text-transform: uppercase; }
  .ninja { position: absolute; left: 50%; bottom: 22px; width: 270px; height: 435px; transform: translateX(-50%) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transform-style: preserve-3d; transition: transform .12s linear; animation: ninja-breathe 4s ease-in-out infinite; }
  .signal-core { position: absolute; z-index: 5; top: 0; left: 50%; width: 58px; height: 58px; margin-left: -29px; display: grid; place-items: center; border: 1px solid #668086; background: var(--blue); color: var(--white); font: 12px 'DM Mono', monospace; animation: core-pulse 2.5s ease-in-out infinite; }
  .signal-core::before, .signal-core::after { content: ''; position: absolute; inset: -9px; border: 1px solid #486067; animation: core-turn 7s linear infinite; }
  .signal-core::after { inset: -17px; border-color: #2e4045; animation-direction: reverse; animation-duration: 11s; }
  .head { position: absolute; z-index: 4; top: 83px; left: 45px; width: 180px; height: 160px; border: 2px solid #9fa7a6; border-radius: 48% 48% 44% 44%; background: #f6f5ef; box-shadow: inset -15px -10px 0 #d9ddda, 0 20px 35px rgba(0,0,0,.32); }
  .head::before { content: ''; position: absolute; inset: 13px 18px auto; height: 47px; border-top: 6px solid #d9ddda; border-radius: 50%; }
  .face { position: absolute; z-index: 2; left: 20px; right: 20px; top: 55px; height: 50px; border: 2px solid #9fa7a6; border-radius: 21px; background: #f0a98e; overflow: hidden; }
  .eye { position: absolute; top: 14px; width: 31px; height: 17px; border-top: 4px solid #19272a; background: #fff7ed; overflow: hidden; }
  .eye.left { left: 22px; transform: skewY(8deg); }
  .eye.right { right: 22px; transform: skewY(-8deg); }
  .pupil { position: absolute; left: 10px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translate(var(--eye-x), var(--eye-y)); transition: transform .07s linear; }
  .lid { position: absolute; z-index: 2; inset: -2px -1px auto; height: 2px; background: #f0a98e; transform-origin: top; animation: blink 5.8s infinite; }
  .mask-fold { position: absolute; left: 35px; right: 35px; bottom: 20px; height: 27px; border-top: 2px solid #bcc2c0; border-radius: 50%; }
  .body { position: absolute; z-index: 3; left: 61px; top: 225px; width: 148px; height: 139px; border: 2px solid #9fa7a6; border-radius: 35px 35px 24px 24px; background: #f4f3ee; box-shadow: inset -17px -8px 0 #d7dcda; }
  .body::before { content: ''; position: absolute; top: 8px; left: 36px; width: 70px; height: 74px; border-left: 4px solid #b6bfbd; border-bottom: 4px solid #b6bfbd; transform: skewY(-38deg); }
  .belt { position: absolute; z-index: 5; top: 326px; left: 55px; width: 160px; height: 23px; border: 2px solid #909b99; background: #e3e6e2; }
  .belt::after { content: ''; position: absolute; left: 67px; top: -5px; width: 25px; height: 29px; border: 2px solid #7e8988; background: var(--aqua); }
  .arm { position: absolute; z-index: 2; top: 238px; width: 54px; height: 145px; border: 2px solid #9fa7a6; border-radius: 28px; background: #eff0eb; box-shadow: inset -8px -8px 0 #d3d8d5; transform-origin: 50% 16%; }
  .arm::after { content: ''; position: absolute; left: 8px; bottom: -5px; width: 34px; height: 34px; border: 2px solid #9a7a6f; border-radius: 50%; background: #f0a98e; }
  .arm.left { left: 27px; transform: rotate(25deg); animation: arm-left 4s ease-in-out infinite; }
  .arm.right { right: 27px; transform: rotate(-25deg); animation: arm-right 4s ease-in-out infinite; }
  .leg { position: absolute; z-index: 2; top: 342px; width: 74px; height: 85px; border: 2px solid #9fa7a6; border-radius: 20px 20px 35px 35px; background: #e9ebe7; box-shadow: inset -10px -7px 0 #cdd3d0; }
  .leg.left { left: 55px; transform: rotate(6deg); }
  .leg.right { right: 55px; transform: rotate(-6deg); }
  .shadow { position: absolute; left: 50%; bottom: 2px; width: 230px; height: 25px; margin-left: -115px; border-radius: 50%; background: #050b0d; opacity: .58; animation: shadow-breathe 4s ease-in-out infinite; }
  @keyframes ninja-breathe { 50% { bottom: 29px; } }
  @keyframes shadow-breathe { 50% { transform: scaleX(.9); opacity: .42; } }
  @keyframes core-pulse { 50% { transform: translateY(-7px); background: var(--coral); } }
  @keyframes core-turn { to { transform: rotate(360deg); } }
  @keyframes arm-left { 50% { transform: rotate(18deg); } }
  @keyframes arm-right { 50% { transform: rotate(-18deg); } }
  @keyframes blink { 0%, 46%, 50%, 100% { height: 2px; } 48%, 49% { height: 19px; } }

  .signal-strip { min-height: 92px; display: flex; align-items: center; border-top: 1px solid #2b3a3e; background: var(--ink); color: var(--white); }
  .signal-inner { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; }
  .signal-inner > span { color: var(--aqua); font: 11px 'DM Mono', monospace; text-transform: uppercase; white-space: nowrap; }
  .signal-list { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #a8b4b6; font-size: 12px; }
  .signal-list i { width: 4px; height: 4px; background: #53656a; border-radius: 50%; }

  /* Platform summary */
  .platform-intro { --platform-pull-y: 0px; --platform-pull: 0; --platform-ninja-x: 0px; --platform-ninja-scale: 1; --platform-halo-scale: .7; --platform-halo-rotation: 0deg; --platform-exit: 0; --pull-rx: 0deg; --pull-ry: 0deg; position: relative; padding: 120px 0; overflow: clip; background: var(--paper); }
  .platform-sticky { position: relative; }
  .intro-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; align-items: start; }
  .intro-visual { position: sticky; top: 94px; min-height: 650px; perspective: 900px; }
  .section-no { margin: 0; font-size: 12px; color: var(--blue); }
  .ninja-pull { position: relative; height: 610px; margin-top: 20px; transform-style: preserve-3d; }
  .pull-halo { position: absolute; z-index: 0; top: 132px; left: 50%; width: 290px; aspect-ratio: 1; border: 2px solid rgba(47,114,255,.5); border-radius: 50%; transform: translate3d(-50%, var(--platform-pull-y), -10px) scale(var(--platform-halo-scale)) rotate(var(--platform-halo-rotation)); box-shadow: inset 0 0 0 22px rgba(47,114,255,.035), 0 0 0 1px rgba(47,214,196,.35); will-change: transform; }
  .pull-halo::before, .pull-halo::after { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(71,214,196,.7); border-radius: 50%; }
  .pull-halo::after { inset: 28%; border-color: var(--lime); border-style: dashed; }
  .pull-halo i { position: absolute; top: 50%; left: -19%; width: 138%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,114,255,.5), transparent); }
  .pull-anchor { position: absolute; z-index: 5; top: 0; left: 50%; width: 34px; height: 34px; border: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); background: var(--paper); box-shadow: 8px 8px 0 rgba(47,114,255,.14); }
  .pull-anchor i { position: absolute; inset: 11px; background: var(--lime); }
  .pull-line { position: absolute; z-index: 1; top: 30px; left: 50%; width: 2px; height: calc(94px + var(--platform-pull-y)); transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--ink) 0 7px, transparent 7px 12px); transform-origin: top; }
  .pull-ninja { position: absolute; z-index: 4; top: 72px; left: 50%; width: min(245px, 92%); transform: translate3d(calc(-50% + var(--platform-ninja-x)), var(--platform-pull-y), 70px) scale(var(--platform-ninja-scale)) rotateX(var(--pull-rx)) rotateY(var(--pull-ry)); transform-origin: 50% 18%; transition: transform .12s linear; will-change: transform; }
  .pull-ninja img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 18px rgba(12,24,27,.22)); }
  .pull-shadow { position: absolute; z-index: 0; top: calc(450px + var(--platform-pull-y)); left: 50%; width: 170px; height: 24px; border-radius: 50%; background: rgba(12,24,27,.12); filter: blur(10px); transform: translate3d(-50%, 0, -20px); }
  .pull-tag { position: absolute; z-index: 3; min-width: 96px; padding: 10px 12px; border: 1px solid var(--ink); background: rgba(255,255,255,.86); box-shadow: 8px 9px 0 rgba(47,114,255,.1); color: var(--ink); font: 8px 'DM Mono', monospace; text-align: center; text-transform: uppercase; transform-style: preserve-3d; }
  .pull-tag::before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--ink); opacity: .35; }
  .pull-tag-a { top: 120px; left: 0; transform: translateZ(25px) rotateY(18deg) rotateZ(-4deg); animation: pull-tag-a 4.8s ease-in-out infinite; }
  .pull-tag-a::before { top: 50%; right: -31px; }
  .pull-tag-b { top: 248px; right: -8px; transform: translateZ(12px) rotateY(-18deg) rotateZ(5deg); animation: pull-tag-b 5.4s ease-in-out infinite; }
  .pull-tag-b::before { top: 50%; left: -31px; }
  .pull-tag-c { top: 430px; left: 8px; border-color: var(--blue); color: var(--blue); transform: translateZ(34px) rotateY(15deg) rotateZ(-3deg); animation: pull-tag-c 5s ease-in-out infinite; }
  .pull-tag-c::before { top: 50%; right: -31px; background: var(--blue); }
  @keyframes pull-tag-a { 50% { transform: translate3d(5px, 9px, 38px) rotateY(10deg) rotateZ(1deg); } }
  @keyframes pull-tag-b { 50% { transform: translate3d(-7px, -8px, 24px) rotateY(-9deg) rotateZ(-1deg); } }
  @keyframes pull-tag-c { 50% { transform: translate3d(7px, -5px, 48px) rotateY(8deg) rotateZ(2deg); } }
  .platform-intro h2 { max-width: 850px; margin: 0; font-size: 62px; line-height: 1.03; font-weight: 800; letter-spacing: 0; }
  .platform-intro h2 span { color: var(--blue); }
  .platform-record { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 42px 0 34px; padding-top: 24px; }
  .record-line { position: absolute; top: 4px; left: 0; right: 0; height: 2px; overflow: hidden; background: #cad2d1; }
  .record-line i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(var(--platform-pull)); transform-origin: left; will-change: transform; }
  .record-event { position: relative; color: #68777a; font: 8px 'DM Mono', monospace; text-transform: uppercase; }
  .record-event::before { content: ''; position: absolute; top: -25px; left: 0; width: 8px; height: 8px; border: 2px solid var(--paper); border-radius: 50%; background: #aeb8b8; box-shadow: 0 0 0 1px #aeb8b8; transition: background .25s ease, box-shadow .25s ease; }
  .record-event b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 9px; }
  .platform-intro[data-pull-stage='1'] .record-event:nth-child(-n+4)::before,
  .platform-intro[data-pull-stage='2'] .record-event::before { background: var(--lime); box-shadow: 0 0 0 1px var(--blue), 0 0 0 6px rgba(47,114,255,.1); }
  .summary-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 50px; }
  .summary-columns article { border-top: 2px solid var(--ink); padding-top: 18px; }
  .panel-index { display: block; margin-bottom: 16px; color: var(--blue); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .summary-columns h3 { margin: 0 0 10px; font-size: 17px; }
  .summary-columns p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
  .platform-scroll-ui { display: none; }

  @media (min-width: 961px) and (min-height: 741px) {
    .platform-intro { height: 310svh; padding: 0; }
    .platform-sticky { position: sticky; z-index: 1; top: 74px; height: calc(100svh - 74px); min-height: 620px; display: flex; align-items: center; overflow: hidden; background: var(--paper); }
    .platform-sticky::after { content: ''; position: absolute; z-index: 20; inset: 0; pointer-events: none; background: var(--white); box-shadow: 0 -3px 0 var(--blue); transform: scaleY(var(--platform-exit)); transform-origin: bottom; will-change: transform; }
    .intro-grid { align-items: center; }
    .intro-visual { position: relative; top: auto; min-height: 630px; }
    .ninja-pull { height: 585px; }
    .platform-intro h2 { transition: transform .65s cubic-bezier(.22,1,.36,1); }
    .platform-record { margin-block: 30px 26px; }
    .platform-intro .section-lede { max-width: 760px; font-size: 15px; line-height: 1.6; }
    .summary-columns { position: relative; display: block; height: 185px; margin-top: 30px; perspective: 1000px; }
    .summary-columns article { position: absolute; inset: 0; display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto 1fr; column-gap: 28px; align-content: start; opacity: 0; pointer-events: none; transform: translate3d(0, 42px, -70px) rotateX(-4deg); clip-path: inset(100% 0 0); transition: opacity .24s ease, transform .48s cubic-bezier(.22,1,.36,1), clip-path .48s cubic-bezier(.22,1,.36,1); }
    .summary-columns article.before, .summary-columns article.after { opacity: 0; }
    .summary-columns article.before { transform: translate3d(0, -42px, -70px) rotateX(4deg); clip-path: inset(0 0 100%); }
    .summary-columns article.active { z-index: 2; opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) rotateX(0); clip-path: inset(0); }
    .summary-columns .panel-index { grid-column: 1 / -1; }
    .summary-columns h3 { margin: 0; font-size: 26px; line-height: 1.1; }
    .summary-columns p { font-size: 14px; line-height: 1.65; }
    .platform-scroll-ui { position: absolute; z-index: 8; left: 50%; bottom: 18px; display: grid; grid-template-columns: 150px 1fr 100px; align-items: center; gap: 18px; transform: translateX(-50%); color: #68777a; font: 8px 'DM Mono', monospace; text-transform: uppercase; }
    .platform-progress { height: 2px; overflow: hidden; background: #cad2d1; }
    .platform-progress i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(var(--platform-pull)); transform-origin: left; }
    .platform-scroll-ui > span:last-child { text-align: right; }
    .platform-intro[data-platform-panel='0'] .pull-tag-a,
    .platform-intro[data-platform-panel='1'] .pull-tag-b,
    .platform-intro[data-platform-panel='2'] .pull-tag-c { border-color: var(--blue); color: var(--blue); box-shadow: 8px 9px 0 rgba(200,255,99,.35); }
  }

  /* Lifecycle */
  .lifecycle { padding: 118px 0; background: var(--white); }
  .lifecycle-layout { display: grid; grid-template-columns: 430px 1fr; gap: 64px; align-items: start; }
  .flow-tabs { border-top: 1px solid var(--line); }
  .flow-tab { width: 100%; min-height: 66px; display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
  .flow-tab:hover, .flow-tab.active { background: var(--lime); }
  .flow-tab .mono { font-size: 10px; color: #657174; }
  .flow-tab strong { font-size: 14px; }
  .flow-tab .arrow { font-size: 18px; opacity: 0; transform: translateX(-8px); transition: .25s ease; }
  .flow-tab.active .arrow, .flow-tab:hover .arrow { opacity: 1; transform: none; }
  .flow-panel { min-height: 536px; padding: 50px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); }
  .flow-panel[hidden] { display: none; }
  .flow-panel .kicker { color: var(--aqua); font-size: 11px; }
  .flow-panel h3 { max-width: 600px; margin: 24px 0 16px; font-size: 42px; line-height: 1.08; }
  .flow-panel > p { max-width: 650px; margin: 0; color: #aebabc; font-size: 16px; line-height: 1.7; }
  .flow-output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 48px; background: #324145; border: 1px solid #324145; }
  .flow-output div { min-height: 124px; padding: 18px; background: #101e22; }
  .flow-output span { color: #7f9296; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .flow-output b { display: block; margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .flow-note { margin-top: 26px !important; padding-left: 16px; border-left: 3px solid var(--coral); font-size: 13px !important; }

  /* Agents */
  .agents { padding: 118px 0; background: var(--ink); color: var(--white); }
  .agents .eyebrow { color: var(--aqua); }
  .agents .section-lede { color: #9dadaf; }
  .agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #354448; }
  .agent-card { position: relative; min-height: 270px; padding: 28px 24px; border-right: 1px solid #354448; border-bottom: 1px solid #354448; background: #0d1a1e; transition: background .3s ease, color .3s ease; overflow: hidden; }
  .agent-card:nth-child(4n) { border-right: 0; }
  .agent-card:nth-child(n+5) { border-bottom: 0; }
  .agent-card:hover { background: var(--aqua); color: var(--ink); }
  .agent-card .mono { font-size: 10px; color: var(--aqua); }
  .agent-card:hover .mono { color: var(--ink); }
  .agent-card h3 { margin: 44px 0 12px; font-size: 19px; }
  .agent-card p { margin: 0; color: #91a2a5; font-size: 13px; line-height: 1.65; }
  .agent-card:hover p { color: #1a3438; }
  .agent-card::after { content: '↗'; position: absolute; right: 20px; top: 20px; font-size: 20px; opacity: .35; }

  /* Products */
  .products { padding: 118px 0; background: var(--paper); }
  .product-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
  .product-toolbar .section-head { margin: 0; }
  .filters { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
  .filters button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 3px; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
  .filters button:hover, .filters button.active { background: var(--ink); color: var(--white); }
  .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
  .product-card { min-height: 286px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; transition: background .25s ease; }
  .product-card:nth-child(3n) { border-right: 0; }
  .product-card:hover { background: var(--white); }
  .product-card.is-hidden { display: none; }
  .product-card .product-top { display: flex; justify-content: space-between; align-items: center; }
  .product-card .chip { font-size: 9px; color: var(--blue); }
  .product-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--lime); font: 12px 'DM Mono', monospace; }
  .product-card:nth-child(4n+2) .product-icon { background: var(--aqua); }
  .product-card:nth-child(4n+3) .product-icon { background: var(--coral); }
  .product-card:nth-child(4n+4) .product-icon { background: var(--yellow); }
  .product-card h3 { margin: 54px 0 12px; font-size: 21px; }
  .product-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

  /* Institution fit */
  .institutions { padding: 118px 0; background: var(--blue); color: var(--white); }
  .institutions .section-lede { color: #d5e0ff; }
  .institution-tabs { display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
  .institution-tab { flex: 0 0 auto; min-height: 46px; padding: 0 17px; border: 1px solid #8eafff; background: transparent; color: var(--white); border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; }
  .institution-tab:hover, .institution-tab.active { background: var(--white); color: var(--ink); }
  .institution-panel { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 420px; border: 1px solid #8eafff; background: #2867ed; }
  .institution-panel[hidden] { display: none; }
  .institution-copy { padding: 48px; }
  .institution-copy .kicker { font-size: 10px; color: var(--lime); }
  .institution-copy h3 { margin: 22px 0 18px; font-size: 40px; line-height: 1.08; }
  .institution-copy > p { max-width: 680px; margin: 0; color: #dbe4ff; font-size: 15px; line-height: 1.75; }
  .institution-list { margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; list-style: none; }
  .institution-list li { position: relative; padding-left: 18px; color: #fff; font-size: 13px; }
  .institution-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--lime); }
  .institution-aside { padding: 38px; border-left: 1px solid #8eafff; background: var(--white); color: var(--ink); }
  .institution-aside h4 { margin: 0 0 26px; font-size: 14px; }
  .fit-row { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
  .fit-row span { width: 32px; height: 32px; display: grid; place-items: center; background: var(--paper); font: 10px 'DM Mono', monospace; }
  .fit-row b { display: block; font-size: 13px; }
  .fit-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }

  /* Data map */
  .data-map { padding: 118px 0; background: var(--white); }
  .map-board { border: 1px solid var(--ink); }
  .map-row { display: grid; grid-template-columns: 1fr 66px 1fr 66px 1fr; min-height: 330px; }
  .map-column { padding: 30px; }
  .map-column h3 { margin: 0 0 26px; font-size: 17px; }
  .map-column p { margin: -16px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.5; }
  .map-items { display: grid; gap: 8px; }
  .map-item { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; }
  .map-item span { width: 8px; height: 8px; background: var(--aqua); border-radius: 50%; }
  .map-column:nth-child(3) .map-item span { background: var(--coral); }
  .map-column:nth-child(5) .map-item span { background: var(--yellow); }
  .map-arrow { display: grid; place-items: center; border-inline: 1px solid var(--line); color: var(--blue); font-size: 27px; overflow: hidden; }
  .map-arrow i { font-style: normal; animation: arrow-nudge 1.8s ease-in-out infinite; }
  @keyframes arrow-nudge { 50% { transform: translateX(8px); } }
  .integration-note { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 24px 30px; border-top: 1px solid var(--ink); background: var(--lime); }
  .integration-note b { font-size: 13px; }
  .integration-note p { margin: 0; font-size: 12px; line-height: 1.6; }

  /* Regions */
  .regions { padding: 118px 0; background: var(--ink); color: var(--white); }
  .regions .eyebrow { color: var(--aqua); }
  .regions .section-lede { color: #9eadaf; }
  .region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #435257; border: 1px solid #435257; }
  .region-card { min-height: 420px; padding: 32px; background: #101e22; }
  .region-card:nth-child(2) { background: #152224; }
  .region-card h3 { margin: 76px 0 16px; font-size: 28px; }
  .region-card p { color: #9dadb0; font-size: 13px; line-height: 1.7; }
  .region-card ul { margin: 28px 0 0; padding: 0; list-style: none; }
  .region-card li { padding: 11px 0; border-top: 1px solid #344348; color: #d7ddde; font-size: 12px; }
  .region-flag { width: 56px; height: 56px; display: grid; place-items: center; background: var(--aqua); color: var(--ink); font: 11px 'DM Mono', monospace; }
  .region-card:nth-child(2) .region-flag { background: var(--coral); }
  .region-card:nth-child(3) .region-flag { background: var(--yellow); }
  .region-disclaimer { margin: 24px 0 0; color: #73868a; font-size: 11px; }

  /* Controls */
  .controls { padding: 118px 0; background: var(--paper); }
  .control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .control-card { min-height: 230px; padding: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
  .control-card .mono { color: var(--blue); font-size: 9px; }
  .control-card h3 { margin: 42px 0 10px; font-size: 18px; }
  .control-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

  /* Proof and implementation */
  .proof-band { padding: 86px 0; background: var(--coral); color: var(--ink); }
  .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .metric { min-height: 180px; padding: 22px; border-left: 1px solid rgba(11,21,24,.35); }
  .metric:last-child { border-right: 1px solid rgba(11,21,24,.35); }
  .metric strong { display: block; margin: 34px 0 8px; font-size: 40px; }
  .metric span { display: block; max-width: 190px; font-size: 12px; line-height: 1.5; }
  .metric .mono { font-size: 9px; }
  .proof-note { margin: 18px 0 0; font-size: 10px; }
  .implementation { padding: 118px 0; background: var(--white); }
  .timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
  .timeline-step { position: relative; min-height: 280px; padding: 30px 24px; border-right: 1px solid var(--line); }
  .timeline-step:last-child { border-right: 0; }
  .timeline-step::before { content: ''; position: absolute; top: -8px; left: 24px; width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--lime); }
  .timeline-step .mono { font-size: 10px; color: var(--blue); }
  .timeline-step h3 { margin: 58px 0 12px; font-size: 18px; }
  .timeline-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

  /* FAQ and CTA */
  .faq { padding: 118px 0; background: var(--paper); }
  .faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 88px; }
  .faq-title-wrap { position: sticky; top: 110px; align-self: start; }
  .faq h2 { margin: 0; font-size: 52px; line-height: 1.04; }
  .faq-list { border-top: 1px solid var(--ink); }
  details { border-bottom: 1px solid var(--line); }
  summary { min-height: 78px; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 20px; padding: 0 8px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: '+'; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 18px; }
  details[open] summary::after { content: '−'; background: var(--ink); color: var(--white); }
  details p { max-width: 720px; margin: -5px 0 0; padding: 0 48px 28px 8px; color: var(--muted); font-size: 13px; line-height: 1.75; }
  .final-cta { padding: 108px 0; background: var(--blue); color: var(--white); }
  .cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
  .final-cta h2 { max-width: 820px; margin: 0; font-size: 62px; line-height: 1.02; }
  .cta-aside p { margin: 0 0 24px; color: #d7e2ff; font-size: 14px; line-height: 1.7; }
  .cta-aside .btn { width: 100%; }

  /* Guide */
  .ninja-guide { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; align-items: end; gap: 10px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: .3s ease; }
  .ninja-guide.visible { opacity: 1; transform: none; pointer-events: auto; }
  .guide-message { width: 220px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 4px; background: var(--white); box-shadow: 7px 7px 0 var(--lime); font-size: 11px; line-height: 1.55; transition: opacity .2s ease; }
  .ninja-guide.closed .guide-message { display: none; }
  .guide-toggle { position: relative; width: 58px; height: 58px; border: 1px solid var(--ink); border-radius: 50%; background: #f1f1ec; box-shadow: 0 8px 24px rgba(11,21,24,.2); cursor: pointer; overflow: hidden; }
  .guide-face { position: absolute; left: 7px; right: 7px; top: 16px; height: 22px; border: 1px solid #8c9593; border-radius: 10px; background: #f0a98e; }
  .guide-face .eye { top: 5px; width: 12px; height: 8px; border-top-width: 2px; }
  .guide-face .eye.left { left: 6px; }
  .guide-face .eye.right { right: 6px; }
  .guide-face .pupil { left: 4px; top: 2px; width: 4px; height: 4px; }

  footer { padding: 70px 0 30px; background: var(--ink); color: var(--white); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 56px; padding-bottom: 60px; }
  .footer-brand p { max-width: 370px; color: #8fa0a4; font-size: 12px; line-height: 1.7; }
  .footer-col h3 { margin: 0 0 18px; color: #7f9296; font: 10px 'DM Mono', monospace; text-transform: uppercase; }
  .footer-col a { display: block; width: fit-content; margin: 10px 0; color: #d6dcdd; text-decoration: none; font-size: 12px; }
  .footer-col a:hover { color: var(--lime); }
  .footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid #2e3d41; color: #718387; font-size: 10px; }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
  .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 1080px) {
    .hero h1 { font-size: 60px; }
    .hero-shell { grid-template-columns: 1fr 430px; }
    .section-title, .platform-intro h2 { font-size: 50px; }
    .agent-grid { grid-template-columns: repeat(2, 1fr); }
    .agent-card:nth-child(2n) { border-right: 0; }
    .agent-card:nth-child(n+5) { border-bottom: 1px solid #354448; }
    .agent-card:nth-child(n+7) { border-bottom: 0; }
    .lifecycle-layout { grid-template-columns: 340px 1fr; gap: 36px; }
    .flow-panel { padding: 38px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-card:nth-child(3n) { border-right: 1px solid var(--line); }
    .product-card:nth-child(2n) { border-right: 0; }
    .control-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 960px) {
    .shell { width: min(100% - 40px, 720px); }
    .primary-nav { position: fixed; inset: 74px 0 auto; height: calc(100svh - 74px); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 26px 24px; background: var(--ink); }
    .primary-nav.open { display: flex; }
    .primary-nav a { padding: 18px 0; border-bottom: 1px solid #314044; font-size: 16px; }
    .nav-demo { margin-top: 18px; justify-content: center; border: 1px solid var(--lime) !important; }
    .menu-toggle { display: grid; place-items: center; }
    .hero { min-height: 640px; }
    .hero-shell { grid-template-columns: 1fr; padding-top: 74px; padding-bottom: 22px; }
    .hero-copy { position: absolute; inset: 74px 20px auto; height: 48%; }
    .hero h1 { font-size: 54px; }
    .hero h2 { font-size: 48px; }
    .hero-visual { position: absolute; inset: 34% 0 0; height: 66%; }
    .scroll-video { right: 50%; width: min(960px, 92vw); transform: translate(50%, -43%); }
    .video-status { bottom: 28px; right: 20px; }
    .signal-strip { padding: 22px 0; }
    .signal-inner { grid-template-columns: 1fr; gap: 13px; }
    .signal-list { justify-content: flex-start; flex-wrap: wrap; }
    .intro-grid, .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .intro-visual { position: relative; top: auto; min-height: 330px; }
    .ninja-pull { height: 290px; margin-top: 14px; }
    .pull-halo { top: 82px; left: 22%; width: 220px; opacity: .72; }
    .pull-ninja { top: 44px; left: 22%; width: 155px; }
    .pull-anchor, .pull-line { left: 22%; }
    .pull-shadow { top: calc(250px + var(--platform-pull-y)); left: 22%; width: 120px; }
    .pull-tag-a { top: 52px; left: 45%; }
    .pull-tag-b { top: 138px; right: 10%; }
    .pull-tag-c { top: 220px; left: 48%; }
    .section-no, .faq-title-wrap { position: static; }
    .lifecycle-layout { grid-template-columns: 1fr; }
    .flow-tabs { display: flex; overflow-x: auto; border: 0; }
    .flow-tab { flex: 0 0 auto; width: 190px; border: 1px solid var(--line); }
    .flow-panel { min-height: auto; }
    .product-toolbar { align-items: start; flex-direction: column; }
    .institution-panel { grid-template-columns: 1fr; }
    .institution-aside { border-left: 0; border-top: 1px solid #8eafff; }
    .map-row { grid-template-columns: 1fr; }
    .map-arrow { min-height: 58px; border-inline: 0; border-block: 1px solid var(--line); transform: rotate(90deg); }
    .region-grid { grid-template-columns: 1fr; }
    .region-card { min-height: 320px; }
    .region-card h3 { margin-top: 45px; }
    .timeline { grid-template-columns: repeat(2, 1fr); }
    .timeline-step:nth-child(2) { border-right: 0; }
    .cta-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .shell { width: min(100% - 32px, 520px); }
    .nav-wrap { width: calc(100% - 32px); }
    .hero-shell { padding-top: 48px; }
    .hero h1 { font-size: 42px; line-height: 1.01; }
    .hero h2 { font-size: 38px; line-height: 1.02; }
    .hero-lede { font-size: 15px; }
    .hero-actions { display: grid; }
    .hero-actions .btn { width: 100%; }
    .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .proof-item { min-width: 0; }
    .proof-item strong { font-size: 18px; }
    .hero { min-height: 680px; }
    .hero-copy { inset-inline: 16px; height: 54%; }
    .hero-lede { margin-top: 18px; line-height: 1.55; }
    .hero-actions { margin-top: 22px; }
    .hero .hero-proof, .hero .hero-footnote { display: none; }
    .hero-visual { inset: 54% 0 0; height: 46%; }
    .scroll-video { width: min(960px, 126vw); transform: translate(50%, -42%); }
    .video-status { display: none; }
    .hero-scroll-ui { width: calc(100% - 32px); bottom: 13px; grid-template-columns: auto 1fr; }
    .scroll-chapter { display: none; }
    .section-title, .platform-intro h2, .faq h2, .final-cta h2 { font-size: 40px; }
    .section-lede { font-size: 15px; }
    .platform-intro, .lifecycle, .agents, .products, .institutions, .data-map, .regions, .controls, .implementation, .faq, .final-cta { padding: 82px 0; }
    .summary-columns { grid-template-columns: 1fr; }
    .intro-visual { min-height: 286px; }
    .ninja-pull { height: 248px; }
    .pull-ninja { left: 24%; width: 132px; }
    .pull-halo { top: 72px; left: 24%; width: 190px; opacity: .65; }
    .pull-anchor, .pull-line { left: 24%; }
    .pull-shadow { top: calc(220px + var(--platform-pull-y)); left: 24%; width: 95px; }
    .pull-tag { min-width: 82px; padding: 8px; font-size: 7px; }
    .pull-tag-a { top: 42px; left: 48%; }
    .pull-tag-b { top: 118px; right: 1%; }
    .pull-tag-c { top: 190px; left: 52%; }
    .platform-record { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .record-line { right: 66%; }
    .record-event:nth-child(n+5) { display: none; }
    .agent-grid, .product-grid, .control-grid { grid-template-columns: 1fr; }
    .agent-card, .agent-card:nth-child(2n), .agent-card:nth-child(4n), .product-card, .product-card:nth-child(2n), .product-card:nth-child(3n) { border-right: 0; }
    .agent-card:nth-child(n+7) { border-bottom: 1px solid #354448; }
    .agent-card:last-child { border-bottom: 0; }
    .filters { width: 100%; overflow-x: auto; }
    .filters button { flex: 1 0 auto; }
    .flow-panel { padding: 27px 22px; }
    .flow-panel h3, .institution-copy h3 { font-size: 31px; }
    .flow-output { grid-template-columns: 1fr; }
    .institution-copy, .institution-aside { padding: 28px 22px; }
    .institution-list { grid-template-columns: 1fr; }
    .map-column { padding: 24px 20px; }
    .integration-note { grid-template-columns: 1fr; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
    .metric:nth-child(2) { border-right: 1px solid rgba(11,21,24,.35); }
    .metric { min-height: 150px; }
    .metric strong { margin-top: 24px; font-size: 31px; }
    .timeline { grid-template-columns: 1fr; }
    .timeline-step { border-right: 0; border-bottom: 1px solid var(--line); min-height: 230px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; }
    .guide-message { width: 180px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
  }

  /* Inner pages */
  .primary-nav a[aria-current="page"] { color: var(--white); }
  .primary-nav a[aria-current="page"]::after { content: ''; display: block; height: 2px; margin-top: 7px; background: var(--lime); }
  .page-hero { padding: 154px 0 92px; background: var(--ink); color: var(--white); overflow: hidden; }
  .page-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; align-items: end; }
  .breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; color: #809195; font: 10px 'DM Mono', monospace; text-transform: uppercase; }
  .breadcrumbs a { color: var(--aqua); text-decoration: none; }
  .page-hero h1 { max-width: 820px; margin: 0; font-size: 70px; line-height: .98; font-weight: 800; }
  .page-hero h1 span { color: var(--lime); }
  .page-hero .page-lede { max-width: 720px; margin: 26px 0 0; color: #adbbbd; font-size: 17px; line-height: 1.7; }
  .page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .page-signal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid #3b4b4e; background: #3b4b4e; }
  .page-signal div { min-height: 138px; padding: 20px; background: #101e22; }
  .page-signal span { display: block; color: var(--aqua); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .page-signal strong { display: block; margin-top: 34px; font-size: 17px; line-height: 1.35; }
  .subnav { position: sticky; top: 74px; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(244,243,238,.94); backdrop-filter: blur(14px); }
  .subnav-inner { min-height: 58px; display: flex; align-items: center; gap: 26px; overflow-x: auto; scrollbar-width: none; }
  .subnav a { flex: 0 0 auto; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 700; }
  .subnav a:hover { color: var(--blue); }
  .content-band { padding: 110px 0; background: var(--paper); }
  .content-band.white { background: var(--white); }
  .editorial-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
  .editorial-grid h2 { margin: 0; font-size: 52px; line-height: 1.05; }
  .editorial-copy > p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }
  .definition-list { margin: 36px 0 0; border-top: 1px solid var(--ink); }
  .definition-row { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
  .definition-row dt { font-size: 13px; font-weight: 800; }
  .definition-row dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
  .capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
  .capability-card { min-height: 250px; padding: 26px; background: var(--white); }
  .capability-card .mono { color: var(--blue); font-size: 9px; }
  .capability-card h3 { margin: 48px 0 12px; font-size: 19px; }
  .capability-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
  .page-cta { padding: 82px 0; background: var(--blue); color: var(--white); }
  .page-cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
  .page-cta h2 { max-width: 850px; margin: 0; font-size: 44px; line-height: 1.06; }
  .compact-faq { padding: 100px 0; background: var(--paper); }
  .compact-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
  .compact-faq h2 { margin: 0; font-size: 42px; line-height: 1.05; }
  .related-pages { padding: 78px 0; background: var(--white); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .related-card { min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
  .related-card:hover { border-color: var(--blue); background: var(--paper); }
  .related-card span { color: var(--blue); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .related-card h3 { margin: 42px 0 0; font-size: 18px; }
  @media (max-width: 960px) {
    .page-hero-grid, .editorial-grid, .compact-faq-grid { grid-template-columns: 1fr; gap: 45px; }
    .page-hero h1 { font-size: 54px; }
    .page-signal { max-width: 600px; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .page-cta-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .page-hero { padding: 116px 0 72px; }
    .page-hero h1 { font-size: 42px; }
    .page-hero .page-lede { font-size: 15px; }
    .page-signal { grid-template-columns: 1fr; }
    .page-signal div { min-height: 105px; }
    .page-signal strong { margin-top: 22px; }
    .subnav { top: 74px; }
    .content-band { padding: 78px 0; }
    .editorial-grid h2 { font-size: 38px; }
    .definition-row { grid-template-columns: 1fr; gap: 8px; }
    .capability-grid { grid-template-columns: 1fr; }
    .page-cta h2 { font-size: 34px; }
  }

  /* Management control room */
  .calm-runway { position: relative; height: 360vh; background: #111c1c; }
  .calm-scene { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; background: #111c1c; color: var(--white); isolation: isolate; }
  .calm-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .calm-scrim { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 54%; background: rgba(11,21,24,.88); border-right: 1px solid rgba(255,255,255,.1); }
  .calm-three { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .calm-content { position: relative; z-index: 4; height: 100%; }
  .calm-step { position: absolute; left: 0; top: 50%; width: min(620px, 48%); opacity: 0; transform: translateY(calc(-50% + 24px)); pointer-events: none; transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); }
  .calm-step.active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
  .calm-step .eyebrow { color: var(--aqua); }
  .calm-step h1, .calm-step h2 { margin: 0; font-size: 66px; line-height: .99; font-weight: 800; }
  .calm-step h1 span, .calm-step h2 span { color: var(--lime); }
  .calm-step > p:not(.eyebrow) { max-width: 580px; margin: 24px 0 0; color: #b1bfc1; font-size: 16px; line-height: 1.7; }
  .chaos-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .chaos-list span { padding: 8px 10px; border: 1px solid #536468; background: #142326; color: #c4cecf; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .calm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; border: 1px solid #425256; background: #425256; }
  .calm-metrics div { min-height: 92px; padding: 14px; background: #101e22; }
  .calm-metrics b { display: block; color: var(--lime); font-size: 20px; }
  .calm-metrics span { display: block; margin-top: 6px; color: #8fa0a4; font-size: 10px; line-height: 1.4; }
  .calm-scroll-ui { position: absolute; z-index: 5; left: 50%; bottom: 22px; width: min(1240px, calc(100% - 72px)); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; color: #adbbbd; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
  .calm-progress { height: 2px; overflow: hidden; background: #56676a; }
  .calm-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
  .calm-phase { color: var(--white); }

  .role-explorer { padding: 116px 0; background: var(--paper); overflow: hidden; }
  .role-explorer .section-head { max-width: 840px; }
  .role-layout { display: grid; grid-template-columns: .88fr 1.12fr; grid-template-rows: auto 1fr; gap: 0 60px; align-items: stretch; min-height: 620px; }
  .role-copy { position: relative; z-index: 3; grid-column: 1; grid-row: 2; }
  .role-tabs { position: relative; z-index: 3; grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 28px; }
  .role-tab { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-size: 11px; font-weight: 700; cursor: pointer; }
  .role-tab:hover, .role-tab.active { border-color: var(--ink); background: var(--ink); color: var(--white); }
  .role-panel { min-height: 430px; padding-top: 26px; border-top: 2px solid var(--ink); }
  .role-panel[hidden] { display: none; }
  .role-panel .kicker { color: var(--blue); font-size: 9px; }
  .role-panel h3 { margin: 18px 0 14px; font-size: 34px; line-height: 1.08; }
  .role-panel > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
  .role-output { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--line); background: var(--line); }
  .role-output div { min-height: 92px; padding: 14px; background: var(--white); }
  .role-output span { display: block; color: var(--blue); font: 8px 'DM Mono', monospace; text-transform: uppercase; }
  .role-output b { display: block; margin-top: 10px; font-size: 12px; line-height: 1.45; }
  .role-canvas-wrap { position: relative; grid-column: 2; grid-row: 1 / span 2; min-height: 620px; }
  .role-canvas-wrap::after { content: 'DRAG TO ORBIT'; position: absolute; right: 0; bottom: 10px; color: #758387; font: 8px 'DM Mono', monospace; }
  .role-three { position: absolute; inset: -50px -90px -50px -30px; width: calc(100% + 120px); height: calc(100% + 100px); cursor: grab; touch-action: none; }
  .role-three:active { cursor: grabbing; }
  .role-legend { position: absolute; left: 0; bottom: 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 8px 'DM Mono', monospace; text-transform: uppercase; }
  .role-legend::before { content: ''; width: 8px; height: 8px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(47,114,255,.12); }

  .management-outcomes { padding: 104px 0; background: var(--ink); color: var(--white); }
  .management-outcomes .section-lede { color: #91a2a5; }
  .outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #405054; }
  .outcome-item { min-height: 260px; padding: 28px; border-right: 1px solid #405054; }
  .outcome-item:last-child { border-right: 0; }
  .outcome-item .mono { color: var(--aqua); font-size: 9px; }
  .outcome-item h3 { margin: 70px 0 12px; font-size: 22px; }
  .outcome-item p { margin: 0; color: #91a2a5; font-size: 12px; line-height: 1.7; }

  @media (max-width: 960px) {
    .calm-scrim { width: 68%; }
    .calm-step { width: min(600px, 62%); }
    .calm-step h1, .calm-step h2 { font-size: 54px; }
    .role-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .role-tabs { grid-column: 1; grid-row: 1; }
    .role-canvas-wrap { grid-column: 1; grid-row: 2; }
    .role-copy { grid-column: 1; grid-row: 3; }
    .role-tabs { margin-bottom: 0; }
    .role-canvas-wrap { min-height: 520px; margin-bottom: 28px; }
    .role-three { inset: -40px -30px; width: calc(100% + 60px); height: calc(100% + 80px); }
  }
  @media (max-width: 600px) {
    .calm-scene { min-height: 700px; }
    .calm-video { object-position: 62% center; }
    .calm-scrim { width: 100%; background: rgba(11,21,24,.68); border: 0; }
    .calm-step { left: 16px; right: 16px; width: auto; top: 42%; }
    .calm-step h1, .calm-step h2 { font-size: 42px; }
    .calm-step > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; }
    .chaos-list { gap: 5px; }
    .chaos-list span { padding: 6px 7px; font-size: 8px; }
    .calm-metrics { grid-template-columns: 1fr; }
    .calm-metrics div { min-height: 60px; }
    .calm-scroll-ui { width: calc(100% - 32px); bottom: 13px; grid-template-columns: auto 1fr; }
    .calm-phase { display: none; }
    .role-explorer { padding: 82px 0; }
    .role-canvas-wrap { min-height: 380px; }
    .role-three { inset: -20px -50px; width: calc(100% + 100px); height: calc(100% + 40px); }
    .role-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .role-tab { flex: 0 0 auto; }
    .role-panel h3 { font-size: 29px; }
    .role-output { grid-template-columns: 1fr; }
    .outcome-grid { grid-template-columns: 1fr; }
    .outcome-item { min-height: 210px; border-right: 0; border-bottom: 1px solid #405054; }
    .outcome-item:last-child { border-bottom: 0; }
  }