:root {
      --ink: #09090b;
      --ink-80: #27272a;
      --ink-60: #52525b;
      --ink-40: #a1a1aa;
      --canvas: #fafafa;
      --surface: #ffffff;
      --surface-dark: #0f0f12;
      --surface-elevated: #18181b;
      --hairline: #e4e4e7;
      --hairline-dark: rgba(255,255,255,0.08);
      --accent: #2563eb;
      --accent-soft: #60a5fa;
      --accent-glow: rgba(37,99,235, 0.35);
      --accent-tint: rgba(37,99,235, 0.08);
      --font-text: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, monospace;
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      --radius-pill: 9999px;
      --spring: cubic-bezier(0.16, 1, 0.3, 1);
      --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
      --nav-h: 64px;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      background: var(--canvas);
      color: var(--ink);
    }

    body {
      font-family: var(--font-text);
      font-size: 17px;
      line-height: 1.5;
      letter-spacing: -0.02em;
      overflow-x: hidden;
      background: var(--canvas);
    }

    ::selection { background: var(--accent); color: #fff; }

    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

    .ph { font-size: 1.25em; line-height: 1; }

    /* ---------- Nav ---------- */
    .global-nav {
      position: fixed;
      top: 0; left: 0; width: 100%;
      height: var(--nav-h);
      z-index: 1000;
      display: flex;
      align-items: center;
      transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
    }

    .global-nav.scrolled {
      background: rgba(9, 9, 11, 0.82);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--hairline-dark);
    }

    .global-nav-inner {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -0.03em;
      flex-shrink: 0;
    }

    .logo-mark {
      width: 28px; height: 28px;
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 20px;
      list-style: none;
    }

    .nav-menu a {
      text-decoration: none;
      color: rgba(255,255,255,0.62);
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      transition: color 0.2s;
    }

    .nav-menu a:hover { color: #fff; }

    .nav-right { display: flex; align-items: center; gap: 10px; }

    .nav-toggle {
      display: none;
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      background: transparent;
      color: #fff;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
    }

    .nav-mobile {
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      z-index: 999;
      background: rgba(9, 9, 11, 0.96);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--hairline-dark);
      padding: 12px 24px 20px;
      display: none;
      flex-direction: column;
    }

    .nav-mobile.open { display: flex; }

    .nav-mobile a {
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      font-size: 17px;
      font-weight: 500;
      padding: 12px 0;
      border-bottom: 1px solid var(--hairline-dark);
    }

    /* ---------- Buttons ---------- */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fff;
      color: var(--ink);
      font-family: var(--font-text);
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.25s var(--spring), box-shadow 0.25s;
      white-space: nowrap;
    }

    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary.lg { font-size: 16px; padding: 14px 28px; }
    .btn-primary.accent { background: var(--accent); color: #fff; }
    .btn-primary.accent:hover { box-shadow: 0 14px 36px var(--accent-glow); }
    .btn-primary.dark { background: var(--ink); color: #fff; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: rgba(255,255,255,0.88);
      font-family: var(--font-text);
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.22);
      padding: 13px 24px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.2s, color 0.2s, transform 0.25s var(--spring);
    }

    .btn-ghost:hover { border-color: rgba(255,255,255,0.6); color: #fff; transform: translateY(-1px); }
    .btn-ghost:active { transform: scale(0.98); }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--hairline);
      font-family: var(--font-text);
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.2s var(--spring);
    }

    .btn-secondary:hover { border-color: var(--ink); transform: translateY(-1px); }

    .story-chapter {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .section-dark .story-chapter { color: var(--accent-soft); }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100dvh;
      background: var(--surface-dark);
      color: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 60% 50% at 72% 45%, rgba(37,99,235, 0.18), transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 90%, rgba(37,99,235, 0.08), transparent 70%);
    }

    .hero-grid-lines {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(ellipse 65% 70% at 70% 45%, black, transparent);
      -webkit-mask-image: radial-gradient(ellipse 65% 70% at 70% 45%, black, transparent);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: calc(var(--nav-h) + 40px) 24px 56px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      align-items: center;
      gap: 32px;
    }

    .hero-copy { max-width: 600px; }

    .hero-h1 {
      font-size: clamp(2.4rem, 4.4vw, 3.9rem);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.04em;
      margin-bottom: 22px;
      text-wrap: balance;
    }

    .hero-h1 em {
      font-style: italic;
      font-weight: 600;
      color: rgba(255,255,255,0.66);
      display: block;
      line-height: 1.12;
      padding-bottom: 4px;
    }

    .hero-lead {
      font-size: clamp(1.02rem, 1.4vw, 1.2rem);
      font-weight: 400;
      line-height: 1.55;
      color: rgba(255,255,255,0.6);
      max-width: 46ch;
      margin-bottom: 32px;
    }

    .hero-lead strong { color: #fff; font-weight: 600; }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .hero-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: min(640px, calc(100dvh - 140px));
      min-height: 380px;
    }

    .hero-visual canvas {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    .hero-visual-caption {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.4);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent-soft);
      box-shadow: 0 0 10px var(--accent-soft);
      animation: pulseGlow 1.8s infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }

    /* ---------- Stats ---------- */
    .stats-band {
      background: var(--ink);
      color: #fff;
      border-top: 1px solid var(--hairline-dark);
      border-bottom: 1px solid var(--hairline-dark);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--hairline-dark);
    }

    .stat-cell {
      background: var(--surface-elevated);
      padding: 36px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }

    .stat-cell::after {
      content: '';
      position: absolute;
      left: 50%; bottom: 0;
      width: 0; height: 2px;
      background: var(--accent);
      transform: translateX(-50%);
      transition: width 0.4s var(--spring);
    }

    .stat-cell:hover { background: #1f1f23; }
    .stat-cell:hover::after { width: 60%; }

    .stat-number {
      font-family: var(--font-mono);
      font-size: clamp(2rem, 3.2vw, 2.8rem);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-number .accent { color: var(--accent-soft); }
    .stat-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
    .stat-sub { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.35; }

    /* ---------- Section base ---------- */
    .section { padding: 100px 0; position: relative; }
    .section-light { background: var(--surface); }
    .section-muted { background: var(--canvas); }
    .section-dark { background: var(--surface-dark); color: #fff; }

    .section-head { max-width: 680px; margin-bottom: 56px; }
    .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }

    .h2 {
      font-size: clamp(2rem, 3.8vw, 3rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.04em;
      margin-bottom: 16px;
      text-wrap: balance;
    }

    .section-sub {
      font-size: 17px;
      color: var(--ink-60);
      line-height: 1.55;
      max-width: 58ch;
    }

    .section-dark .section-sub { color: rgba(255,255,255,0.55); }

    /* ---------- Problem: horizontal pan ---------- */
    .problem-scroll-wrap {
      background: var(--surface-dark);
      color: #fff;
      isolation: isolate;
      position: relative;
      z-index: 2;
    }

    .problem-scroll-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100dvh - var(--nav-h));
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 40px;
      padding: 40px 0;
      overflow: hidden;
      background: var(--surface-dark);
    }

    .problem-scroll-header {
      padding: 0 max(24px, calc((100vw - 1200px) / 2 + 24px));
      max-width: 100%;
      flex-shrink: 0;
    }

    .problem-scroll-header .h2 { color: #fff; max-width: 640px; }

    .problem-cards-outer {
      overflow: hidden;
      padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
      display: flex;
      align-items: center;
    }

    .problem-cards-track {
      display: flex;
      gap: 20px;
      width: max-content;
      will-change: transform;
    }

    .problem-card {
      width: 340px;
      flex-shrink: 0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      backdrop-filter: blur(12px);
      transition: border-color 0.3s, background 0.3s, transform 0.4s var(--spring);
    }

    .problem-card:hover {
      border-color: rgba(96,165,250,0.45);
      background: rgba(255,255,255,0.06);
      transform: translateY(-6px);
    }

    .problem-icon {
      width: 46px; height: 46px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      font-size: 20px;
      color: var(--accent-soft);
    }

    .problem-card h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: -0.03em;
    }

    .problem-card p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.52); }

    /* ---------- Story bridge ---------- */
    .story-bridge-wrap {
      background: var(--canvas);
      isolation: isolate;
      position: relative;
      z-index: 2;
    }

    .story-bridge-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100dvh - var(--nav-h));
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 48px 24px;
      background:
        radial-gradient(ellipse 50% 40% at 50% 60%, rgba(37,99,235, 0.07), transparent 70%),
        var(--canvas);
      overflow: hidden;
    }

    .story-bridge-lines {
      position: relative;
      height: clamp(3rem, 8vw, 5rem);
      width: 100%;
      max-width: 820px;
      margin-bottom: 24px;
    }

    .bridge-line {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(2.2rem, 5.5vw, 4rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.05;
      will-change: opacity, transform;
    }

    .bridge-sub {
      font-size: 18px;
      color: var(--ink-60);
      max-width: 52ch;
      line-height: 1.55;
      opacity: 0;
      transform: translateY(16px);
      will-change: opacity, transform;
    }

    .bridge-engines {
      display: flex;
      gap: 16px;
      margin-top: 36px;
      flex-wrap: wrap;
      justify-content: center;
      opacity: 0;
      transform: translateY(20px);
      will-change: opacity, transform;
    }

    .bridge-engine-pill {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px 16px 18px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--hairline);
      background: var(--surface);
      font-size: 15px;
      font-weight: 600;
      text-align: left;
      box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }

    .bridge-engine-pill .ph {
      width: 40px; height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-tint);
      color: var(--accent);
      font-size: 20px;
    }

    .bridge-engine-pill span {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-40);
      margin-top: 2px;
      font-family: var(--font-mono);
    }

    .bridge-engine-pill.dark { background: var(--ink); color: #fff; border-color: transparent; }
    .bridge-engine-pill.dark .ph { background: rgba(255,255,255,0.1); color: var(--accent-soft); }
    .bridge-engine-pill.dark span { color: rgba(255,255,255,0.45); }

    /* ---------- Showcase (GENii Pulse) ---------- */
    .scrolly-track {
      position: relative;
      background: var(--canvas);
      isolation: isolate;
      z-index: 2;
    }

    .scrolly-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100dvh - var(--nav-h));
      width: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 12px;
      padding: 14px 24px 28px;
      overflow: hidden;
      background: var(--canvas);
    }

    .scrolly-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      width: 100%;
    }

    .scrolly-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .subnav-frosted {
      width: 100%;
      max-width: 840px;
      height: 52px;
      justify-self: center;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-pill);
      padding: 4px 8px 4px 22px;
      backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .subnav-progress {
      position: absolute;
      bottom: 0; left: 0;
      height: 2px;
      background: var(--accent);
      width: 0%;
    }

    .subnav-label { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
    .subnav-tabs { display: flex; align-items: center; gap: 4px; }

    .tab-pill {
      background: transparent;
      border: none;
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      font-family: var(--font-text);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-60);
      cursor: pointer;
      transition: all 0.2s;
    }

    .tab-pill:hover { color: var(--ink); }
    .tab-pill.active { background: var(--ink); color: #fff; font-weight: 600; }

    .hardware-wrapper {
      perspective: 1600px;
      width: 100%;
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hardware-frame {
      position: relative;
      width: 100%;
      max-width: 860px;
      height: min(460px, calc(100dvh - 270px));
      background: #0a0a0b;
      border-radius: 32px;
      padding: 8px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 40px 100px -30px rgba(0,0,0,0.35),
        0 0 120px -40px var(--accent-glow);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .hardware-frame::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 34px;
      background: linear-gradient(135deg, #d4d4d8, #71717a, #3f3f46);
      z-index: -1;
    }

    .dynamic-island {
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      width: 90px; height: 20px;
      background: #000;
      border-radius: var(--radius-pill);
      z-index: 30;
    }

    .hardware-screen {
      width: 100%; height: 100%;
      background: var(--surface);
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .screen-nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 22px;
      background: var(--canvas);
      border-bottom: 1px solid var(--hairline);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-60);
      flex-shrink: 0;
    }

    .screen-logo { display: flex; align-items: center; gap: 8px; color: var(--ink); }
    .screen-content { flex: 1; position: relative; overflow: hidden; }

    .screen-state {
      position: absolute;
      inset: 20px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      transform: translateY(16px) scale(0.98);
      transition: opacity 0.45s var(--spring), transform 0.45s var(--spring);
      pointer-events: none;
    }

    .screen-state.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

    .search-box {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-80);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .search-box .ph { color: var(--ink-40); }

    .response-card {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 18px 22px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    }

    .grounded-pill {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-tint);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .citation-chip {
      font-size: 11px;
      color: var(--ink-60);
      background: var(--canvas);
      border: 1px solid var(--hairline);
      padding: 4px 10px;
      border-radius: var(--radius-sm);
    }

    .chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
    .canvas-card, .asst-grid, .pipeline-col { width: 100%; }

    .canvas-card {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 18px 22px;
    }

    .canvas-paragraph {
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 8px;
      border-left: 2px solid var(--accent);
      padding-left: 12px;
    }

    .asst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

    .asst-unit {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      padding: 14px;
    }

    .asst-unit .ph { color: var(--accent); margin-bottom: 8px; display: block; }
    .asst-unit-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .asst-unit-desc { font-size: 11px; color: var(--ink-60); line-height: 1.35; }

    .pipeline-item {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .narrative-wrap {
      width: 100%;
      max-width: 720px;
      min-height: 64px;
      position: relative;
      text-align: center;
      flex-shrink: 0;
    }

    .narrative-item {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s var(--spring), transform 0.4s var(--spring);
      pointer-events: none;
    }

    .narrative-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .narrative-p { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-60); line-height: 1.45; }
    .narrative-p strong { color: var(--ink); font-weight: 700; }

    .floating-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px 10px 22px;
      background: var(--ink);
      color: #fff;
      border-radius: var(--radius-pill);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: transform 0.25s var(--spring);
      flex-shrink: 0;
    }

    .floating-cta:hover { transform: translateY(-2px); }

    .floating-cta-icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    /* ---------- Assistants ---------- */
    .asst-studio {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-xl);
      padding: 36px;
      margin-bottom: 40px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.04);
    }

    .asst-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--hairline);
    }

    .asst-tab {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      font-family: var(--font-text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .asst-tab:hover { border-color: var(--ink-40); }
    .asst-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

    .asst-viewport {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 28px;
      min-height: 180px;
      position: relative;
      overflow: hidden;
    }

    .asst-viewport.is-swapping .asst-swap { animation: swapIn 0.45s var(--spring); }

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

    .asst-sim-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-tint);
      padding: 4px 12px;
      border-radius: var(--radius-pill);
    }

    .asst-sim-text { font-size: 15px; line-height: 1.55; margin: 14px 0 16px; }
    .asst-sim-stats { font-family: var(--font-mono); font-size: 11px; color: var(--ink-60); }

    .bento-assistants {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }

    .bento-cell {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      overflow: hidden;
      transition: transform 0.35s var(--spring), box-shadow 0.35s;
    }

    .bento-cell::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,0.10), transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    .bento-cell:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.06); }
    .bento-cell:hover::before { opacity: 1; }

    .bento-cell > * { position: relative; }

    .bento-cell.featured {
      grid-row: span 2;
      background:
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(37,99,235,0.35), transparent 65%),
        var(--ink);
      color: #fff;
      border-color: transparent;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .bento-cell.featured p { color: rgba(255,255,255,0.6); }

    .bento-cell.dark-tile {
      background: var(--surface-elevated);
      color: #fff;
      border-color: rgba(255,255,255,0.08);
    }

    .bento-cell.dark-tile p { color: rgba(255,255,255,0.5); }

    .bento-cell.tint-tile {
      background:
        linear-gradient(135deg, rgba(37,99,235,0.10), transparent 60%),
        var(--surface);
    }

    .cell-icon {
      width: 40px; height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-tint);
      color: var(--accent);
      font-size: 20px;
      margin-bottom: 16px;
    }

    .bento-cell.featured .cell-icon,
    .bento-cell.dark-tile .cell-icon { background: rgba(255,255,255,0.1); color: var(--accent-soft); }

    .bento-cell.featured .cell-icon { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; }

    .cell-title { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
    .bento-cell.featured .cell-title { font-size: 26px; }
    .cell-desc { font-size: 14px; line-height: 1.45; color: var(--ink-60); }

    /* ---------- PERSONii hub ---------- */
    .personii-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 56px;
      align-items: center;
    }

    .personii-list { display: grid; gap: 6px; }

    .personii-row {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      padding: 14px 18px;
      font-family: var(--font-text);
      cursor: pointer;
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 12px;
      align-items: start;
      transition: background 0.25s, border-color 0.25s;
      color: var(--ink);
    }

    .personii-row:hover { background: var(--surface); }

    .personii-row.active {
      background: var(--surface);
      border-color: var(--hairline);
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .personii-row-num {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-40);
      padding-top: 5px;
    }

    .personii-row.active .personii-row-num { color: var(--accent); }

    .personii-row-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

    .personii-row-desc {
      font-size: 14px;
      color: var(--ink-60);
      line-height: 1.45;
      margin-top: 4px;
      display: none;
    }

    .personii-row.active .personii-row-desc { display: block; }

    .personii-diagram {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 560px;
      margin: 0 auto;
    }

    .personii-diagram svg { width: 100%; height: 100%; display: block; overflow: visible; }

    .hub-ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
    .hub-spoke { stroke: var(--hairline); stroke-width: 1.5; transition: stroke 0.35s; }
    .hub-spoke.active { stroke: var(--accent); stroke-dasharray: 6 10; animation: spokeFlow 1.2s linear infinite; }

    @keyframes spokeFlow { to { stroke-dashoffset: -32; } }

    .hub-node { cursor: pointer; }
    .hub-node circle { fill: var(--surface); stroke: var(--hairline); stroke-width: 1.5; transition: fill 0.35s, stroke 0.35s, r 0.35s var(--spring); }
    .hub-node text { font-family: var(--font-text); font-size: 12px; font-weight: 600; fill: var(--ink-60); text-anchor: middle; transition: fill 0.35s; pointer-events: none; }
    .hub-node .hub-node-icon { font-size: 18px; fill: var(--ink-40); transition: fill 0.35s; }
    .hub-node.active circle { fill: var(--accent); stroke: var(--accent); }
    .hub-node.active text { fill: var(--ink); }
    .hub-node.active .hub-node-icon { fill: #fff; }

    .hub-core circle { fill: var(--ink); }
    .hub-core .hub-core-halo { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.5; transform-origin: center; animation: haloPulse 3s var(--ease) infinite; }
    .hub-core text { font-family: var(--font-text); fill: #fff; text-anchor: middle; font-weight: 700; font-size: 13px; }
    .hub-core .hub-core-sub { font-family: var(--font-mono); fill: rgba(255,255,255,0.5); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; }
    .hub-core.active circle.hub-core-body { fill: var(--accent); }

    @keyframes haloPulse {
      0% { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(1.35); opacity: 0; }
    }

    /* ---------- Deploy ---------- */
    .deploy-pin-wrap {
      background: var(--surface);
      isolation: isolate;
      position: relative;
      z-index: 2;
    }

    .deploy-pin-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100dvh - var(--nav-h));
      width: 100%;
      display: flex;
      align-items: center;
      padding: 24px;
      overflow: hidden;
      background: var(--surface);
    }

    .deploy-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: 56px;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      align-items: center;
    }

    .deploy-steps { display: grid; gap: 12px; }

    .deploy-line-wrap { position: relative; padding-left: 32px; }

    .deploy-line {
      position: absolute;
      left: 11px; top: 0;
      width: 2px; height: 100%;
      background: var(--hairline);
    }

    .deploy-line-fill {
      position: absolute;
      left: 11px; top: 0;
      width: 2px; height: 0%;
      background: var(--accent);
    }

    .deploy-step {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 20px 22px 20px 56px;
      position: relative;
      opacity: 0.35;
      transform: translateX(-12px);
      transition: opacity 0.35s, transform 0.35s var(--spring), border-color 0.35s;
    }

    .deploy-step.is-active { opacity: 1; transform: translateX(0); border-color: rgba(37,99,235,0.25); }

    .deploy-step-dot {
      position: absolute;
      left: 22px; top: 26px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--hairline);
      transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
    }

    .deploy-step.is-active .deploy-step-dot {
      border-color: var(--accent);
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(37,99,235, 0.12);
    }

    .deploy-step h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.03em; }
    .deploy-step p { font-size: 14px; color: var(--ink-60); line-height: 1.5; }

    .deploy-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 5 / 4;
      max-height: calc(100dvh - 160px);
      background:
        radial-gradient(ellipse 60% 60% at 50% 50%, rgba(37,99,235, 0.12), transparent 70%),
        linear-gradient(180deg, #0f0f12, #18181b);
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .deploy-visual canvas {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    .deploy-labels { position: absolute; inset: 0; pointer-events: none; }

    .d-label {
      position: absolute;
      transform: translate(-50%, -50%);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      background: rgba(9,9,11,0.7);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 4px 9px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s;
      backdrop-filter: blur(6px);
    }

    .d-label.core {
      font-family: var(--font-text);
      font-size: 13px;
      font-weight: 700;
      background: var(--accent);
      border-color: transparent;
      color: #fff;
    }

    .deploy-visual-label {
      position: absolute;
      top: 16px; left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      color: #fff;
      padding: 8px 14px;
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(8px);
    }

    /* ---------- ROI ---------- */
    .roi-box {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-xl);
      padding: 44px;
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 40px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    }

    .slider-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .slider-count { font-family: var(--font-mono); font-size: 28px; font-weight: 700; }

    .roi-slider {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--accent) var(--fill, 5%), var(--hairline) var(--fill, 5%));
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      margin-bottom: 32px;
    }

    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--ink);
      border: 3px solid #fff;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    .roi-slider::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--ink);
      border: 3px solid #fff;
      cursor: pointer;
    }

    .roi-stats { display: grid; gap: 18px; }

    .roi-stat {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--hairline);
    }

    .roi-stat:last-child { border-bottom: none; padding-bottom: 0; }

    .roi-val {
      font-family: var(--font-mono);
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.04em;
    }

    .roi-val.accent { color: var(--accent); }
    .roi-lbl { font-size: 13px; font-weight: 600; color: var(--ink-60); }

    .roi-chart-wrap {
      background: var(--canvas);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 22px 22px 16px;
      display: flex;
      flex-direction: column;
    }

    .roi-chart-title { font-size: 13px; font-weight: 600; color: var(--ink-60); margin-bottom: 4px; }
    .roi-chart-value { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
    .roi-chart-value span { font-family: var(--font-mono); color: var(--accent); }

    .roi-equiv-copy { font-size: 14px; line-height: 1.5; color: var(--ink-60); margin-bottom: 22px; }
    .roi-equiv-copy strong { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

    .roi-compare { display: grid; gap: 14px; flex: 1; }

    .roi-compare-row {
      display: grid;
      grid-template-columns: 110px 1fr 56px;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }

    .roi-compare-lbl { font-weight: 600; color: var(--ink-60); }
    .roi-compare-bar { height: 22px; border-radius: 6px; background: var(--hairline); overflow: hidden; }
    .roi-compare-fill { height: 100%; border-radius: 6px; transition: width 0.5s var(--spring); }
    .roi-compare-fill.team { background: var(--ink-80); }
    .roi-compare-fill.gain { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
    .roi-compare-val { font-family: var(--font-mono); font-weight: 600; text-align: right; }
    .roi-compare-val.accent { color: var(--accent); }

    .roi-assumptions { font-size: 11px; color: var(--ink-40); margin-top: 20px; line-height: 1.4; }

    /* ---------- CTA band ---------- */
    .cta-band {
      position: relative;
      background:
        radial-gradient(ellipse 60% 80% at 80% 100%, rgba(37,99,235,0.45), transparent 60%),
        var(--ink);
      color: #fff;
      border-radius: var(--radius-xl);
      padding: 88px 40px;
      text-align: center;
      margin: 0 auto 80px;
      overflow: hidden;
    }

    .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent);
      -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent);
      pointer-events: none;
    }

    .cta-band > * { position: relative; }
    .cta-band .section-sub { color: rgba(255,255,255,0.6); margin: 0 auto 32px; }
    .cta-band .btn-primary { background: #fff; color: var(--ink); }
    .cta-band .cta-note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.45); }
    .cta-band .cta-note a { color: rgba(255,255,255,0.75); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }

    /* ---------- Footer ---------- */
    footer {
      background: var(--canvas);
      border-top: 1px solid var(--hairline);
      padding: 48px 0 36px;
      font-size: 13px;
      color: var(--ink-60);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 32px;
      margin-bottom: 36px;
    }

    .footer-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .footer-links a { color: var(--ink-60); text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: var(--ink); }

    .footer-base {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding-top: 20px;
      border-top: 1px solid var(--hairline);
    }

    /* ---------- Static fallbacks ---------- */
    .scroll-static .problem-cards-outer {
      overflow-x: auto;
      padding-bottom: 12px;
      -webkit-overflow-scrolling: touch;
    }

    .scroll-static .problem-cards-track { transform: none !important; }

    .scroll-static .bridge-line,
    .scroll-static .bridge-sub,
    .scroll-static .bridge-engines { opacity: 1 !important; transform: none !important; }

    .scroll-static .bridge-line { position: static; }
    .scroll-static .story-bridge-lines { height: auto; display: grid; gap: 8px; }
    .scroll-static .deploy-step { opacity: 1 !important; transform: none !important; }
    .scroll-static .deploy-line-fill { height: 100% !important; }
    .scroll-static .hardware-frame { transform: none !important; }

    .reveal-item { opacity: 0; transform: translateY(28px); }
    .reveal-item.visible { opacity: 1; transform: none; }

    /* ---------- Responsive ---------- */
    @media (max-width: 992px) {
      .hero-inner { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 32px); gap: 20px; }
      .hero-copy { max-width: 100%; }
      .hero-visual { min-height: 300px; max-height: 44vh; aspect-ratio: auto; height: 44vh; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .nav-menu { display: none; }
      .nav-toggle { display: inline-flex; }
      .bento-assistants { grid-template-columns: 1fr 1fr; }
      .bento-cell.featured { grid-row: span 1; grid-column: span 2; }
      .personii-grid { grid-template-columns: 1fr; gap: 32px; }
      .personii-diagram { max-width: 440px; }
      .deploy-grid { grid-template-columns: 1fr; gap: 32px; }
      .deploy-visual { aspect-ratio: 4 / 3; max-height: none; }
      .roi-box { grid-template-columns: 1fr; padding: 32px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .asst-grid { grid-template-columns: 1fr; }
      .hardware-frame { height: 360px; }
    }

    @media (max-width: 768px) {
      .problem-scroll-sticky,
      .story-bridge-sticky,
      .deploy-pin-sticky,
      .scrolly-sticky {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .problem-scroll-sticky { padding: 64px 0; gap: 32px; }
      .story-bridge-sticky { padding: 80px 24px; }
      .deploy-pin-sticky { padding: 64px 24px; }
      .scrolly-sticky { display: flex; flex-direction: column; gap: 20px; padding: 24px 16px 32px; }
      .section { padding: 72px 0; }
    }

    @media (max-width: 640px) {
      body { font-size: 16px; }
      .stats-grid, .footer-grid { grid-template-columns: 1fr; }
      .bento-assistants { grid-template-columns: 1fr; }
      .bento-cell.featured { grid-column: span 1; }
      .problem-card { width: 280px; padding: 28px 22px; }
      .hardware-frame { height: min(320px, calc(100dvh - 240px)); border-radius: 22px; }
      .hardware-screen { border-radius: 16px; }
      .screen-state { inset: 14px 14px; }
      .subnav-frosted { height: auto; min-height: 48px; flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
      .subnav-tabs { flex-wrap: wrap; }
      .roi-box { padding: 24px; }
      .cta-band { padding: 64px 24px; }
      .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
    }
    /* ================= DARK THEME + MERGED SECTIONS ================= */
    :root {
      --ink: #fafafa; --ink-80: #e4e4e7; --ink-60: #a1a1aa; --ink-40: #71717a;
      --canvas: #09090b; --surface: #101013; --surface-elevated: #18181b;
      --hairline: rgba(255,255,255,0.09);
      --accent: #3b82f6; --accent-soft: #60a5fa; --accent-tint: rgba(59,130,246,0.14);
    }
    html, body { background: #09090b; color: var(--ink); }
    .logo-mark, .btn-primary { color: #09090b; }
    .btn-primary.accent, .btn-primary.dark { background: var(--accent); color: #fff; }
    .stats-band { background: #0c0c0f; }
    .bridge-engine-pill.dark { background: var(--accent); }
    .tab-pill.active, .asst-tab.active { background: var(--accent); color: #fff; }
    .floating-cta { background: var(--accent); color: #fff; }
    .roi-slider::-webkit-slider-thumb, .roi-slider::-moz-range-thumb { background: var(--accent); border-color: #09090b; }
    .cta-band { background: radial-gradient(ellipse 60% 80% at 80% 100%, rgba(59,130,246,0.45), transparent 60%), #131318; border: 1px solid var(--hairline); }
    .cta-band .btn-primary { color: #09090b; }
    .subnav-frosted { background: rgba(24,24,27,0.88); }
    .bento-cell.featured { background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(59,130,246,0.35), transparent 65%), #18181b; }
    .bento-cell:hover, .asst-studio, .roi-box { box-shadow: 0 20px 48px rgba(0,0,0,0.35); }
    .hub-core circle.hub-core-body { fill: #1d1d23; stroke: var(--accent); stroke-width: 1.5; }
    .hub-node circle { fill: #18181b; }
    .hub-node.active text { fill: #fff; }
    .hardware-screen, .screen-content { color: var(--ink); }
    .narrative-p, .narrative-p strong, .asst-sim-text, .cell-title { color: var(--ink); }
    .section-muted { background: var(--canvas); }
    .section-light { background: var(--surface); }
    .grounded-pill { background: rgba(16,185,129,0.14); color: #34d399; }
    .hero-stat-source { display:block; margin-top:4px; font-size:11px; font-style:italic; color: var(--ink-40); }

    .scrolly-static { display: flex; flex-direction: column; gap: 28px; padding: 72px 24px 64px; background: var(--canvas); }
    .scrolly-static .hardware-frame { height: 460px; }
    .deploy-static { width: 100%; padding: 88px 24px; display: flex; }
    .deploy-static .deploy-grid { width: 100%; }
    .deploy-static .deploy-visual { min-height: 440px; }
    .subnav-progress { transition: none; }
    .subnav-progress.run { transition: width 5s linear; width: 100% !important; }
    .scrolly-static .subnav-frosted { align-self: center; margin: 0 auto; }
    .scrolly-static .scrolly-stage, .scrolly-static .scrolly-footer { align-self: stretch; }
    .scrolly-static .scrolly-footer { min-height: 90px; }
    .hero { min-height: auto; }
    .bridge-static { background: var(--canvas); position: relative; z-index: 2; }
    .bridge-static-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 88px 24px 96px; background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(59,130,246,0.08), transparent 70%), var(--canvas); }
    .bridge-static .story-bridge-lines { height: auto; margin-bottom: 20px; }
    .bridge-static .bridge-line { position: static; display: block; opacity: 1 !important; transform: none !important; font-size: clamp(2rem, 4.6vw, 3.4rem); }
    .bridge-static .bridge-line-2 { color: var(--accent-soft); }
    .bridge-static .bridge-sub, .bridge-static .bridge-engines { opacity: 1 !important; transform: none !important; }
    .problem-scroll-sticky { position: static; height: auto; justify-content: flex-start; gap: 40px; padding: 72px 0 80px; overflow: visible; }
    .problem-scroll-header { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px; }
    .problem-cards-outer { padding: 0 24px; max-width: 1200px; width: 100%; margin: 0 auto; overflow: visible; }
    .problem-cards-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; transform: none !important; }
    .problem-card { width: auto; padding: 28px 24px; }
    @media (max-width: 900px) { .problem-cards-track { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .problem-cards-track { grid-template-columns: 1fr; } }
    .hero-inner { padding-bottom: 32px; }
    .hubx-hex-name { text-align: left; line-height: 1.1; font-size: 15px; }
    .logo-full { height: 30px; width: auto; display: block; }
    .logo { gap: 8px; }
    .logo-brain { width: 30px; height: 30px; object-fit: contain; filter: invert(1); display: block; }
    .logo-word { font-family: var(--font-text); font-weight: 300; font-size: 22px; letter-spacing: -0.02em; text-transform: lowercase; line-height: 1; }
    /* Why it matters pillars */
    .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 auto 72px; max-width: 960px; }
    .pillar { background: var(--surface-elevated); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 24px; }
    .pillar .cell-icon { margin-bottom: 14px; }
    .pillar h3 { font-size: 18px; letter-spacing: -0.03em; margin-bottom: 6px; }
    .pillar p { font-size: 14px; color: var(--ink-60); line-height: 1.5; }
    .pstats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: -24px auto 48px; }
    .pstat { background: var(--surface-elevated); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px 26px; min-width: 260px; }
    .pstat b { font-size: 34px; letter-spacing: -0.04em; color: var(--accent-soft); margin-right: 8px; }
    .pstat span { font-size: 13px; color: var(--ink-60); }
    .sub-title { font-size: 13px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 18px; }

    /* Interactive ecosystem hub */
    .hubx { position: relative; display: grid; grid-template-columns: 1fr 190px 1fr; gap: 56px; align-items: center; max-width: 1000px; margin: 0 auto; }
    .hubx-col { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
    .hubx-chip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-elevated); border: 1px solid var(--hairline); font-size: 14px; font-weight: 500; color: var(--ink-80); text-align: left; font-family: var(--font-text); transition: all .25s; }
    .hubx-chip .ph { font-size: 20px; color: var(--ink-40); transition: color .25s; }
    button.hubx-chip { cursor: pointer; }
    button.hubx-chip:hover { border-color: rgba(255,255,255,0.25); }
    .hubx-chip.on { border-color: var(--accent); background: var(--accent-tint); color: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
    .hubx-chip.on .ph, .hubx-chip.lit .ph { color: var(--accent-soft); }
    .hubx-chip.lit { border-color: rgba(96,165,250,0.6); color: #fff; background: rgba(59,130,246,0.1); }
    .hubx-chip.dim { opacity: .35; }
    .hubx-hex { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; z-index: 2; }
    .hubx-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .hubx-hex .hex-pulse { transform-origin: center; animation: hexPulse 2.6s ease-out infinite; }
    @keyframes hexPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.22); opacity: 0; } }
    .hubx-hex-in { position: relative; text-align: center; }
    .hubx-hex-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; transform: translateX(-4px); }
    .hubx-hex-name img { width: 22px; height: 22px; object-fit: contain; filter: invert(1); }
    .hubx-hex-sub { font-size: 11px; color: var(--ink-60); margin-top: 4px; padding-left: 26px; }
    .hubx-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
    .hubx-line { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-dasharray: 6 8; animation: spokeFlow 1s linear infinite; opacity: .85; }
    .hubx-hint { text-align: center; max-width: 640px; margin: 36px auto 0; font-size: 15px; color: var(--ink-60); min-height: 48px; }
    @media (max-width: 860px) {
      .hubx { grid-template-columns: 1fr; gap: 20px; }
      .hubx-hex { margin: 0 auto; }
      .hubx-svg { display: none; }
      .pillars { grid-template-columns: 1fr; }
    }

    /* Agents */
    .agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .agents-grid .bento-cell { padding: 24px; }
    .agents-lead { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
    .agents-label { font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-40); margin: 28px 0 12px; grid-column: 1 / -1; }
    @media (max-width: 860px) { .agents-grid { grid-template-columns: 1fr; } }

    /* Footer with legal column */
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; }
    @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  

    .d-label.core { width: auto; height: auto; padding: 0; border: 0; background: none; border-radius: 0; backdrop-filter: none; display: flex; align-items: center; justify-content: center; color: #fff; }
    .d-label.core svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .d-label.core .core-in { position: relative; text-align: center; }
    .d-label.core .core-name { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-text); font-size: 13px; font-weight: 700; letter-spacing: -0.03em; transform: translateX(-3px); }
    .d-label.core .core-name img { width: 14px; height: 14px; object-fit: contain; filter: invert(1); }
    .d-label.core .core-sub { font-family: var(--font-text); font-size: 7px; font-weight: 400; color: var(--ink-60); margin-top: 2px; padding-left: 16px; }

    /* Centered section headers */
    .section-head, .problem-scroll-header { text-align: center; margin-left: auto; margin-right: auto; }
    .section-head .section-sub, .problem-scroll-header .section-sub, .problem-scroll-header .h2 { margin-left: auto; margin-right: auto; }
    .problem-scroll-header { max-width: 1200px; }

    /* Industry tabs */
    .ind-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 28px; }
    .ind-tab { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-60); cursor: pointer; transition: all .2s; }
    .ind-tab:hover { color: var(--ink); }
    .ind-tab.active { background: var(--accent); border-color: transparent; color: #fff; }
    .ind-panel { display: none; }
    .ind-panel.active { display: block; animation: indIn .35s ease; }
    .ind-intro { max-width: 720px; margin: 0 auto 8px; text-align: center; color: var(--ink-60); line-height: 1.6; }
    @keyframes indIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* ================= LIGHT THEME (modern) ================= */
    :root {
      --ink: #0b1220; --ink-80: #1f2937; --ink-60: #566074; --ink-40: #8791a3;
      --canvas: #f6f8fc; --surface: #ffffff; --surface-elevated: #ffffff;
      --hairline: #e3e8f0; --hairline-dark: #e3e8f0;
      --accent: #2563eb; --accent-soft: #2563eb; --accent-tint: rgba(37,99,235,0.08);
      --accent-glow: rgba(37,99,235,0.28);
    }
    /* dark-scoped tokens for panels that stay dark */
    .hero-visual, .deploy-visual, .hardware-frame, .bento-cell.featured, .bento-cell.dark-tile {
      --ink: #fafafa; --ink-80: #e4e4e7; --ink-60: #a1a1aa; --ink-40: #71717a;
      --canvas: #09090b; --surface: #101013; --surface-elevated: #18181b;
      --hairline: rgba(255,255,255,0.09); --accent-soft: #60a5fa; --accent: #3b82f6; --accent-tint: rgba(59,130,246,0.14);
    }
    html, body { background: var(--canvas); color: var(--ink); }
    ::selection { background: var(--accent); color: #fff; }

    /* nav */
    .global-nav, .global-nav.scrolled { background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hairline); }
    .logo { color: var(--ink); }
    .logo-full { filter: brightness(0); }
    .nav-menu a { color: var(--ink-60); }
    .nav-menu a:hover { color: var(--ink); }
    .nav-toggle { border-color: var(--hairline); color: var(--ink); }
    .nav-mobile { background: #fff; border-bottom: 1px solid var(--hairline); }
    .nav-mobile a { color: var(--ink-80); border-color: var(--hairline); }
    .btn-primary { background: var(--ink); color: #fff; }
    .btn-primary:hover { box-shadow: 0 12px 28px rgba(11,18,32,0.18); }
    .btn-primary.accent, .btn-primary.dark { background: var(--accent); color: #fff; }
    .btn-ghost { color: var(--ink); border-color: #cfd6e3; background: rgba(255,255,255,0.6); }
    .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

    /* hero */
    .hero { background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%); color: var(--ink); }
    .hero-bg { background: radial-gradient(ellipse 60% 50% at 75% 40%, rgba(37,99,235,0.14), transparent 70%), radial-gradient(ellipse 40% 40% at 15% 90%, rgba(99,102,241,0.08), transparent 70%); }
    .hero-grid-lines { background-image: linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px); }
    .hero-h1 { color: var(--ink); }
    .hero-h1 em { color: var(--accent); }
    .hero-lead { color: var(--ink-60); }
    .hero-lead strong { color: var(--ink); }
    .hero-visual { background: radial-gradient(ellipse 70% 60% at 50% 50%, #12172b, #0a0b12); border-radius: var(--radius-xl); box-shadow: 0 40px 90px -30px rgba(37,99,235,0.45), 0 0 0 1px rgba(15,23,42,0.08); overflow: hidden; }
    .hero-visual-caption { color: rgba(255,255,255,0.5); }

    /* stats */
    .stats-band { background: #fff; color: var(--ink); border-color: var(--hairline); }
    .stat-cell { background: #fff; }
    .stat-cell:hover { background: #f3f6fc; }
    .stat-number { color: var(--ink); }
    .stat-number .accent { color: var(--accent); }
    .stat-sub, .hero-stat-source { color: var(--ink-60); }

    /* problem + dark sections -> light */
    .section-dark, .problem-scroll-wrap { background: var(--canvas); color: var(--ink); }
    .section-dark .section-sub { color: var(--ink-60); }
    .problem-scroll-header .h2 { color: var(--ink); }
    .problem-card { background: #fff; border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    .problem-card:hover { background: #fff; border-color: #c9d3e6; box-shadow: 0 16px 40px rgba(37,99,235,0.08); }
    .problem-card h3 { color: var(--ink); }
    .problem-card p { color: var(--ink-60); }
    .problem-icon { background: var(--accent-tint); border-color: transparent; color: var(--accent); }

    /* solution bridge */
    .bridge-static { background: #fff; }
    .bridge-static-inner { background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(37,99,235,0.07), transparent 70%), #fff; }
    .bridge-static .bridge-line { color: var(--ink); }
    .bridge-static .bridge-line-2 { color: var(--accent); }
    .bridge-sub { color: var(--ink-60); }

    /* sections */
    .section-muted { background: var(--canvas); }
    .section-light { background: #fff; }
    .story-chapter { color: var(--accent) !important; }
    .narrative-p, .narrative-p strong, .cell-title, .asst-sim-text { color: var(--ink); }
    .scrolly-static { background: var(--canvas); }
    .subnav-frosted { background: rgba(255,255,255,0.92); border: 1px solid var(--hairline); box-shadow: 0 8px 24px rgba(11,18,32,0.06); }
    .tab-pill.active, .asst-tab.active, .ind-tab.active { background: var(--accent); color: #fff; }
    .bento-cell, .pillar, .pstat, .asst-studio, .roi-box { background: #fff; border-color: var(--hairline); box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    .bento-cell:hover, .asst-studio, .roi-box { box-shadow: 0 18px 44px rgba(11,18,32,0.08); }
    .bento-cell.featured { background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(59,130,246,0.4), transparent 65%), #14172a; border-color: transparent; color: #fff; }
    .bento-cell.featured .cell-title { color: #fff; }
    .bento-cell.featured p { color: rgba(255,255,255,0.7); }
    .pstat b { color: var(--accent); }
    .grounded-pill { background: rgba(16,185,129,0.1); color: #059669; }
    .ind-tab { background: #fff; }

    /* hubs */
    .hubx-chip { background: #fff; color: var(--ink-80); box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    button.hubx-chip:hover { border-color: #b8c4dc; }
    .hubx-chip.on { color: var(--ink); background: var(--accent-tint); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
    .hubx-chip.lit { color: var(--ink); border-color: rgba(37,99,235,0.5); background: rgba(37,99,235,0.06); }
    .hubx-hex polygon:not(.hex-pulse) { fill: #fff; stroke: var(--accent); }
    .hubx-hex .hex-pulse { stroke: var(--accent); }
    .hubx-hex-name img { filter: none; }
    .hubx-line { stroke: var(--accent); }
    .hub-core circle.hub-core-body { fill: #eef3ff; stroke: var(--accent); }
    .hub-node circle { fill: #fff; }
    .hub-node.active text { fill: var(--ink); }

    /* dark showcase panels keep light text */
    .hardware-screen, .screen-content { color: #fafafa; }
    .deploy-visual { background: linear-gradient(180deg, #0f0f12, #18181b); border-radius: var(--radius-xl); }
    .d-label.core .core-name img { filter: invert(1); }

    /* CTA + footer */
    .cta-band { background: radial-gradient(ellipse 60% 80% at 80% 100%, rgba(96,165,250,0.55), transparent 60%), linear-gradient(135deg, #1e3a8a, #2563eb); border: 0; color: #fff; }
    .cta-band .btn-primary { background: #fff; color: #0b1220; }
    footer { background: #fff; }
    .logo-brain { filter: none; }
    .problem-scroll-sticky { background: var(--canvas); }

    /* ================= MODULAR SITE ================= */
    .nav-menu > li { position: relative; }
    .nav-menu > li > a.has-drop::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 7px; }
    .nav-drop { position: absolute; top: 100%; left: -14px; min-width: 280px; padding-top: 14px; display: none; z-index: 1100; }
    .nav-drop-in { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 8px; box-shadow: 0 24px 56px rgba(11,18,32,0.14); }
    .nav-menu > li:hover > .nav-drop, .nav-menu > li:focus-within > .nav-drop { display: block; }
    .nav-drop a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink-80) !important; font-size: 13.5px; white-space: normal; }
    .nav-drop a small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-60); margin-top: 2px; }
    .nav-drop a:hover { background: var(--accent-tint); color: var(--ink) !important; }
    .nav-menu a[aria-current="page"] { color: var(--ink); }
    .nav-mobile .nav-m-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); padding: 14px 0 4px; }

    .page-hero { position: relative; overflow: hidden; text-align: center; padding: calc(var(--nav-h) + 72px) 24px 64px; background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%); border-bottom: 1px solid var(--hairline); }
    .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(37,99,235,0.12), transparent 70%); pointer-events: none; }
    .page-hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
    .crumbs { font-size: 13px; color: var(--ink-60); margin-bottom: 18px; }
    .crumbs a { color: var(--ink-60); text-decoration: none; }
    .crumbs a:hover { color: var(--ink); }
    .crumbs span { margin: 0 8px; color: var(--ink-40); }
    .page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.06; letter-spacing: -0.04em; font-weight: 700; color: var(--ink); margin-bottom: 18px; text-wrap: balance; }
    .page-hero .lead { font-size: 18px; line-height: 1.6; color: var(--ink-60); max-width: 680px; margin: 0 auto 28px; }
    .page-hero .hero-actions { justify-content: center; }

    a.link-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; }
    a.link-card .cell-more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent); }
    a.link-card:hover .cell-more { text-decoration: underline; }
    .cards-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
    @media (max-width: 860px) { .cards-2 { grid-template-columns: 1fr; } }
    .block-head { margin: 56px 0 8px; }
    .block-head:first-child { margin-top: 0; }
    .block-head .agents-label { margin-top: 0; }
    .block-link { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; }
    .block-link:hover { text-decoration: underline; }
    .section.tight-top { padding-top: 56px; }
    .founder { display: flex; flex-direction: column; }
    .founder-bio { flex: 1 1 auto; }
    .founder-email { align-self: center; }
    .founder-email { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
    .founder-email:hover { text-decoration: underline; }
    .sub-tabs { background: #fff; border-bottom: 1px solid var(--hairline); position: sticky; top: var(--nav-h); z-index: 50; }
    .sub-tabs-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; gap: 8px; overflow-x: auto; }
    @media (max-width: 640px) { .sub-tabs-in { justify-content: flex-start; } }
    .sub-tabs a { white-space: nowrap; padding: 16px 14px; font-size: 14px; font-weight: 600; color: var(--ink-60); text-decoration: none; border-bottom: 2px solid transparent; }
    .sub-tabs a:hover { color: var(--ink); }
    .sub-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
    .core-list { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
    .core-tile { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(11,18,32,0.04); transition: transform .2s, box-shadow .2s; }
    .core-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(37,99,235,0.14); }
    .core-tile i { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
    .core-tile strong { font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }
    .core-tile .addon { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
    .core-tile span { font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
    @media (max-width: 900px) { .core-list { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .core-list { grid-template-columns: 1fr; } }
    .hex-wrap { display: flex; justify-content: center; }
    .hexgraph { width: 100%; max-width: 440px; height: auto; }
    .pull-quote { font-size: 24px; font-style: italic; font-weight: 500; color: var(--accent); margin-top: 28px; letter-spacing: -0.02em; }
    .pull-quote.center { text-align: center; margin-top: 40px; color: var(--ink); font-size: 22px; }
    .chat-mock { background: #0f1420; border-radius: var(--radius-xl); padding: 36px 28px; display: grid; gap: 16px; box-shadow: 0 40px 80px -30px rgba(37,99,235,0.45); }
    .cm-q { justify-self: end; max-width: 85%; background: var(--accent); color: #fff; padding: 16px 20px; border-radius: 16px; font-size: 17px; font-weight: 500; line-height: 1.4; }
    .cm-a { max-width: 85%; background: #1a2236; border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 18px 20px; border-radius: 16px; font-size: 16px; line-height: 1.5; }
    .cm-src { display: inline-block; margin-top: 12px; background: #263049; color: #93c5fd; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; }
    .canvas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .canvas-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 26px 24px; min-height: 210px; box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    .canvas-card i { font-size: 30px; color: var(--accent); }
    .canvas-card h3 { font-size: 22px; letter-spacing: -0.03em; margin: 16px 0 8px; }
    .canvas-card p { font-size: 15px; line-height: 1.55; color: var(--ink-60); }
    .canvas-card.dark { background: #0f1420; border-color: transparent; }
    .canvas-card.dark i { color: #60a5fa; }
    .canvas-card.dark h3 { color: #fff; }
    .canvas-card.dark p { color: rgba(255,255,255,0.7); }
    @media (max-width: 900px) { .canvas-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .canvas-grid { grid-template-columns: 1fr; } }
    .wave-wrap { margin: 24px 0 36px; }
    .wave { width: 100%; height: auto; display: block; }
    .voice-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .voice-cap { border-top: 2px solid var(--accent); padding-top: 14px; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink); }
    @media (max-width: 760px) { .voice-caps { grid-template-columns: 1fr; } }
    .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
    @media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
    .lead-p { font-size: 20px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; }
    .sub-p { font-size: 17px; line-height: 1.6; color: var(--ink-60); margin: 0 0 16px; max-width: 52ch; }
    .micro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .micro-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(11,18,32,0.04); min-height: 260px; }
    .micro-k { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
    .micro-t { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 12px; }
    .micro-line { height: 9px; border-radius: 6px; background: var(--hairline); margin-bottom: 8px; }
    .micro-line.short { width: 70%; }
    .micro-ask { margin-top: auto; background: #0b1220; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
    .micro-ask i { color: #60a5fa; font-size: 16px; }
    @media (max-width: 560px) { .micro-cards { grid-template-columns: 1fr; } .micro-card { min-height: 0; } }
    .feat-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
    .feat { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; color: var(--ink); }
    .feat i { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .browser-mock { background: #0f1420; border-radius: var(--radius-xl); padding: 28px; min-height: 380px; position: relative; box-shadow: 0 40px 80px -30px rgba(37,99,235,0.45); }
    .bm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
    .bm-pill { width: 90px; height: 12px; border-radius: 8px; background: #2a3550; }
    .bm-box { width: 140px; height: 32px; border-radius: 10px; border: 1.5px dashed #3b4a6e; }
    .bm-bar { height: 18px; border-radius: 9px; background: #2a3550; margin-bottom: 14px; }
    .bm-bar.thin { height: 11px; }
    .bm-chat { position: absolute; right: 24px; bottom: 24px; width: 62%; min-width: 230px; background: #fdfbf6; border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
    .bm-q { justify-self: end; background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; }
    .bm-a { background: #fff; border: 1px solid var(--hairline); padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink-60); }
    .wf-card { background: #fff; border: 1px solid var(--hairline); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(11,18,32,0.04); transition: transform .25s, box-shadow .25s; }
    .wf-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(37,99,235,0.12); }
    .wf-ic { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 10px 24px -8px rgba(37,99,235,0.55); }
    .wf-card h3 { font-size: 21px; letter-spacing: -0.03em; margin-bottom: 4px; color: var(--ink); }
    .wf-tag { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
    .wf-card p { font-size: 15px; line-height: 1.6; color: var(--ink-60); margin-bottom: 16px; }
    .wf-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 0; }
    .wf-list li { font-size: 12.5px; font-weight: 600; color: var(--ink-80); background: var(--accent-tint); border-radius: 999px; padding: 6px 12px; }
    .page-hero-inner.wide { max-width: 1040px; }
    .hero-proof { margin-top: 44px; display: grid; gap: 16px; text-align: left; }
    .hp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hp-stat { background: linear-gradient(135deg, #14172a, #1e3a8a); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; box-shadow: 0 24px 50px -24px rgba(37,99,235,0.55); }
    .hp-stat b { grid-row: 1 / span 2; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: #fff; }
    .hp-stat span { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,0.88); }
    .hp-stat em { font-size: 11px; font-style: italic; color: rgba(255,255,255,0.55); margin-top: 2px; }
    .hp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hp-pillar { background: rgba(255,255,255,0.85); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center; }
    .hp-pillar i { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); font-size: 20px; display: flex; align-items: center; justify-content: center; }
    .hp-pillar strong { font-size: 15px; letter-spacing: -0.02em; color: var(--ink); }
    .hp-pillar span { font-size: 13px; line-height: 1.45; color: var(--ink-60); grid-column: 2; }
    @media (max-width: 860px) { .hp-stats, .hp-pillars { grid-template-columns: 1fr; } }
    .hub-core circle.hub-core-body { fill: #0b0b0e; stroke: var(--accent); stroke-width: 2; }
    .hub-core .hub-core-halo { stroke-width: 2; opacity: .45; }
    .hub-core .hub-core-logo { filter: invert(1); }
    .hub-core text.hub-core-name { text-anchor: start; font-size: 21px; letter-spacing: -0.03em; fill: #fff; }
    .hub-core text.hub-core-by { text-anchor: start; font-family: var(--font-text); font-size: 12.5px; font-weight: 400; fill: rgba(255,255,255,0.65); }
    .hub-core text.hub-core-sub { font-size: 8px; letter-spacing: .14em; fill: rgba(255,255,255,0.5); }
    .deploy-static .deploy-visual { min-height: 620px; }
    @media (max-width: 900px) { .deploy-static .deploy-visual { min-height: 440px; } }
    .problem-scroll-sticky { background: var(--canvas); }
    .roi-box { align-items: stretch; }
    .roi-in { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 24px 24px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
    .roi-col-title { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
    .roi-field .slider-row { margin-bottom: 10px; align-items: center; gap: 16px; min-height: 56px; }
    .roi-field .slider-row label { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
    .roi-field .slider-count { flex: 0 0 auto; white-space: nowrap; font-size: 22px; line-height: 1.2; text-align: right; }
    .roi-field .roi-slider { margin: 4px 0 0; }
    .roi-hint { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-60); }
    .roi-out { display: flex; flex-direction: column; gap: 20px; }
    .roi-out .roi-stats { background: var(--accent-tint); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 22px; }
    [hidden] { display: none !important; }
    /* larger, clearer section labels */
    .story-chapter { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; margin-bottom: 18px !important; }
    .agents-label { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--ink-80); margin: 36px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
    .sub-title { font-size: 15px; font-weight: 700; }
    .founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 0 auto; }
    .founder { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; text-align: center; box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    .founder-photo { width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #eef3ff, #dbe6fb); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--ink-40); font-size: 64px; }
    .founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .founder h3 { font-size: 22px; letter-spacing: -0.03em; margin-bottom: 4px; }
    .founder-role { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
    .founder-bio { font-size: 15px; line-height: 1.65; color: var(--ink-60); min-height: 120px; text-align: left; }
    @media (max-width: 760px) { .founders { grid-template-columns: 1fr; } }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .about-copy p { font-size: 17px; line-height: 1.7; color: var(--ink-60); margin-bottom: 16px; }
    .about-copy p strong { color: var(--ink); }
    .contact-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
    .contact-card h3 { font-size: 20px; letter-spacing: -0.03em; margin-bottom: 14px; }
    .contact-card p { color: var(--ink-60); line-height: 1.7; margin-bottom: 8px; }
    .contact-card a { color: var(--accent); text-decoration: none; font-weight: 500; }
    @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

    /* CTA band: light, consistent with the rest of the site */
    .cta-band { background: #fff; border: 1px solid var(--hairline); color: var(--ink); box-shadow: 0 1px 2px rgba(11,18,32,0.04), 0 30px 60px -36px rgba(11,18,32,0.22); }
    .cta-band .h2 { color: var(--ink); }
    .cta-band .section-sub { color: var(--ink-60); }
    .cta-band .btn-primary { background: var(--accent); color: #fff; }
    .cta-band .cta-note { color: var(--ink-60); }
    .cta-band .cta-note a { color: var(--accent); border-bottom: 1px solid rgba(37,99,235,0.3); }
    .cta-band::before { display: none; }
    .cta-band { margin: 72px auto 88px; }
    @media (max-width: 700px) { .cta-band { margin: 48px auto 64px; } }
    .hero-sub { font-size: 15px; color: var(--ink-60); margin: -10px 0 26px; }
    .hero-outcomes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; }
    .hero-outcomes li { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid rgba(37,99,235,0.18); border-radius: 999px; padding: 7px 14px; }
    /* compact hero */
    .hero-compact { min-height: 0; }
    .hero-compact .hero-inner { padding: calc(var(--nav-h) + 20px) 24px 28px; gap: 24px; }
    .hero-compact .hero-h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; margin-bottom: 14px; }
    .hero-compact .hero-lead { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
    .hero-compact .hero-outcomes { gap: 6px; margin-bottom: 18px; }
    .hero-compact .hero-outcomes li { font-size: 12px; padding: 5px 11px; }
    .hero-compact .hero-visual { max-height: 400px; min-height: 300px; }
    .sol-list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
    .sol-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px 24px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(11,18,32,0.04); transition: transform .2s, box-shadow .2s, border-color .2s; }
    .sol-row:hover { transform: translateX(4px); border-color: #c9d3e6; box-shadow: 0 16px 36px rgba(37,99,235,0.1); }
    .sol-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint); color: var(--accent); font-size: 24px; display: flex; align-items: center; justify-content: center; }
    .sol-txt { display: flex; flex-direction: column; gap: 3px; }
    .sol-txt strong { font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
    .sol-txt span { font-size: 14.5px; line-height: 1.5; color: var(--ink-60); }
    .sol-go { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
    @media (max-width: 640px) { .sol-row { grid-template-columns: auto 1fr; } .sol-go { display: none; } }
    .hero-compact { background: #fff; }
    .hero-compact .hero-bg { background: none; }
    .hero-compact .hero-visual { background: radial-gradient(ellipse 70% 60% at 50% 50%, #1a1d24, #0d0e11); box-shadow: 0 30px 60px -30px rgba(11,18,32,0.35), 0 0 0 1px rgba(15,23,42,0.08); }
    .hero-compact .hero-h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); line-height: 1.06; margin-bottom: 20px; }
    .hero-compact .hero-lead { font-size: 19px; line-height: 1.55; margin-bottom: 28px; }
    .hero-compact .hero-inner { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 44px; }
    .hero-compact .hero-h1 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); }
    .sol-feature { background: var(--accent-tint); border-color: rgba(37,99,235,0.25); }
    .sol-feature .sol-ic { background: var(--accent); color: #fff; }
    .sol-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); margin: 14px 0 0; text-align: left; }
    /* hero: box and text share one row height, both centered */
    .hero-compact .hero-inner { align-items: stretch; }
    .hero-compact .hero-copy { display: flex; flex-direction: column; justify-content: center; }
    .hero-compact .hero-visual { aspect-ratio: auto; height: auto; min-height: 380px; max-height: none; align-self: stretch; }
    @media (max-width: 900px) { .hero-compact .hero-visual { height: 44vh; min-height: 300px; } }
    .stat-strip { background: #fff; border-bottom: 1px solid var(--hairline); }
    .stat-strip-in { max-width: 1000px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
    .ss-item { display: flex; align-items: center; gap: 14px; max-width: 440px; }
    .ss-item b { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
    .ss-item span { font-size: 14px; line-height: 1.35; color: var(--ink-80); display: flex; flex-direction: column; }
    .ss-item em { font-size: 11px; font-style: italic; color: var(--ink-40); margin-top: 2px; }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { color: var(--ink-60); text-decoration: none; }
    .footer-legal a:hover { color: var(--ink); }
    @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    .keep-case { text-transform: none; letter-spacing: 0.06em; }
    .wf-card.wf-featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; background: linear-gradient(135deg, #14172a, #1e3a8a); border: 0; border-top: 0; box-shadow: 0 30px 60px -30px rgba(37,99,235,0.5); }
    .wf-featured .wf-ic { margin: 0; flex-shrink: 0; width: 64px; height: 64px; font-size: 32px; background: rgba(255,255,255,0.12); box-shadow: none; }
    .wf-featured h3 { color: #fff; font-size: 26px; }
    .wf-featured .wf-tag { color: #93c5fd; }
    .wf-featured p { color: rgba(255,255,255,0.82); max-width: 680px; margin-bottom: 14px; }
    .wf-featured .wf-list li { background: rgba(255,255,255,0.12); color: #fff; }
    .wf-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #14172a; background: #93c5fd; border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; }
    @media (max-width: 640px) { .wf-card.wf-featured { flex-direction: column; align-items: flex-start; } }
    .agents-grid-sys { grid-template-columns: repeat(2, 1fr); }
    .agents-grid-sys .wf-card.wf-featured { grid-column: 1 / -1; justify-content: center; text-align: left; padding: 36px 40px; }
    @media (max-width: 760px) { .agents-grid-sys { grid-template-columns: 1fr; } }
    .agents-intro { font-size: 17px; line-height: 1.6; color: var(--ink-60); margin: 0 0 24px; max-width: none; text-align: left; }
    .wave-wrap { margin: 8px 0 28px; }
    .wave { max-width: 760px; margin: 0 auto; }
    .voice-caps { max-width: 760px; margin: 0 auto; gap: 32px; }
    .voice-cap { text-align: center; font-size: 16px; padding-top: 16px; border-top: 2px solid var(--accent); }
    .wave { max-width: 880px; }
    .voice-caps { max-width: 880px; gap: 40px; }
    .voice-cap { font-size: 18px; padding-top: 18px; }

    /* ── Document pages (Privacy, Terms, API) ── */
    .doc-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
    .doc-meta span { font-size: 13px; color: var(--ink-60); background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 14px; }
    .doc-page { padding-top: 56px; }
    .doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
    .doc-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 8px; }
    .doc-toc-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 10px; }
    .doc-toc-group { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); margin: 18px 0 6px; }
    .doc-toc-sec { display: flex; flex-direction: column; gap: 2px; }
    .doc-toc-link { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-60); text-decoration: none; padding: 7px 12px; border-left: 2px solid var(--hairline); transition: color .2s, border-color .2s, background .2s; }
    .doc-toc-link:hover { color: var(--ink); }
    .doc-toc-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
    .doc-body { min-width: 0; max-width: 820px; }
    .doc-section { padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--hairline); }
    .doc-section:last-child { border-bottom: 0; margin-bottom: 0; }
    .doc-section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
    .doc-section h3 { font-size: 18px; font-weight: 650; color: var(--ink); margin: 26px 0 10px; }
    .doc-section p, .doc-section li { font-size: 16px; line-height: 1.7; color: var(--ink-60); }
    .doc-section p { margin: 0 0 14px; }
    .doc-section ul { margin: 0 0 16px; padding-left: 22px; }
    .doc-section li { margin-bottom: 6px; }
    .doc-section strong { color: var(--ink); font-weight: 600; }
    .doc-section a { color: var(--accent); text-decoration: none; }
    .doc-section a:hover { text-decoration: underline; }
    .doc-callout { background: var(--accent-tint); border: 1px solid var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 18px 22px; margin: 0 0 22px; }
    .doc-callout p { margin: 0; color: var(--ink); }
    .doc-callout--amber { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; }
    .doc-callout--teal { background: #ecfdf5; border-color: #a7f3d0; border-left-color: #10b981; }
    .doc-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 20px; }
    .doc-info-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px 22px; }
    .doc-info-card-title { font-weight: 650; color: var(--ink); margin-bottom: 8px; font-size: 16px; }
    .doc-info-card p, .doc-info-card li { font-size: 15px; }
    .doc-contact-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 8px 24px; margin-top: 8px; }
    .doc-contact-item { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
    .doc-contact-item:last-child { border-bottom: 0; }
    .doc-contact-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); padding-top: 3px; }
    .doc-contact-value, .doc-contact-value p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; }
    .doc-def-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
    .doc-def-item { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
    .doc-def-item:last-child { border-bottom: 0; }
    .doc-def-term { font-weight: 650; color: var(--ink); font-size: 15px; }
    .doc-def-desc { font-size: 15px; line-height: 1.6; color: var(--ink-60); }
    .doc-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); margin: 0 0 22px; background: var(--surface); }
    .doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
    .doc-table th { text-align: left; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); background: var(--canvas); padding: 12px 16px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
    .doc-table td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); color: var(--ink-60); vertical-align: top; line-height: 1.55; }
    .doc-table tr:last-child td { border-bottom: 0; }
    .doc-table code, .doc-section p code, .doc-section li code { font-family: var(--font-mono); font-size: 13px; background: var(--accent-tint); color: var(--accent); padding: 2px 6px; border-radius: 6px; }
    .badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--canvas); color: var(--ink-60); border: 1px solid var(--hairline); white-space: nowrap; }
    .badge--get, .badge--rec { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
    .badge--post, .badge--req { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-soft); }
    .badge--opt { background: var(--canvas); color: var(--ink-60); }
    .badge--401, .badge--403, .badge--422, .badge--429 { background: #fffbeb; color: #b45309; border-color: #fde68a; }
    .badge--5xx { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
    .doc-pre { background: #0f172a; border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 22px; }
    .doc-pre-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .doc-pre-lang { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
    .doc-pre-copy { font-family: var(--font-mono); font-size: 12px; color: #cbd5e1; background: rgba(255,255,255,0.08); border: 0; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
    .doc-pre-copy:hover { background: rgba(255,255,255,0.16); }
    .doc-pre code { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #e2e8f0; padding: 18px 20px; overflow-x: auto; white-space: pre; background: none; }
    .tok-key { color: #93c5fd; } .tok-str { color: #86efac; } .tok-num { color: #fcd34d; } .tok-cmt { color: #64748b; } .tok-method { color: #f9a8d4; } .tok-url { color: #e2e8f0; } .tok-hdr { color: #c4b5fd; }
    .doc-checklist { list-style: none; padding: 0; }
    .doc-checklist li { position: relative; padding-left: 30px; }
    .doc-checklist li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--accent); background: var(--accent-tint); }
    @media (max-width: 900px) {
      .doc-layout { grid-template-columns: 1fr; gap: 24px; }
      .doc-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; }
      .doc-toc-label, .doc-toc-group { display: none; }
      .doc-toc-sec { display: contents; }
      .doc-toc-link { border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
      .doc-toc-link.active { border-color: var(--accent); }
      .doc-info-grid, .doc-def-item, .doc-contact-item { grid-template-columns: 1fr; gap: 6px; }
    }

    .hero-principle { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); margin: 0 auto 28px; }
    .agents-grid-4 { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 1000px) { .agents-grid-4 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .agents-grid-4 { grid-template-columns: 1fr; } }
    .commitment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0 8px; }
    .commitment-card { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px 22px; }
    .commitment-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; }
    .commitment-icon svg [stroke="#18181B"] { stroke: var(--accent); }
    .commitment-icon svg [fill="#18181B"] { fill: var(--accent); }
    .commitment-text-title { font-weight: 650; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
    .commitment-text-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-60); }
    .guarantee-list { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
    .guarantee-list li { position: relative; padding-left: 28px; }
    .guarantee-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-tint); border: 2px solid var(--accent); }
    @media (max-width: 760px) { .commitment-grid { grid-template-columns: 1fr; } }

    /* Compact document spacing */
    .doc-page { padding-top: 40px; padding-bottom: 56px; }
    .doc-layout { gap: 44px; }
    .doc-section { padding-bottom: 24px; margin-bottom: 24px; }
    .doc-section h2 { font-size: 1.5rem; margin-bottom: 12px; }
    .doc-section h3 { font-size: 17px; margin: 18px 0 8px; }
    .doc-section p, .doc-section li { font-size: 15.5px; line-height: 1.65; font-family: var(--font-text); }
    .doc-section p { margin-bottom: 10px; }
    .doc-section ul { margin-bottom: 12px; padding-left: 20px; }
    .doc-section li { margin-bottom: 4px; }
    .doc-callout { padding: 14px 18px; margin-bottom: 16px; }
    .doc-toc-link { padding: 5px 12px; font-size: 13.5px; }
    .doc-contact-card { padding: 4px 20px; }
    .doc-contact-item { padding: 10px 0; }

    .agents-grid-6 { grid-template-columns: repeat(6, 1fr); }
    .agents-grid-6 > .wf-card { grid-column: span 2; }
    .agents-grid-6 > .wf-card.wf-half { grid-column: span 3; }
    .agents-grid-6 > .wf-card.wf-featured { grid-column: 1 / -1; }
    @media (max-width: 860px) { .agents-grid-6 { grid-template-columns: 1fr; } .agents-grid-6 > .wf-card, .agents-grid-6 > .wf-card.wf-half { grid-column: 1 / -1; } }
    .pillars-4 { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
    @media (max-width: 1000px) { .pillars-4 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .pillars-4 { grid-template-columns: 1fr; } }

    /* Mobile navigation fixes */
    .nav-right { flex-shrink: 0; }
    .nav-toggle { flex-shrink: 0; }
    .nav-mobile { max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .nav-mobile .nav-m-cta { margin-top: 14px; text-align: center; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 13px 0; font-weight: 600; }
    @media (max-width: 992px) {
      .global-nav-inner { padding: 0 16px; gap: 12px; }
      .logo { min-width: 0; flex-shrink: 1; }
      .logo-full { height: 26px; max-width: 100%; width: auto; }
    }
    @media (max-width: 640px) {
      .nav-right .btn-primary { display: none; }
    }

    /* ROI: highlight reclaimed time as the headline result */
    .roi-stat.roi-hero { flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 26px; border: 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #3b82f6); box-shadow: 0 18px 36px -18px rgba(37,99,235,0.55); }
    .roi-hero .roi-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
    .roi-hero .roi-val { font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1; color: #fff; }
    .roi-hero .roi-sub { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.4; }
    .roi-stats .roi-stat.roi-hero:last-child { padding-bottom: 24px; }

    /* ROI: highlight the full-time roles line (like hours) and capacity gained */
    .roi-chart-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 10px; }
    .roi-chart-value { display: block; padding: 20px 24px; margin-bottom: 14px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #3b82f6); box-shadow: 0 18px 36px -18px rgba(37,99,235,0.55); font-size: 20px; font-weight: 700; color: #fff; }
    .roi-chart-value span { font-family: var(--font-mono); font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1; color: #fff; margin-right: 8px; }
    .roi-compare-row:last-child .roi-compare-lbl { color: var(--accent); font-weight: 700; }
    .roi-compare-row:last-child .roi-compare-bar { height: 28px; background: rgba(37,99,235,0.14); }
    .roi-compare-row:last-child .roi-compare-fill { box-shadow: 0 0 16px rgba(37,99,235,0.5); }
    .roi-compare-row:last-child .roi-compare-val { font-size: 22px; color: var(--accent); }
    .roi-chart-value .roi-chart-title { color: rgba(255,255,255,0.85); margin-bottom: 8px; }
    .roi-chart-value small { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); }

    /* ROI: slightly more compact results card */
    .roi-chart-wrap { padding: 18px 20px 14px; }
    .roi-chart-value { padding: 16px 20px; margin-bottom: 11px; font-size: 18px; }
    .roi-chart-value span { font-size: clamp(2.1rem, 3.7vw, 3rem); }
    .roi-chart-value .roi-chart-title { font-size: 11px; margin-bottom: 6px; }
    .roi-chart-value small { font-size: 13px; margin-top: 4px; }
    .roi-equiv-copy { font-size: 13px; line-height: 1.45; margin-bottom: 16px; }
    .roi-compare { gap: 11px; }
    .roi-compare-bar { height: 19px; }
    .roi-compare-row:last-child .roi-compare-bar { height: 24px; }
    .roi-compare-row:last-child .roi-compare-val { font-size: 19px; }
    .roi-assumptions { margin-top: 14px; font-size: 10.5px; }

    /* About page: condensed layout */
    .about-hero { text-align: left; padding: calc(var(--nav-h) + 44px) 0 44px; }
    .about-hero .about-grid { grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: start; }
    .about-hero .crumbs { margin-bottom: 14px; }
    .about-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 14px; }
    .about-hero .lead { margin: 0 0 16px; max-width: none; font-size: 18px; }
    .about-hero .about-copy p { font-size: 15.5px; line-height: 1.6; margin-bottom: 10px; }
    .about-hero .contact-card { margin-top: 36px; }
    .sec-tight { padding: 52px 0; }
    .sec-tight .section-head { margin-bottom: 28px; }
    .sec-tight .section-head .h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
    .founders.founders-h { grid-template-columns: repeat(2, 1fr); max-width: 1100px; gap: 20px; }
    .founders-h .founder { display: grid; grid-template-columns: 120px 1fr; column-gap: 22px; align-items: start; text-align: left; padding: 22px; }
    .founders-h .founder > * { grid-column: 2; }
    .founders-h .founder-photo { grid-column: 1; grid-row: 1 / span 4; width: 120px; height: 120px; margin: 0; }
    .founders-h .founder h3 { font-size: 20px; margin-bottom: 2px; }
    .founders-h .founder-role { margin-bottom: 8px; }
    .founders-h .founder-bio { font-size: 14px; line-height: 1.55; min-height: 0; }
    .founders-h .founder-email { align-self: start; margin-top: 10px; font-size: 13px; }
    .pillars.pillars-slim { max-width: 1100px; margin: 0 auto 16px; gap: 12px; }
    .pillars-slim .pillar { padding: 16px 18px; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: start; }
    .pillars-slim .pillar .cell-icon { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; font-size: 18px; }
    .pillars-slim .pillar h3 { font-size: 15px; margin: 0 0 4px; }
    .pillars-slim .pillar p { font-size: 13px; line-height: 1.45; grid-column: 2; }
    @media (max-width: 1000px) { .founders.founders-h { grid-template-columns: 1fr; } }
    @media (max-width: 860px) { .about-hero .about-grid { grid-template-columns: 1fr; gap: 24px; } .about-hero .contact-card { margin-top: 0; } }
    @media (max-width: 520px) { .founders-h .founder { grid-template-columns: 1fr; } .founders-h .founder > *, .founders-h .founder-photo { grid-column: 1; grid-row: auto; } }

    /* About hero: clean, compact, centered */
    .about-hero { text-align: center; padding: calc(var(--nav-h) + 48px) 24px 44px; }
    .about-hero .page-hero-inner { max-width: 760px; }
    .about-hero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 14px; }
    .about-hero .lead { margin: 0 auto; font-size: 18px; max-width: 640px; }
    .about-body { grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
    .about-body .about-copy p { font-size: 16px; line-height: 1.65; margin-bottom: 12px; }
    .about-body .contact-card { margin-top: 0; }
    @media (max-width: 860px) { .about-body { grid-template-columns: 1fr; gap: 24px; } }

    /* About: more compact Get in touch card */
    .about-body .contact-card { padding: 18px 22px; }
    .about-body .contact-card h3 { font-size: 18px; margin-bottom: 8px; }
    .about-body .contact-card p { font-size: 14.5px; line-height: 1.5; margin-bottom: 4px; }
    .about-body .contact-card p:last-child { margin-top: 12px !important; margin-bottom: 0; }
    .about-body .about-copy .about-cta { margin: 18px 0 0; }

    /* About: Get in touch card matches the height of the text column */
    .about-body { align-items: stretch; }
    .about-body .contact-card { display: flex; flex-direction: column; justify-content: center; padding: 28px 30px; }
    .about-body .contact-card h3 { font-size: 20px; margin-bottom: 12px; }
    .about-body .contact-card p { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
    .about-body .contact-card p:last-child { margin-top: 0 !important; margin-bottom: 0; }

    /* About: card matches text height only; button sits below in column 1 */
    .about-body { grid-template-rows: auto auto; row-gap: 0; }
    .about-body .about-copy { grid-column: 1; grid-row: 1; }
    .about-body .contact-card { grid-column: 2; grid-row: 1; padding: 22px 26px; }
    .about-body .about-cta { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
    @media (max-width: 860px) { .about-body .about-copy, .about-body .contact-card, .about-body .about-cta { grid-column: 1; grid-row: auto; } }

    /* ROI blue boxes: solid fallback so they always render on mobile browsers */
    .roi-stat.roi-hero, .roi-chart-value { background-color: #2563eb; min-height: 1px; }
    .roi-stat.roi-hero { -webkit-box-orient: vertical; }
    .roi-stat.roi-hero .roi-lbl, .roi-stat.roi-hero .roi-val, .roi-stat.roi-hero .roi-sub { position: relative; z-index: 1; }