:root {
      --bg: #0a0a0f;
      --bg-soft: #11111a;
      --panel: #14141f;
      --panel-2: #181826;
      --line: #23233a;
      --line-soft: #1b1b2c;
      --text: #e6e6f0;
      --text-soft: #a4a4b8;
      --text-mute: #6f6f86;
      --accent: #8b7cff;
      --accent-2: #c084fc;
      --accent-3: #38bdf8;
      --good: #4ade80;
      --warn: #fbbf24;
      --bad: #f87171;
      --radius: 14px;
      --radius-sm: 10px;
      --shadow: 0 24px 60px -20px rgba(0,0,0,.6);
    }

    * { box-sizing: border-box; min-width: 0; }
    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      max-width: 100vw;
      width: 100%;
      scroll-behavior: smooth;
      position: relative;
    }
    section { max-width: 100vw; }
    section[id], main > section { scroll-margin-top: 80px; }
    body {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      position: relative;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    code, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    code {
      background: rgba(139,124,255,.10);
      border: 1px solid rgba(139,124,255,.18);
      padding: 1px 6px;
      border-radius: 6px;
      font-size: .88em;
      color: #d6d0ff;
    }

    /* ---------- background fx ---------- */
    .grid-bg {
      position: fixed; inset: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
      pointer-events: none;
      z-index: 0;
    }
    .glow {
      position: fixed;
      border-radius: 50%;
      filter: blur(120px);
      opacity: .35;
      pointer-events: none;
      z-index: 0;
    }
    .glow-1 { width: 520px; height: 520px; background: #6d5cff; top: -180px; left: -120px; }
    .glow-2 { width: 480px; height: 480px; background: #c084fc; top: -120px; right: -160px; opacity: .25; }
    .glow-3 { width: 600px; height: 600px; background: #38bdf8; top: 1100px; left: 50%; transform: translateX(-50%); opacity: .12; }

    main, header, footer { position: relative; z-index: 1; }

    /* ---------- nav ---------- */
    .nav {
      position: sticky; top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: rgba(10,10,15,.55);
      border-bottom: 1px solid var(--line-soft);
    }
    .nav-inner {
      max-width: 1180px; margin: 0 auto; padding: 14px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .brand {
      display: inline-flex; align-items: center; gap: 10px;
      font-weight: 600; letter-spacing: -.01em;
    }
    .brand-mark {
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      font-size: 18px;
      text-shadow: 0 0 18px rgba(139,124,255,.55);
    }
    .brand-name { font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: -.02em; }
    .nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--text-soft); }
    .nav-links a { transition: color .15s ease; }
    .nav-links a:hover { color: var(--text); }
    .nav-cta {
      color: var(--text) !important;
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(139,124,255,.08), rgba(139,124,255,.02));
    }
    .nav-cta:hover { border-color: rgba(139,124,255,.45); }

    /* ---------- container ---------- */
    main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    /* ---------- hero ---------- */
    .hero {
      padding: 80px 0 60px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 56px;
      align-items: center;
    }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12.5px; font-weight: 500;
      color: var(--text-soft);
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(139,124,255,.07), rgba(139,124,255,.02));
    }
    .pill-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 12px var(--good);
      animation: pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .55; transform: scale(.85); }
    }
    .hero-title {
      font-size: clamp(40px, 5.4vw, 64px);
      line-height: 1.05;
      letter-spacing: -.035em;
      font-weight: 700;
      margin: 22px 0 18px;
    }
    .grad {
      background: linear-gradient(90deg, #c084fc 0%, #8b7cff 50%, #38bdf8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-sub {
      font-size: 18px;
      color: var(--text-soft);
      max-width: 560px;
      margin: 0 0 28px;
    }
    .hl { color: var(--text); font-weight: 500; }

    .waitlist {
      display: flex; gap: 8px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px;
      max-width: 460px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .waitlist:focus-within {
      border-color: rgba(139,124,255,.55);
      box-shadow: 0 0 0 4px rgba(139,124,255,.12);
    }
    .waitlist input {
      flex: 1; min-width: 0;
      background: transparent;
      border: 0; outline: 0;
      color: var(--text);
      font: inherit;
      padding: 8px 14px;
    }
    .waitlist input::placeholder { color: var(--text-mute); }
    .waitlist button {
      display: inline-flex; align-items: center; gap: 8px;
      border: 0;
      padding: 10px 18px;
      border-radius: 999px;
      font: inherit; font-weight: 600;
      color: #0b0b14;
      background: linear-gradient(135deg, #c0b6ff, #8b7cff 55%, #38bdf8);
      cursor: pointer;
      transition: transform .12s ease, filter .15s ease;
    }
    .waitlist button:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .waitlist button:active { transform: translateY(0); }
    .waitlist-note {
      font-size: 13px;
      color: var(--text-mute);
      margin: 10px 4px 0;
    }

    .hero-meta {
      display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
      margin-top: 28px;
      font-size: 13.5px;
      color: var(--text-soft);
    }
    .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
    .dot-g { background: var(--good); box-shadow: 0 0 8px var(--good); }
    .sep { color: var(--text-mute); }

    /* ---------- terminal mockup ---------- */
    .terminal {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
      transition: transform .35s ease;
    }
    .terminal:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(0deg); }
    .terminal-top {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
    }
    .tdot { width: 11px; height: 11px; border-radius: 50%; }
    .tdot-r { background: #ff5f57; }
    .tdot-y { background: #febc2e; }
    .tdot-g { background: #28c840; }
    .terminal-title {
      margin-left: 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      color: var(--text-mute);
    }
    .terminal-body { padding: 6px 0; font-size: 13.5px; }
    .row {
      display: grid;
      grid-template-columns: 1.6fr 1fr .6fr .6fr;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--line-soft);
    }
    .row:last-child { border-bottom: 0; }
    .row-head {
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-mute);
      padding-top: 10px; padding-bottom: 10px;
    }
    .row-total {
      font-weight: 600;
      background: rgba(139,124,255,.05);
      color: var(--text);
    }
    .t-name { color: var(--text); }
    .badge {
      display: inline-flex; align-items: center;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 500;
      border: 1px solid transparent;
      width: fit-content;
    }
    .b-claude   { background: rgba(217,119,87,.12);  color: #f0a583; border-color: rgba(217,119,87,.25); }
    .b-cursor   { background: rgba(139,124,255,.12); color: #c0b6ff; border-color: rgba(139,124,255,.25); }
    .b-copilot  { background: rgba(56,189,248,.12);  color: #7cd4fd; border-color: rgba(56,189,248,.25); }
    .b-antigrav { background: rgba(74,222,128,.12);  color: #86efac; border-color: rgba(74,222,128,.25); }
    .b-pplx     { background: rgba(34,211,238,.12);  color: #67e8f9; border-color: rgba(34,211,238,.25); }
    .b-cgpt     { background: rgba(16,185,129,.12);  color: #6ee7b7; border-color: rgba(16,185,129,.25); }
    .b-gem      { background: rgba(96,165,250,.12);  color: #93c5fd; border-color: rgba(96,165,250,.25); }
    .b-git      { background: rgba(74,222,128,.12);  color: #86efac; border-color: rgba(74,222,128,.25); }

    /* ---------- sections ---------- */
    .section-title {
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.15;
      letter-spacing: -.025em;
      font-weight: 700;
      margin: 0 0 14px;
      max-width: 760px;
    }
    .section-sub {
      color: var(--text-soft);
      font-size: 17px;
      max-width: 680px;
      margin: 0 0 44px;
    }

    .features { padding: 96px 0 32px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .card {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px 24px;
      transition: border-color .2s ease, transform .2s ease;
      position: relative;
      overflow: hidden;
    }
    .card::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(600px 200px at -10% -20%, rgba(139,124,255,.10), transparent 60%);
      pointer-events: none;
      opacity: 0;
      transition: opacity .25s ease;
    }
    .card:hover { border-color: rgba(139,124,255,.35); transform: translateY(-2px); }
    .card:hover::after { opacity: 1; }
    .card-icon {
      width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 10px;
      background: rgba(139,124,255,.1);
      border: 1px solid rgba(139,124,255,.25);
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      margin-bottom: 14px;
    }
    .card h3 {
      font-size: 17px;
      margin: 0 0 8px;
      letter-spacing: -.01em;
    }
    .card p {
      color: var(--text-soft);
      font-size: 14.5px;
      margin: 0;
    }

    /* ---------- how it works ---------- */
    .how { padding: 96px 0 64px; }
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .step {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
    }
    .step-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--accent);
      letter-spacing: .12em;
      margin-bottom: 10px;
    }
    .step h3 {
      font-size: 17px;
      margin: 0 0 14px;
      letter-spacing: -.01em;
    }
    .code {
      background: #08080d;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      color: #e0e0ee;
      margin: 0;
      white-space: pre;
      overflow-x: auto;
      line-height: 1.6;
    }
    .code .prompt { color: var(--accent); user-select: none; margin-right: 8px; }
    .code .muted { color: var(--text-mute); }

    /* ---------- privacy ---------- */
    .privacy { padding: 64px 0 32px; }
    .privacy-inner {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 48px;
      position: relative;
      overflow: hidden;
    }
    .privacy-inner::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(circle at 90% 0%, rgba(139,124,255,.15), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(56,189,248,.10), transparent 50%);
      pointer-events: none;
    }
    .privacy-inner > * { position: relative; }
    .limits {
      list-style: none; padding: 0; margin: 24px 0 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .limits li {
      display: flex; align-items: flex-start; gap: 12px;
      color: var(--text-soft);
      font-size: 15px;
      padding: 12px 14px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
    }
    .lim-x, .lim-check {
      flex-shrink: 0;
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 13px;
    }
    .lim-x { background: rgba(248,113,113,.12); color: var(--bad); border: 1px solid rgba(248,113,113,.25); }
    .lim-check { background: rgba(74,222,128,.12); color: var(--good); border: 1px solid rgba(74,222,128,.25); }

    /* ---------- cta ---------- */
    .cta { padding: 96px 0; text-align: center; }
    .cta h2 {
      font-size: clamp(28px, 3.6vw, 40px);
      letter-spacing: -.025em;
      margin: 0 0 12px;
    }
    .cta p { color: var(--text-soft); max-width: 540px; margin: 0 auto 28px; font-size: 17px; }
    .waitlist-lg { margin: 0 auto; max-width: 480px; }

    /* ---------- preview gallery ---------- */
    .previews {
      display: flex; flex-direction: column;
      gap: 28px;
      margin-top: 36px;
    }
    .preview {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .preview-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
    }
    .preview-title { display: inline-flex; align-items: center; gap: 12px; }
    .preview-title h4 { font-size: 15px; margin: 0; letter-spacing: -.01em; }
    .preview-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-mute);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .preview-pill {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid;
    }
    .pp-dev  { background: rgba(56,189,248,.10);  color: #7cd4fd; border-color: rgba(56,189,248,.30); }
    .pp-lead { background: rgba(139,124,255,.10); color: #c0b6ff; border-color: rgba(139,124,255,.30); }
    .pp-mgr  { background: rgba(251,191,36,.10);  color: #fcd34d; border-color: rgba(251,191,36,.30); }
    .pp-own  { background: rgba(52,211,153,.10);  color: #6ee7b7; border-color: rgba(52,211,153,.30); }
    .preview-img-wrap {
      background: #0c0c14;
      padding: 14px;
    }
    .preview-img-wrap img {
      width: 100%;
      display: block;
      border-radius: 10px;
      border: 1px solid var(--line-soft);
    }
    .preview-img-wrap .ph {
      width: 100%; aspect-ratio: 16 / 10;
      border-radius: 10px;
      background:
        repeating-linear-gradient(45deg, rgba(139,124,255,.04) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, #14141f, #11111a);
      border: 1px dashed rgba(139,124,255,.25);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
    }

    /* ---------- hero style switch ---------- */
    body[data-hero="scrolly"] .hero-cards   { display: none !important; }
    body[data-hero="cards"]   .hero-scrolly { display: none !important; }

    .hero-switch {
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 80;
      background: rgba(20,20,31,.78);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px;
      display: inline-flex;
      gap: 2px;
      box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
    }
    .hsw-btn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      background: transparent;
      border: 0;
      color: var(--text-soft);
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      letter-spacing: .04em;
      transition: background .15s, color .15s, box-shadow .15s;
    }
    .hsw-btn:hover { color: var(--text); }
    .hsw-btn.active {
      background: linear-gradient(180deg, rgba(139,124,255,.22), rgba(139,124,255,.06));
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(139,124,255,.4);
    }

    /* ---------- flip-card hero ---------- */
    .hero-cards {
      padding: 80px 24px 64px;
      max-width: 1180px;
      margin: 0 auto;
    }
    .hc-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
    .hc-head .pill { margin-bottom: 18px; }
    .hc-head .hero-h1 {
      font-size: clamp(34px, 4.6vw, 52px);
      line-height: 1.05;
      letter-spacing: -.03em;
      font-weight: 700;
      margin: 0 0 14px;
    }
    .hc-head .hero-sub {
      font-size: 16px;
      color: var(--text-soft);
      max-width: 640px;
      margin: 0 auto;
    }
    .hc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin: 0 auto;
    }
    .hc-card {
      position: relative;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      perspective: 900px;
      height: 168px;
      font: inherit;
      text-align: left;
    }
    .hc-card .hc-front,
    .hc-card .hc-back {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px 16px 14px;
      border-radius: var(--radius);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: transform .45s cubic-bezier(.22, 1, .36, 1);
      transform-style: preserve-3d;
    }
    .hc-card .hc-front {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      transform: rotateY(0deg);
    }
    .hc-card .hc-back {
      background: linear-gradient(180deg, rgba(139,124,255,.06) 0%, rgba(139,124,255,.02) 100%);
      border: 1px solid rgba(139,124,255,.35);
      transform: rotateY(180deg);
    }
    .hc-card.flipped .hc-front { transform: rotateY(-180deg); }
    .hc-card.flipped .hc-back  { transform: rotateY(0deg); }

    .hc-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      align-self: flex-start;
      padding: 2px 8px;
      border: 1px solid rgba(139,124,255,.35);
      border-radius: 999px;
      background: rgba(139,124,255,.08);
    }
    .hc-q {
      font-size: 15px;
      color: var(--text);
      line-height: 1.35;
      font-weight: 500;
    }
    .hc-tap {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      color: var(--text-mute);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .hc-a-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.01em;
      line-height: 1.1;
    }
    .hc-a-stat {
      font-size: 13px;
      color: var(--text);
    }
    .hc-a-flag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-soft);
      align-self: flex-start;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
    }
    .hc-a-flag.good { color: #86efac; border-color: rgba(74,222,128,.30); background: rgba(74,222,128,.08); }
    .hc-a-flag.warn { color: #fcd34d; border-color: rgba(251,191,36,.30); background: rgba(251,191,36,.08); }
    .hc-a-flag.bad  { color: #fca5a5; border-color: rgba(248,113,113,.30); background: rgba(248,113,113,.08); }

    .hc-foot {
      max-width: 600px;
      margin: 36px auto 0;
      display: flex; flex-direction: column; gap: 12px; align-items: center;
    }
    .hc-foot .waitlist { max-width: 460px; width: 100%; }

    /* ---------- scrollytelling hero ---------- */
    .hero-scrolly {
      position: relative;
      height: 360vh;
    }
    .hero-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .hero-cap {
      position: absolute;
      top: clamp(64px, 9vh, 100px);
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      max-width: 760px;
      width: calc(100% - 32px);
      z-index: 5;
      pointer-events: none;
    }
    .hero-cap .pill { margin-bottom: 14px; pointer-events: auto; }
    .hero-h1 {
      font-size: clamp(36px, 5vw, 58px);
      line-height: 1.05;
      letter-spacing: -.035em;
      font-weight: 700;
      margin: 0 0 14px;
      transition: opacity .35s ease, transform .35s ease;
    }
    .hero-cap .hero-sub {
      font-size: clamp(15px, 1.4vw, 17px);
      color: var(--text-soft);
      max-width: 600px;
      margin: 0 auto;
      transition: opacity .35s ease, transform .35s ease;
    }
    .hero-cap.fade-out .hero-h1,
    .hero-cap.fade-out .hero-sub {
      opacity: 0;
      transform: translateY(-6px);
    }

    .hero-scene {
      position: relative;
      width: min(820px, 92vw);
      height: clamp(360px, 56vh, 460px);
      margin-top: clamp(96px, 14vh, 140px);
    }
    .hero-scene > div {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .5s ease, transform .5s ease, filter .5s ease;
      pointer-events: none;
    }

    /* ---- tools scene ---- */
    .scene-tools {
      pointer-events: none;
    }
    .tool {
      position: absolute;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      color: var(--text);
      box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
      transition: opacity .5s ease, transform .6s ease, background .4s ease, border-color .4s ease;
    }
    .tool-icon {
      width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      border: 1px solid;
      flex-shrink: 0;
    }
    .tool-icon svg { display: block; }
    .tool-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tool-name { font-weight: 600; color: var(--text); }
    .tool-cost {
      font-size: 11px;
      color: var(--text-mute);
      letter-spacing: .04em;
      opacity: 0;
      transition: opacity .4s ease, color .4s ease;
    }
    /* scattered tile positions */
    .t-1 { top:  8%; left:   2%; transform: rotate(-4deg); }
    .t-2 { top: 14%; right:  5%; transform: rotate(3deg); }
    .t-3 { top: 40%; left:  10%; transform: rotate(-2deg); }
    .t-4 { top: 38%; right: 10%; transform: rotate(2deg); }
    .t-5 { bottom: 18%; left:  6%; transform: rotate(2deg); }
    .t-6 { bottom: 8%;  right: 14%; transform: rotate(-3deg); }
    .t-7 { bottom: 0%;  left: 38%; transform: rotate(1deg); }

    [data-state="1"] .tool .tool-cost { opacity: 1; color: #fca5a5; }
    [data-state="2"] .tool {
      opacity: .35;
      transform: scale(.86) translate(0, 0);
      filter: blur(.4px);
    }
    [data-state="2"] .t-1 { transform: scale(.6) translate(70%, 65%); }
    [data-state="2"] .t-2 { transform: scale(.6) translate(-70%, 60%); }
    [data-state="2"] .t-3 { transform: scale(.6) translate(50%, 25%); }
    [data-state="2"] .t-4 { transform: scale(.6) translate(-50%, 30%); }
    [data-state="2"] .t-5 { transform: scale(.6) translate(75%, -30%); }
    [data-state="2"] .t-6 { transform: scale(.6) translate(-60%, -45%); }
    [data-state="2"] .t-7 { transform: scale(.6) translate(0, -55%); }
    [data-state="3"] .scene-tools { opacity: 0; transform: scale(.7); }

    /* ---- questions scene ---- */
    .scene-questions { opacity: 0; }
    [data-state="1"] .scene-questions { opacity: 1; }
    [data-state="2"] .scene-questions,
    [data-state="3"] .scene-questions { opacity: 0; }
    .q-total {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 22px 36px;
      border: 1px dashed rgba(248,113,113,.45);
      border-radius: 14px;
      background: rgba(248,113,113,.04);
    }
    .q-marks {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(46px, 8vw, 78px);
      color: #fca5a5;
      letter-spacing: .12em;
      animation: qPulse 1.4s ease-in-out infinite;
      line-height: 1;
    }
    .q-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-mute);
    }
    @keyframes qPulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: .55; }
    }

    /* ---- converge scene ---- */
    .scene-converge { opacity: 0; transform: scale(.85); }
    [data-state="2"] .scene-converge { opacity: 1; transform: scale(1); }
    [data-state="3"] .scene-converge { opacity: 0; transform: scale(1.05); }
    .converge-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      stroke-dasharray: 6 4;
      animation: dashFlow 14s linear infinite;
    }
    @keyframes dashFlow { to { stroke-dashoffset: -240; } }
    .tp-mark {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 26px 36px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid rgba(139,124,255,.45);
      border-radius: 14px;
      box-shadow: 0 24px 60px -20px rgba(139,124,255,.4);
    }
    .tp-glyph {
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      font-size: 28px;
      text-shadow: 0 0 22px rgba(139,124,255,.55);
    }
    .tp-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
    }
    .tp-tag {
      font-size: 12px;
      color: var(--text-mute);
      letter-spacing: .04em;
    }

    /* ---- dashboard scene ---- */
    .scene-dash {
      opacity: 0;
      transform: translateY(28px) scale(.97);
      flex-direction: column !important;
      gap: 14px;
      pointer-events: none !important;
    }
    [data-state="3"] .scene-dash {
      opacity: 1;
      transform: none;
      pointer-events: auto !important;
    }
    .dash-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 680px;
    }
    .dash-kpi {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
    }
    .dash-kpi::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, #8b7cff, transparent);
    }
    .dash-kpi .v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.015em;
      line-height: 1.1;
    }
    .dash-kpi .l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-top: 6px;
    }
    .dash-banner {
      width: 100%;
      max-width: 680px;
      font-size: 13.5px;
      color: var(--text);
      padding: 12px 14px;
      border: 1px solid rgba(248,113,113,.30);
      background: rgba(248,113,113,.06);
      border-radius: var(--radius-sm);
    }
    .dash-banner b { color: #fca5a5; }
    .scene-dash .waitlist {
      max-width: 460px;
      width: 100%;
      margin: 0;
    }
    .hero-platforms {
      font-size: 12.5px;
      color: var(--text-soft);
      margin: 0;
    }

    /* ---- progress dots ---- */
    .hero-dots {
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 6;
    }
    .hp-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      border: 1px solid var(--text-mute);
      background: transparent;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease, border-color .2s ease;
      padding: 0;
    }
    .hp-dot:hover { background: rgba(139,124,255,.4); }
    .hp-dot.active {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.25);
      box-shadow: 0 0 12px rgba(139,124,255,.6);
    }

    /* ---- skip link ---- */
    .hero-skip {
      position: absolute;
      bottom: 16px;
      right: 22px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-mute);
      padding: 4px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      z-index: 6;
      transition: color .15s, border-color .15s;
    }
    .hero-skip:hover { color: var(--text); border-color: rgba(139,124,255,.45); }

    /* ---------- slack-mock hero ---------- */
    .slack {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
      transition: transform .35s ease;
    }
    .slack:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(0deg); }
    .slack-head {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
      position: relative;
    }
    .slack-hash {
      color: var(--text-mute);
      font-weight: 700;
      font-size: 15px;
      line-height: 1;
    }
    .slack-channel {
      font-size: 13.5px;
      color: var(--text);
      font-weight: 600;
    }
    .slack-meta {
      font-size: 11.5px;
      color: var(--text-mute);
      margin-left: 6px;
    }
    .slack-reset {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: transparent; border: 1px solid var(--line);
      color: var(--text-mute);
      font-size: 14px; cursor: pointer;
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 6px;
      transition: color .15s, background .15s, border-color .15s;
    }
    .slack-reset:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: rgba(139,124,255,.4); }
    .slack-body {
      padding: 18px 18px 6px;
      min-height: 280px;
      display: flex; flex-direction: column;
      gap: 14px;
    }
    .slack-msg {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 12px;
      align-items: start;
      opacity: 0;
      transform: translateY(8px);
      animation: msgIn .4s ease forwards;
    }
    @keyframes msgIn {
      to { opacity: 1; transform: none; }
    }
    .slack-avatar {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: linear-gradient(135deg, #8b7cff, #c084fc);
      color: #0b0b14;
      font-weight: 700;
      font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .slack-msg-head {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }
    .slack-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--text);
    }
    .slack-role {
      font-size: 10.5px;
      letter-spacing: .04em;
      color: #c0b6ff;
      background: rgba(139,124,255,.12);
      border: 1px solid rgba(139,124,255,.3);
      padding: 1px 7px;
      border-radius: 4px;
    }
    .slack-time {
      font-size: 11.5px;
      color: var(--text-mute);
    }
    .slack-body-text {
      font-size: 14px;
      color: var(--text);
      line-height: 1.55;
      white-space: pre-wrap;
    }
    .slack-body-text .meta {
      display: block;
      font-size: 11.5px;
      color: var(--text-mute);
      margin-top: 4px;
      font-style: italic;
    }
    .slack-typing {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 12px;
      align-items: center;
      opacity: 0;
      transition: opacity .25s ease;
    }
    .slack-typing.on { opacity: 1; }
    .slack-typing-bubble {
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line-soft);
      padding: 8px 12px;
      border-radius: 999px;
      width: fit-content;
    }
    .slack-typing-bubble i {
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--text-soft);
      animation: typeDot 1.1s infinite ease-in-out;
    }
    .slack-typing-bubble i:nth-child(2) { animation-delay: .18s; }
    .slack-typing-bubble i:nth-child(3) { animation-delay: .36s; }
    @keyframes typeDot {
      0%, 80%, 100% { transform: scale(.6); opacity: .4; }
      40% { transform: scale(1); opacity: 1; }
    }
    .slack-cta {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 18px 16px;
      border-top: 1px solid var(--line-soft);
      background: rgba(139,124,255,.04);
      font-size: 13px;
      color: var(--text-soft);
      opacity: 0;
      transition: opacity .4s ease;
    }
    .slack-cta.on { opacity: 1; }
    .slack-arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(139,124,255,.2);
      color: #c0b6ff;
      font-size: 13px;
      animation: arrowBounce 1.4s infinite ease-in-out;
    }
    @keyframes arrowBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(3px); }
    }

    /* ---------- interactive CLI in hero ---------- */
    .cli-terminal .terminal-top { position: relative; }
    .cli-reset {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: transparent; border: 1px solid var(--line);
      color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px; cursor: pointer;
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 6px;
      transition: color .15s, background .15s, border-color .15s;
    }
    .cli-reset:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: rgba(139,124,255,.4); }
    .cli {
      display: flex; flex-direction: column;
      min-height: 360px;
    }
    .cli-buffer {
      flex: 1;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      padding: 16px 18px 8px;
      color: #d6d6e0;
      overflow-y: auto;
      line-height: 1.62;
      max-height: 360px;
      scrollbar-width: thin;
    }
    .cli-buffer::-webkit-scrollbar { width: 6px; }
    .cli-buffer::-webkit-scrollbar-thumb { background: rgba(139,124,255,.2); border-radius: 4px; }
    .cli-line { display: block; white-space: pre-wrap; }
    .cli-line.in   { color: var(--accent); }
    .cli-line.muted{ color: var(--text-mute); }
    .cli-line.ok   { color: #86efac; }
    .cli-line.warn { color: #fcd34d; }
    .cli-line.bad  { color: #fca5a5; }
    .cli-line.dim  { color: #8a8aa0; }
    .cli-prompt-row {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      padding: 2px 18px 8px;
      color: #d6d6e0;
      display: flex; gap: 8px; align-items: center;
    }
    .cli-prompt { color: var(--accent); }
    .cli-caret {
      display: inline-block;
      width: 7px; height: 14px;
      background: var(--accent);
      animation: caretblink .9s steps(2) infinite;
    }
    @keyframes caretblink { 50% { opacity: 0; } }
    .cli-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
    }
    .cli-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      background: rgba(139,124,255,.10);
      border: 1px solid rgba(139,124,255,.25);
      color: #c0b6ff;
      padding: 6px 11px;
      border-radius: 6px;
      cursor: pointer;
      font: inherit; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
      transition: background .15s ease, border-color .15s ease, transform .08s ease, opacity .15s ease;
    }
    .cli-chip:hover { background: rgba(139,124,255,.18); border-color: rgba(139,124,255,.4); }
    .cli-chip:active { transform: translateY(1px); }
    .cli-chip:disabled { opacity: .4; cursor: not-allowed; }

    /* ---------- cost calculator ---------- */
    .calc { padding: 64px 0 32px; }
    .calc-head { max-width: 760px; margin-bottom: 24px; }
    .calc-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
      gap: 16px;
    }
    .calc-inputs, .calc-output {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
    }
    .calc-inputs { display: flex; flex-direction: column; gap: 18px; }
    .calc-field label {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px; color: var(--text-soft); margin-bottom: 10px;
    }
    .calc-val {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text);
      font-size: 13.5px;
    }
    .calc-field input[type=range] {
      width: 100%;
      accent-color: #8b7cff;
      background: transparent;
    }
    .calc-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .calc-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      color: var(--text-soft);
      padding: 5px 11px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    .calc-chip:hover { color: var(--text); border-color: rgba(139,124,255,.4); }
    .calc-chip.active {
      background: rgba(139,124,255,.18);
      border-color: rgba(139,124,255,.45);
      color: #d6d0ff;
    }

    .calc-output-head {
      display: flex; align-items: center; gap: 10px;
      font-size: 12.5px; color: var(--text-mute);
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line-soft);
    }
    .calc-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }
    .calc-output .md-kpi {
      padding: 12px 12px;
      border: 1px solid var(--line-soft);
      background: rgba(255,255,255,.02);
      border-radius: var(--radius-sm);
      position: relative;
      overflow: hidden;
    }
    .calc-output .md-kpi::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, #8b7cff, transparent);
    }
    .calc-output .md-kpi-v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 19px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.01em;
    }
    .calc-output .md-kpi-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-top: 4px;
    }
    .calc-banner {
      font-size: 13.5px;
      color: var(--text-soft);
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      background: rgba(139,124,255,.06);
    }
    .calc-banner b { color: var(--text); font-weight: 600; }
    .calc-note {
      font-size: 11.5px;
      color: var(--text-mute);
      margin-top: 12px;
      text-align: right;
    }

    /* ---------- pillars ---------- */
    .pillars { padding: 80px 0 32px; }
    .pillars-head { max-width: 760px; margin-bottom: 32px; }
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .pillar {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px 26px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s ease, transform .2s ease;
    }
    .pillar::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
    }
    .p-team::before  { background: linear-gradient(90deg, #8b7cff, transparent); }
    .p-local::before { background: linear-gradient(90deg, #34d399, transparent); }
    .p-task::before  { background: linear-gradient(90deg, #38bdf8, transparent); }
    .pillar:hover { transform: translateY(-2px); border-color: rgba(139,124,255,.35); }
    .pillar-icon {
      width: 42px; height: 42px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      border: 1px solid;
      margin-bottom: 12px;
    }
    .p-team  .pillar-icon { background: rgba(139,124,255,.10); color: #c0b6ff; border-color: rgba(139,124,255,.30); }
    .p-local .pillar-icon { background: rgba(52,211,153,.10);  color: #6ee7b7; border-color: rgba(52,211,153,.30); }
    .p-task  .pillar-icon { background: rgba(56,189,248,.10);  color: #7cd4fd; border-color: rgba(56,189,248,.30); }
    .pillar-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-bottom: 6px;
    }
    .pillar h3 {
      font-size: 19px;
      margin: 0 0 10px;
      letter-spacing: -.015em;
    }
    .pillar > p {
      color: var(--text-soft);
      font-size: 14.5px;
      margin: 0 0 16px;
    }
    .pillar-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex; flex-direction: column;
      gap: 8px;
      border-top: 1px solid var(--line-soft);
      padding-top: 14px;
    }
    .pillar-list li {
      font-size: 13px;
      color: var(--text-soft);
      padding-left: 18px;
      position: relative;
    }
    .pillar-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 7px;
      width: 5px; height: 5px;
      border-radius: 50%;
      opacity: .8;
    }
    .p-team  .pillar-list li::before { background: #8b7cff; }
    .p-local .pillar-list li::before { background: #34d399; }
    .p-task  .pillar-list li::before { background: #38bdf8; }

    /* ---------- mini dashboard (interactive) ---------- */
    .minidash {
      margin-top: 24px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .md-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; flex-wrap: wrap;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
    }
    .md-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
    .md-mark {
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      font-size: 14px;
    }
    .md-name { font-size: 12.5px; color: var(--text); }
    .md-demo {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      border: 1px solid var(--line);
      padding: 2px 8px;
      border-radius: 999px;
    }
    .md-toggle {
      display: inline-flex;
      background: var(--bg-soft);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
    }
    .md-pill {
      font: inherit;
      font-size: 12.5px;
      font-weight: 500;
      background: transparent;
      border: 0;
      color: var(--text-soft);
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .md-pill:hover { color: var(--text); }
    .md-pill.active {
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(139,124,255,.35);
    }
    .minidash[data-role="dev"]     .md-pill.active { background: rgba(56,189,248,.18);  box-shadow: inset 0 0 0 1px rgba(56,189,248,.35); }
    .minidash[data-role="lead"]    .md-pill.active { background: rgba(139,124,255,.18); }
    .minidash[data-role="manager"] .md-pill.active { background: rgba(251,191,36,.18); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); }
    .minidash[data-role="owner"]   .md-pill.active { background: rgba(52,211,153,.18);  box-shadow: inset 0 0 0 1px rgba(52,211,153,.35); }

    .md-body { padding: 18px 18px 4px; }
    .md-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    .md-kpi {
      background: rgba(255,255,255,.02);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      padding: 14px 14px;
      position: relative;
      overflow: hidden;
    }
    .md-kpi::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    }
    .minidash[data-role="dev"]     .md-kpi::before { background: #38bdf8; }
    .minidash[data-role="lead"]    .md-kpi::before { background: #8b7cff; }
    .minidash[data-role="manager"] .md-kpi::before { background: #fbbf24; }
    .minidash[data-role="owner"]   .md-kpi::before { background: #34d399; }
    .md-kpi-v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.015em;
      line-height: 1.1;
    }
    .md-kpi-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-top: 6px;
    }
    .md-kpi-d {
      font-size: 12px;
      color: var(--text-soft);
      margin-top: 4px;
    }

    .md-banner {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line-soft);
      background: rgba(255,255,255,.02);
      font-size: 13px;
      color: var(--text);
      margin-bottom: 16px;
      position: relative;
    }
    .md-banner::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }
    .minidash[data-role="dev"]     .md-banner::before { background: #38bdf8; }
    .minidash[data-role="lead"]    .md-banner::before { background: #8b7cff; }
    .minidash[data-role="manager"] .md-banner::before { background: #fbbf24; }
    .minidash[data-role="owner"]   .md-banner::before { background: #34d399; }
    .md-banner b { color: var(--text); }

    .md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .md-table thead th {
      text-align: left;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      padding: 10px 12px;
      border-bottom: 1px solid var(--line-soft);
      font-weight: 500;
    }
    .md-table thead th.num { text-align: right; }
    .md-table tbody td {
      padding: 11px 12px;
      border-bottom: 1px solid var(--line-soft);
      color: var(--text);
    }
    .md-table tbody tr:last-child td { border-bottom: 0; }
    .md-table tbody tr {
      transition: background .15s ease;
    }
    .md-table tbody tr:hover {
      background: rgba(139,124,255,.04);
      cursor: pointer;
    }
    .md-table td.num {
      text-align: right;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
    }
    .md-table td.warn { color: #fcd34d; }
    .md-table td.bad  { color: #fca5a5; }
    .md-table td.good { color: #86efac; }
    .md-pill-mini {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid;
    }
    .verdict-keep      { background: rgba(74,222,128,.10);  color: #86efac; border-color: rgba(74,222,128,.30); }
    .verdict-downgrade { background: rgba(251,191,36,.10);  color: #fcd34d; border-color: rgba(251,191,36,.30); }
    .verdict-drop      { background: rgba(248,113,113,.10); color: #fca5a5; border-color: rgba(248,113,113,.30); }

    .md-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: 14px;
      margin-top: 4px;
    }
    .md-panel-head {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      padding: 8px 12px 6px;
      border-bottom: 1px solid var(--line-soft);
    }
    .md-main { background: rgba(255,255,255,.015); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
    .md-main .md-table thead th { border-top: 0; }
    .md-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
    .md-card {
      background: rgba(255,255,255,.015);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .md-list { padding: 6px 0; }
    .md-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line-soft);
      font-size: 12.5px;
    }
    .md-row:last-child { border-bottom: 0; }
    .md-row-label { color: var(--text); min-width: 0; }
    .md-row-label .sub {
      display: block;
      font-size: 11.5px;
      color: var(--text-mute);
      margin-top: 2px;
      line-height: 1.45;
    }
    .md-row-v { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; }
    .md-row-v.warn { color: #fcd34d; }
    .md-row-v.bad  { color: #fca5a5; }
    .md-row-v.good { color: #86efac; }

    .md-footer {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 14px;
      margin-bottom: 4px;
    }

    /* simple horizontal bar */
    .md-bar {
      position: relative;
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,.05);
      overflow: hidden;
      margin-top: 6px;
    }
    .md-bar > span {
      position: absolute; left: 0; top: 0; bottom: 0;
      border-radius: 3px;
    }
    .minidash[data-role="dev"]     .md-bar > span { background: linear-gradient(90deg, #38bdf8, #7cd4fd); }
    .minidash[data-role="lead"]    .md-bar > span { background: linear-gradient(90deg, #8b7cff, #c0b6ff); }
    .minidash[data-role="manager"] .md-bar > span { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
    .minidash[data-role="owner"]   .md-bar > span { background: linear-gradient(90deg, #34d399, #6ee7b7); }

    .md-stat {
      padding: 10px 12px;
    }
    .md-stat-v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      color: var(--text);
      letter-spacing: -.01em;
    }
    .md-stat-l {
      font-size: 12px;
      color: var(--text-soft);
      margin-top: 2px;
    }
    .md-stat-d {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-mute);
      margin-top: 4px;
    }

    /* ---------- demo (single-task card) ---------- */
    .demo { padding: 96px 0 48px; }
    .demo-head { max-width: 760px; margin-bottom: 32px; }
    .demo-head .pill { margin-bottom: 16px; }
    .task-card {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .task-card-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(0,0,0,.18);
    }
    .task-meta { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .task-anchor {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(139,124,255,.10);
      border: 1px solid rgba(139,124,255,.25);
      color: #c0b6ff;
      flex-shrink: 0;
    }
    .task-title {
      font-size: 15px;
      color: var(--text);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .task-stats {
      display: flex; gap: 18px; flex-wrap: wrap;
      font-size: 13.5px;
      color: var(--text);
    }
    .stat-k {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-mute);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-right: 6px;
    }
    .task-prompt {
      padding: 18px 24px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(255,255,255,.015);
    }
    .task-prompt-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-mute);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-right: 10px;
    }
    .task-prompt p {
      display: inline;
      margin: 0;
      color: var(--text);
      font-size: 14.5px;
      font-style: italic;
    }
    .trace-list {
      display: flex; flex-direction: column;
    }
    .trace {
      display: grid;
      grid-template-columns: 60px 130px 70px 1fr 80px;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      font-size: 13.5px;
      border-bottom: 1px solid var(--line-soft);
      transition: background .15s ease;
    }
    .trace:hover { background: rgba(139,124,255,.04); }
    .trace:last-child { border-bottom: 0; }
    .trace-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--text-mute);
    }
    .trace-detail { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .trace-detail code {
      font-size: 12.5px;
      padding: 1px 6px;
    }
    .trace-cost { color: var(--text); text-align: right; font-size: 12.5px; }
    .t-kind {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid;
    }
    .kind-ask  { background: rgba(56,189,248,.10);  color: #7cd4fd; border-color: rgba(56,189,248,.30); }
    .kind-read { background: rgba(139,124,255,.10); color: #c0b6ff; border-color: rgba(139,124,255,.30); }
    .kind-edit { background: rgba(251,191,36,.10);  color: #fcd34d; border-color: rgba(251,191,36,.30); }
    .kind-bash { background: rgba(52,211,153,.10);  color: #6ee7b7; border-color: rgba(52,211,153,.30); }

    .task-foot {
      display: grid;
      grid-template-columns: repeat(3, auto) 1fr;
      gap: 24px;
      align-items: center;
      padding: 18px 24px;
      background: rgba(139,124,255,.04);
      border-top: 1px solid var(--line-soft);
      font-size: 13.5px;
    }
    .task-foot-stat {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--text);
    }
    .task-foot-stat .stat-v { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
    .task-foot-note {
      color: var(--text-soft);
      font-size: 12.5px;
      text-align: right;
    }
    .task-shipped { color: #86efac; }

    /* --- heat-strip timeline --- */
    .task-strip {
      padding: 16px 24px 14px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(255,255,255,.02);
    }
    .task-strip-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-bottom: 8px;
    }
    .strip-bar {
      display: flex;
      height: 14px;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line-soft);
      position: relative;
    }
    .strip-seg {
      position: relative;
      min-width: 12px;
      cursor: pointer;
      transition: filter .15s ease, transform .12s ease;
    }
    .strip-seg:hover,
    .strip-seg.is-active {
      filter: brightness(1.3) saturate(1.15);
      transform: translateY(-1px) scaleY(1.15);
    }
    .strip-seg::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--panel);
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid var(--line);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s ease;
      z-index: 5;
    }
    .strip-seg:hover::after,
    .strip-seg.is-active::after { opacity: 1; }

    .strip-seg[data-tool="gemini"]  { background: linear-gradient(180deg, #60a5fa 0%, #4f46e5 100%); }
    .strip-seg[data-tool="chatgpt"] { background: linear-gradient(180deg, #10b981 0%, #047857 100%); }
    .strip-seg[data-tool="cursor"]  { background: linear-gradient(180deg, #c0b6ff 0%, #6d5cff 100%); }
    .strip-seg[data-tool="bash"]    { background: linear-gradient(180deg, #f0a583 0%, #d97757 100%); }
    .strip-seg[data-tool="git"]     { background: linear-gradient(180deg, #86efac 0%, #4ade80 100%); }

    .strip-ticks {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      color: var(--text-mute);
    }

    /* --- phase headers --- */
    .phase { border-bottom: 1px solid var(--line-soft); }
    .phase:last-of-type { border-bottom: 0; }
    .phase-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      background: rgba(255,255,255,.02);
      transition: background .2s ease;
    }
    .phase-head.is-active { background: rgba(139,124,255,.08); }
    .phase-bar {
      width: 3px;
      height: 16px;
      border-radius: 2px;
    }
    .phase-research .phase-bar { background: linear-gradient(180deg, #60a5fa, #4f46e5); }
    .phase-build    .phase-bar { background: linear-gradient(180deg, #c0b6ff, #6d5cff); }
    .phase-ship     .phase-bar { background: linear-gradient(180deg, #86efac, #4ade80); }
    .phase-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text);
      font-weight: 600;
    }
    .phase-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-mute);
      margin-left: auto;
    }

    /* --- strip ↔ trace linking --- */
    .trace { transition: background .15s ease, opacity .15s ease; }
    .trace.is-dimmed { opacity: .3; }
    .trace.is-active {
      background: rgba(139,124,255,.08);
    }

    /* ---------- teams ---------- */
    .teams { padding: 96px 0 48px; }
    .teams-head { max-width: 760px; margin-bottom: 8px; }
    .teams-head .pill { margin-bottom: 16px; }

    /* ---------- tabs ---------- */
    .tabs-bar {
      display: inline-flex;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px;
      margin: 20px 0 36px;
      gap: 4px;
    }
    .tab-btn {
      font: inherit;
      font-size: 13.5px;
      font-weight: 500;
      background: transparent;
      border: 0;
      color: var(--text-soft);
      padding: 9px 20px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      background: linear-gradient(180deg, rgba(139,124,255,.18), rgba(139,124,255,.06));
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(139,124,255,.35);
    }
    .tab-panel { display: none; }
    .tab-panel.active {
      display: block;
      animation: fadeIn .28s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    /* ---------- personas grids ---------- */
    .personas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .personas-solo {
      grid-template-columns: minmax(0, 720px);
      justify-content: center;
    }
    .personas-team {
      grid-template-columns: repeat(3, 1fr);
    }
    .persona {
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px 24px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s ease, transform .2s ease;
    }
    .persona::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
    }
    .p-dev::before  { background: linear-gradient(90deg, #38bdf8, transparent); }
    .p-lead::before { background: linear-gradient(90deg, #8b7cff, transparent); }
    .p-mgr::before  { background: linear-gradient(90deg, #fbbf24, transparent); }
    .p-own::before  { background: linear-gradient(90deg, #34d399, transparent); }
    .persona:hover { transform: translateY(-2px); border-color: rgba(139,124,255,.35); }
    .persona-head {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 14px;
    }
    .persona-icon {
      width: 42px; height: 42px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      border: 1px solid;
      flex-shrink: 0;
    }
    .p-dev  .persona-icon { background: rgba(56,189,248,.10);  color: #7cd4fd; border-color: rgba(56,189,248,.30); }
    .p-lead .persona-icon { background: rgba(139,124,255,.10); color: #c0b6ff; border-color: rgba(139,124,255,.30); }
    .p-mgr  .persona-icon { background: rgba(251,191,36,.10);  color: #fcd34d; border-color: rgba(251,191,36,.30); }
    .p-own  .persona-icon { background: rgba(52,211,153,.10);  color: #6ee7b7; border-color: rgba(52,211,153,.30); }
    .persona-head h3 { font-size: 17px; margin: 0 0 2px; letter-spacing: -.01em; }
    .persona-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-mute);
      margin: 0;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .persona-sub {
      color: var(--text-soft);
      font-size: 14px;
      margin: 4px 0 18px;
    }
    .persona-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 12px;
    }
    .persona-list li {
      font-size: 14px;
      color: var(--text-soft);
      line-height: 1.5;
      padding-left: 18px;
      position: relative;
    }
    .persona-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .65;
    }
    .p-dev  .persona-list li::before { background: #38bdf8; }
    .p-lead .persona-list li::before { background: #8b7cff; }
    .p-mgr  .persona-list li::before { background: #fbbf24; }
    .p-own  .persona-list li::before { background: #34d399; }
    .persona-list b {
      color: var(--text);
      font-weight: 600;
    }

    /* ---------- drill-down strip ---------- */
    .drill {
      margin-top: 36px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px 28px 24px;
    }
    .drill-title {
      font-size: 16px;
      margin: 0 0 18px;
      letter-spacing: -.005em;
      color: var(--text);
    }
    .drill-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      align-items: stretch;
      gap: 10px;
    }
    .drill-step {
      background: rgba(255,255,255,.02);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
    }
    .drill-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--accent);
      letter-spacing: .14em;
    }
    .drill-step h4 {
      font-size: 14px;
      margin: 6px 0 6px;
      letter-spacing: -.005em;
    }
    .drill-step p {
      font-size: 12.5px;
      color: var(--text-soft);
      line-height: 1.5;
      margin: 0;
    }
    .drill-arrow {
      align-self: center;
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      opacity: .55;
    }

    .teams-cta {
      margin-top: 28px;
      background: linear-gradient(180deg, rgba(139,124,255,.06), rgba(139,124,255,.02));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px 26px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .teams-cta-text h3 { font-size: 15px; margin: 0 0 4px; letter-spacing: -.005em; }
    .teams-cta-text p { font-size: 13.5px; color: var(--text-soft); margin: 0; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #d6d0ff;
      background: rgba(139,124,255,.10);
      border: 1px solid rgba(139,124,255,.25);
      padding: 5px 11px;
      border-radius: 999px;
    }

    /* ---------- footer ---------- */
    .foot {
      border-top: 1px solid var(--line-soft);
      padding: 40px 0;
      margin-top: 32px;
    }
    .foot-inner {
      max-width: 1180px; margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      color: var(--text-mute);
      font-size: 13.5px;
    }
    .foot-brand { display: inline-flex; align-items: center; gap: 10px; }
    .foot-tag { color: var(--text-mute); }
    .foot-links { display: flex; gap: 20px; }
    .foot-links a:hover { color: var(--text); }
    .foot-meta { display: inline-flex; align-items: center; gap: 10px; }

    /* ---------- toast ---------- */
    .toast {
      position: fixed;
      bottom: 24px; right: 24px;
      background: var(--panel);
      border: 1px solid rgba(139,124,255,.4);
      box-shadow: var(--shadow);
      padding: 14px 18px;
      border-radius: 12px;
      font-size: 14px;
      color: var(--text);
      max-width: 340px;
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: transform .25s ease, opacity .25s ease;
      z-index: 100;
    }
    .toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

    /* ---------- responsive ---------- */
    /* mobile + reduced-motion: strip expensive paints + nuke unused hero variants */
    @media (max-width: 920px), (prefers-reduced-motion: reduce) {
      /* expensive GPU layers cause "content disappears on fast scroll" on iOS Safari */
      .glow { display: none !important; }
      .grid-bg { display: none !important; }
      .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10,10,15,.92); }
      .terminal { transform: none; }
      .slack { transform: none; }
      .hc-card, .hc-front, .hc-back { transform-style: flat; }

      /* the inactive hero variant is fully removed from layout on mobile */
      body[data-hero="cards"]   .hero-scrolly { display: none !important; }
      body[data-hero="scrolly"] .hero-cards   { display: none !important; }

      /* if scrolly is the active hero on mobile, collapse to static state-3 */
      .hero-scrolly { height: auto; }
      .hero-stage { position: static; height: auto; padding: 56px 16px 40px; }
      .hero-cap { position: static; transform: none; margin: 0 auto 24px; width: 100%; }
      .hero-scene { margin-top: 0; height: auto; }
      .hero-scene > div { position: static; opacity: 0; height: auto; }
      .scene-tools, .scene-questions, .scene-converge { display: none !important; }
      .scene-dash {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        flex-direction: column !important;
        gap: 12px;
      }
      .dash-kpis { grid-template-columns: 1fr 1fr; }
      .hero-dots, .hero-skip { display: none; }
    }

    @media (max-width: 920px) {
      .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 0 32px; }
      .terminal { transform: none; }
      .grid { grid-template-columns: 1fr 1fr; }
      .steps { grid-template-columns: 1fr; }
      .limits { grid-template-columns: 1fr; }
      .personas, .personas-team { grid-template-columns: 1fr; }
      .personas-solo { grid-template-columns: 1fr; }
      .pillar-grid { grid-template-columns: 1fr; }
      .pillars { padding: 56px 0 16px; }
      .calc-grid { grid-template-columns: 1fr; }
      .calc-kpis { grid-template-columns: repeat(2, 1fr); }
      .calc { padding: 48px 0 24px; }
      .cli { min-height: 280px; }
      .cli-buffer { max-height: 280px; }
      .slack { transform: none; }
      .slack-body { min-height: 220px; padding: 14px 14px 6px; }
      .hc-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-cards { padding: 56px 16px 40px; }
      .md-kpis { grid-template-columns: repeat(2, 1fr); }
      .md-table thead th { font-size: 9.5px; padding: 8px 10px; }
      .md-table tbody td { padding: 9px 10px; font-size: 12px; }
      .md-grid { grid-template-columns: 1fr; }
      .md-footer { grid-template-columns: 1fr 1fr; }
      .teams { padding: 64px 0 24px; }
      .teams-cta { flex-direction: column; align-items: flex-start; }
      .drill-row { grid-template-columns: 1fr; }
      .drill-arrow { transform: rotate(90deg); justify-self: center; }
      .drill { padding: 22px 18px; }
      .privacy-inner { padding: 32px 24px; }
      .nav-links a:not(.nav-cta) { display: none; }
    }
    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
      .md-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
      .md-kpi { padding: 12px; }
      .md-kpi-v { font-size: 18px; }
      .md-toggle { width: 100%; justify-content: space-between; }
      .md-pill { flex: 1; padding: 6px 8px; text-align: center; }
      .md-head { padding: 10px 12px; }
      .md-body { padding: 14px 12px 4px; }
      .md-table { display: block; overflow-x: auto; }
      .md-table thead th { white-space: nowrap; }
      .md-banner { font-size: 12px; }
      .md-footer { grid-template-columns: 1fr; }
      .md-grid { gap: 10px; }
      .md-row { font-size: 12px; padding: 7px 10px; }
      .calc-kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
      .calc-output .md-kpi-v { font-size: 16px; }
      .cli-chip { font-size: 11px; padding: 5px 9px; }
      .cli-buffer { font-size: 11.5px; padding: 12px 14px 6px; }
      .hc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .hc-card { height: 156px; perspective: none; }
      /* opacity-crossfade instead of 3D flip — much cheaper on iOS */
      .hc-front, .hc-back {
        transform: none !important;
        transition: opacity .25s ease;
      }
      .hc-back { opacity: 0; }
      .hc-card.flipped .hc-front { opacity: 0; }
      .hc-card.flipped .hc-back { opacity: 1; }
      .hc-q { font-size: 13.5px; }
      .hero-switch { padding: 3px; }
      .hsw-btn { padding: 5px 10px; font-size: 10.5px; }
      .features, .how { padding: 64px 0 16px; }
      .cta { padding: 64px 0; }
      .row { grid-template-columns: 1.4fr .8fr .6fr .6fr; padding: 10px 14px; font-size: 12.5px; gap: 6px; }
      .trace {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "tool   time"
          "detail detail"
          "kind   cost";
        row-gap: 4px;
        padding: 12px 14px;
        font-size: 12.5px;
      }
      .trace-time { grid-area: time; text-align: right; font-size: 11px; }
      .trace-tool { grid-area: tool; }
      .trace-action { grid-area: kind; }
      .trace-detail {
        grid-area: detail;
        font-size: 12px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
      }
      .trace-cost { grid-area: cost; text-align: right; font-size: 12px; }
      .task-stats { gap: 10px; font-size: 12px; }
      .task-card-head { padding: 16px 18px; }
      .task-prompt { padding: 14px 18px; }
      .task-prompt p { font-size: 13px; }
      .task-prompt-label { display: block; margin-bottom: 6px; }
      .task-title { white-space: normal; }
      .task-foot { grid-template-columns: 1fr; gap: 8px; padding: 14px 18px; }
      .task-foot-note { text-align: left; }
      .demo { padding: 64px 0 24px; }
      .task-strip { padding: 12px 14px 10px; }
      .phase-head { padding: 10px 14px; gap: 8px; }
      .phase-meta { font-size: 11px; }
      .strip-bar { height: 12px; border-radius: 6px; }
      .strip-ticks { font-size: 10px; }
      .terminal { transform: none; }
      .terminal-body { font-size: 12.5px; }
      .nav-inner { padding: 12px 16px; gap: 8px; }
      .brand-name { font-size: 14px; }
      main { padding: 0 16px; }
      .foot-inner { padding: 0 16px; }
      .code { font-size: 12px; padding: 12px 14px; }
      .badge { font-size: 10.5px; padding: 2px 7px; }
      .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    }

    /* ---------- promo banner (LAUNCH10) ---------- */
    .promo-banner {
      position: relative;
      z-index: 60;
      background:
        linear-gradient(90deg,
          rgba(139,124,255,.22) 0%,
          rgba(192,132,252,.18) 50%,
          rgba(56,189,248,.20) 100%),
        rgba(10,10,15,.85);
      border-bottom: 1px solid rgba(139,124,255,.28);
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 13.5px;
      color: var(--text);
    }
    .promo-banner[hidden] { display: none !important; }
    html.promo-dismissed .promo-banner { display: none !important; }
    .promo-banner-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 9px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: nowrap;
    }
    .promo-banner-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      line-height: 1.4;
      min-width: 0;
    }
    .promo-banner-tag {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(139,124,255,.22);
      border: 1px solid rgba(139,124,255,.4);
      color: #d6d0ff;
      white-space: nowrap;
    }
    .promo-banner-code {
      appearance: none;
      -webkit-appearance: none;
      background: rgba(10,10,15,.55);
      border: 1px solid rgba(139,124,255,.55);
      color: #d6d0ff;
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12.5px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .15s ease, border-color .15s ease;
    }
    .promo-banner-code:hover { background: rgba(139,124,255,.18); border-color: rgba(139,124,255,.75); }
    .promo-banner-code:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
    .promo-banner-code-status {
      display: none;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11.5px;
      color: var(--good);
      font-weight: 500;
    }
    .promo-banner-code.copied .promo-banner-code-status { display: inline; }
    .promo-banner-close {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 0;
      color: var(--text-soft);
      font-size: 20px;
      line-height: 1;
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 6px;
      flex-shrink: 0;
    }
    .promo-banner-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
    .promo-banner-close:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
    @media (max-width: 640px) {
      .promo-banner { font-size: 12.5px; }
      .promo-banner-inner { padding: 8px 12px; gap: 10px; }
      .promo-banner-tag { font-size: 10px; padding: 2px 7px; }
      .promo-banner-code { font-size: 11.5px; padding: 2px 8px; }
    }
    @media (max-width: 380px) {
      .promo-banner-inner { padding: 8px 10px; gap: 8px; }
      .promo-banner-tag { display: none; }
    }

    /* ============================================================
       TWO-PRODUCT UMBRELLA  ·  coaching (violet) + agents (sky)
       ============================================================ */
    .umbrella { padding: 64px 0 24px; }
    .umb-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .umb-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
    .umb-head .pill { margin-bottom: 20px; }
    .umb-h1 {
      font-size: clamp(30px, 5vw, 60px);
      line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
      margin: 0 0 18px; overflow-wrap: anywhere;
    }
    .umb-sub { font-size: clamp(16px, 1.7vw, 19px); color: var(--text-soft); margin: 0 auto; max-width: 600px; }

    .umb-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }

    .prod-card {
      position: relative; overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(120% 80% at 0% 0%, rgba(139,124,255,.06), transparent 60%),
        var(--panel);
      padding: 26px 26px 24px;
      display: flex; flex-direction: column;
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    .prod-card::before {
      content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      opacity: .9;
    }
    .prod-agent { background:
        radial-gradient(120% 80% at 0% 0%, rgba(56,189,248,.07), transparent 60%),
        var(--panel); }
    .prod-agent::before { background: linear-gradient(90deg, var(--accent-3), #22d3ee); }
    .prod-card:hover { transform: translateY(-3px); border-color: rgba(139,124,255,.5); box-shadow: var(--shadow); }
    .prod-agent:hover { border-color: rgba(56,189,248,.5); }

    .prod-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .prod-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em; color: var(--text-mute); }
    .prod-badge {
      font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
      padding: 4px 9px; border-radius: 999px;
      color: #d6d0ff; background: rgba(139,124,255,.12); border: 1px solid rgba(139,124,255,.3);
    }
    .prod-agent .prod-badge { color: #bfe9ff; background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.32); }

    .prod-name { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
    .prod-name b { font-weight: 700; }
    .prod-coach .prod-name b { color: var(--accent-2); }
    .prod-agent .prod-name b { color: var(--accent-3); }
    .prod-line { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; }

    /* --- in-card mini demos --- */
    .prod-demo {
      border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
      background: var(--bg-soft); padding: 14px; margin-bottom: 20px;
    }
    .coach-demo-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
    .ck { border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 8px; text-align: left; background: var(--panel); }
    .ck .v { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600; color: var(--text); }
    .ck .l { font-size: 10.5px; color: var(--text-mute); letter-spacing: .04em; margin-top: 2px; }
    .coach-demo-banner {
      margin-top: 10px; font-size: 11.5px; color: #fcd9a8;
      background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
      border-radius: 8px; padding: 7px 10px;
    }
    .coach-demo-banner b { color: var(--warn); }

    /* agent mini pipeline */
    .agent-demo-flow { display: flex; align-items: center; gap: 4px; }
    .adf-node {
      flex: 1 1 0; min-width: 0; text-align: center;
      font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .06em;
      color: var(--text-soft);
      border: 1px solid var(--line-soft); border-radius: 6px;
      padding: 7px 2px; background: var(--panel);
    }
    .adf-node.gate { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
    .adf-node .dn { color: var(--accent-3); font-size: 9px; display: block; margin-bottom: 2px; opacity: .8; }
    .adf-arrow { color: var(--text-mute); font-size: 9px; flex: 0 0 auto; }
    .agent-demo-cap {
      margin-top: 10px; display: flex; align-items: center; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: .06em;
    }
    .agent-demo-cap .ok { color: var(--good); }

    .prod-bullets { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
    .prod-bullets li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text-soft); line-height: 1.45; }
    .prod-bullets li::before {
      content: "›"; position: absolute; left: 4px; top: -1px; font-weight: 700; color: var(--accent);
    }
    .prod-agent .prod-bullets li::before { color: var(--accent-3); }

    .prod-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
    .btn-prim, .btn-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; font-weight: 600; letter-spacing: -.01em;
      padding: 11px 18px; border-radius: 999px;
      border: 1px solid transparent; cursor: pointer; transition: all .2s ease; white-space: nowrap;
    }
    .btn-prim { background: var(--accent); color: #0a0a0f; border-color: var(--accent); }
    .btn-prim:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }
    .agent-prim { background: var(--accent-3); border-color: var(--accent-3); }
    .agent-prim:hover { background: #22d3ee; border-color: #22d3ee; }
    .btn-ghost { background: rgba(139,124,255,.06); color: var(--text); border-color: var(--line); }
    .btn-ghost:hover { border-color: var(--accent); color: #fff; }
    .agent-ghost:hover { border-color: var(--accent-3); }
    .btn-lg { padding: 14px 24px; font-size: 15px; }

    /* product divider bands */
    .prod-band {
      max-width: 1180px; margin: 64px auto 0; padding: 16px 24px;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
      scroll-margin-top: 80px;
    }
    .band-kicker {
      font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em;
      color: #0a0a0f; background: var(--accent); padding: 4px 9px; border-radius: 6px; font-weight: 600;
    }
    .prod-band-agent .band-kicker { background: var(--accent-3); }
    .band-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
    .band-open { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
    .prod-band-agent .band-open { color: var(--accent-3); }
    .band-open:hover { text-decoration: underline; }

    /* ============================================================
       AGENTS PRODUCT DEEP-DIVE
       ============================================================ */
    .agents-sec { padding: 60px 0 24px; }
    .agents-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .agents-head { max-width: 780px; margin-bottom: 44px; }
    .agent-pill { margin-bottom: 18px; }
    .agent-pill .pill-dot { background: var(--accent-3); box-shadow: 0 0 12px var(--accent-3); }
    .grad-sky {
      background: linear-gradient(90deg, #38bdf8 0%, #22d3ee 60%, #67e8f9 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* the 6-stage pipeline */
    .pipe { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; position: relative; margin-bottom: 14px; }
    .pipe-node {
      position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
      background: var(--panel); padding: 16px 14px; overflow: hidden;
      transition: border-color .25s ease, transform .25s ease;
    }
    .pipe-node:hover { border-color: rgba(56,189,248,.5); transform: translateY(-2px); }
    .pipe-node .pn-n { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-3); letter-spacing: .12em; }
    .pipe-node .pn-name { display: block; margin-top: 8px; font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
    .pipe-node .pn-desc { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-mute); line-height: 1.4; }
    .pipe-node.is-gate { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.05); }
    .pipe-node.is-gate .pn-n { color: var(--warn); }
    .pipe-node::after {
      content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%;
      background: linear-gradient(90deg, transparent, rgba(56,189,248,.14), transparent);
      animation: pipeSweep 5.5s linear infinite;
    }
    .pipe-node:nth-child(1)::after { animation-delay: 0s; }
    .pipe-node:nth-child(2)::after { animation-delay: .9s; }
    .pipe-node:nth-child(3)::after { animation-delay: 1.8s; }
    .pipe-node:nth-child(4)::after { animation-delay: 2.7s; }
    .pipe-node:nth-child(5)::after { animation-delay: 3.6s; }
    .pipe-node:nth-child(6)::after { animation-delay: 4.5s; }
    @keyframes pipeSweep { 0% { left: -40%; } 60%,100% { left: 140%; } }

    .pipe-flow {
      display: flex; align-items: center; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em;
      color: var(--text-mute); padding: 4px 2px; margin-bottom: 34px;
    }
    .pipe-flow .ok { color: var(--good); }

    /* ships-clean gates */
    .gates { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 32px; }
    .gate { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 18px 16px; }
    .gate-chip {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em;
      padding: 4px 9px; border-radius: 999px; margin-bottom: 12px;
      color: var(--accent-3); border: 1px solid rgba(56,189,248,.35);
    }
    .gate-chip .gd { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); }
    .gate.warn .gate-chip { color: var(--warn); border-color: rgba(251,191,36,.4); }
    .gate.warn .gate-chip .gd { background: var(--warn); }
    .gate h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
    .gate p { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

    /* company brain strip */
    .brain-strip {
      position: relative; overflow: hidden;
      border: 1px solid var(--line); border-radius: var(--radius);
      background:
        radial-gradient(80% 140% at 100% 50%, rgba(56,189,248,.08), transparent 60%),
        var(--bg-soft);
      padding: 22px 24px; margin-bottom: 32px;
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    }
    .brain-strip .bs-mark { font-family: 'JetBrains Mono', monospace; font-size: 24px; color: var(--accent-3); text-shadow: 0 0 18px rgba(56,189,248,.5); }
    .brain-strip .bs-text { flex: 1 1 320px; }
    .brain-strip h4 { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
    .brain-strip p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
    .brain-strip .bs-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--text-mute); }

    .agents-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .agents-cta .ac-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); letter-spacing: .06em; margin-left: 4px; }

    @media (prefers-reduced-motion: reduce) {
      .pipe-node::after { animation: none; display: none; }
    }

    @media (max-width: 860px) {
      .umb-grid { grid-template-columns: minmax(0,1fr); }
      .pipe { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .pipe-flow { display: none; }
      .gates { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 540px) {
      .umbrella { padding: 40px 0 16px; }
      .prod-card { padding: 22px 18px; }
      .pipe { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .gates { grid-template-columns: minmax(0,1fr); }
      .prod-band { margin-top: 44px; }
      .band-open { margin-left: 0; }
      .agent-demo-flow { gap: 2px; }
      .adf-node { font-size: 7.5px; padding: 6px 1px; }
    }

    /* ============================================================
       FOUNDER STORY  ·  problem hook + two-phase company arc
       ============================================================ */
    .story { padding: 60px 0 24px; }
    .story-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .story-hook { max-width: 820px; margin: 0 auto 52px; text-align: center; }
    .story-hook .pill { margin-bottom: 20px; }
    .story-h1 {
      font-size: clamp(32px, 5.2vw, 62px);
      line-height: 1.03; letter-spacing: -.035em; font-weight: 700;
      margin: 0 0 20px; overflow-wrap: anywhere;
    }
    .story-lead { font-size: clamp(16px, 1.85vw, 20px); color: var(--text-soft); margin: 0 auto; max-width: 680px; }
    .story-lead .hl { color: var(--text); font-weight: 600; }
    .story-lead .hl-v { color: #c9bfff; font-weight: 600; }
    .story-lead .hl-s { color: #8fe1ff; font-weight: 600; }

    .phases { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 8px; }
    .phase {
      position: relative; overflow: hidden;
      border: 1px solid var(--line); border-radius: var(--radius);
      padding: 28px 26px; display: flex; flex-direction: column;
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    .phase-1 { background: radial-gradient(130% 90% at 0% 0%, rgba(139,124,255,.08), transparent 58%), var(--panel); }
    .phase-2 { background: radial-gradient(130% 90% at 100% 0%, rgba(56,189,248,.10), transparent 58%), var(--panel-2); }
    .phase::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; }
    .phase-1::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
    .phase-2::before { background: linear-gradient(90deg, var(--accent-3), #22d3ee); box-shadow: 0 0 22px rgba(56,189,248,.5); }
    .phase-1:hover { transform: translateY(-3px); border-color: rgba(139,124,255,.5); box-shadow: var(--shadow); }
    .phase-2:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.55); box-shadow: var(--shadow); }

    .phase-when {
      font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em;
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text-soft);
    }
    .phase-when .pw-dot { width: 7px; height: 7px; border-radius: 50%; }
    .phase-1 .pw-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
    .phase-2 .pw-dot { background: var(--accent-3); box-shadow: 0 0 10px var(--accent-3); animation: pulse 2.2s ease-in-out infinite; }
    .phase-h { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; line-height: 1.08; }
    .phase-1 .phase-h b { color: var(--accent-2); font-weight: 700; }
    .phase-2 .phase-h b { color: var(--accent-3); font-weight: 700; }
    .phase-desc { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
    .phase-tags { display: grid; gap: 8px; margin-bottom: 20px; }
    .phase-prob, .phase-prod {
      font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: var(--radius-sm);
      border: 1px solid var(--line-soft);
    }
    .phase-prob { color: var(--text-soft); background: var(--bg-soft); }
    .phase-prob b { color: var(--bad); font-weight: 600; letter-spacing: .04em; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
    .phase-prod { background: rgba(139,124,255,.06); border-color: rgba(139,124,255,.22); color: var(--text); }
    .phase-2 .phase-prod { background: rgba(56,189,248,.07); border-color: rgba(56,189,248,.25); }
    .phase-prod b { font-weight: 700; }
    .phase-1 .phase-prod b { color: var(--accent-2); }
    .phase-2 .phase-prod b { color: var(--accent-3); }
    .phase .prod-demo { margin-top: auto; margin-bottom: 18px; }

    .phase-arrow {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
      padding: 0 6px; color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-align: center;
    }
    .phase-arrow .pa-line { width: 1px; flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-3)); min-height: 40px; }
    .phase-arrow .pa-glyph { font-size: 20px; color: var(--accent-3); }

    /* ============================================================
       MEET YOUR AI TEAM  ·  animated narrated stage flow
       ============================================================ */
    .ateam { display: grid; grid-template-columns: minmax(0, 280px) minmax(0,1fr); gap: 18px; margin-bottom: 32px; }
    .ateam-rail { display: flex; flex-direction: column; gap: 6px; }
    .ateam-step {
      position: relative; overflow: hidden; cursor: pointer; text-align: left;
      display: flex; align-items: center; gap: 12px;
      border: 1px solid var(--line); border-radius: var(--radius-sm);
      background: var(--panel); padding: 13px 15px; color: var(--text-soft);
      transition: border-color .2s ease, background .2s ease, color .2s ease;
      font: inherit;
    }
    .ateam-step:hover { border-color: rgba(56,189,248,.4); color: var(--text); }
    .ateam-step .as-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); width: 20px; flex: 0 0 auto; }
    .ateam-step .as-role { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
    .ateam-step .as-sub { font-size: 11px; color: var(--text-mute); display: block; margin-top: 1px; font-weight: 400; }
    .ateam-step .as-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent-3); }
    .ateam-step.active {
      border-color: rgba(56,189,248,.6); color: var(--text);
      background: radial-gradient(120% 140% at 0% 50%, rgba(56,189,248,.12), transparent 70%), var(--panel-2);
    }
    .ateam-step.active .as-n { color: var(--accent-3); }
    .ateam-step.active .as-bar { animation: asFill 3.8s linear forwards; }
    .ateam:hover .ateam-step.active .as-bar { animation-play-state: paused; }
    @keyframes asFill { from { width: 0; } to { width: 100%; } }

    .ateam-stages { position: relative; border: 1px solid var(--line); border-radius: var(--radius);
      background: radial-gradient(90% 120% at 100% 0%, rgba(56,189,248,.06), transparent 60%), var(--bg-soft);
      min-height: 280px; overflow: hidden; }
    .ateam-stage {
      position: absolute; inset: 0; padding: 30px 32px;
      display: flex; gap: 22px; align-items: flex-start;
      opacity: 0; transform: translateY(10px); pointer-events: none;
      transition: opacity .45s ease, transform .45s ease;
    }
    .ateam-stage.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .ats-icon {
      flex: 0 0 auto; width: 76px; height: 76px; border-radius: 16px;
      display: grid; place-items: center;
      border: 1px solid rgba(56,189,248,.3); background: rgba(56,189,248,.07); color: var(--accent-3);
    }
    .ats-icon svg { width: 38px; height: 38px; }
    .ats-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--accent-3); }
    .ats-head { font-size: clamp(19px, 2.3vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 12px; }
    .ats-head .wow { background: linear-gradient(90deg, #38bdf8, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ats-blurb { font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 0; max-width: 56ch; }
    .ats-human .ats-icon { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); color: var(--good); }
    .ats-human .ats-tag { color: var(--good); }
    .ateam-foot {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
      font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--text-mute);
      border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
      background: var(--bg-soft); padding: 12px 18px; margin: -14px 0 32px;
    }
    .ateam-foot .ok { color: var(--good); }
    .ateam-autonote { display: inline-flex; align-items: center; gap: 7px; }
    .ateam-autonote .adot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); animation: pulse 2.2s ease-in-out infinite; }

    @media (prefers-reduced-motion: reduce) {
      .ateam-step.active .as-bar { animation: none; width: 100%; }
      .ateam-stage { transition: opacity .01s; }
      .phase-2 .pw-dot, .ateam-autonote .adot { animation: none; }
    }

    @media (max-width: 860px) {
      .phases { grid-template-columns: minmax(0,1fr); }
      .phase-arrow { flex-direction: row; padding: 4px 0; }
      .phase-arrow .pa-line { width: auto; height: 1px; min-height: 0; min-width: 40px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
      .phase-arrow .pa-glyph { transform: rotate(90deg); }
      .ateam { grid-template-columns: minmax(0,1fr); }
      .ateam-rail { flex-direction: row; flex-wrap: wrap; }
      .ateam-step { flex: 1 1 calc(33.3% - 6px); }
      .ateam-step .as-sub { display: none; }
      .ateam-stages { min-height: 300px; }
    }
    @media (max-width: 540px) {
      .story { padding: 40px 0 16px; }
      .phase { padding: 22px 18px; }
      .ateam-step { flex: 1 1 calc(50% - 6px); }
      .ateam-stage { flex-direction: column; gap: 14px; padding: 22px 18px; }
      .ats-icon { width: 56px; height: 56px; }
      .ats-icon svg { width: 28px; height: 28px; }
      .ateam-stages { min-height: 340px; }
    }

    /* ============================================================
       THE MATURITY SPINE  ·  two equal stops + chooser + you-are-here rail
       ============================================================ */
    .spine { max-width: 1180px; margin: 8px auto 0; }

    /* chooser */
    .spine-chooser { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 22px; }
    .sc-prompt { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--text-soft); }
    .sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .sc-chip {
      font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .02em;
      color: var(--text-soft); background: var(--panel); border: 1px solid var(--line);
      border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .18s ease; font-weight: 500;
    }
    .sc-chip:hover { border-color: rgba(56,189,248,.45); color: var(--text); }
    .sc-chip.is-on { background: rgba(56,189,248,.13); border-color: rgba(56,189,248,.55); color: #cdeeff; }
    .sc-chip:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }

    /* the two stops grid */
    .spine-grid { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 10px; }
    .stop { transition: opacity .28s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .stop .phase-when b { font-weight: 700; }
    .phase-1 .phase-when b { color: var(--accent-2); }
    .phase-2 .phase-when b { color: var(--accent-3); }

    .stop-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
    .stop-sub { font-weight: 400; color: var(--text-soft); font-size: 12.5px; }

    .stop-specs { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
    .stop-specs li { font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
    .stop-specs li b {
      display: inline-block; min-width: 62px; margin-right: 8px; vertical-align: 1px;
      font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    }
    .phase-1 .stop-specs li b { color: var(--accent-2); }
    .phase-2 .stop-specs li b { color: var(--accent-3); }
    .stop-specs li em { color: var(--text); font-style: italic; }

    /* illustrative tag on the coaching demo */
    .stop .prod-demo { position: relative; }
    .demo-tag {
      position: absolute; top: 8px; right: 10px; z-index: 2;
      font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-mute); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
      padding: 2px 6px; border-radius: 5px;
    }

    /* human / AI line */
    .stop-hai {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px;
      font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); letter-spacing: .01em;
    }
    .stop-hai .hai-sep { opacity: .45; }
    .phase-1 .stop-hai .hai-ai { color: var(--accent-2); }
    .phase-2 .stop-hai .hai-ai { color: var(--accent-3); }

    /* THE LEAP center column */
    .leap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; text-align: center; }
    .leap-line { width: 1px; flex: 1; min-height: 34px; background: linear-gradient(180deg, var(--accent), var(--accent-3)); }
    .leap-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--accent-3); white-space: nowrap; }
    .leap-bridge { font-size: 10.5px; line-height: 1.45; color: var(--text-soft); max-width: 130px; }

    /* you-are-here rail */
    .spine-rail { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; }
    .rail-cap { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--text-mute); white-space: nowrap; }
    .rail-cap-a { color: #b6a8ff; } .rail-cap-b { color: #8fd6ff; }
    .rail-track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c084fc, #8b7cff 45%, #38bdf8); }
    .rail-dot {
      position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%;
      transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.85);
      transition: left .4s cubic-bezier(.22,1,.36,1), background .4s ease, box-shadow .4s ease;
    }
    .spine[data-stage="coaching"] .rail-dot { left: 16%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
    .spine[data-stage="agents"]   .rail-dot { left: 84%; background: var(--accent-3); box-shadow: 0 0 14px var(--accent-3); }
    .spine[data-stage="both"]     .rail-dot { left: 50%; }

    /* spine foot */
    .spine-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .spine-both { font-size: 13px; color: var(--text-soft); }
    .spine-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-3); }
    .spine-email:hover { text-decoration: underline; }

    /* ---- stage emphasis (equal-dignity: 0.82 floor, never hidden) ---- */
    .spine[data-stage="coaching"] .stop[data-node="agents"],
    .spine[data-stage="agents"]   .stop[data-node="coaching"] { opacity: .82; }
    .spine[data-stage="coaching"] .stop[data-node="coaching"],
    .spine[data-stage="agents"]   .stop[data-node="agents"] { transform: translateY(-4px); }
    .spine[data-stage="coaching"] .stop[data-node="coaching"] { border-color: rgba(139,124,255,.6); box-shadow: var(--shadow); }
    .spine[data-stage="agents"]   .stop[data-node="agents"]   { border-color: rgba(56,189,248,.6); box-shadow: var(--shadow); }
    /* instant return to full strength on intent — never strands a faded card */
    .spine .stop:hover, .spine .stop:focus-within { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .rail-dot { transition: none; }
      .stop { transition: opacity .01s; }
    }

    @media (max-width: 860px) {
      .spine-grid { grid-template-columns: minmax(0,1fr); }
      .leap { flex-direction: row; padding: 6px 0; gap: 12px; }
      .leap-line { width: auto; height: 1px; min-height: 0; min-width: 30px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
      .leap-bridge { max-width: none; }
      .spine-rail { display: none; }
      .spine[data-stage="coaching"] .stop[data-node="coaching"],
      .spine[data-stage="agents"]   .stop[data-node="agents"] { transform: none; border-left: 3px solid; }
      .spine[data-stage="coaching"] .stop[data-node="coaching"] { border-left-color: var(--accent); }
      .spine[data-stage="agents"]   .stop[data-node="agents"]   { border-left-color: var(--accent-3); }
    }
    @media (max-width: 540px) {
      .spine-chooser { gap: 8px; }
      .sc-prompt { width: 100%; text-align: center; }
      .stop-specs li b { display: block; min-width: 0; margin: 0 0 1px; }
      .spine-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* ============================================================
       AGENTS PAGE — bold redesign (vault · brain · witness · gauntlet · receipt)
       ============================================================ */
    /* shared beat scaffolding */
    .abeat { max-width: 1180px; margin: 0 auto; padding: 56px 0 0; }
    .abeat-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
    .abeat-head .ats-tag { display: block; margin-bottom: 12px; }
    .abeat-h { font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
    .abeat-sub { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 600px; }
    .abeat-foot { text-align: center; color: var(--text-mute); font-size: 13px; margin: 18px auto 0; max-width: 560px; }
    .abeat-recap-head { max-width: 760px; margin: 64px auto 28px; text-align: center; }

    /* ---- HERO: THE SEALED VAULT ---- */
    .ah-vault { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; padding-top: 8px; }
    .ahv-copy .section-title { margin-bottom: 16px; }
    .ahv-cta { margin-top: 24px; }
    .vault {
      position: relative; border: 1px solid var(--line); border-radius: var(--radius);
      background: radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,.08), transparent 60%), var(--panel-2);
      padding: 26px 24px 20px; overflow: hidden;
    }
    .vault-stage { position: relative; display: grid; place-items: center; height: 188px; }
    .vault-door {
      position: relative; width: 168px; height: 168px; border-radius: 16px;
      border: 2px solid rgba(56,189,248,.45);
      background: repeating-linear-gradient(135deg, #11131c, #11131c 8px, #0e1018 8px, #0e1018 16px);
      box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 0 0 6px rgba(56,189,248,.06);
      display: grid; place-items: center; transition: transform .6s cubic-bezier(.6,0,.2,1), opacity .4s;
      transform-origin: left center;
    }
    .vault-main { position: absolute; top: 10px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-3); letter-spacing: .1em; }
    .vault-wheel { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(56,189,248,.5); position: relative; }
    .vault-wheel::before, .vault-wheel::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgba(56,189,248,.3); }
    .vault-wheel::after { inset: 20px; border-style: dashed; }
    .vault[data-state="ready"] .vault-wheel { animation: vaultHum 1.6s ease-in-out infinite; }
    @keyframes vaultHum { 0%,100% { box-shadow: 0 0 0 0 rgba(56,189,248,.0); } 50% { box-shadow: 0 0 18px 2px rgba(56,189,248,.45); } }
    .vault-stamp {
      position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
      font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .08em; color: var(--good);
      border: 2px solid var(--good); border-radius: 14px; transform: rotate(-7deg) scale(1.1); transition: opacity .3s;
      background: rgba(74,222,128,.06);
    }
    .vault-flood { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(74,222,128,.22), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
    .vault[data-state="merged"] .vault-door { transform: perspective(700px) rotateY(-72deg); opacity: .25; }
    .vault[data-state="merged"] .vault-stamp { opacity: 1; transform: rotate(-7deg) scale(1); }
    .vault[data-state="merged"] .vault-flood { opacity: 1; }

    .vault-seals { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 16px 0 14px; }
    .vseal {
      display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: .06em; color: var(--text-mute); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
      transition: color .3s, border-color .3s;
    }
    .vseal .vs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); transition: background .3s, box-shadow .3s; }
    .vseal.lit { color: var(--good); border-color: rgba(74,222,128,.4); }
    .vseal.lit .vs-dot { background: var(--good); box-shadow: 0 0 8px var(--good); }

    .vault-action { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; }
    .vault-cursor { position: relative; color: var(--text-soft); font-size: 14px; transform: translateX(6px); }
    .vault[data-state="ready"] .vault-cursor { animation: vaultNudge 2.4s ease-in-out infinite; }
    @keyframes vaultNudge { 0%,70%,100% { transform: translateX(6px); } 80% { transform: translateX(-10px); } 86% { transform: translateX(2px); } }
    .vc-tip {
      position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0;
      font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .04em; color: var(--warn);
      background: var(--panel); border: 1px solid rgba(251,191,36,.3); border-radius: 6px; padding: 3px 7px; transition: opacity .2s;
    }
    .vault[data-state="ready"] .vc-tip { animation: vaultTip 2.4s ease-in-out infinite; }
    @keyframes vaultTip { 0%,72%,100% { opacity: 0; } 80%,84% { opacity: 1; } }
    .vault-key {
      font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
      color: #0a0a0f; background: var(--accent-3); border: 1px solid var(--accent-3); border-radius: 999px; padding: 9px 18px;
      transition: all .2s ease; box-shadow: 0 0 0 0 rgba(56,189,248,.5);
    }
    .vault[data-state="ready"] .vault-key { box-shadow: 0 0 18px rgba(56,189,248,.5); }
    .vault-key:hover { background: #22d3ee; }
    .vault-foot { text-align: center; color: var(--text-mute); font-size: 12px; margin: 14px 0 0; }
    .vault > .demo-tag { top: 10px; right: 12px; }

    /* ---- THE COMPANY BRAIN ---- */
    .brain-stage { border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(80% 120% at 50% 0%, rgba(56,189,248,.05), transparent 60%), var(--bg-soft); padding: 16px; }
    .brain-map { width: 100%; height: auto; display: block; }
    .bm-edges line { stroke-dasharray: 240; stroke-dashoffset: 0; }
    .js-on .brain-stage[data-reveal]:not(.in) .bm-edges line { stroke-dashoffset: 240; }
    .brain-stage[data-reveal].in .bm-edges line { animation: bmDraw 1.1s ease forwards; }
    .brain-stage[data-reveal].in .bm-edges line:nth-child(2){animation-delay:.1s} .brain-stage[data-reveal].in .bm-edges line:nth-child(3){animation-delay:.2s} .brain-stage[data-reveal].in .bm-edges line:nth-child(4){animation-delay:.3s} .brain-stage[data-reveal].in .bm-edges line:nth-child(5){animation-delay:.4s} .brain-stage[data-reveal].in .bm-edges line:nth-child(6){animation-delay:.5s} .brain-stage[data-reveal].in .bm-edges line:nth-child(7){animation-delay:.55s} .brain-stage[data-reveal].in .bm-edges line:nth-child(8){animation-delay:.6s}
    @keyframes bmDraw { to { stroke-dashoffset: 0; } }
    .bm-node circle { fill: var(--panel); stroke: var(--accent-3); stroke-width: 1.4; }
    .bm-node text { fill: var(--text-soft); }
    .bm-node { opacity: 1; }
    .js-on .brain-stage[data-reveal]:not(.in) .bm-node { opacity: 0; }
    .brain-stage[data-reveal].in .bm-node { animation: bmPop .5s ease forwards; }
    .brain-stage[data-reveal].in .bm-node:nth-child(2){animation-delay:.15s} .brain-stage[data-reveal].in .bm-node:nth-child(3){animation-delay:.3s} .brain-stage[data-reveal].in .bm-node:nth-child(4){animation-delay:.45s} .brain-stage[data-reveal].in .bm-node:nth-child(5){animation-delay:.55s} .brain-stage[data-reveal].in .bm-node:nth-child(6){animation-delay:.65s} .brain-stage[data-reveal].in .bm-node:nth-child(7){animation-delay:.75s}
    @keyframes bmPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
    .bm-hub circle { stroke: var(--accent-3); stroke-width: 2; }
    .bm-frag circle { stroke: var(--warn); fill: rgba(251,191,36,.08); }
    .bm-crit circle { stroke: var(--accent-3); stroke-width: 2.4; }
    .bm-crit::after { content: ""; }
    .brain-stage[data-reveal].in .bm-crit circle { animation: bmRing 2.6s ease-in-out infinite .9s; }
    @keyframes bmRing { 0%,100% { filter: drop-shadow(0 0 2px var(--accent-3)); } 50% { filter: drop-shadow(0 0 9px var(--accent-3)); } }
    .brain-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); }
    .bl-crit { color: var(--accent-3); } .bl-frag { color: var(--warn); }

    .brain-proof { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 640px; margin: 26px auto 0; }
    .bp-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; text-align: center; background: var(--panel); }
    .bp-yours { border-color: rgba(56,189,248,.4); background: radial-gradient(90% 90% at 50% 0%, rgba(56,189,248,.07), transparent), var(--panel); }
    .bp-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; color: var(--text-mute); }
    .bp-yours .bp-tag { color: var(--accent-3); }
    .bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 12px auto; width: 92px; }
    .bp-grid i { width: 100%; aspect-ratio: 1; border-radius: 2px; background: #2a2a3a; }
    .bp-dim i { background: #2a2a3a; }
    .bp-alive i:nth-child(1),.bp-alive i:nth-child(2),.bp-alive i:nth-child(6),.bp-alive i:nth-child(7),.bp-alive i:nth-child(11) { background: var(--accent-3); box-shadow: 0 0 6px rgba(56,189,248,.6); }
    .bp-alive i:nth-child(10),.bp-alive i:nth-child(16) { background: var(--warn); }
    .bp-card p { margin: 8px 0 0; font-size: 12px; color: var(--text-soft); }
    .bp-vs { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); }
    .brain-line { text-align: center; margin: 22px auto 0; font-size: 14px; color: var(--text-soft); }
    .brain-line b { color: var(--accent-3); }

    /* ---- THE WITNESS ---- */
    .witness { max-width: 640px; margin: 0 auto; }
    .wit-window { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); min-height: 220px; }
    .wit-card { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
    .witness[data-face="diff"] .wit-diff,
    .witness[data-face="screen"] .wit-screen { opacity: 1; transform: none; pointer-events: auto; }
    .wit-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); }
    .wb-dot { width: 8px; height: 8px; border-radius: 50%; background: #33334a; }
    .wb-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); margin-left: 4px; }
    .wit-verdict { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; padding: 2px 8px; border-radius: 999px; }
    .wit-verdict.ok { color: var(--good); border: 1px solid rgba(74,222,128,.4); }
    .wit-verdict.bad { color: var(--warn); border: 1px solid rgba(251,191,36,.45); }
    .wit-code { margin: 0; padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; }
    .wc-ctx { color: var(--text-mute); } .wc-add { color: var(--good); }
    .wit-render { position: relative; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
    .wr-row { display: flex; justify-content: space-between; width: 180px; font-size: 13px; color: var(--text-soft); }
    .wr-val { color: var(--text); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
    .wr-btn { font-size: 13px; font-weight: 600; color: #0a0a0f; background: var(--accent-3); border: none; border-radius: 8px; padding: 9px 14px; }
    .wr-clip { width: 96px; overflow: hidden; white-space: nowrap; text-overflow: clip; }
    .wit-reticle { position: absolute; left: 26px; bottom: 24px; width: 104px; height: 40px; border: 2px solid var(--bad); border-radius: 8px; box-shadow: 0 0 0 4px rgba(248,113,113,.12); animation: witReticle 1.6s ease-in-out infinite; }
    @keyframes witReticle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
    .witness-toggle { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
    .wt-btn { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .18s; }
    .wt-btn:hover { border-color: rgba(56,189,248,.45); }
    .witness[data-face="diff"] .wt-btn[data-face="diff"],
    .witness[data-face="screen"] .wt-btn[data-face="screen"] { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.55); color: #cdeeff; }

    /* ---- THE GAUNTLET ---- */
    .gauntlet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); padding: 26px 20px 20px; max-width: 820px; margin: 0 auto; }
    .gt-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 30px; }
    .gt-rail { position: absolute; top: 14px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, rgba(56,189,248,.4), rgba(56,189,248,.15)); }
    .gt-packet { position: absolute; top: 5px; left: 87.5%; width: 34px; height: 20px; margin-left: -17px; border-radius: 5px; background: var(--accent-3); color: #0a0a0f; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 12px rgba(56,189,248,.6); transition: left .6s cubic-bezier(.5,0,.3,1); z-index: 2; }
    .gauntlet[data-run="held"] .gt-packet { background: var(--warn); box-shadow: 0 0 12px rgba(251,191,36,.6); }
    .gt-door { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 13px 8px 11px; text-align: center; transition: border-color .25s, background .25s; }
    .gt-name { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--text-soft); }
    .gt-mark { display: block; height: 16px; margin-top: 6px; font-size: 12px; font-weight: 700; }
    .gt-door.pass { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.06); }
    .gt-door.pass .gt-mark::after { content: "✓"; color: var(--good); }
    .gt-door.fail { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.08); }
    .gt-door.fail .gt-mark::after { content: "✕ held"; color: var(--bad); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .06em; }
    .gt-door.await { border-color: rgba(56,189,248,.6); background: rgba(56,189,248,.07); }
    .gt-door.await .gt-mark::after { content: "▲ you"; color: var(--accent-3); font-family: 'JetBrains Mono', monospace; font-size: 9px; }
    .gt-door.await { animation: gtAwait 1.6s ease-in-out infinite; }
    @keyframes gtAwait { 0%,100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); } 50% { box-shadow: 0 0 16px rgba(56,189,248,.4); } }
    .gt-human .gt-name { color: var(--good); }
    .gt-status { margin-top: 18px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .03em; color: var(--text-soft); min-height: 18px; }
    .gt-status.warn { color: var(--warn); } .gt-status.good { color: var(--good); }
    .gt-controls { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
    .gt-controls .cli-chip { cursor: pointer; }

    /* ---- THE RECEIPT ---- */
    .receipt { max-width: 460px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px 20px 20px; position: relative; box-shadow: var(--shadow); }
    .rc-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--text-soft); padding-bottom: 12px; border-bottom: 1px dashed var(--line); display: flex; align-items: center; gap: 8px; }
    .rc-head .rc-mark { color: var(--accent-3); }
    .rc-head .demo-tag { position: static; margin-left: auto; }
    .rc-lines { list-style: none; padding: 14px 0; margin: 0; border-bottom: 1px dashed var(--line); display: grid; gap: 8px; }
    .rc-lines li { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-soft); position: relative; padding-left: 20px; opacity: 1; }
    .js-on .receipt[data-reveal]:not(.in) .rc-lines li { opacity: 0; transform: translateY(4px); }
    .rc-lines li::before { content: "✓"; position: absolute; left: 2px; color: var(--good); }
    .receipt[data-reveal].in .rc-lines li { animation: rcPrint .35s ease forwards; }
    .receipt[data-reveal].in .rc-lines li:nth-child(1){animation-delay:.05s} .receipt[data-reveal].in .rc-lines li:nth-child(2){animation-delay:.15s} .receipt[data-reveal].in .rc-lines li:nth-child(3){animation-delay:.25s} .receipt[data-reveal].in .rc-lines li:nth-child(4){animation-delay:.35s} .receipt[data-reveal].in .rc-lines li:nth-child(5){animation-delay:.45s} .receipt[data-reveal].in .rc-lines li:nth-child(6){animation-delay:.55s} .receipt[data-reveal].in .rc-lines li:nth-child(7){animation-delay:.65s}
    @keyframes rcPrint { to { opacity: 1; transform: none; } }
    .rc-totals { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
    .rc-spend { color: var(--text-soft); } .rc-spend b { color: var(--accent-3); }
    .rc-refused { color: var(--bad); text-decoration: line-through; opacity: .8; }
    .rc-cap-ctrl { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; border-bottom: 1px dashed var(--line); }
    .rc-cap-ctrl label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: .04em; }
    .rc-cap-ctrl input[type=range] { flex: 1; accent-color: var(--accent-3); }
    .rc-get { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); padding: 14px 0 0; }
    .rc-get b { color: var(--text); }
    .rc-stub { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); letter-spacing: .04em; }
    .rc-blank { color: var(--accent-3); }
    .rc-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent-3); margin-left: 3px; vertical-align: -2px; animation: rcBlink 1s steps(1) infinite; }
    @keyframes rcBlink { 50% { opacity: 0; } }

    @media (prefers-reduced-motion: reduce) {
      .vault[data-state="ready"] .vault-wheel,
      .vault[data-state="ready"] .vault-cursor,
      .vault[data-state="ready"] .vc-tip,
      .gt-door.await, .wit-reticle, .rc-cursor, .bm-crit circle { animation: none !important; }
      .bm-edges line { stroke-dashoffset: 0; } .bm-node { opacity: 1; }
      .rc-lines li { opacity: 1; transform: none; }
      .vc-tip { opacity: 1; }
    }

    @media (max-width: 860px) {
      .ah-vault { grid-template-columns: 1fr; gap: 24px; }
      .brain-proof { grid-template-columns: 1fr; }
      .bp-vs { transform: rotate(90deg); }
    }
    @media (max-width: 540px) {
      .gt-name { font-size: 9px; }
      .gt-track { gap: 6px; }
      .rc-totals { flex-direction: column; }
    }

    /* coaching → agents cross-sell band */
    .xsell {
      display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; justify-content: center;
      max-width: 1180px; margin: 8px auto 0; padding: 16px 24px;
      border: 1px solid var(--line); border-radius: var(--radius);
      background: radial-gradient(100% 140% at 100% 50%, rgba(56,189,248,.07), transparent 60%), var(--panel);
      font-size: 14px; transition: border-color .2s ease;
    }
    .xsell:hover { border-color: rgba(56,189,248,.5); }
    .xsell-l { color: var(--text); }
    .xsell-r { color: var(--text-soft); }
    .xsell-cta { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-3); white-space: nowrap; }
    @media (max-width: 640px) { .xsell-cta { margin-left: 0; } }

    /* agents-page a11y polish: focus rings + label contrast */
    .vault-key:focus-visible, .wt-btn:focus-visible, .gt-controls .cli-chip:focus-visible {
      outline: 2px solid var(--accent-3); outline-offset: 2px;
    }
    .brain-legend, .rc-cap-ctrl label { color: var(--text-soft); }

    /* ============================================================
       TWO IMMERSIVE THEATERS — full-height split landing
       ============================================================ */
    .theaters { position: relative; }
    .th-hero { max-width: 840px; margin: 0 auto; padding: 40px 24px 26px; text-align: center; }
    .th-hero .pill { margin-bottom: 18px; }
    .th-hero .story-h1 { font-size: clamp(30px, 4.4vw, 54px); }
    .th-lead { font-size: clamp(15px, 1.7vw, 19px); color: var(--text-soft); margin: 16px auto 0; max-width: 620px; }

    .th-split { display: flex; gap: 0; align-items: stretch; max-width: 1320px; margin: 0 auto; padding: 0 16px; min-height: clamp(540px, 76vh, 780px); }
    .theater {
      position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
      border: 1px solid var(--line);
      transition: flex-grow .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, border-color .3s ease, box-shadow .35s ease;
    }
    .th-coach  { border-radius: var(--radius) 0 0 var(--radius); background: radial-gradient(120% 90% at 0% 10%, rgba(139,124,255,.12), transparent 55%), var(--panel); }
    .th-agents { border-radius: 0 var(--radius) var(--radius) 0; background: radial-gradient(120% 90% at 100% 10%, rgba(56,189,248,.14), transparent 55%), var(--panel-2); }
    /* persistent (deep-link) emphasis */
    .th-split[data-stage="coaching"] .th-coach, .th-split[data-stage="agents"] .th-agents { flex-grow: 1.35; }
    .th-split[data-stage="coaching"] .th-agents, .th-split[data-stage="agents"] .th-coach { flex-grow: .82; opacity: .84; }
    /* hover/focus emphasis (pure CSS, wins during interaction) */
    .th-split:hover .theater:not(:hover), .th-split:focus-within .theater:not(:focus-within) { flex-grow: .8; opacity: .82; }
    .th-split .theater:hover, .th-split .theater:focus-visible { flex-grow: 1.42; opacity: 1; box-shadow: var(--shadow); }
    .th-coach:hover, .th-coach:focus-visible { border-color: rgba(139,124,255,.6); }
    .th-agents:hover, .th-agents:focus-visible { border-color: rgba(56,189,248,.6); }

    .th-beam { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.045) 50%, transparent 68%); transform: translateX(-40%); animation: thBeam 8s linear infinite; }
    .th-agents .th-beam { animation-delay: 4s; }
    @keyframes thBeam { to { transform: translateX(120%); } }

    .th-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 30px 30px 26px; }
    .th-phase { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--text-soft); }
    .th-dot { width: 7px; height: 7px; border-radius: 50%; }
    .th-coach .th-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
    .th-agents .th-dot { background: var(--accent-3); box-shadow: 0 0 10px var(--accent-3); animation: pulse 2.2s ease-in-out infinite; }
    .th-h { font-size: clamp(23px, 2.7vw, 33px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 4px 0 2px; }
    .th-line { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); margin: 0; max-width: 42ch; }

    .th-scene { flex: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; margin: 6px 0; }
    .cs-tools { display: flex; flex-wrap: wrap; gap: 6px; }
    .cs-tool { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #cbc2ff; background: rgba(139,124,255,.1); border: 1px solid rgba(139,124,255,.24); border-radius: 999px; padding: 3px 9px; }
    .cs-stream { display: grid; gap: 5px; }
    .cs-stream span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-mute); letter-spacing: .01em; opacity: .9; }
    .cs-stream span em { color: var(--text-soft); font-style: normal; }
    .as-stream span { color: #88b9cc; }

    .as-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 11px 14px; }
    .as-pr-id { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--accent-3); }
    .as-pr-checks { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-soft); }
    .as-pr-checks b { color: var(--good); }
    .as-pr-hold { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: var(--warn); border: 1px solid rgba(251,191,36,.35); border-radius: 999px; padding: 3px 9px; }

    .th-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-soft); }
    .th-name { font-size: 16px; font-weight: 700; }
    .th-sub { font-weight: 400; font-size: 12.5px; color: var(--text-soft); }
    .th-cta { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; transition: transform .2s ease; }
    .th-coach .th-cta { color: var(--accent-2); } .th-agents .th-cta { color: var(--accent-3); }
    .theater:hover .th-cta { transform: translateX(4px); }

    /* seam */
    .th-seam { position: relative; flex: 0 0 30px; display: grid; place-items: center; }
    .th-seam::before { content: ""; position: absolute; top: 10%; bottom: 10%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-3)); box-shadow: 0 0 14px rgba(56,189,248,.35); }
    .th-leap { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--bg); padding: 8px 0; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em; color: var(--accent-3); }

    .th-underbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 1320px; margin: 0 auto; padding: 18px 24px 0; }
    .th-both { font-size: 13px; color: var(--text-soft); }
    .th-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-3); }
    .th-email:hover { text-decoration: underline; }

    @media (prefers-reduced-motion: reduce) {
      .th-beam { animation: none; opacity: 0; }
      .theater { transition: opacity .01s; }
      .th-agents .th-dot { animation: none; }
    }
    @media (max-width: 860px) {
      .th-split { flex-direction: column; min-height: 0; gap: 0; }
      .theater, .th-coach, .th-agents { border-radius: var(--radius); flex: none; opacity: 1 !important; }
      .th-split[data-stage] .theater, .th-split:hover .theater:not(:hover) { flex-grow: 0; }
      .th-split .theater:hover, .th-split .theater:focus-visible { box-shadow: none; }
      .th-coach { margin-bottom: 0; }
      .th-seam { flex: none; width: auto; height: 44px; }
      .th-seam::before { top: auto; left: 12%; right: 12%; bottom: 50%; height: 2px; width: auto; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
      .th-leap { writing-mode: horizontal-tb; transform: none; padding: 0 10px; }
    }
    @media (max-width: 540px) {
      .th-inner { padding: 24px 20px; }
      .as-pr-hold { margin-left: 0; }
    }

    /* ============================================================
       AGENTS PAGE POLISH — hierarchy · chapters · depth · single-accent sky
       ============================================================ */
    /* hierarchy: dominant hero, demoted beat heads */
    .ahv-copy .section-title { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.03em; }
    .abeat-h { font-size: clamp(22px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -.03em; }
    .abeat-h .accent { color: #7fd7ff; }
    /* chapter rhythm */
    .abeat { padding: 72px 0 8px; }
    .abeat-head { margin: 0 auto 40px; }
    .abeat::before { content: ""; display: block; width: 64px; height: 1px; margin: 0 auto 40px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.45), transparent); }
    .witness-sec, .receipt-sec { background: radial-gradient(120% 80% at 50% 0%, rgba(56,189,248,.04), transparent 55%); }
    /* faint engineering dot-field on the agents canvas */
    .agents-sec { background-image: radial-gradient(rgba(56,189,248,.045) 1px, transparent 1px); background-size: 44px 44px; background-position: -22px -22px; }
    /* lift the demo panels off the near-black bg */
    .vault, .brain-stage, .wit-window, .receipt, .gauntlet { box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 30px 70px -34px rgba(0,0,0,.85); }
    .brain-stage { background: linear-gradient(180deg, #191926, #131320); padding: 28px 24px; }
    .wit-window  { background: linear-gradient(180deg, #191926, #131320); }
    .receipt     { background: linear-gradient(180deg, #191926, #131320); }
    .gauntlet    { background: linear-gradient(180deg, #15151f, #101019); }
    /* hero vault = focal mass */
    .vault { background: radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,.10), transparent 55%), linear-gradient(180deg, #15171f, #0d0d15); border-color: rgba(56,189,248,.18); }
    .vault::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent); }
    .vault-stage { height: 220px; }
    .vault-door { width: 188px; height: 188px; }
    /* make the defining click discoverable: pulse the key, not the empty arrow */
    .vault[data-state="ready"] .vault-key { animation: vaultKeyPulse 2.6s ease-in-out infinite; }
    @keyframes vaultKeyPulse { 0%,100% { box-shadow: 0 0 18px rgba(56,189,248,.45); transform: translateY(0); } 50% { box-shadow: 0 0 26px 3px rgba(56,189,248,.65); transform: translateY(-1px); } }
    .vault-cursor { opacity: .5; }
    /* single-accent discipline: no violet on the sky agents page */
    .gt-controls .cli-chip { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.28); color: #cdeeff; }
    .gt-controls .cli-chip:hover { background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.5); }
    .agent-ghost { background: rgba(56,189,248,.05); }
    /* light up the company-brain map (the moat) — finished living map, no scan animation */
    .bm-edges line { stroke: rgba(56,189,248,.45); stroke-width: 1.8; filter: drop-shadow(0 0 3px rgba(56,189,248,.25)); }
    .bm-node circle { stroke-width: 1.8; }
    .bm-hub circle { stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(56,189,248,.4)); }
    .bm-crit circle { filter: drop-shadow(0 0 5px rgba(56,189,248,.45)); }
    /* promote the best credibility beat into a sky callout */
    .brain-line { max-width: 560px; border: 1px solid rgba(56,189,248,.28); border-left: 3px solid var(--accent-3); border-radius: var(--radius-sm); background: rgba(56,189,248,.05); padding: 13px 18px; }
    .brain-line b { color: var(--accent-3); }
    /* connective tissue between beats */
    .beat-bridge { display: block; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--text-mute); margin: 32px auto 0; opacity: .8; }
    /* the curtain line before the close */
    .curtain { text-align: center; max-width: 660px; margin: 56px auto 6px; font-size: clamp(18px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--text); }
    /* crafted spend-cap slider */
    .rc-cap-ctrl input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(56,189,248,.6), rgba(56,189,248,.12)); }
    .rc-cap-ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 8px rgba(56,189,248,.6); cursor: pointer; }
    .rc-cap-ctrl input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 8px rgba(56,189,248,.6); cursor: pointer; }
    .demo-tag { font-size: 9.5px; }
    @media (prefers-reduced-motion: reduce) { .vault[data-state="ready"] .vault-key { animation: none !important; } }

    /* ===== AGENTS POLISH v2 — crafted CTA · dimensional flip · fingerprint · life ===== */
    /* crafted CTA + focal band (scoped to agents page) */
    .cta-band { margin-top: 14px; padding: 38px 24px 10px; background: radial-gradient(70% 150% at 50% 0%, rgba(56,189,248,.07), transparent 62%); border-top: 1px solid var(--line-soft); }
    .agents-sec .btn-prim.agent-prim.btn-lg { position: relative; background: linear-gradient(180deg, #54c8fb, #1ea7e8); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -10px rgba(56,189,248,.65); }
    .agents-sec .btn-prim.agent-prim.btn-lg:hover { transform: translateY(-2px); background: linear-gradient(180deg, #6fd2fc, #2ab3f0); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 34px -10px rgba(56,189,248,.75); }
    /* Witness: real dimensional flip instead of a flat dissolve */
    .wit-window { perspective: 1400px; }
    .wit-card { transform-origin: center; transform: rotateY(14deg) scale(.975); }
    .witness[data-face="diff"] .wit-diff, .witness[data-face="screen"] .wit-screen { transform: rotateY(0) scale(1); }
    /* fingerprint: make YOURS trace a recognizable connected path, GENERIC stay even noise */
    .bp-alive i { background: #23232f; box-shadow: none; }
    .bp-alive i:nth-child(1), .bp-alive i:nth-child(2), .bp-alive i:nth-child(6), .bp-alive i:nth-child(7), .bp-alive i:nth-child(11), .bp-alive i:nth-child(12) { background: var(--accent-3); box-shadow: 0 0 7px rgba(56,189,248,.6); }
    .bp-alive i:nth-child(10) { background: var(--warn); box-shadow: 0 0 6px rgba(251,191,36,.5); }
    /* brain map: faint life after it has revealed (honesty-safe: existing map, not a scan) */
    .brain-stage.in .bm-hub circle { animation: bmBreathe 4.5s ease-in-out infinite 1.3s; }
    @keyframes bmBreathe { 0%,100% { filter: drop-shadow(0 0 4px rgba(56,189,248,.3)); } 50% { filter: drop-shadow(0 0 10px rgba(56,189,248,.55)); } }
    @media (prefers-reduced-motion: reduce) { .brain-stage.in .bm-hub circle, .wit-card { animation: none !important; } .wit-card { transform: none; } }