/* ═══ RESET ═══ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { font-size: 10px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

    :root {
      --bg: #0a0a0f;
      --bg-subtle: #0e0e16;
      --text: #e8e4f0;
      --text-mid: #9898b8;
      --text-dim: #7878a0;
      --authority: #c8a0f0;
      --capacity: #60d8a8;
      --expansion: #e080a0;
      --border: rgba(200, 160, 240, 0.08);
      --serif: 'Instrument Serif', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
      --mono: 'JetBrains Mono', monospace;
    }

    ::selection {
      background: rgba(200, 160, 240, 0.2);
      color: var(--text);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 1.8rem;
      line-height: 1.6;
      overflow-x: hidden;
    }
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 200;
      background: var(--authority);
      color: var(--bg);
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 1rem 1.2rem;
      text-decoration: none;
      border-radius: 0 0 4px 4px;
    }
    .skip-link:focus {
      left: 1.2rem;
      top: 0.8rem;
    }

    /* ═══ HERO TRUST LINE ═══ */
    .hero-trust {
      font-family: var(--mono);
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--text-dim);
      margin-top: 1.6rem;
    }

    /* ═══ ROTATING QUOTES ═══ */
    .hero-quotes {
      margin-top: 4rem;
      min-height: 6rem;
      position: relative;
      text-align: center;
      width: 100%;
    }
    .hero-quote-item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .hero-quote-item.active {
      opacity: 1;
    }
    .hero-quote-text {
      font-family: var(--serif);
      font-size: clamp(1.7rem, 2.2vw, 2.1rem);
      font-style: italic;
      line-height: 1.45;
      color: var(--text-mid);
      margin-bottom: 0.8rem;
    }
    .hero-quote-attr {
      font-family: var(--mono);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-dim);
    }

    /* ═══ HERO QUALIFIER + PRICE ═══ */
    .hero-qualifier {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-dim);
      margin-top: 2rem;
      max-width: 50rem;
      text-align: center;
      line-height: 1.6;
    }
    .hero-price {
      font-family: var(--mono);
      font-size: 1rem;
      letter-spacing: 0.1em;
      color: var(--authority);
      margin-top: 1.2rem;
      text-align: center;
      opacity: 0.7;
    }

    /* ═══ SCROLLBAR ═══ */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(200,160,240,0.12); border-radius: 2px; }

    /* ═══ LAYOUT ═══ */
    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 4rem;
    }
    @media (min-width: 768px) { .container { padding: 0 8rem; } }
    @media (min-width: 1200px) { .container { padding: 0 10rem; } }

    /* ═══ NAV ═══ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 2.4rem 0;
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease,
                  background 0.4s, backdrop-filter 0.4s;
    }
    nav.nav-visible {
      transform: translateY(0);
      opacity: 1;
    }
    nav.scrolled {
      background: rgba(10, 10, 15, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-family: var(--serif);
      font-size: 2.4rem;
      color: var(--text);
      text-decoration: none;
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: center;
      gap: 0;
      transition: gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-logo.mark-visible { gap: 3px; }
    .nav-mark {
      display: inline-flex;
      align-items: center;
      max-width: 0;
      overflow: hidden;
      opacity: 0;
      transform: scale(0.6) translateX(-4px);
      transition:
        max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-mark.visible {
      max-width: 44px;
      opacity: 1;
      transform: scale(1) translateX(0);
    }
    .nav-mark svg { display: block; margin-top: 3px; overflow: visible; }
    @keyframes nav-pulse {
      0%   { transform: scale(1);   opacity: 0.55; }
      100% { transform: scale(3.8); opacity: 0; }
    }
    .nav-pulse-ring {
      transform-box: fill-box;
      transform-origin: center;
      animation: nav-pulse 2.8s cubic-bezier(0.2, 0, 0.6, 1) infinite;
    }
    .nav-pulse-ring-2 { animation-delay: 1.4s; }
    .nav-links {
      display: flex;
      gap: 3.5rem;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-mid);
      text-decoration: none;
      transition: color 0.3s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--authority);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

    @media (max-width: 768px) {
      .nav-links { display: none; }
    }

    /* Nav CTA button */
    .nav-cta {
      font-family: var(--mono);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--bg);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 24px;
      border: none;
      border-radius: 2px;
      background: var(--authority);
      text-decoration: none;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }
    .nav-cta:hover {
      background: #d4b0ff;
      transform: translateY(-1px);
    }
    @media (max-width: 768px) {
      .nav-cta {
        font-size: 0.7rem;
        padding: 12px 16px;
        min-height: 44px;
        box-sizing: border-box;
      }
    }

    /* Alpha badge */
    .alpha-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--capacity);
      padding: 8px 20px;
      border: 1px solid rgba(96,216,168,0.25);
      border-radius: 6px;
      background: rgba(96,216,168,0.06);
    }
    .alpha-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--capacity);
      box-shadow: 0 0 8px rgba(96,216,168,0.4);
      animation: livePulse 2s ease-in-out infinite;
    }
    @keyframes livePulse {
      0%, 100% { opacity: 0.6; box-shadow: 0 0 4px rgba(96,216,168,0.3); }
      50% { opacity: 1; box-shadow: 0 0 10px rgba(96,216,168,0.6); }
    }

    /* ═══ HERO ═══ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 4vh;
      padding-top: 10rem;
    }
    #heroText {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .hero-label {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--expansion);
      margin-bottom: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
    .hero-label .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--expansion);
      animation: pulse 2.5s ease-in-out infinite;
    }
    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(5.5rem, 11vw, 14rem);
      font-weight: 400;
      line-height: 0.9;
      letter-spacing: -0.03em;
      margin-bottom: 4rem;
    }
    .hero h1 .line-2 {
      display: block;
      background: linear-gradient(135deg, var(--authority), var(--capacity));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-sub {
      font-size: 2rem;
      color: var(--text-mid);
      max-width: 56rem;
      line-height: 1.7;
      margin-bottom: 5rem;
      font-weight: 300;
      margin-left: auto;
      margin-right: auto;
    }
    #heroPos { text-align: center; }
    .hero-tags {
      display: flex;
      gap: 3rem;
      margin-bottom: 5rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .hero-tags span {
      font-family: var(--mono);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--text-dim);
      transition: color 0.4s;
    }
    .hero-tags span:hover { color: var(--text-mid); }

    /* ═══ EMAIL CAPTURE ═══ */
    .email-form {
      display: flex;
      gap: 1px;
      max-width: 44rem;
      border-radius: 4px;
      box-shadow: 0 0 20px rgba(200,160,240,0.15), 0 0 48px rgba(200,160,240,0.07);
      transition: box-shadow 0.4s ease;
    }
    .email-form:hover {
      box-shadow: 0 0 28px rgba(200,160,240,0.28), 0 0 64px rgba(200,160,240,0.12);
    }
    #heroForm {
      margin-left: auto;
      margin-right: auto;
    }
    .email-form input {
      flex: 1;
      background: rgba(200, 160, 240, 0.04);
      border: 1px solid var(--border);
      border-right: none;
      border-radius: 2px 0 0 2px;
      padding: 1.6rem 2rem;
      font-family: var(--sans);
      font-size: 1.6rem;
      color: var(--text);
      outline: none;
      transition: border-color 0.3s, background 0.3s;
    }
    .email-form input::placeholder { color: var(--text-dim); }
    .email-form input:focus {
      border-color: rgba(200, 160, 240, 0.2);
      background: rgba(200, 160, 240, 0.06);
    }
    .email-form button {
      flex: 1;
      background: var(--authority);
      border: 1px solid var(--authority);
      border-radius: 0 2px 2px 0;
      padding: 1.6rem 3rem;
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--bg);
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
      font-weight: 500;
    }
    .email-form button:hover {
      background: #d4b0f8;
      transform: translateY(-1px);
    }
    .form-message {
      margin-top: 1.2rem;
      font-size: 1.5rem;
      color: var(--text-mid);
      text-align: center;
    }
    .form-message.error { color: var(--expansion); }
    .form-fallback {
      margin-top: 1.2rem;
      display: flex;
      justify-content: center;
      gap: 1.2rem;
      flex-wrap: wrap;
    }
    .form-fallback a {
      font-family: var(--mono);
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-mid);
      text-decoration: none;
      border: 1px solid rgba(200,160,240,0.25);
      padding: 0.9rem 1.2rem;
      border-radius: 0.4rem;
      transition: color 0.25s, border-color 0.25s;
    }
    .form-fallback a:hover {
      color: var(--text);
      border-color: rgba(200,160,240,0.45);
    }

    /* ═══ APPLICATION MODAL ═══ */
    .apply-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 4rem 2rem;
      background: rgba(6, 6, 12, 0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow-y: auto;
    }
    .apply-modal.open {
      display: flex;
      animation: applyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes applyFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .apply-card {
      width: 100%;
      max-width: 60rem;
      background: linear-gradient(180deg, rgba(22, 20, 34, 0.95), rgba(14, 14, 22, 0.95));
      border: 1px solid rgba(200, 160, 240, 0.18);
      border-radius: 14px;
      padding: 4rem 4rem 3.5rem;
      position: relative;
      box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 160, 240, 0.06);
      animation: applyRise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes applyRise {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 600px) {
      .apply-card { padding: 3rem 2.4rem 2.8rem; }
      .apply-modal { padding: 2rem 1.2rem; }
    }
    .apply-close {
      position: absolute;
      top: 1.6rem;
      right: 1.6rem;
      width: 3.6rem;
      height: 3.6rem;
      border: none;
      background: transparent;
      color: var(--text-dim);
      font-size: 2rem;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.25s, background 0.25s;
    }
    .apply-close:hover { color: var(--text); background: rgba(200, 160, 240, 0.08); }
    .apply-label {
      font-family: var(--mono);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--capacity);
      margin-bottom: 1.4rem;
      opacity: 0.85;
    }
    .apply-title {
      font-family: var(--serif);
      font-size: clamp(2.6rem, 3.6vw, 3.4rem);
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
    }
    .apply-sub {
      color: var(--text-mid);
      font-size: 1.65rem;
      font-weight: 300;
      line-height: 1.6;
      margin-bottom: 3rem;
    }
    .apply-sub strong { color: var(--text); font-weight: 400; }
    .apply-field {
      margin-bottom: 2rem;
    }
    .apply-field label {
      display: block;
      font-family: var(--mono);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-dim);
      margin-bottom: 0.8rem;
    }
    .apply-field label .req { color: var(--expansion); margin-left: 0.3rem; }
    .apply-field input,
    .apply-field textarea {
      width: 100%;
      background: rgba(10, 10, 18, 0.6);
      border: 1px solid rgba(200, 160, 240, 0.15);
      border-radius: 6px;
      padding: 1.2rem 1.4rem;
      font-family: var(--sans);
      font-size: 1.7rem;
      color: var(--text);
      transition: border-color 0.25s, background 0.25s;
      font-weight: 300;
    }
    .apply-field textarea {
      min-height: 9rem;
      resize: vertical;
      line-height: 1.55;
    }
    .apply-field input:focus,
    .apply-field textarea:focus {
      outline: none;
      border-color: rgba(200, 160, 240, 0.5);
      background: rgba(14, 14, 22, 0.85);
    }
    .apply-field input::placeholder,
    .apply-field textarea::placeholder {
      color: var(--text-mid);
      opacity: 0.8;
    }
    .apply-check {
      margin-top: 0.4rem;
    }
    .apply-check label {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      font-size: 1.3rem;
      line-height: 1.5;
      color: var(--text-secondary);
      cursor: pointer;
    }
    .apply-check input[type="checkbox"] {
      width: 1.6rem;
      height: 1.6rem;
      margin-top: 0.2rem;
      accent-color: var(--authority);
      flex-shrink: 0;
      cursor: pointer;
    }
    .apply-actions {
      display: flex;
      gap: 1.2rem;
      align-items: center;
      margin-top: 2.4rem;
      flex-wrap: wrap;
    }
    .apply-submit {
      flex: 1 1 auto;
      min-height: 5rem;
      background: var(--authority);
      color: var(--bg);
      border: none;
      border-radius: 6px;
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      transition: background 0.25s, transform 0.2s;
      padding: 0 2rem;
    }
    .apply-submit:hover:not(:disabled) {
      background: #d4b0ff;
      transform: translateY(-1px);
    }
    .apply-submit:disabled { opacity: 0.6; cursor: not-allowed; }
    .apply-skip {
      font-family: var(--mono);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-dim);
      background: none;
      border: none;
      cursor: pointer;
      padding: 1rem 0.4rem;
      transition: color 0.25s;
    }
    .apply-skip:hover { color: var(--text-mid); }
    .apply-error {
      margin-top: 1.4rem;
      font-size: 1.5rem;
      color: var(--expansion);
      min-height: 1.6rem;
    }

    /* ═══ SEPARATOR ═══ */
    .sep {
      height: 1px;
      background: var(--border);
      border: none;
      max-width: 1440px;
      margin: 0 auto;
    }

    /* ═══ SECTION SPACING ═══ */
    section { padding: 14rem 0; }
    @media (min-width: 769px) {
      section { padding: 18rem 0; }
      /* content-visibility: auto skips rendering of off-screen sections.
         Desktop-only — mobile Safari renders black gaps at section boundaries. */
      main > section:not(.hero) {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
      }
    }

    /* ═══ LABEL ═══ */
    .section-label {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--text-dim);
      margin-bottom: 2rem;
    }

    /* ═══ BIG HEADING ═══ */
    .big-heading {
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1.0;
      letter-spacing: -0.02em;
    }
    .size-xl { font-size: clamp(3.2rem, 6vw, 7.2rem); }
    .size-lg { font-size: clamp(2.8rem, 5vw, 5.6rem); }
    .size-md { font-size: clamp(2.4rem, 3.5vw, 4rem); }

    .gradient-text {
      background: linear-gradient(135deg, var(--authority), var(--capacity));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .gradient-text-animated {
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8, #e080a0, #8878ff);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 6s ease-in-out infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Version dot — glowing pulse */
    .version-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 6px rgba(96,216,168,0.6), 0 0 14px rgba(96,216,168,0.3);
      margin-right: 0.5rem;
      vertical-align: middle;
      animation: versionPulse 2s ease-in-out infinite;
    }
    @keyframes versionPulse {
      0%, 100% { box-shadow: 0 0 6px rgba(96,216,168,0.4), 0 0 14px rgba(96,216,168,0.15); opacity: 0.7; }
      50% { box-shadow: 0 0 10px rgba(96,216,168,0.8), 0 0 24px rgba(96,216,168,0.4); opacity: 1; }
    }

    /* Price ladder */
    .price-ladder-current {
      color: var(--text);
      text-shadow: 0 0 8px rgba(200,160,240,0.4), 0 0 20px rgba(136,120,255,0.15);
    }

    /* Price glow */
    .price-glow {
      color: var(--authority);
      font-weight: 500;
      text-shadow: 0 0 12px rgba(200,160,240,0.5), 0 0 30px rgba(136,120,255,0.25);
    }

    /* Glow text effect */
    .glow-live {
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: none;
      filter: drop-shadow(0 0 8px rgba(200,160,240,0.5)) drop-shadow(0 0 20px rgba(136,120,255,0.3));
    }

    /* Scale-in reveal variant for icons */
    .reveal.reveal-scale {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.reveal-scale.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* ═══ COMMAND CENTER ═══ */
    /* ═══ INTERACTIVE MOCKUP ═══ */
    .preview-frame {
      /* Dark theme (default) */
      --m-bg: #080a12;
      --m-surface: #0a0c16;
      --m-card: #101420;
      --m-border: rgba(140,120,255,0.08);
      --m-border-strong: rgba(140,120,255,0.12);
      --m-text: #e8e4f0;
      --m-text-mid: #9898b8;
      --m-text-dim: #606080;
      --m-glass: rgba(16,20,36,0.6);
      --m-glow: rgba(140,120,255,0.04);
      --m-nav-hover: rgba(140,120,255,0.06);
      --m-nav-active: rgba(140,120,255,0.08);
      --m-msg-user: linear-gradient(135deg, rgba(140,120,255,0.12), rgba(200,160,240,0.08));
      --m-code-bg: rgba(140,120,255,0.08);

      background: var(--m-bg);
      border: 1px solid var(--m-border-strong);
      border-radius: 10px;
      overflow: hidden;
      margin-top: 6rem;
      aspect-ratio: 16 / 10;
      display: flex;
      flex-direction: column;
      position: relative;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 4px 60px rgba(140,120,255,0.08), 0 0 0 1px rgba(140,120,255,0.06);
      transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease;
    }
    .preview-frame.light-mode {
      --m-bg: #f4f2f8;
      --m-surface: #eae6f2;
      --m-card: #ffffff;
      --m-border: rgba(140,120,255,0.12);
      --m-border-strong: rgba(140,120,255,0.18);
      --m-text: #1a1528;
      --m-text-mid: #5a5478;
      --m-text-dim: #8880a0;
      --m-glass: rgba(244,242,248,0.8);
      --m-glow: rgba(140,120,255,0.06);
      --m-nav-hover: rgba(140,120,255,0.08);
      --m-nav-active: rgba(140,120,255,0.12);
      --m-msg-user: linear-gradient(135deg, rgba(140,120,255,0.08), rgba(200,160,240,0.06));
      --m-code-bg: rgba(140,120,255,0.06);
      background: var(--m-bg);
      box-shadow: 0 4px 60px rgba(140,120,255,0.06), 0 0 0 1px rgba(140,120,255,0.1);
    }
    /* Titlebar */
    .mock-titlebar {
      height: 36px;
      background: var(--m-surface);
      border-bottom: 1px solid var(--m-border);
      transition: background 0.8s ease, border-color 0.8s ease;
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 10px;
      flex-shrink: 0;
    }
    .mock-dots { display: flex; gap: 6px; }
    .mock-dots span { width: 10px; height: 10px; border-radius: 50%; }
    .mock-dots span:nth-child(1) { background: #ff5f57; }
    .mock-dots span:nth-child(2) { background: #febc2e; }
    .mock-dots span:nth-child(3) { background: #28c840; }
    .mock-titlebar-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .mock-intensity-icon { color: rgba(140,120,255,0.5); font-size: 11px; }
    .mock-intensity-bar {
      width: 120px; height: 6px;
      background: rgba(140,120,255,0.1);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    .mock-intensity-fill {
      width: 35%;
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, #8878ff, #c8a0f0);
      box-shadow: 0 0 8px rgba(140,120,255,0.3);
    }
    .mock-mode-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #c8a0f0;
      background: rgba(200,160,240,0.08);
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid rgba(200,160,240,0.12);
    }
    .mock-theme-toggle {
      width: 20px; height: 20px;
      border-radius: 50%;
      border: 1px solid var(--m-border-strong);
      background: var(--m-nav-hover);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px;
      color: var(--m-text-dim);
      transition: background 0.3s, border-color 0.3s;
      margin-left: 4px;
    }
    .mock-theme-toggle:hover { border-color: rgba(200,160,240,0.3); }
    .mock-coherence-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 6px rgba(96,216,168,0.4);
    }
    /* Body */
    .mock-body {
      flex: 1;
      display: flex;
      overflow: hidden;
      min-height: 0;
    }
    /* Sidebar */
    .mock-sidebar {
      width: 180px;
      background: var(--m-surface);
      border-right: 1px solid var(--m-border);
      transition: background 0.8s ease, border-color 0.8s ease, width 0.6s ease, opacity 0.6s ease, padding 0.6s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 12px 8px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .mock-sidebar-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px 14px;
    }
    .mock-sidebar-logo svg { width: 22px; height: 22px; flex-shrink: 0; }
    .mock-sidebar-logo-text {
      display: flex;
      flex-direction: column;
    }
    .mock-sidebar-logo-text .name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--m-text);
      transition: color 0.8s ease;
      letter-spacing: 0.04em;
    }
    .mock-sidebar-logo-text .sub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--m-text-dim);
      transition: color 0.8s ease;
    }
    .mock-nav { list-style: none; padding: 0; margin: 0; }
    .mock-nav li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      color: var(--m-text-mid);
      transition: background 0.15s, color 0.15s;
      position: relative;
    }
    .mock-nav li:hover { background: var(--m-nav-hover); color: var(--m-text); }
    .mock-nav li.active {
      background: var(--m-nav-active);
      color: var(--m-text);
    }
    .mock-nav li.active::before {
      content: '';
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, #8878ff, #c8a0f0);
      box-shadow: 0 0 8px rgba(140,120,255,0.3);
    }
    .mock-nav-icon {
      width: 16px; height: 16px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0.6;
      flex-shrink: 0;
    }
    .mock-nav li.active .mock-nav-icon { opacity: 1; }
    .mock-sidebar-commands {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(140,120,255,0.06);
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .mock-cmd-pill {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--m-text-mid);
      background: var(--m-nav-hover);
      padding: 3px 7px;
      border-radius: 4px;
      border: 1px solid var(--m-border);
      transition: background 0.8s ease, border-color 0.8s ease, color 0.8s ease;
    }
    .mock-sidebar-stats {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--m-border);
    }
    .mock-stat-row {
      display: flex;
      justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--m-text-dim);
      padding: 2px 8px;
      transition: color 0.8s ease;
    }
    .mock-stat-val { color: var(--m-text-mid); transition: color 0.8s ease; }
    /* Main content area */
    .mock-main {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .mock-atm-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 80%, var(--m-glow) 0%, transparent 70%);
      transition: background 0.8s ease;
      pointer-events: none;
      animation: mockAtmBreathe 8s ease-in-out infinite;
    }
    @keyframes mockAtmBreathe {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    /* Dashboard view */
    .mock-view { position: absolute; inset: 0; padding: 16px 20px; overflow-y: auto; transition: opacity 0.3s ease; }
    .mock-view.hidden { opacity: 0; pointer-events: none; }
    .mock-greeting-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: var(--m-text-dim);
      transition: color 0.8s ease;
      margin-bottom: 4px;
    }
    .mock-greeting {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px;
      font-weight: 300;
      color: var(--m-text);
      transition: color 0.8s ease;
      margin-bottom: 10px;
    }
    .mock-tags { display: flex; gap: 6px; margin-bottom: 14px; }
    .mock-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid;
    }
    .mock-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }
    .mock-stat-card {
      background: var(--m-card);
      border: 1px solid var(--m-border);
      transition: background 0.8s ease, border-color 0.8s ease;
      border-radius: 6px;
      padding: 10px;
    }
    .mock-stat-card .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--m-text-dim);
      transition: color 0.8s ease;
      margin-bottom: 4px;
    }
    .mock-stat-card .value {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: var(--m-text);
      transition: color 0.8s ease;
    }
    .mock-triad-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .mock-triad-card {
      background: var(--m-card);
      border: 1px solid var(--m-border);
      transition: background 0.8s ease, border-color 0.8s ease;
      border-radius: 6px;
      padding: 10px;
      border-top: 2px solid;
    }
    .mock-triad-card .card-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mock-triad-card .card-label .dots { display: flex; gap: 3px; }
    .mock-triad-card .card-label .dots span {
      width: 5px; height: 5px; border-radius: 50%;
    }
    .mock-outcome-item {
      padding: 6px 0;
      border-bottom: 1px solid rgba(140,120,255,0.04);
    }
    .mock-outcome-item:last-child { border-bottom: none; }
    .mock-outcome-title {
      font-size: 10px;
      color: var(--m-text);
      transition: color 0.8s ease;
      margin-bottom: 3px;
    }
    .mock-outcome-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mock-outcome-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 1px 6px;
      border-radius: 3px;
    }
    .mock-progress-bar {
      height: 3px;
      background: var(--m-border);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 4px;
    }
    .mock-progress-fill {
      height: 100%;
      border-radius: 2px;
    }
    .mock-followup-item {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid var(--m-border);
      font-size: 9px;
    }
    .mock-followup-item:last-child { border-bottom: none; }
    .mock-followup-name { color: #c8a0f0; }
    .mock-followup-topic { color: var(--m-text-mid); flex: 1; margin-left: 6px; transition: color 0.8s ease; }
    .mock-followup-due {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--m-text-dim);
      transition: color 0.8s ease;
    }

    /* ═══ Cockpit v2 miniature ═══ */
    .mock-cockpit-row {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      align-items: stretch;
    }

    /* North Star strip */
    .mock-cockpit-northstar {
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      padding: 8px 12px;
      align-items: center;
    }
    .mock-ns-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--m-text-dim);
    }
    .mock-ns-anchors {
      display: flex; gap: 6px; align-items: center;
      font-family: 'Instrument Serif', serif;
      font-size: 13px;
      font-style: italic;
      color: var(--m-text);
      flex: 1;
    }
    .mock-ns-sep { color: var(--m-text-dim); font-style: normal; }
    .mock-ns-journey { display: flex; gap: 3px; align-items: center; }
    .mock-ns-tick {
      width: 14px; height: 2px;
      background: var(--m-border);
      border-radius: 1px;
    }
    .mock-ns-tick.done { background: #c8a0f0; }
    .mock-ns-tick.current {
      background: #c8a0f0;
      box-shadow: 0 0 6px rgba(200,160,240,0.5);
    }

    /* Brain row */
    .mock-cockpit-brain { min-height: 72px; }
    .mock-brain-orb-col {
      width: 80px;
      display: flex; flex-direction: column; align-items: center;
      gap: 4px;
      padding: 8px;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      flex-shrink: 0;
    }
    .mock-brain-orb {
      width: 32px; height: 32px; border-radius: 50%;
      background: radial-gradient(circle at 40% 38%,
        rgba(255,255,255,0.9) 0%,
        rgba(200,160,240,0.6) 40%,
        rgba(136,120,255,0.3) 70%,
        rgba(96,216,168,0.1) 100%);
      box-shadow: 0 0 16px rgba(200,160,240,0.35);
    }
    .mock-brain-pulse {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      color: var(--m-text-dim);
      display: flex; align-items: center; gap: 4px;
    }
    .mock-pulse-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 4px rgba(96,216,168,0.6);
    }
    .mock-brain-synthesis {
      flex: 1;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      padding: 10px 12px;
      display: flex; flex-direction: column; gap: 3px;
      justify-content: center;
    }
    .mock-syn-line {
      font-size: 10px;
      color: var(--m-text-mid);
      line-height: 1.5;
    }
    .mock-syn-line:first-child { color: var(--m-text); }
    .mock-brain-compass {
      width: 80px;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mock-compass-ring {
      width: 52px; height: 52px; border-radius: 50%;
      border: 1px solid rgba(200,160,240,0.25);
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .mock-compass-cardinal {
      position: absolute;
      font-family: 'JetBrains Mono', monospace;
      font-size: 6px;
      color: var(--m-text-dim);
    }
    .mock-compass-cardinal.n { top: -3px; left: 50%; transform: translateX(-50%); }
    .mock-compass-cardinal.e { right: -3px; top: 50%; transform: translateY(-50%); }
    .mock-compass-cardinal.s { bottom: -3px; left: 50%; transform: translateX(-50%); }
    .mock-compass-cardinal.w { left: -3px; top: 50%; transform: translateY(-50%); }
    .mock-compass-needle {
      width: 2px; height: 18px;
      background: linear-gradient(to top, transparent, #c8a0f0);
      transform-origin: bottom center;
      transform: rotate(30deg) translateY(-4px);
      border-radius: 1px;
      box-shadow: 0 0 4px rgba(200,160,240,0.5);
    }

    /* Integrity bar */
    .mock-cockpit-integrity {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 12px;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      margin-bottom: 10px;
    }
    .mock-int-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--m-text-dim);
    }
    .mock-int-bar {
      flex: 1; height: 3px;
      background: rgba(140,120,255,0.08);
      border-radius: 2px;
      overflow: hidden;
    }
    .mock-int-fill {
      height: 100%;
      background: linear-gradient(90deg, #60d8a8, #c8a0f0);
      border-radius: 2px;
      box-shadow: 0 0 6px rgba(200,160,240,0.3);
    }
    .mock-int-val {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: #60d8a8;
    }

    /* Flow row */
    .mock-cockpit-flow { gap: 8px; }
    .mock-flow-card {
      flex: 1;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      padding: 8px 10px;
      display: flex; flex-direction: column; gap: 5px;
    }
    .mock-flow-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--m-text-dim);
    }
    .mock-flow-viz {
      display: flex; align-items: center; gap: 6px;
      min-height: 22px;
    }
    .mock-vel-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #c8a0f0;
      box-shadow: 0 0 6px rgba(200,160,240,0.5);
    }
    .mock-vel-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px; font-weight: 400;
      color: var(--m-text);
    }
    .mock-flow-viz.rhythm { gap: 2px; align-items: flex-end; height: 20px; }
    .mock-r-bar {
      width: 4px;
      background: linear-gradient(to top, rgba(200,160,240,0.3), #c8a0f0);
      border-radius: 1px;
    }
    .mock-flow-viz.astro {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #c8a0f0;
    }
    .mock-astro-op { color: var(--m-text-dim); font-size: 10px; }

    /* Triad deck — risen-leg emphasis */
    .mock-triad-card.risen {
      box-shadow: 0 0 12px rgba(200,160,240,0.25), inset 0 0 8px rgba(200,160,240,0.06);
      border-color: rgba(200,160,240,0.3);
    }
    .mock-risen-star {
      color: #d4a574;
      text-shadow: 0 0 6px rgba(212,165,116,0.6);
      margin-left: 2px;
    }
    .mock-risen-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #d4a574;
      padding: 1px 5px;
      background: rgba(212,165,116,0.1);
      border: 1px solid rgba(212,165,116,0.25);
      border-radius: 3px;
    }
    .mock-cap-row {
      display: flex; justify-content: space-between;
      padding: 4px 0;
      font-size: 9px;
      border-bottom: 1px solid rgba(140,120,255,0.04);
    }
    .mock-cap-row:last-child { border-bottom: none; }
    .mock-cap-label { color: var(--m-text-dim); }
    .mock-cap-val { color: var(--m-text); font-family: 'JetBrains Mono', monospace; font-size: 9px; }

    /* ─── Brain orb with score (production fidelity) ─── */
    .mock-brain-orb {
      width: 56px; height: 56px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, rgba(216,212,228,0.4) 0%, transparent 30%),
                  radial-gradient(circle at center, rgba(200,160,240,0.6) 0%, rgba(140,120,255,0.4) 40%, rgba(20,24,40,0.3) 100%);
      box-shadow: inset 0 0 20px rgba(200,160,240,0.35),
                  inset 0 0 4px rgba(216,212,228,0.4),
                  0 0 20px rgba(140,120,255,0.35);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
    }
    .mock-orb-score {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px; font-weight: 400;
      color: var(--m-text); line-height: 1;
    }
    .mock-orb-divider {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; color: var(--m-text-dim);
      margin-top: 1px;
    }
    .mock-orb-state {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6px; color: var(--m-text-dim);
      text-transform: uppercase; letter-spacing: 0.1em;
      margin-top: 2px;
    }

    /* ─── Synthesis signals (9 dots — A/C/E × 3 clusters) ─── */
    .mock-syn-signals {
      display: flex; gap: 14px;
      margin-top: 8px; justify-content: center;
    }
    .mock-sig-cluster {
      display: flex; gap: 4px; align-items: center;
      position: relative;
    }
    .mock-sig-cluster::before {
      content: attr(data-leg);
      position: absolute;
      bottom: -10px; left: 50%;
      transform: translateX(-50%);
      font-family: 'JetBrains Mono', monospace;
      font-size: 6px;
      letter-spacing: 0.18em;
      color: var(--m-text-dim);
    }
    .mock-sig-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--m-text-dim);
    }
    .mock-sig-dot.green { background: #60d8a8; box-shadow: 0 0 4px rgba(96,216,168,0.5); }
    .mock-sig-dot.yellow { background: #c8a040; box-shadow: 0 0 4px rgba(200,160,64,0.4); }
    .mock-sig-dot.red { background: #e07080; box-shadow: 0 0 4px rgba(224,112,128,0.5); }

    /* ─── Synthesis mode tags ─── */
    .mock-syn-mode {
      display: flex; gap: 5px; margin-top: 14px; justify-content: center;
    }
    .mock-mode-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      padding: 2px 7px;
      border-radius: 3px;
      color: #c8a0f0;
      background: rgba(200,160,240,0.08);
      border: 1px solid rgba(200,160,240,0.18);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .mock-mode-tag.energy {
      color: var(--m-text-mid);
      background: var(--m-border);
      border-color: var(--m-border);
    }

    /* ─── Cadence ring (streak + W/M chips) ─── */
    .mock-brain-cadence {
      width: 80px;
      display: flex; flex-direction: column; align-items: center;
      padding: 8px;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      flex-shrink: 0;
    }
    .mock-cadence-ring {
      display: flex; flex-direction: column; align-items: center;
      gap: 4px; width: 100%;
    }
    .mock-cadence-top {
      display: flex; flex-direction: column; align-items: center;
    }
    .mock-streak {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px; font-weight: 500;
      color: #c8a0f0;
      line-height: 1;
    }
    .mock-streak-u {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; color: var(--m-text-dim);
      text-transform: uppercase; letter-spacing: 0.12em;
      margin-top: 2px;
    }
    .mock-cadence-div {
      width: 70%; height: 1px;
      background: var(--m-border);
      margin: 4px 0;
    }
    .mock-cadence-bot {
      display: flex; gap: 4px; justify-content: center;
    }
    .mock-cad-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--m-text-dim);
      background: rgba(200,160,240,0.08);
      border: 1px solid var(--m-border);
      letter-spacing: 0.08em;
      display: flex; align-items: center; gap: 3px;
    }
    .mock-cad-pip {
      width: 4px; height: 4px; border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 3px rgba(96,216,168,0.5);
    }

    /* ─── Compass with direction meaning labels ─── */
    .mock-brain-compass { width: 96px; padding: 18px 0; }
    .mock-compass-ring {
      width: 60px; height: 60px;
    }
    .mock-compass-dir {
      position: absolute;
      text-align: center;
      line-height: 1;
    }
    .mock-compass-dir .mock-dir {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 9px;
      color: var(--m-text-dim);
      letter-spacing: 0.1em;
    }
    .mock-compass-dir .mock-dir-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 5.5px;
      color: var(--m-text-dim);
      max-width: 58px;
      margin-top: 1px;
      letter-spacing: 0.02em;
    }
    .mock-compass-dir.n { top: -18px; left: 50%; transform: translateX(-50%); }
    .mock-compass-dir.e { right: -26px; top: 50%; transform: translateY(-50%); }
    .mock-compass-dir.s { bottom: -18px; left: 50%; transform: translateX(-50%); }
    .mock-compass-dir.w { left: -26px; top: 50%; transform: translateY(-50%); }
    .mock-compass-dir.active .mock-dir {
      color: #c8a0f0;
      text-shadow: 0 0 8px rgba(200,160,240,0.5);
    }
    .mock-compass-center {
      position: absolute;
      top: 50%; left: 50%;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #c8b8ff, #7060e0);
      transform: translate(-50%, -50%);
      box-shadow: 0 0 8px rgba(140,120,255,0.7);
    }

    /* ─── Triad leg: header + subtitle + signal decode + action card ─── */
    .mock-leg-header {
      display: flex; justify-content: space-between; align-items: center;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--m-border);
      margin-bottom: 3px;
    }
    .mock-leg-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .mock-leg-arrow { margin-left: 3px; opacity: 0.7; }
    .mock-leg-score {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      color: var(--m-text-dim);
    }
    .mock-leg-subtitle {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-size: 10px;
      color: var(--m-text-mid);
      margin-bottom: 4px;
    }
    .mock-signal-decode {
      display: flex; flex-direction: column; gap: 1px;
      margin-bottom: 6px;
    }
    .mock-sig-row {
      display: flex; align-items: center; gap: 5px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      padding: 1px 0;
    }
    .mock-sd-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
    .mock-sd-dot.green { background: #60d8a8; box-shadow: 0 0 3px rgba(96,216,168,0.6); }
    .mock-sd-dot.yellow { background: #c8a040; box-shadow: 0 0 3px rgba(200,160,64,0.5); }
    .mock-sd-dot.red { background: #e07080; box-shadow: 0 0 3px rgba(224,112,128,0.6); }
    .mock-sd-key { color: var(--m-text-dim); letter-spacing: 0.1em; width: 14px; }
    .mock-sd-name { color: var(--m-text); flex: 1; }
    .mock-sd-status { color: var(--m-text-dim); font-size: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
    .mock-sd-status.green { color: #60d8a8; }
    .mock-sd-status.yellow { color: #c8a040; }
    .mock-sd-status.red { color: #e07080; }

    .mock-action-card {
      background: rgba(140,120,255,0.04);
      border: 1px solid var(--m-border);
      border-radius: 4px;
      padding: 6px 8px;
      margin-top: 4px;
    }
    .mock-action-card.risen-action {
      background: rgba(200,160,240,0.08);
      border-color: rgba(200,160,240,0.25);
    }
    .mock-ac-header {
      display: flex; align-items: center; gap: 5px;
      margin-bottom: 3px;
    }
    .mock-ac-urgency {
      width: 4px; height: 4px; border-radius: 50%;
      background: #60d8a8;
    }
    .mock-ac-urgency.critical {
      background: #e07080;
      box-shadow: 0 0 4px rgba(224,112,128,0.6);
    }
    .mock-ac-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6px;
      color: var(--m-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }
    .mock-ac-move {
      font-size: 9px;
      color: var(--m-text);
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .mock-ac-context {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      color: var(--m-text-dim);
    }

    /* Inner Move whisper */
    .mock-cockpit-innermove {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      margin-top: 10px;
      background: rgba(200,160,240,0.04);
      border: 1px solid rgba(200,160,240,0.12);
      border-radius: 6px;
    }
    .mock-im-icon { font-size: 12px; color: #c8a0f0; }
    .mock-im-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--m-text-dim);
    }
    .mock-im-text {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-size: 11px;
      color: var(--m-text-mid);
      flex: 1;
    }

    /* ═══ Playback speed toggle (above preview-frame) ═══ */
    .mock-controls {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      max-width: 900px;
      margin: 32px auto 20px;
      padding: 0 8px;
    }
    .mock-speed-btn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(200,160,240,0.06);
      border: 1px solid rgba(200,160,240,0.2);
      color: var(--text-mid, #9898b8);
      cursor: pointer;
      transition: all 0.18s ease;
      flex-shrink: 0;
    }
    .mock-speed-btn:hover {
      background: rgba(200,160,240,0.12);
      border-color: rgba(200,160,240,0.35);
      color: #c8a0f0;
    }
    .mock-speed-btn.slow {
      background: rgba(212,165,116,0.1);
      border-color: rgba(212,165,116,0.32);
      color: #d4a574;
    }
    .mock-controls-hint {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.2rem;
      color: var(--text-dim, #606080);
      letter-spacing: 0.04em;
    }
    @media (max-width: 600px) {
      .mock-controls-hint { display: none; }
    }

    /* ═══ New desktop mock UI: tool card, ops container, write card, memory, pattern ═══ */
    /* These match real ACE Desktop chat-renderer output so the animation is honest. */

    /* Single tool card (Read, Edit, Bash, Write — collapsed) */
    .mock-tool-card {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 12px;
      border: 1px solid var(--m-border);
      border-radius: 6px;
      background: rgba(16,20,32,0.4);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
      margin: 6px 0;
    }
    .mock-tool-icon { font-size: 11px; }
    .mock-tool-name { font-weight: 500; color: var(--m-text); }
    .mock-tool-path { color: var(--m-text-dim); }
    .mock-tool-check { margin-left: auto; color: #60d8a8; font-size: 11px; }

    /* Ops container with source chips on each row */
    .mock-ops-card {
      border: 1px solid var(--m-border);
      border-radius: 6px;
      background: rgba(16,20,32,0.4);
      margin: 8px 0;
      overflow: hidden;
    }
    .mock-ops-card-header {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
      border-bottom: 1px solid var(--m-border);
    }
    .mock-ops-count { font-weight: 500; color: var(--m-text); }
    .mock-ops-sources {
      color: var(--m-text-dim);
      font-size: 9px;
      margin-left: auto;
    }
    .mock-ops-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-dim);
      border-top: 1px solid rgba(140,120,255,0.04);
    }
    .mock-ops-row:first-of-type { border-top: none; }
    /* Collapsed ops card: only the header visible (matches real product default) */
    .mock-ops-card.collapsed .mock-ops-rows {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    }
    .mock-ops-card .mock-ops-rows {
      max-height: 400px;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    }
    .mock-ops-card.collapsed .mock-ops-card-header {
      border-bottom: none;
    }

    /* ═══ Parallel pane (split-view for multi-agent demo) ═══ */
    .mock-parallel-pane {
      width: 0;
      max-width: 100%;
      min-width: 0;
      opacity: 0;
      overflow: hidden;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.5s ease,
                  padding 0.5s ease;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--m-border);
      background: rgba(16,20,32,0.25);
      flex-shrink: 0;
    }
    .mock-body.split .mock-parallel-pane {
      width: 48%;
      opacity: 1;
    }
    /* Don't render pane contents while collapsed — prevents phantom overflow at narrow viewports */
    .mock-body:not(.split) .mock-parallel-pane > * { display: none; }
    .mock-body.split .mock-main {
      width: 52%;
      flex: none;
    }
    .mock-parallel-header {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--m-border);
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: var(--m-text-mid);
      flex-shrink: 0;
      background: rgba(16,20,32,0.4);
    }
    .mock-pp-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 6px rgba(96,216,168,0.6);
      animation: mock-pp-pulse 1.6s ease-in-out infinite;
    }
    @keyframes mock-pp-pulse {
      0%, 100% { box-shadow: 0 0 4px rgba(96,216,168,0.4); }
      50% { box-shadow: 0 0 10px rgba(96,216,168,0.9); }
    }
    .mock-pp-name { flex: 1; color: var(--m-text); font-weight: 500; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mock-pp-status {
      font-size: 7px;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(96,216,168,0.1);
      border: 1px solid rgba(96,216,168,0.22);
      color: #60d8a8;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      flex-shrink: 0;
    }
    .mock-parallel-body {
      flex: 1;
      padding: 12px 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 12px;
      color: var(--m-text);
    }
    .mock-parallel-body .mock-msg {
      max-width: 95%;
    }
    body.light .mock-parallel-pane { background: rgba(240,238,246,0.5); }
    .mock-ops-src {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 7px;
      border: 1px solid rgba(140,120,255,0.15);
      border-radius: 999px;
      background: rgba(140,120,255,0.06);
      color: var(--m-text-mid);
      font-size: 9px;
      flex-shrink: 0;
    }
    .mock-ops-row-desc { flex: 1; }
    .mock-ops-check { color: #60d8a8; font-size: 10px; }

    /* Write tool card with markdown preview + approval buttons */
    .mock-write-card {
      border: 1px solid var(--m-border);
      border-radius: 6px;
      background: rgba(16,20,32,0.4);
      margin: 8px 0;
      overflow: hidden;
    }
    .mock-write-header {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
      border-bottom: 1px solid var(--m-border);
      min-width: 0;
    }
    .mock-write-header .mock-tool-path {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mock-write-header .mock-tool-name { flex-shrink: 0; }
    .mock-tool-card .mock-tool-path {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
    .mock-write-preview { word-break: break-word; }
    .mock-write-preview {
      padding: 10px 12px;
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      line-height: 1.6;
      color: var(--m-text-mid);
      background: rgba(16,20,32,0.25);
    }
    .mock-write-preview strong, .mock-write-preview b { color: var(--m-text); }
    .mock-write-footer {
      display: flex; gap: 8px;
      padding: 8px 12px;
      border-top: 1px solid var(--m-border);
    }
    .mock-approval-btn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 3px 10px;
      border-radius: 3px;
      border: 1px solid var(--m-border);
      color: var(--m-text-dim);
      cursor: default;
    }
    .mock-approval-btn.approve { border-color: rgba(96,216,168,0.35); color: #60d8a8; }
    .mock-approval-btn.approved { background: rgba(96,216,168,0.12); border-color: rgba(96,216,168,0.45); color: #60d8a8; }
    .mock-approval-btn.deny { color: var(--m-text-dim); }

    /* Memory card — matches real ACE Desktop `.chat-memory-card` */
    .mock-memory-card {
      border: 1px solid var(--m-border);
      border-radius: 6px;
      background: rgba(16,20,32,0.4);
      margin: 8px 0;
      overflow: hidden;
    }
    .mock-memory-header {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
    }
    .mock-memory-icon { font-size: 12px; }
    .mock-memory-title { font-weight: 500; color: var(--m-text); }
    .mock-memory-type {
      font-size: 8px;
      padding: 1px 6px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border: 1px solid transparent;
      margin-left: 4px;
    }
    .mock-memory-type.project { background: rgba(96,216,168,0.10); color: #60d8a8; border-color: rgba(96,216,168,0.22); }
    .mock-memory-type.feedback { background: rgba(212,165,116,0.10); color: #d4a574; border-color: rgba(212,165,116,0.22); }
    .mock-memory-type.user { background: rgba(200,160,240,0.10); color: #c8a0f0; border-color: rgba(200,160,240,0.22); }
    .mock-memory-type.reference { background: rgba(140,140,168,0.06); color: var(--m-text-dim); border-color: rgba(140,140,168,0.18); }
    .mock-memory-time { margin-left: auto; color: var(--m-text-dim); font-size: 8px; }
    .mock-memory-body {
      padding: 0 12px 10px;
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      line-height: 1.5;
      color: var(--m-text);
    }

    /* Pattern card — /blind-spots output with warm-gold left border */
    .mock-pattern-card {
      border: 1px solid var(--m-border);
      border-left: 3px solid #d4a574;
      border-radius: 6px;
      background: rgba(16,20,32,0.3);
      padding: 10px 14px;
      margin: 8px 0;
    }
    .mock-pattern-header {
      display: flex; align-items: center; gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: #d4a574;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
    }
    .mock-pattern-icon { font-size: 11px; }
    .mock-pattern-body {
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      line-height: 1.55;
      color: var(--m-text);
    }

    /* Gold bloom for memory card on mount */
    @keyframes mock-memory-bloom {
      0%   { opacity: 0; transform: translateY(6px); box-shadow: 0 0 0 rgba(212,165,116,0); }
      25%  { opacity: 1; transform: translateY(0); box-shadow: 0 0 18px rgba(212,165,116,0.28); }
      100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 rgba(212,165,116,0); }
    }
    .mock-memory-card.bloom { animation: mock-memory-bloom 1.8s ease-out; }

    /* Light-mode fidelity */
    body.light .mock-memory-card,
    body.light .mock-pattern-card,
    body.light .mock-ops-card,
    body.light .mock-write-card,
    body.light .mock-tool-card {
      background: rgba(255,255,255,0.5);
      border-color: rgba(100,90,160,0.18);
    }
    body.light .mock-write-preview { background: rgba(255,255,255,0.7); }
    body.light .mock-memory-type.feedback { background: rgba(184,136,85,0.12); color: #a06a3a; border-color: rgba(184,136,85,0.28); }
    body.light .mock-pattern-card { border-left-color: #a06a3a; }
    body.light .mock-pattern-header { color: #a06a3a; }
    @keyframes mock-memory-bloom-light {
      0%   { opacity: 0; transform: translateY(6px); box-shadow: 0 0 0 rgba(184,136,85,0); }
      25%  { opacity: 1; transform: translateY(0); box-shadow: 0 0 18px rgba(184,136,85,0.32); }
      100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 rgba(184,136,85,0); }
    }
    body.light .mock-memory-card.bloom { animation: mock-memory-bloom-light 1.8s ease-out; }

    @media (prefers-reduced-motion: reduce) {
      .mock-memory-card.bloom { animation: none; }
      body.light .mock-memory-card.bloom { animation: none; }
    }

    /* Chat view */
    .mock-chat {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .mock-messages {
      flex: 1;
      padding: 16px 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mock-msg {
      max-width: 72%;
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.6;
    }
    .mock-msg-user {
      align-self: flex-end;
      background: var(--m-msg-user);
      border: 1px solid var(--m-border-strong);
      color: var(--m-text);
      transition: background 0.8s ease, border-color 0.8s ease, color 0.8s ease;
      border-bottom-right-radius: 4px;
    }
    .mock-msg-assistant {
      align-self: flex-start;
      background: transparent;
      color: var(--m-text-mid);
      transition: color 0.8s ease;
      max-width: 90%;
    }
    .mock-msg-assistant strong { color: var(--m-text); transition: color 0.8s ease; }
    .mock-msg-assistant code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      background: var(--m-code-bg);
      padding: 1px 5px;
      border-radius: 3px;
      color: #c8a0f0;
    }
    .mock-typing {
      display: flex;
      gap: 4px;
      padding: 10px 14px;
      align-self: flex-start;
    }
    .mock-typing span {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(140,120,255,0.3);
      animation: mockTyping 1.2s ease-in-out infinite;
    }
    .mock-typing span:nth-child(2) { animation-delay: 0.15s; }
    .mock-typing span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes mockTyping {
      0%, 100% { opacity: 0.3; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-3px); }
    }
    .mock-chat-input {
      padding: 10px 14px;
      border-top: 1px solid var(--m-border);
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }
    .mock-chat-textarea {
      flex: 1;
      background: var(--m-glass);
      border: 1px solid var(--m-border-strong);
      transition: background 0.8s ease, border-color 0.8s ease;
      border-radius: 10px;
      padding: 8px 12px;
      color: var(--m-text);
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      resize: none;
      outline: none;
      height: 34px;
    }
    .mock-chat-send {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: rgba(200,160,240,0.1);
      border: 1px solid rgba(200,160,240,0.12);
      transition: background 0.8s ease, border-color 0.8s ease;
      color: #c8a0f0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    /* ═══ ZOOM FOCUS ═══ */
    .mock-body {
      transform-origin: top left;
      will-change: transform;
    }

    /* ═══ DECK PREVIEW ═══ */
    .mock-deck-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      margin-top: 8px;
      padding: 8px;
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      transition: background 0.8s ease, border-color 0.8s ease;
    }
    .mock-slide {
      aspect-ratio: 16 / 10;
      border-radius: 3px;
      background: var(--m-surface);
      border: 1px solid var(--m-border);
      padding: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      transition: background 0.8s ease, border-color 0.8s ease;
    }
    .mock-slide-title {
      height: 2px;
      width: 60%;
      border-radius: 1px;
      margin-bottom: 2px;
    }
    .mock-slide-line {
      height: 1px;
      border-radius: 1px;
      background: var(--m-text-dim);
      opacity: 0.3;
      margin-top: 1px;
    }
    .mock-slide-bar {
      height: 8px;
      border-radius: 2px;
      margin-top: auto;
      opacity: 0.5;
    }
    .mock-slide-circle {
      width: 8px; height: 8px;
      border-radius: 50%;
      margin: auto;
      opacity: 0.6;
    }

    /* ═══ COHERENCE OUTCOME ═══ */
    .mock-coherence-dot.glowing {
      animation: coherenceGlow 1.5s ease-in-out 3;
    }
    @keyframes coherenceGlow {
      0%, 100% { box-shadow: 0 0 6px rgba(96,216,168,0.4); transform: scale(1); }
      50% { box-shadow: 0 0 16px 4px rgba(96,216,168,0.6); transform: scale(1.8); }
    }
    .mock-coherence-ring {
      position: absolute;
      width: 16px; height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(96,216,168,0.3);
      top: 50%; right: 38px;
      transform: translate(50%, -50%) scale(0);
      pointer-events: none;
    }

    /* ═══ BREATH VIEW ═══ */
    .mock-breath {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--m-bg);
      transition: background 0.8s ease;
      z-index: 2;
    }
    .mock-breath-orb-wrap {
      position: relative;
      width: 100px; height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mock-breath-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(96,216,168,0.12);
    }
    .mock-breath-ring-outer { width: 96px; height: 96px; }
    .mock-breath-ring-inner { width: 68px; height: 68px; }
    .mock-breath-orb {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 38%, #60d8a8, rgba(96,216,168,0.3) 60%, transparent 100%);
      box-shadow: 0 0 20px rgba(96,216,168,0.2);
    }
    .mock-breath-phase {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #60d8a8;
      margin-top: 18px;
    }
    .mock-breath-counter {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--m-text-dim);
      margin-top: 6px;
      transition: color 0.8s ease;
    }
    .mock-breath-protocol {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--m-text-dim);
      margin-top: 14px;
      padding: 3px 10px;
      border: 1px solid rgba(96,216,168,0.15);
      border-radius: 4px;
      transition: color 0.8s ease, border-color 0.8s ease;
    }

    /* ═══ INTENTION ═══ */
    .mock-intention-word {
      display: inline;
      opacity: 0;
    }
    .mock-msg-intention {
      position: relative;
      overflow: hidden;
    }
    .mock-msg-intention .shimmer-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(200,160,240,0.12) 50%, transparent 100%);
      transform: translateX(-100%);
      pointer-events: none;
      border-radius: inherit;
    }
    .mock-msg-locked {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #c8a0f0;
      opacity: 0;
      padding: 6px 0 2px;
    }

    /* ═══ COHERENCE CULMINATION ═══ */
    .mock-triad-ring {
      position: absolute;
      border-radius: 50%;
      border: 1.5px solid;
      opacity: 0;
      pointer-events: none;
    }
    .mock-triad-ring-auth { width: 120px; height: 120px; border-color: #c8a0f0; }
    .mock-triad-ring-cap  { width: 120px; height: 120px; border-color: #60d8a8; }
    .mock-triad-ring-exp  { width: 120px; height: 120px; border-color: #e080a0; }
    .mock-coherence-score {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 28px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: transparent;
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
      -webkit-background-clip: text;
      background-clip: text;
      opacity: 0;
      margin-top: 14px;
    }
    .mock-coherence-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--m-text-dim);
      opacity: 0;
      margin-top: 4px;
      transition: color 0.8s ease;
    }
    .mock-breath-orb.coherent {
      background: radial-gradient(circle at 40% 38%, #8878ff 0%, #c8a0f0 40%, #60d8a8 70%, transparent 100%);
      box-shadow: 0 0 30px rgba(140,120,255,0.3), 0 0 60px rgba(96,216,168,0.15);
    }

    /* ═══ SESSION SUMMARY ═══ */
    .mock-summary {
      position: absolute;
      inset: 0;
      background: var(--m-bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 3;
      transition: background 0.8s ease;
    }
    .mock-summary-header {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--m-text-dim);
      margin-bottom: 6px;
      transition: color 0.8s ease;
    }
    .mock-summary-time {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 300;
      color: var(--m-text);
      margin-bottom: 18px;
      transition: color 0.8s ease;
    }
    .mock-summary-list {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      max-width: 320px;
    }
    .mock-summary-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid var(--m-border);
      font-size: 10px;
      line-height: 1.5;
      transition: border-color 0.8s ease;
    }
    .mock-summary-item:last-child { border-bottom: none; }
    .mock-summary-verb {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      flex-shrink: 0;
      width: 62px;
    }
    .mock-summary-desc {
      color: var(--m-text-mid);
      transition: color 0.8s ease;
    }
    .mock-summary-coherence {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      padding-top: 12px;
    }
    .mock-summary-coh-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--m-text-dim);
      transition: color 0.8s ease;
    }
    .mock-summary-coh-val {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 20px;
      font-weight: 300;
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .mock-summary-tagline {
      font-family: var(--serif);
      font-size: 14px;
      font-style: italic;
      color: var(--m-text-dim);
      margin-top: 18px;
      transition: color 0.8s ease;
    }

    /* ═══ BREATH PROMPT ═══ */
    .mock-breath-prompt {
      background: var(--m-card);
      border: 1px solid rgba(96,216,168,0.15);
      border-radius: 10px;
      padding: 14px 16px;
      margin: 6px 0;
      transition: background 0.8s ease, border-color 0.8s ease;
    }
    .mock-breath-prompt-text {
      font-size: 12px;
      color: var(--m-text-mid);
      line-height: 1.5;
      margin-bottom: 10px;
      transition: color 0.8s ease;
    }
    .mock-breath-prompt-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #60d8a8;
      background: rgba(96,216,168,0.08);
      border: 1px solid rgba(96,216,168,0.2);
      border-radius: 6px;
      padding: 7px 14px;
      cursor: pointer;
    }
    .mock-breath-prompt-btn .bp-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #60d8a8;
      animation: mockSomaticPulse 2s ease-in-out infinite;
    }

    /* ═══ AGENT & ARTIFACT SCENE STYLES ═══ */
    .mock-agents-row {
      display: flex;
      gap: 10px;
      margin: 10px 0;
      flex-wrap: wrap;
    }
    .mock-agent-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: var(--m-text-mid);
      background: var(--m-card);
      border: 1px solid var(--m-border);
      border-radius: 6px;
      padding: 5px 10px;
      transition: border-color 0.4s, box-shadow 0.4s, background 0.8s ease;
    }
    .mock-agent-pill.active {
      border-color: rgba(200,160,240,0.3);
      box-shadow: 0 0 10px rgba(200,160,240,0.1);
    }
    .mock-agent-pill.done {
      border-color: rgba(96,216,168,0.3);
    }
    .mock-agent-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--m-text-dim);
      transition: background 0.3s;
    }
    .mock-agent-pill.active .mock-agent-dot {
      background: #c8a0f0;
      animation: mockAgentPulse 1s ease-in-out infinite;
    }
    .mock-agent-pill.done .mock-agent-dot {
      background: #60d8a8;
      animation: none;
    }
    @keyframes mockAgentPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.3); }
    }
    .mock-agent-status {
      font-size: 8px;
      color: var(--m-text-dim);
      font-family: 'JetBrains Mono', monospace;
      margin: 4px 0 6px;
      transition: color 0.8s ease;
    }
    .mock-artifact-card {
      background: var(--m-card);
      border: 1px solid rgba(96,216,168,0.2);
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      transition: background 0.8s ease, border-color 0.8s ease;
    }
    .mock-artifact-icon {
      width: 32px; height: 32px;
      border-radius: 6px;
      background: rgba(96,216,168,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .mock-artifact-info { flex: 1; }
    .mock-artifact-name {
      font-size: 11px;
      color: var(--m-text);
      font-weight: 500;
      transition: color 0.8s ease;
    }
    .mock-artifact-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--m-text-dim);
      margin-top: 2px;
      transition: color 0.8s ease;
    }
    .mock-artifact-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: #60d8a8;
      background: rgba(96,216,168,0.1);
      padding: 2px 8px;
      border-radius: 4px;
    }
    .mock-coaching-msg {
      color: var(--m-text-mid);
      font-size: 13px;
      line-height: 1.6;
      font-style: italic;
      padding: 12px 16px;
      border-left: 2px solid #e080a0;
      margin: 8px 0;
      background: rgba(224,128,160,0.04);
      border-radius: 0 8px 8px 0;
      transition: color 0.8s ease, background 0.8s ease;
    }
    .mock-somatic-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: #e080a0;
      margin-top: 6px;
    }
    .mock-somatic-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #e080a0;
      animation: mockSomaticPulse 2s ease-in-out infinite;
    }
    @keyframes mockSomaticPulse {
      0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(224,128,160,0); }
      50% { opacity: 1; box-shadow: 0 0 8px 2px rgba(224,128,160,0.3); }
    }

    /* Responsive mockup scaling */
    @media (max-width: 768px) {
      .mock-sidebar { width: 44px; padding: 8px 4px; }
      .mock-sidebar-logo-text, .mock-sidebar-commands,
      .mock-sidebar-stats, .mock-nav li span { display: none; }
      .mock-nav li { justify-content: center; padding: 8px; }
      .mock-greeting { font-size: 14px; }
      .mock-triad-grid { grid-template-columns: 1fr; }
      .mock-stats-row { grid-template-columns: 1fr; }
      .mock-stat-card .value { font-size: 14px; }
    }

    /* ═══ COMPARISON GRID ═══ */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    @media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: stretch; } }
    .comparison-col {
      padding: 4rem 3.5rem;
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .comparison-diy {
      background: rgba(74, 74, 102, 0.04);
    }
    @property --ace-border-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes ace-border-spin {
      to { --ace-border-angle: 360deg; }
    }
    .comparison-ace {
      position: relative;
      background: rgba(200, 160, 240, 0.05);
      border: none;
      animation: ace-border-spin 4s linear infinite;
    }
    .comparison-ace::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 9px;
      padding: 1px;
      background: conic-gradient(
        from var(--ace-border-angle),
        #8878ff, #c8a0f0, #60d8a8, #e080a0, #8878ff
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      filter: blur(0.5px);
    }
    .comparison-ace::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 12px;
      background: conic-gradient(
        from var(--ace-border-angle),
        rgba(136,120,255,0.15), rgba(200,160,240,0.15), rgba(96,216,168,0.15), rgba(224,128,160,0.15), rgba(136,120,255,0.15)
      );
      filter: blur(12px);
      pointer-events: none;
      z-index: -1;
      transition: filter 0.4s, opacity 0.4s;
    }
    .comparison-ace:hover {
      background: linear-gradient(135deg, rgba(136,120,255,0.08), rgba(200,160,240,0.06), rgba(96,216,168,0.05));
    }
    .comparison-ace:hover::after {
      filter: blur(18px);
      opacity: 1.5;
    }
    .comparison-heading {
      font-family: var(--serif);
      font-size: 2.2rem;
      font-weight: 400;
      margin-bottom: 2rem;
      color: var(--text-dim);
    }
    .comparison-list {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 1.6rem;
    }
    .comparison-list li {
      font-size: 1.7rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.65;
      padding-left: 0;
      position: static;
      display: flex;
      align-items: baseline;
      gap: 0.9rem;
    }
    .comparison-ace .comparison-list li {
      font-size: 1.58rem;
      color: var(--text);
    }
    .comparison-list li::before {
      flex-shrink: 0;
      font-size: 1.15rem;
      line-height: 1.65;
    }
    .comparison-diy .comparison-list li::before {
      content: '×';
      color: rgba(220, 80, 80, 0.82);
      font-weight: 500;
    }
    .comparison-ace .comparison-list li::before {
      content: '→';
      color: #c8a044;
      font-size: 1.05rem;
    }

    /* ═══ PROOF STRIP ═══ */
    .proof-strip {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
      text-align: center;
    }
    @media (min-width: 768px) { .proof-strip { grid-template-columns: repeat(4, 1fr); } }
    .proof-item {
      padding: 2rem 0;
    }
    .proof-value {
      display: block;
      font-family: var(--serif);
      font-size: clamp(3.2rem, 5vw, 4.8rem);
      font-weight: 400;
      background: linear-gradient(135deg, var(--authority), var(--capacity));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 0.8rem;
    }
    .proof-label {
      font-family: var(--mono);
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-dim);
    }

    /* ═══ PRINCIPLES COMPACT ═══ */
    .principles-compact {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media (min-width: 768px) { .principles-compact { grid-template-columns: repeat(4, 1fr); } }
    .principle-compact-item {
      text-align: center;
      padding: 3rem 2rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      transition: border-color 0.4s, box-shadow 0.4s;
    }
    .principle-compact-item:hover {
      border-color: rgba(200,160,240,0.3);
      box-shadow: 0 0 30px rgba(136,120,255,0.12), 0 0 60px rgba(200,160,240,0.06);
      background: linear-gradient(135deg, rgba(136,120,255,0.06), rgba(200,160,240,0.04), rgba(96,216,168,0.04));
    }
    .principle-compact-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 1.5rem;
    }
    .principle-compact-icon svg {
      width: 100%;
      height: 100%;
    }
    .principle-compact-name {
      display: block;
      font-family: var(--serif);
      font-size: 2.6rem;
      margin-bottom: 0.6rem;
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .principle-compact-desc {
      font-size: 1.9rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.6;
    }

    /* ═══ SHIFT ═══ */
    .shift-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8rem;
      align-items: start;
    }
    @media (min-width: 900px) { .shift-grid { grid-template-columns: 1.6fr 1fr; } }

    .shift-pairs { display: flex; flex-direction: column; gap: 4rem; }
    .shift-pair {
      display: flex;
      align-items: center;
      gap: 2.5rem;
    }
    .shift-before {
      font-size: 2rem;
      color: var(--text-mid);
      flex: 1;
      text-align: right;
      white-space: nowrap;
    }
    .shift-arrow {
      width: 24px;
      height: 1px;
      position: relative;
      flex-shrink: 0;
    }
    .shift-arrow::before {
      content: '';
      position: absolute;
      inset: 0;
    }
    .shift-after {
      font-family: var(--serif);
      font-size: clamp(2rem, 3vw, 2.8rem);
      font-weight: 400;
      flex: 1;
    }
    /* ═══ SHIFT STRIKE-THROUGH ANIMATION ═══ */
    .shift-pair .shift-before {
      position: relative;
      display: inline-block;
      text-decoration: none;
    }
    .shift-pair .shift-before::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 0;
      height: 1.5px;
      background: rgba(212,165,116,0.65);
      transition: width 0.4s ease-out;
    }
    .shift-pair.struck .shift-before::after {
      width: 100%;
    }
    .shift-pair .shift-after {
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .shift-pair:not(.struck) .shift-after {
      opacity: 0.3;
      transform: translateX(-10px);
    }
    .shift-pair.struck .shift-after {
      opacity: 1;
      transform: translateX(0);
    }

    /* ═══ CAPABILITY STRIP ═══ */
    .mock-capability-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.8rem 1.4rem;
      margin: 3.2rem auto 0;
      max-width: 72rem;
      padding: 1.8rem 2rem 0;
      border-top: 1px solid rgba(200,160,240,0.08);
      font-family: var(--mono);
      font-size: 1.15rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
    }
    .mock-cap-label {
      color: var(--text-dim);
      font-size: 1.15rem;
      letter-spacing: 0.18em;
      padding-right: 1.4rem;
      border-right: 1px solid rgba(200,160,240,0.15);
      margin-right: 0.6rem;
    }
    .mock-cap-item {
      color: var(--text-mid);
      font-weight: 400;
      font-size: 1.2rem;
      padding: 0.6rem 1.4rem;
      border-radius: 100px;
      border: 1px solid rgba(200,160,240,0.2);
      background: rgba(200,160,240,0.05);
      transition: background 0.3s, border-color 0.3s;
    }
    .mock-cap-item:hover {
      background: rgba(200,160,240,0.1);
      border-color: rgba(200,160,240,0.35);
    }
    .mock-cap-item[data-tooltip] {
      position: relative;
      cursor: default;
    }
    .mock-cap-item[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(18,12,30,0.97);
      border: 1px solid rgba(200,160,240,0.25);
      color: var(--text-mid);
      font-family: var(--sans);
      font-size: 1.25rem;
      font-weight: 300;
      letter-spacing: 0.01em;
      text-transform: none;
      line-height: 1.65;
      padding: 1.4rem 1.8rem;
      border-radius: 8px;
      white-space: normal;
      width: min(34rem, 88vw);
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
      z-index: 100;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .mock-cap-item[data-tooltip]::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(200,160,240,0.25);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
      z-index: 100;
    }
    .mock-cap-item[data-tooltip]:hover::after,
    .mock-cap-item[data-tooltip]:hover::before,
    .mock-cap-item[data-tooltip]:focus::after,
    .mock-cap-item[data-tooltip]:focus::before {
      opacity: 1;
    }
    /* Mobile: flip tooltip below pill */
    @media (max-width: 768px) {
      .mock-cap-item[data-tooltip]::after {
        bottom: auto;
        top: calc(100% + 12px);
        width: min(28rem, 84vw);
      }
      .mock-cap-item[data-tooltip]::before {
        bottom: auto;
        top: calc(100% + 6px);
        border-top-color: transparent;
        border-bottom-color: rgba(200,160,240,0.25);
      }
    }

    /* ═══ DAY TIMELINE ═══ */
    .day-rows { display: flex; flex-direction: column; gap: 8rem; }
    .day-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .day-row { grid-template-columns: 14rem 1fr; gap: 6rem; }
    }
    .day-time {
      font-family: var(--serif);
      font-size: clamp(3rem, 5vw, 5rem);
      color: var(--text-dim);
      line-height: 1;
      transition: color 0.5s;
    }
    .day-row:hover .day-time { color: var(--text-mid); }
    .day-content {
      border-left: 2px solid;
      padding-left: 3rem;
    }
    .day-action {
      font-family: var(--serif);
      font-size: clamp(2rem, 3vw, 2.6rem);
      margin-bottom: 0.8rem;
    }
    .day-desc {
      font-size: 1.8rem;
      color: var(--text-mid);
      max-width: 50rem;
      line-height: 1.7;
      font-weight: 300;
    }

    /* ═══ CAPABILITIES ═══ */
    .cap-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6rem;
    }
    @media (min-width: 768px) { .cap-grid { grid-template-columns: 1fr 1fr; gap: 6rem 10rem; } }
    @media (min-width: 1100px) { .cap-grid { grid-template-columns: 1fr 1fr 1fr; } }

    .cap-item { cursor: default; }
    .cap-title {
      font-family: var(--serif);
      font-size: clamp(2rem, 2.5vw, 2.6rem);
      font-weight: 400;
      margin-bottom: 1rem;
      transition: opacity 0.3s;
    }
    .cap-item:hover .cap-title { opacity: 0.7; }
    .cap-desc {
      font-size: 1.7rem;
      color: var(--text-mid);
      line-height: 1.7;
      font-weight: 300;
      transition: color 0.3s;
    }
    .cap-item:hover .cap-desc { color: var(--text); }

    /* ═══ TRIAD ═══ */
    .triad-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8rem;
    }
    @media (min-width: 900px) { .triad-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6rem; } }

    .triad-name {
      font-family: var(--serif);
      font-size: clamp(3.5rem, 5vw, 6rem);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 1.5rem;
      transition: opacity 0.4s;
    }
    .triad-col:hover .triad-name { opacity: 0.75; }
    .triad-tagline {
      font-family: var(--serif);
      font-style: italic;
      font-size: 2rem;
      opacity: 0.75;
      margin-bottom: 2rem;
    }
    .triad-desc {
      font-size: 1.9rem;
      color: var(--text-mid);
      line-height: 1.7;
      margin-bottom: 2rem;
      font-weight: 300;
    }
    .triad-output {
      font-family: var(--mono);
      font-size: 1.4rem;
      color: var(--text-mid);
      letter-spacing: 0.04em;
      margin-top: -1rem;
      margin-bottom: 2rem;
    }
    .triad-signals {
      font-family: var(--mono);
      font-size: 1rem;
      letter-spacing: 0.15em;
      color: var(--text-dim);
      text-transform: uppercase;
    }

    /* ═══ VIDEO ═══ */
    .video-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6rem;
      align-items: center;
    }
    @media (min-width: 900px) { .video-grid { grid-template-columns: 1fr 1.5fr; gap: 8rem; } }

    .video-placeholder {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: 4px;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .play-btn {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      border: 1px solid rgba(200, 160, 240, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s, transform 0.3s;
    }
    .play-btn:hover {
      border-color: var(--authority);
      transform: scale(1.08);
    }
    .play-btn svg { margin-left: 3px; }

    /* ═══ PRINCIPLES GRID ═══ */
    .principles-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem;
      margin-top: 5rem;
    }
    @media (max-width: 768px) { .principles-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
    .principle-item {
      text-align: center;
      padding: 2.5rem 1.5rem;
    }
    .principle-icon {
      width: 48px; height: 48px;
      margin: 0 auto 1.8rem;
    }
    .principle-icon svg {
      width: 100%; height: 100%;
    }
    .principle-name {
      font-family: var(--serif);
      font-size: 2rem;
      margin-bottom: 0.8rem;
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .principle-desc {
      font-size: 1.5rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.6;
    }

    /* ═══ BUILD ═══ */
    .build-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5rem;
    }
    @media (min-width: 768px) { .build-grid { grid-template-columns: 1fr 1fr; gap: 5rem 8rem; } }
    @media (min-width: 1100px) { .build-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4rem; } }

    .build-phase {
      font-family: var(--mono);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      margin-bottom: 1.2rem;
    }
    .build-title {
      font-family: var(--serif);
      font-size: 2.2rem;
      font-weight: 400;
      margin-bottom: 0.8rem;
    }
    .build-desc {
      font-size: 1.6rem;
      color: var(--text-mid);
      line-height: 1.6;
      font-weight: 300;
    }

    .included-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 3rem;
    }
    .included-list span {
      font-size: 1.7rem;
      color: var(--text-mid);
      font-weight: 300;
    }

    /* ═══ KNOWLEDGE GRAPH ═══ */
    .compound-grid {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 6rem;
      align-items: center;
      margin-top: 5rem;
    }
    @media (max-width: 768px) { .compound-grid { grid-template-columns: 1fr; } }
    .graph-wrap {
      position: relative;
      aspect-ratio: 1;
      max-width: 560px;
      width: 100%;
      margin: 0 auto;
    }
    .graph-wrap svg { width: 100%; height: 100%; }
    .graph-edge {
      stroke: rgba(140,120,255,0.12);
      stroke-width: 1;
      transition: stroke 0.4s ease, stroke-width 0.4s ease, opacity 0.4s ease;
    }
    .graph-edge.highlighted {
      stroke: url(#graphGrad);
      stroke-width: 1.5;
      opacity: 1;
    }
    /* Node aliveness — three glow amplitudes staggered across the 12 nodes */
    @keyframes nodeGlowSoft {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(96,216,168,0)); }
      50% { filter: drop-shadow(0 0 4px rgba(96,216,168,0.35)); }
    }
    @keyframes nodeGlowMed {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(200,160,240,0)); }
      50% { filter: drop-shadow(0 0 7px rgba(200,160,240,0.5)); }
    }
    @keyframes nodeGlowBright {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(140,120,255,0)); }
      50% { filter: drop-shadow(0 0 11px rgba(140,120,255,0.6)); }
    }
    .graph-node {
      cursor: pointer;
      transition: filter 0.3s ease;
      animation: nodeGlowMed 5.5s ease-in-out infinite;
    }
    .graph-node:nth-of-type(1)  { animation: nodeGlowBright 6.8s ease-in-out -0.3s infinite; }
    .graph-node:nth-of-type(2)  { animation: nodeGlowMed 5.2s ease-in-out -1.7s infinite; }
    .graph-node:nth-of-type(3)  { animation: nodeGlowBright 7.1s ease-in-out -3.4s infinite; }
    .graph-node:nth-of-type(4)  { animation: nodeGlowSoft 4.6s ease-in-out -0.9s infinite; }
    .graph-node:nth-of-type(5)  { animation: nodeGlowMed 6.3s ease-in-out -2.5s infinite; }
    .graph-node:nth-of-type(6)  { animation: nodeGlowBright 5.7s ease-in-out -3.9s infinite; }
    .graph-node:nth-of-type(7)  { animation: nodeGlowSoft 5.1s ease-in-out -1.2s infinite; }
    .graph-node:nth-of-type(8)  { animation: nodeGlowMed 6.5s ease-in-out -0.6s infinite; }
    .graph-node:nth-of-type(9)  { animation: nodeGlowBright 4.9s ease-in-out -2.9s infinite; }
    .graph-node:nth-of-type(10) { animation: nodeGlowSoft 5.9s ease-in-out -1.5s infinite; }
    .graph-node:nth-of-type(11) { animation: nodeGlowMed 6.1s ease-in-out -3.3s infinite; }
    .graph-node:nth-of-type(12) { animation: nodeGlowBright 5.4s ease-in-out -0.4s infinite; }
    .graph-node:hover {
      animation-play-state: paused;
      filter: drop-shadow(0 0 10px rgba(200,160,240,0.7));
    }
    @media (prefers-reduced-motion: reduce) {
      .graph-node,
      .graph-node:nth-of-type(1),
      .graph-node:nth-of-type(2),
      .graph-node:nth-of-type(3),
      .graph-node:nth-of-type(4),
      .graph-node:nth-of-type(5),
      .graph-node:nth-of-type(6),
      .graph-node:nth-of-type(7),
      .graph-node:nth-of-type(8),
      .graph-node:nth-of-type(9),
      .graph-node:nth-of-type(10),
      .graph-node:nth-of-type(11),
      .graph-node:nth-of-type(12) { animation: none; }
    }
    .graph-node-circle {
      transition: r 0.3s ease, opacity 0.3s ease;
    }
    .graph-node:hover .graph-node-circle { r: 7; }
    .graph-node-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      fill: var(--text-dim);
      transition: fill 0.3s ease;
    }
    .graph-node:hover .graph-node-label { fill: var(--text); }
    .graph-node-active .graph-node-circle {
      filter: drop-shadow(0 0 8px rgba(200,160,240,0.7)) drop-shadow(0 0 16px rgba(136,120,255,0.4));
    }
    .graph-node-active .graph-node-label { fill: var(--text); }
    .graph-pulse-ring {
      pointer-events: none;
    }
    .graph-tooltip {
      position: absolute;
      background: rgba(12,14,24,0.95);
      border: 1px solid rgba(140,120,255,0.15);
      border-radius: 6px;
      padding: 8px 12px;
      font-family: 'DM Sans', sans-serif;
      font-size: 1.1rem;
      color: var(--text-mid);
      max-width: 200px;
      line-height: 1.5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 10;
      backdrop-filter: blur(8px);
    }
    .graph-tooltip.visible { opacity: 1; }

    /* ═══ ROADMAP ═══ */
    .roadmap-track {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-left: 2.4rem;
      margin-top: 6rem;
    }
    .roadmap-track::before {
      content: '';
      position: absolute;
      left: 5px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, var(--authority), var(--capacity), var(--expansion), rgba(200,160,240,0.1));
    }
    .roadmap-item {
      position: relative;
      padding: 2.5rem 0;
    }
    .roadmap-dot {
      position: absolute;
      left: -2.4rem;
      top: 2.8rem;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid;
    }
    .roadmap-dot.now {
      background: var(--authority);
      border-color: var(--authority);
      box-shadow: 0 0 10px rgba(200,160,240,0.4);
    }
    .roadmap-when {
      font-family: var(--mono);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 0.6rem;
    }
    .roadmap-title {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 2.5vw, 2.4rem);
      margin-bottom: 0.6rem;
    }
    .roadmap-desc {
      font-size: 1.6rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.6;
    }

    /* ═══ SOCIAL PROOF CAROUSEL ═══ */
    .social-proof-carousel {
      position: relative;
      min-height: 24rem;
      max-width: 120rem;
      margin: 0 auto;
      text-align: center;
    }
    .social-proof-slide {
      position: absolute;
      top: 50%;
      left: 0; right: 0;
      opacity: 0;
      transform: translateY(calc(-50% + 6px));
      transition: opacity 0.9s ease, transform 0.9s ease;
      pointer-events: none;
    }
    .social-proof-slide.active {
      opacity: 1;
      transform: translateY(-50%);
      pointer-events: auto;
    }
    .social-proof-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(3rem, 4vw, 4.5rem);
      font-weight: 400;
      color: var(--text);
      line-height: 1.35;
      margin: 0 0 2rem;
    }
    .social-proof-author {
      font-family: var(--mono);
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      color: var(--text-dim);
      margin: 0;
    }

    /* ═══ SUBSTRATE STRIP ═══ */
    .substrate-strip {
      margin-top: 8rem;
      padding-top: 4rem;
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .substrate-label {
      font-family: var(--mono);
      font-size: 1.25rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--text-dim);
      margin: 0 0 3rem;
    }
    .substrate-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 4.5rem;
      margin-bottom: 3rem;
    }
    .substrate-logo {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      font-family: var(--mono);
      font-size: 1.35rem;
      letter-spacing: 0.08em;
      color: var(--text-mid);
      filter: grayscale(1);
      opacity: 0.55;
      transition: opacity 0.3s ease, filter 0.3s ease, color 0.3s ease;
    }
    .substrate-logo svg {
      width: 28px;
      height: 28px;
      fill: currentColor;
      flex-shrink: 0;
    }
    .substrate-logo:hover {
      opacity: 0.95;
      filter: grayscale(0.3);
      color: var(--text);
    }
    .substrate-logo-text {
      display: inline-block;
    }
    .substrate-caption {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--authority);
      opacity: 0.8;
      margin: 0 0 1rem;
    }
    .substrate-sub-caption {
      font-family: var(--mono);
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-dim);
      margin: 0;
    }
    .substrate-mark {
      margin-top: 1.5rem;
      display: flex;
      justify-content: center;
    }
    .substrate-pulse-ring {
      transform-box: fill-box;
      transform-origin: center;
      animation: nav-pulse 2.8s cubic-bezier(0.2, 0, 0.6, 1) infinite;
    }
    @media (max-width: 768px) {
      .substrate-strip { margin-top: 5rem; padding-top: 3rem; }
      .substrate-logos { gap: 2rem; }
      .substrate-logo { font-size: 1rem; }
      .substrate-logo svg { width: 18px; height: 18px; }
      .substrate-label { font-size: 0.95rem; margin-bottom: 2rem; }
      .substrate-caption { font-size: 0.82rem; margin-bottom: 0.8rem; }
      .substrate-sub-caption { font-size: 0.82rem; letter-spacing: 0.12em; }
    }

    /* ═══ TESTIMONIALS ═══ */
    .testimonials {
      display: flex;
      flex-direction: column;
      gap: 10rem;
    }
    /* ═══ TESTIMONIAL CAROUSEL (legacy, retained in case reused) ═══ */
    .testimonial-carousel {
      position: relative;
      min-height: 24rem;
      max-width: 80rem;
      margin: 0 auto;
    }
    .testimonial-slide {
      position: absolute;
      top: 0; left: 0; right: 0;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      pointer-events: none;
    }
    .testimonial-slide.active {
      position: relative;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .testimonial-quote {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 2.8vw, 2.8rem);
      font-style: italic;
      line-height: 1.4;
      color: var(--text);
      margin-bottom: 2rem;
    }
    .testimonial-dots {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 3rem;
    }
    .testimonial-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--text-dim);
      opacity: 0.3;
      cursor: pointer;
      transition: opacity 0.3s ease, background 0.3s ease;
    }
    .testimonial-dot.active {
      opacity: 1;
      background: var(--authority);
    }
    .testimonial-attribution {
      display: flex;
      align-items: center;
      gap: 1.6rem;
    }
    .testimonial-avatar {
      width: 5.2rem;
      height: 5.2rem;
      border-radius: 50%;
      border: 2px solid rgba(200, 160, 240, 0.12);
      outline: 1px solid rgba(10, 10, 15, 0.8);
      object-fit: cover;
      flex-shrink: 0;
      background: var(--bg-subtle);
      filter: grayscale(0.3) brightness(0.85);
      transition: filter 0.4s ease;
    }
    .testimonial-avatar:hover {
      filter: grayscale(0) brightness(1);
    }
    .testimonial-attr {
      font-family: var(--mono);
      font-size: 1rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    /* ═══ THE ARCHITECT ═══ */
    .architect {
      padding: 16rem 0;
    }
    .architect-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6rem;
      align-items: center;
    }
    @media (min-width: 768px) {
      .architect-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 8rem;
      }
    }
    .architect-photo-wrapper {
      position: relative;
      max-width: 400px;
    }
    @media (min-width: 768px) {
      .architect-photo-wrapper { max-width: none; }
    }
    .architect-photo {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      object-position: center 15%;
      border-radius: 8px;
      border: 1px solid rgba(200, 160, 240, 0.08);
      filter: grayscale(0.2) brightness(0.9) contrast(1.05);
      transition: filter 0.6s ease, border-color 0.6s ease;
    }
    .architect-photo:hover {
      filter: grayscale(0) brightness(0.95) contrast(1);
      border-color: rgba(200, 160, 240, 0.15);
    }
    .architect-photo-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 140%;
      height: 140%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse, rgba(200, 160, 240, 0.08) 0%, rgba(96, 216, 168, 0.03) 40%, transparent 70%);
      pointer-events: none;
      z-index: -1;
    }
    /* ═══ THE SCIENCE ═══ */
    .science-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      margin-top: 6rem;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .science-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 1024px) {
      .science-grid { grid-template-columns: 1fr 1fr 1fr; }
    }
    .science-card {
      padding: 4rem 3.5rem;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      gap: 2rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
    }
    .science-card:hover {
      border-color: rgba(200,160,240,0.3);
      box-shadow: 0 0 30px rgba(136,120,255,0.12), 0 0 60px rgba(200,160,240,0.06);
      background: linear-gradient(135deg, rgba(136,120,255,0.06), rgba(200,160,240,0.04), rgba(96,216,168,0.04));
    }
    .science-institution {
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }
    .science-icon {
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 50%;
      border: 1px solid rgba(200, 160, 240, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(200, 160, 240, 0.03);
    }
    .science-icon svg {
      width: 1.8rem;
      height: 1.8rem;
    }
    .science-inst-name {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-mid);
    }
    .science-quote {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 2vw, 2.1rem);
      font-style: italic;
      line-height: 1.55;
      color: var(--text-mid);
    }
    .science-finding {
      font-size: 1.6rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.7;
    }
    .science-researcher {
      font-family: var(--mono);
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-dim);
    }

    /* ═══ FAQ ═══ */
    .faq { padding: 12rem 0; }
    .faq-list {
      max-width: 72rem;
      margin: 5rem auto 0;
      display: flex;
      flex-direction: column;
    }
    .faq-item {
      border-top: 1px solid var(--border);
    }
    .faq-item:last-child {
      border-bottom: 1px solid var(--border);
    }
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      color: var(--text);
      font-family: var(--sans);
      font-size: 1.9rem;
      font-weight: 400;
      text-align: left;
      padding: 2.4rem 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      transition: color 0.3s;
    }
    .faq-question:hover { color: var(--authority); }
    .faq-question svg {
      width: 1.6rem;
      height: 1.6rem;
      flex-shrink: 0;
      color: var(--text-dim);
      transition: transform 0.3s ease, color 0.3s;
    }
    .faq-item.open .faq-question svg {
      transform: rotate(45deg);
      color: var(--authority);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;
    }
    .faq-item.open .faq-answer {
      max-height: 30rem;
    }
    .faq-answer-inner {
      padding-bottom: 2.8rem;
      font-size: 1.75rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.75;
      max-width: 60rem;
    }

    /* ═══ MOBILE LOOP — conceptual living diagram ═══ */
    .mobile-loop { display: none; }
    @media (max-width: 768px) {
      .desktop-only { display: none !important; }
      .mobile-loop {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 420px;
        margin: 2.4rem auto 3rem;
        padding: 0 1rem;
      }
      .loop-svg {
        width: 100%;
        height: auto;
        max-width: 360px;
      }
      .loop-caption {
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-size: 22px;
        color: #d4a574;
        text-align: center;
        min-height: 32px;
        margin-top: 0;
        opacity: 0;
        transition: opacity 0.6s ease;
        letter-spacing: 0.02em;
        text-shadow: 0 0 18px rgba(212,165,116,0.4);
      }
      .loop-caption.show { opacity: 1; }
      .loop-caption.caption-climax {
        color: #e8c98a;
        font-size: 26px;
        text-shadow: 0 0 24px rgba(232,201,138,0.6), 0 0 48px rgba(212,165,116,0.3);
      }
      .loop-legend {
        display: flex; justify-content: center; gap: 18px;
        margin-top: 16px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .loop-legend span { display: inline-flex; align-items: center; gap: 5px; }
      .loop-leg-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
      .loop-leg-dot.auth { background: #c8a0f0; box-shadow: 0 0 4px rgba(200,160,240,0.5); }
      .loop-leg-dot.cap  { background: #60d8a8; box-shadow: 0 0 4px rgba(96,216,168,0.5); }
      .loop-leg-dot.exp  { background: #e080a0; box-shadow: 0 0 4px rgba(224,128,160,0.5); }

      /* ─── SVG elements ─── */
      /* Watermark: giant ACE mark sitting behind the whole diagram, very subtle */
      .loop-watermark {
        opacity: 0.55;
        animation: loopMarkBreath 6s ease-in-out infinite;
        transform-origin: 180px 210px;
      }

      .loop-orbit {
        fill: none;
        stroke: rgba(140,120,255,0.09);
        stroke-width: 1;
        stroke-dasharray: 3 5;
      }
      .loop-path {
        fill: none;
        stroke: rgba(140,120,255,0.14);
        stroke-width: 1.5;
        stroke-linecap: round;
        transition: stroke 0.4s ease, stroke-width 0.4s ease;
      }
      .loop-path.pulsing {
        stroke-width: 2.2;
      }
      .loop-path.pulsing.authority { stroke: rgba(200,160,240,0.95); filter: drop-shadow(0 0 8px rgba(200,160,240,0.7)); }
      .loop-path.pulsing.capacity  { stroke: rgba(96,216,168,0.95);  filter: drop-shadow(0 0 8px rgba(96,216,168,0.7)); }
      .loop-path.pulsing.expansion { stroke: rgba(224,128,160,0.95); filter: drop-shadow(0 0 8px rgba(224,128,160,0.7)); }

      /* Coherence triangle — connects the three legs, glows during converge beat */
      .loop-triangle {
        fill: none;
        stroke: rgba(200,160,240,0.08);
        stroke-width: 1;
        stroke-linejoin: round;
        opacity: 0;
        transition: opacity 0.5s ease, stroke 0.5s ease;
      }
      .loop-triangle.cohering {
        opacity: 1;
        animation: loopTriangleGlow 2.6s ease-in-out;
      }
      @keyframes loopTriangleGlow {
        0%   { stroke: rgba(200,160,240,0.15); stroke-width: 1;   filter: drop-shadow(0 0 0 rgba(200,160,240,0)); }
        40%  { stroke: rgba(212,165,116,0.9);  stroke-width: 2.4; filter: drop-shadow(0 0 14px rgba(212,165,116,0.7)); }
        100% { stroke: rgba(200,160,240,0.15); stroke-width: 1;   filter: drop-shadow(0 0 0 rgba(200,160,240,0)); }
      }

      /* Triad leg nodes (outer) */
      .loop-leg-circle {
        fill: rgba(16,20,32,0.88);
        stroke-width: 1.4;
        transition: stroke 0.4s ease, stroke-width 0.4s ease, filter 0.4s ease, fill 0.4s ease;
      }
      .loop-leg-authority .loop-leg-circle { stroke: rgba(200,160,240,0.35); }
      .loop-leg-capacity  .loop-leg-circle { stroke: rgba(96,216,168,0.35); }
      .loop-leg-expansion .loop-leg-circle { stroke: rgba(224,128,160,0.35); }

      .loop-leg-label {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        pointer-events: none;
        transition: fill 0.4s ease;
      }
      .loop-leg-sub {
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-size: 9px;
        pointer-events: none;
        transition: fill 0.4s ease;
        letter-spacing: 0.02em;
      }
      .loop-leg-authority .loop-leg-label { fill: #c8a0f0; }
      .loop-leg-capacity  .loop-leg-label { fill: #60d8a8; }
      .loop-leg-expansion .loop-leg-label { fill: #e080a0; }
      .loop-leg-authority .loop-leg-sub { fill: rgba(200,160,240,0.6); }
      .loop-leg-capacity  .loop-leg-sub { fill: rgba(96,216,168,0.6); }
      .loop-leg-expansion .loop-leg-sub { fill: rgba(224,128,160,0.6); }

      /* Firing state — when a leg "lights up" */
      .loop-leg-authority .loop-leg-circle.firing {
        stroke: #c8a0f0; stroke-width: 2.4;
        fill: rgba(200,160,240,0.08);
        filter: drop-shadow(0 0 14px rgba(200,160,240,0.7));
      }
      .loop-leg-capacity .loop-leg-circle.firing {
        stroke: #60d8a8; stroke-width: 2.4;
        fill: rgba(96,216,168,0.08);
        filter: drop-shadow(0 0 14px rgba(96,216,168,0.7));
      }
      .loop-leg-expansion .loop-leg-circle.firing {
        stroke: #e080a0; stroke-width: 2.4;
        fill: rgba(224,128,160,0.08);
        filter: drop-shadow(0 0 14px rgba(224,128,160,0.7));
      }

      /* Held state — circles stay lit after coheres beat */
      .loop-leg-authority .loop-leg-circle.held {
        stroke: #c8a0f0; stroke-width: 2.4;
        fill: rgba(200,160,240,0.08);
        filter: drop-shadow(0 0 14px rgba(200,160,240,0.7));
      }
      .loop-leg-capacity .loop-leg-circle.held {
        stroke: #60d8a8; stroke-width: 2.4;
        fill: rgba(96,216,168,0.08);
        filter: drop-shadow(0 0 14px rgba(96,216,168,0.7));
      }
      .loop-leg-expansion .loop-leg-circle.held {
        stroke: #e080a0; stroke-width: 2.4;
        fill: rgba(224,128,160,0.08);
        filter: drop-shadow(0 0 14px rgba(224,128,160,0.7));
      }

      /* Central ACE mark — continuous gentle breath */
      .loop-mark {
        transform-origin: 180px 210px;
        animation: loopMarkBreath 5s ease-in-out infinite;
        transition: filter 0.5s ease;
      }
      .loop-mark.actualizing {
        filter: drop-shadow(0 0 22px rgba(212,175,55,0.9)) drop-shadow(0 0 44px rgba(212,175,55,0.4));
      }
      @keyframes loopMarkBreath {
        0%, 100% { opacity: 0.85; }
        50%      { opacity: 1; }
      }

      /* Breath rings — hidden by default, expand during regulate scene */
      .loop-breath-ring {
        fill: none;
        stroke: rgba(96,216,168,0.6);
        stroke-width: 1.2;
        opacity: 0;
        transform-origin: 180px 210px;
      }
      .loop-breath-ring.pulsing {
        animation: loopBreathPulse 2s ease-out forwards;
      }
      @keyframes loopBreathPulse {
        0%   { opacity: 0.8; transform: scale(0.3); }
        100% { opacity: 0;   transform: scale(3); }
      }

      /* Gold radial pulse — fires on "You actualize" beat */
      .loop-breath-ring.gold-pulsing {
        stroke: rgba(212,175,55,0.95);
        stroke-width: 2;
        animation: loopGoldPulse 2.2s ease-out forwards;
      }
      @keyframes loopGoldPulse {
        0%   { opacity: 1;   transform: scale(0.15); stroke-width: 3; }
        25%  { opacity: 0.9; }
        100% { opacity: 0;   transform: scale(5);    stroke-width: 0.4; }
      }

      /* Actualize ring — single gold pulse */
      .loop-actualize-ring {
        fill: none;
        stroke: rgba(212,175,55,0.8);
        stroke-width: 1.8;
        opacity: 0;
        transform-origin: 180px 210px;
      }
      .loop-actualize-ring.pulsing {
        animation: loopActualizePulse 2.4s ease-out forwards;
      }
      @keyframes loopActualizePulse {
        0%   { opacity: 1; transform: scale(0.2); stroke-width: 2.5; }
        40%  { opacity: 0.85; }
        100% { opacity: 0; transform: scale(4.5); stroke-width: 0.5; }
      }

      /* Memory nodes — injected dynamically, bloom gold */
      .loop-memory-node {
        fill: #d4a574;
        filter: drop-shadow(0 0 6px rgba(212,165,116,0.5));
        transform-origin: center;
        transform-box: fill-box;
      }
      .loop-memory-node.blooming {
        animation: loopMemBloom 1.5s ease-out forwards;
      }
      @keyframes loopMemBloom {
        0%   { opacity: 0; transform: scale(0.1); filter: drop-shadow(0 0 0 rgba(212,165,116,0)); }
        30%  { opacity: 1; transform: scale(1.4); filter: drop-shadow(0 0 14px rgba(212,165,116,0.9)); }
        100% { opacity: 1; transform: scale(1);   filter: drop-shadow(0 0 6px rgba(212,165,116,0.5)); }
      }
      .loop-memory-node.fading {
        animation: loopMemFade 1s ease-in forwards;
      }
      @keyframes loopMemFade {
        0%   { opacity: 1; }
        100% { opacity: 0.35; }
      }

      /* Pattern observation text — briefly visible during /close */
      .loop-pattern-text {
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-size: 12px;
        fill: #d4a574;
        opacity: 0;
        transition: opacity 0.5s ease;
        letter-spacing: 0.03em;
      }
      .loop-pattern-text.show { opacity: 0.85; }

      /* Respect reduced-motion preferences */
      @media (prefers-reduced-motion: reduce) {
        .loop-mark,
        .loop-breath-ring.pulsing,
        .loop-memory-node.blooming { animation: none; }
      }
    }

    /* Hide the old .mc-* internals entirely (no longer used) */
    .mc-notch { display: none; }
    @media (max-width: 768px) {
      .mc-header {
        background: rgba(8,10,18,0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        padding: 36px 18px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }
      .mc-header-mark { width: 26px; height: 26px; }
      .mc-header-name {
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
      }
      .mc-header-status {
        font-family: var(--mono);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--capacity);
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .mc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--capacity); box-shadow: 0 0 6px rgba(96,216,168,0.4); }
      .mc-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        scroll-behavior: smooth;
      }
      .mc-scroll::-webkit-scrollbar { width: 0; }
      .mc-msg {
        max-width: 85%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 13px;
        line-height: 1.5;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s ease, transform 0.4s ease;
      }
      .mc-msg.show { opacity: 1; transform: none; }
      .mc-msg-user {
        align-self: flex-end;
        background: linear-gradient(135deg, rgba(140,120,255,0.12), rgba(200,160,240,0.08));
        border: 1px solid rgba(140,120,255,0.15);
        color: var(--text);
        border-bottom-right-radius: 4px;
      }
      .mc-msg-ace {
        align-self: flex-start;
        background: rgba(16,20,36,0.8);
        border: 1px solid var(--border);
        color: var(--text-mid);
        border-bottom-left-radius: 4px;
      }
      .mc-msg-ace strong { color: var(--text); }
      .mc-label {
        text-align: center;
        padding: 14px 0 6px;
        opacity: 0;
        transition: opacity 0.4s ease;
      }
      .mc-label.show { opacity: 1; }
      .mc-label span {
        font-family: var(--mono);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--text-dim);
      }
      .mc-typing {
        align-self: flex-start;
        display: flex;
        gap: 4px;
        padding: 10px 14px;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .mc-typing.show { opacity: 1; }
      .mc-typing span {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(140,120,255,0.3);
        animation: mcBounce 1.2s ease infinite;
      }
      .mc-typing span:nth-child(2) { animation-delay: 0.15s; }
      .mc-typing span:nth-child(3) { animation-delay: 0.3s; }
      @keyframes mcBounce {
        0%, 100% { opacity: 0.3; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(-3px); }
      }
      .mc-agents {
        display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0;
        opacity: 0; transition: opacity 0.4s;
      }
      .mc-agents.show { opacity: 1; }
      .mc-pill {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--text-mid);
        background: rgba(16,20,36,0.8);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 5px 10px;
        display: flex; align-items: center; gap: 5px;
      }
      .mc-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--capacity); }
      .mc-artifact {
        background: rgba(16,20,36,0.8);
        border: 1px solid rgba(96,216,168,0.2);
        border-radius: 10px;
        padding: 10px 14px;
        display: flex; align-items: center; gap: 10px;
        opacity: 0; transition: opacity 0.4s;
      }
      .mc-artifact.show { opacity: 1; }
      .mc-artifact-icon {
        width: 32px; height: 32px; border-radius: 6px;
        background: rgba(96,216,168,0.1);
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; flex-shrink: 0;
      }
      .mc-artifact-name { font-size: 12px; color: var(--text); font-weight: 500; }
      .mc-artifact-meta { font-family: var(--mono); font-size: 8px; color: var(--text-dim); margin-top: 1px; }
      .mc-artifact-badge {
        font-family: var(--mono); font-size: 8px;
        color: var(--capacity); background: rgba(96,216,168,0.1);
        padding: 2px 8px; border-radius: 4px; margin-left: auto;
      }
      .mc-coaching {
        align-self: flex-start; max-width: 88%;
        font-size: 13px; line-height: 1.55; font-style: italic;
        color: var(--text-mid); padding: 12px 14px;
        border-left: 2px solid var(--expansion);
        background: rgba(224,128,160,0.04);
        border-radius: 0 12px 12px 0;
        opacity: 0; transition: opacity 0.4s;
      }
      .mc-coaching.show { opacity: 1; }
      .mc-somatic {
        display: flex; align-items: center; gap: 5px;
        font-family: var(--mono); font-size: 8px;
        text-transform: uppercase; letter-spacing: 0.1em;
        font-style: normal; padding-bottom: 4px;
      }
      .mc-s-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--expansion); animation: mcSPulse 2s ease infinite; }
      @keyframes mcSPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
      .mc-summary {
        display: flex; flex-direction: column; align-items: center;
        padding: 24px 0 10px;
        opacity: 0; transition: opacity 0.5s;
      }
      .mc-summary.show { opacity: 1; }
      .mc-sum-header {
        font-family: var(--mono); font-size: 9px; text-transform: uppercase;
        letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 4px;
      }
      .mc-sum-time {
        font-family: var(--sans); font-size: 22px; font-weight: 300;
        color: var(--text); margin-bottom: 16px;
      }
      .mc-sum-list { list-style: none; padding: 0; width: 100%; }
      .mc-sum-item {
        display: flex; align-items: baseline; gap: 8px;
        padding: 5px 0; border-bottom: 1px solid var(--border);
        font-size: 12px; line-height: 1.5;
        opacity: 0; transform: translateY(6px);
        transition: opacity 0.3s, transform 0.3s;
      }
      .mc-sum-item.show { opacity: 1; transform: none; }
      .mc-sum-item:last-child { border-bottom: none; }
      .mc-sum-verb {
        font-family: var(--mono); font-size: 9px; text-transform: uppercase;
        letter-spacing: 0.08em; flex-shrink: 0; width: 68px;
      }
      .mc-sum-desc { color: var(--text-mid); }
      .mc-sum-coherence {
        display: flex; align-items: center; gap: 10px; margin-top: 14px;
      }
      .mc-sum-coh-label {
        font-family: var(--mono); font-size: 9px; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--text-dim);
      }
      .mc-sum-coh-val {
        font-family: var(--sans); font-size: 20px; font-weight: 300;
        background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      .mc-sum-tagline {
        font-family: var(--serif); font-size: 14px; font-style: italic;
        color: var(--text-dim); margin-top: 14px;
      }
      .mc-input-bar {
        border-top: 1px solid var(--border);
        padding: 10px 14px 18px;
        display: flex; gap: 8px; align-items: center;
        background: rgba(8,10,18,0.95);
        flex-shrink: 0;
      }
      .mc-input-field {
        flex: 1; background: rgba(16,20,36,0.6);
        border: 1px solid rgba(140,120,255,0.12);
        border-radius: 18px; padding: 8px 14px;
        color: var(--text-dim); font-size: 13px; font-family: var(--sans);
      }
      .mc-send-btn {
        width: 34px; height: 34px; border-radius: 50%;
        background: rgba(200,160,240,0.1); border: 1px solid rgba(200,160,240,0.12);
        color: var(--authority); display: flex; align-items: center; justify-content: center;
        font-size: 14px; flex-shrink: 0;
      }
    }

    /* ═══ TABLET RESPONSIVE ═══ */
    @media (max-width: 1024px) and (min-width: 769px) {
      .container { padding: 0 4.8rem; }
      section { padding: 11rem 0; }
      .hero { padding-top: 16rem; padding-bottom: 8rem; }
      .architect { padding: 11rem 0; }
      .faq { padding: 9rem 0; }
      .mid-cta { padding: 7rem 0; }
      .science-grid { gap: 2.4rem; }
      .testimonial-carousel { min-height: 20rem; }
    }

    /* ═══ MOBILE RESPONSIVE ═══ */
    @media (max-width: 768px) {
      /* Nav hide/show now handled globally */

      /* Container */
      .container { padding: 0 2.4rem; }

      /* Sections — tight on mobile, no dark gaps (!important to beat inline styles) */
      section { padding: 2rem 0 !important; }

      /* Hero */
      .hero-quotes { min-height: 8rem; margin-top: 3rem; }
      .hero-quote-text { font-size: 1.7rem; }
      .hero-trust { font-size: 0.8rem; }

      /* Email forms */
      .email-form {
        flex-direction: column;
        max-width: 100%;
      }
      .email-form input {
        border-right: 1px solid var(--border);
        border-radius: 2px 2px 0 0;
        border-bottom: none;
      }
      .email-form button {
        border-radius: 0 0 2px 2px;
        padding: 1.4rem 2rem;
      }

      /* Alpha badge */
      .alpha-badge { font-size: 0.7rem; padding: 6px 14px; }

      /* Testimonials */
      .testimonials { gap: 6rem; }
      .testimonial-carousel { min-height: 22rem; }
      .testimonial-quote { font-size: 2rem; }
      .testimonial-avatar { width: 4rem; height: 4rem; }
      .social-proof-carousel { min-height: 20rem; }
      .social-proof-quote { font-size: 2.7rem; }

      /* Science grid */
      .science-grid { grid-template-columns: 1fr; }
      .science-card { padding: 3rem 2.4rem; }
      .science-quote { font-size: 1.7rem; }

      /* Architect */
      .architect { padding: 2rem 0; }
      .architect-grid { gap: 4rem; }
      .architect-photo-wrapper { max-width: 280px; margin: 0 auto; }
      .architect-name { font-size: 3.2rem; }
      .architect-stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

      /* FAQ */
      .faq { padding: 2rem 0; }
      .faq-question { font-size: 1.7rem; padding: 2rem 0; }
      .faq-answer-inner { font-size: 1.6rem; }

      /* Mid-page CTA */
      .mid-cta { padding: 2rem 0; }
      .big-heading.size-md { font-size: clamp(2.4rem, 6vw, 3.6rem); }

      /* Principles grid to 1 col on small mobile */
      .principles-grid { grid-template-columns: 1fr; }

      /* ═══ MOBILE FIX: Nav always visible ═══ */
      nav {
        background: rgba(10, 10, 15, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 1.6rem 0;
      }

      /* ═══ MOBILE FIX: Horizontal overflow ═══ */
      /* overflow-x:clip instead of hidden — hidden on <html> creates a nested
         scroll context in iOS Safari, breaking single-page scroll. */
      html { overflow-x: clip !important; }
      body { overflow-x: hidden !important; max-width: 100vw; }

      /* ═══ MOBILE FIX: Eliminate dark gaps between sections ═══ */
      .sep { display: none !important; }
      .glow, #mouseGlow { display: none !important; }

      /* ═══ MOBILE FIX: "While staying whole" hero text bigger ═══ */
      #heroWhole { font-size: clamp(3.2rem, 8vw, 4.5rem) !important; }

      /* ═══ MOBILE FIX: Hero subtext smaller ═══ */
      #heroUSP { font-size: 1.6rem !important; line-height: 1.5 !important; }

      /* ═══ MOBILE FIX: Hero sub-line match ═══ */
      .hero-sub { font-size: 1.6rem !important; }

      /* ═══ MOBILE FIX: Architecture cards stack vertically ═══ */
      .principles-compact { grid-template-columns: 1fr; gap: 1.5rem; }
      .principle-compact-item { padding: 2.4rem 2rem; }
      .principle-compact-name { font-size: 2.2rem; }
      .principle-compact-desc { font-size: 1.4rem !important; }

      /* ═══ MOBILE FIX: Modal scrollable + close button ═══ */
      .apply-modal {
        align-items: flex-start;
        padding: 1rem 1rem;
        -webkit-overflow-scrolling: touch;
      }
      .apply-card {
        margin-top: 2rem;
        margin-bottom: 2rem;
        max-height: none;
      }
      .apply-close {
        width: 4.8rem;
        height: 4.8rem;
        font-size: 2.4rem;
        top: 1rem;
        right: 1rem;
        z-index: 10;
        background: rgba(10,10,14,0.5);
        -webkit-tap-highlight-color: transparent;
      }

      /* ═══ MOBILE FIX: Body text — !important to override inline styles ═══ */
      body { font-size: 1.5rem; }
      p.reveal[style*="font-size"]:not(.audit-insight):not(.audit-disclaimer):not([style*="clamp"]):not([style*="0.7rem"]),
      .reveal p[style*="font-size"]:not([style*="clamp"]):not([style*="0.7rem"]),
      p[style*="1.9rem"],
      p[style*="1.8rem"],
      p[style*="1.7rem"] { font-size: 1.5rem !important; }
      .day-desc { font-size: 1.5rem !important; }
      .architect-text { font-size: 1.5rem !important; }
      .triad-desc { font-size: 1.5rem !important; }
      .triad-output { font-size: 1.2rem !important; }
      .shift-before,
      .shift-after { font-size: 1.4rem !important; }
      .comparison-body p,
      .comparison-list li,
      .compound-card p,
      .faq-answer-inner,
      .science-card p { font-size: 1.4rem !important; }

      /* ═══ MOBILE FIX: Statement text bigger, disclaimer smaller ═══ */
      /* Big serif italic statements (all share inline clamp(3rem,4vw,4.5rem)) */
      p[style*="clamp(2.7rem"] { font-size: clamp(2.7rem, 6vw, 3.4rem) !important; }
      .audit-insight { font-size: clamp(2.7rem, 6vw, 3.4rem) !important; }
      .science-finding { font-size: 1.8rem !important; }
      .audit-disclaimer { font-size: 0.75rem !important; }

      /* ═══ MOBILE FIX: Hide back-to-top orb ═══ */
      .back-to-top { display: none !important; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 2rem; }
      .hero-quotes { min-height: 10rem; }
      .hero-quote-text { font-size: 1.6rem; }
      .testimonial-quote { font-size: 2rem; }
      .architect-photo-wrapper { max-width: 240px; }
      .architect-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
      .science-card { padding: 2.4rem 2rem; }
    }

    /* ═══ SCROLL LOCK DURING IGNITION ═══ */
    html.ignition-locked {
      overflow: hidden;
    }
    html.ignition-locked body {
      overflow: hidden;
    }

    .architect-content {}
    .architect-name {
      font-family: var(--serif);
      font-size: clamp(3.2rem, 5vw, 4.8rem);
      font-weight: 400;
      line-height: 1.15;
      margin-bottom: 0.8rem;
    }
    .architect-title {
      font-family: var(--mono);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--authority);
      margin-bottom: 3.5rem;
    }
    .architect-text {
      font-size: 1.9rem;
      color: var(--text-mid);
      font-weight: 300;
      line-height: 1.75;
      margin-bottom: 2rem;
    }
    .architect-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem;
      margin-top: 4rem;
      padding-top: 3rem;
      border-top: 1px solid var(--border);
    }
    @media (max-width: 1024px) {
      .architect-stats { grid-template-columns: repeat(2, 1fr); }
    }
    .architect-stat-value {
      font-family: var(--serif);
      font-size: 2.8rem;
      color: var(--text);
      line-height: 1;
      margin-bottom: 0.6rem;
    }
    .architect-stat-label {
      font-family: var(--mono);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-dim);
    }

    /* ═══ CTA ═══ */
    .cta {
      text-align: center;
      padding: 18rem 0 14rem;
    }
    .cta-price {
      font-family: var(--serif);
      font-size: clamp(6rem, 12vw, 12rem);
      font-weight: 400;
      line-height: 0.9;
      letter-spacing: -0.03em;
      color: var(--authority);
      margin-bottom: 1rem;
    }
    .cta .email-form {
      margin: 0 auto;
    }
    .cta-link {
      display: inline-block;
      margin-top: 3rem;
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--text-dim);
      text-decoration: none;
      position: relative;
      transition: color 0.3s;
    }
    .cta-link::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--text-dim);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
    }
    .cta-link:hover { color: var(--text-mid); }
    .cta-link:hover::after {
      transform: scaleX(1);
      transform-origin: left;
      background: var(--text-mid);
    }

    /* ═══ FOOTER ═══ */
    footer {
      border-top: 1px solid var(--border);
      padding: 6rem 0 4rem;
      text-align: center;
    }

    /* ═══ BUILT-WITH-ACE BADGE ═══ */
    .ace-badge-row {
      display: flex;
      justify-content: center;
    }
    .ace-badge {
      display: inline-flex;
      align-items: center;
      gap: 1.2rem;
      padding: 1.2rem 2.4rem;
      border: 1px solid var(--border);
      border-radius: 32px;
      background: rgba(255,255,255,0.02);
      font-family: var(--mono);
      font-size: 1.1rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-dim);
      transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    .ace-badge-glow {
      border-color: rgba(200,160,240,0.2);
      box-shadow: 0 0 20px rgba(200,160,240,0.08), 0 0 40px rgba(160,128,208,0.04);
    }
    .ace-badge-glow:hover {
      border-color: rgba(200,160,240,0.4);
      background: rgba(200,160,240,0.04);
      box-shadow: 0 0 24px rgba(200,160,240,0.15), 0 0 48px rgba(160,128,208,0.08);
    }
    .ace-badge-logo {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
    }
    .ace-badge-text { color: var(--text-dim); }
    .ace-badge-text strong {
      color: var(--text-mid);
      font-weight: 500;
      margin-left: 0.25em;
      letter-spacing: 0.16em;
    }
    .ace-badge-pulse {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--capacity);
      box-shadow: 0 0 8px rgba(96,216,168,0.7), 0 0 16px rgba(96,216,168,0.35);
      animation: pulse 2.5s ease-in-out infinite;
    }
    .footer-copyright {
      font-family: var(--mono);
      font-size: 0.95rem;
      color: var(--text-dim);
      letter-spacing: 0.1em;
      margin-top: 2.5rem;
      opacity: 0.6;
    }

    /* ═══ BACK TO TOP ═══ */
    .back-to-top {
      position: fixed;
      bottom: 2.5rem;
      right: 2.5rem;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(200,160,240,0.25);
      background: rgba(20,18,28,0.9);
      backdrop-filter: blur(12px);
      box-shadow: 0 0 12px rgba(200,160,240,0.08);
      color: rgba(200,160,240,0.8);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      z-index: 90;
    }
    .back-to-top.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .back-to-top:hover {
      border-color: rgba(200,160,240,0.5);
      box-shadow: 0 0 20px rgba(200,160,240,0.2);
      color: #c8a0f0;
    }

    @media (max-width: 768px) {
      .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 40px;
        height: 40px;
      }
    }

    /* ═══ FRAGMENTATION AUDIT ═══ */
    .audit-pullquote {
      border-left: 3px solid var(--authority);
      padding: 1.6rem 0 1.6rem 2.4rem;
      margin-bottom: 4rem;
      max-width: 56rem;
    }
    .audit-pullquote em {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 2.2vw, 2.2rem);
      color: var(--text-mid);
      line-height: 1.6;
    }

    /* Two-column layout */
    .audit-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    @media (min-width: 1024px) {
      .audit-layout {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: start;
      }
    }

    /* Left: Heading + Sliders */
    .audit-left {
      position: relative;
    }
    .audit-sliders {
      display: flex;
      flex-direction: column;
      gap: 2.8rem;
    }
    .audit-slider-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.2rem 1.6rem;
      align-items: center;
    }
    .audit-slider-label {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      grid-column: 1 / -1;
    }
    .audit-slider-name {
      font-family: var(--sans);
      font-size: 1.7rem;
      font-weight: 400;
      color: var(--text);
    }
    .audit-slider-sub {
      font-family: var(--mono);
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      color: var(--text-dim);
    }
    .audit-slider-value {
      font-family: var(--mono);
      font-size: 1.6rem;
      color: var(--authority);
      min-width: 5.5rem;
      text-align: right;
      letter-spacing: 0.02em;
    }

    /* Range input styling */
    .audit-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: rgba(200, 160, 240, 0.1);
      outline: none;
      cursor: pointer;
    }
    .audit-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--authority);
      border: 2px solid var(--bg);
      box-shadow: 0 0 10px rgba(200, 160, 240, 0.4), 0 0 0 1px rgba(200, 160, 240, 0.2);
      cursor: pointer;
      transition: box-shadow 0.2s, transform 0.15s;
    }
    .audit-range::-webkit-slider-thumb:hover {
      box-shadow: 0 0 16px rgba(200, 160, 240, 0.6), 0 0 0 1px rgba(200, 160, 240, 0.3);
      transform: scale(1.15);
    }
    .audit-range::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--authority);
      border: 2px solid var(--bg);
      box-shadow: 0 0 10px rgba(200, 160, 240, 0.4), 0 0 0 1px rgba(200, 160, 240, 0.2);
      cursor: pointer;
    }
    .audit-range::-moz-range-progress {
      background: var(--authority);
      border-radius: 2px;
      height: 4px;
    }

    /* Right: Output column */
    .audit-right {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    @media (min-width: 1024px) {
      .audit-right {
        position: sticky;
        top: 8rem;
        max-height: calc(100vh - 10rem);
        overflow-y: auto;
      }
    }

    /* Loss banner */
    .audit-loss-banner {
      background: rgba(224, 128, 160, 0.06);
      border: 1px solid rgba(224, 128, 160, 0.12);
      border-radius: 8px;
      padding: 3rem 2.5rem;
      text-align: center;
    }
    .audit-loss-big {
      font-family: var(--serif);
      font-size: clamp(5rem, 8vw, 8rem);
      font-weight: 400;
      line-height: 1;
      color: var(--expansion);
      margin-bottom: 0.4rem;
    }
    .audit-loss-label {
      font-family: var(--mono);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--text-mid);
      margin-bottom: 1.2rem;
    }
    .audit-loss-breakdown {
      font-size: 1.2rem;
      color: var(--text-dim);
      font-weight: 300;
      line-height: 1.6;
    }

    /* Output grid */
    .audit-output-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .audit-output-card {
      padding: 2.4rem 1.8rem;
      text-align: center;
    }
    .audit-card-pink {
      background: rgba(224, 128, 160, 0.04);
    }
    .audit-card-muted {
      background: var(--bg);
    }
    .audit-output-value {
      font-family: var(--serif);
      font-size: clamp(1.6rem, 2vw, 2rem);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 0.6rem;
    }
    .audit-card-pink .audit-output-value {
      color: var(--expansion);
    }
    .audit-card-muted .audit-output-value {
      color: var(--text-mid);
    }
    .audit-output-label {
      font-family: var(--mono);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
      line-height: 1.4;
    }

    /* Recovery card */
    .audit-recovery-card {
      background: rgba(200, 160, 240, 0.04);
      border: 1px solid rgba(200, 160, 240, 0.1);
      border-radius: 8px;
      padding: 2.5rem;
    }
    .audit-recovery-header {
      font-family: var(--mono);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--authority);
      margin-bottom: 2rem;
      text-align: center;
    }
    .audit-recovery-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.5rem;
      text-align: center;
    }
    .audit-recovery-value {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 3.5vw, 3.2rem);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .audit-stat-lavender .audit-recovery-value {
      color: var(--authority);
    }
    .audit-stat-teal .audit-recovery-value {
      color: var(--capacity);
    }
    .audit-recovery-label {
      font-family: var(--mono);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
    }

    /* Payback card */
    .audit-payback-card {
      background: rgba(96, 216, 168, 0.04);
      border: 1px solid rgba(96, 216, 168, 0.12);
      border-radius: 8px;
      padding: 2.5rem 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
    .audit-payback-title {
      font-family: var(--serif);
      font-size: clamp(2rem, 2.5vw, 2.4rem);
      font-weight: 400;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .audit-payback-sub {
      font-family: var(--mono);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      color: var(--text-dim);
    }
    .audit-payback-right {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .audit-payback-days {
      font-family: var(--serif);
      font-size: clamp(4rem, 6vw, 5.6rem);
      font-weight: 400;
      line-height: 1;
      color: var(--capacity);
    }
    .audit-payback-unit {
      font-family: var(--mono);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--capacity);
      opacity: 0.7;
    }

    /* Insight line */
    .audit-insight {
      font-family: var(--serif);
      font-size: clamp(2.7rem, 6vw, 3.4rem);
      color: var(--text-mid);
      line-height: 1.6;
      text-align: center;
      max-width: 700px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    .audit-hl {
      font-style: normal;
      background: linear-gradient(135deg, #8878ff, #c8a0f0, #60d8a8, #e080a0, #8878ff);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      animation: gradientShift 6s ease-in-out infinite;
    }

    /* Disclaimer */
    .audit-disclaimer {
      text-align: center;
      font-family: var(--mono);
      font-size: 0.65rem !important;
      letter-spacing: 0.04em;
      color: var(--text-dim);
      opacity: 0.35;
      line-height: 1.6;
      padding-bottom: 40px;
    }

    /* Mobile: stack payback card */
    @media (max-width: 600px) {
      .audit-payback-card {
        flex-direction: column;
        text-align: center;
      }
      .audit-recovery-stats {
        grid-template-columns: 1fr;
      }
    }

    /* ═══ ANIMATIONS ═══ */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
    }

    @keyframes roadmapPulse {
      0% { box-shadow: 0 0 0 0 rgba(96,216,168,0.5), 0 0 10px rgba(96,216,168,0.4); }
      70% { box-shadow: 0 0 0 10px rgba(96,216,168,0), 0 0 10px rgba(96,216,168,0.4); }
      100% { box-shadow: 0 0 0 0 rgba(96,216,168,0), 0 0 10px rgba(96,216,168,0.4); }
    }
    .roadmap-dot-pulse {
      animation: roadmapPulse 2s ease-out infinite;
    }

    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-d1 { transition-delay: 0.08s; }
    .reveal-d2 { transition-delay: 0.16s; }
    .reveal-d3 { transition-delay: 0.24s; }
    .reveal-d4 { transition-delay: 0.32s; }
    .reveal-d5 { transition-delay: 0.40s; }

    /* ═══ AMBIENT GLOW ═══ */
    .glow {
      position: fixed;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      filter: blur(120px);
      opacity: 0.35;
      will-change: transform;
    }
    .glow-1 {
      top: -10%;
      left: -5%;
      background: rgba(200, 160, 240, 0.08);
    }
    .glow-2 {
      top: 40%;
      right: -10%;
      background: rgba(96, 216, 168, 0.06);
    }
    .glow-3 {
      bottom: -5%;
      left: 30%;
      background: rgba(224, 128, 160, 0.05);
    }
    @media (max-width: 768px) {
      .glow { width: 400px; height: 400px; }
    }
    #mouseGlow {
      position: fixed;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      filter: blur(80px);
      opacity: 0;
      top: 0;
      left: 0;
      background: radial-gradient(circle, rgba(200, 160, 240, 0.15) 0%, rgba(200, 160, 240, 0.06) 40%, transparent 70%);
      will-change: transform;
    }

    /* ═══ HERO IGNITION ═══ */
    #heroMark { position: relative; z-index: 2; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; }
    .pulse-ring {
      position: absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      border: 1.5px solid transparent;
      opacity: 0;
      pointer-events: none;
      will-change: transform, opacity;
    }
    .pulse-ring-auth { border-color: rgba(160,144,255,0.5); }
    .pulse-ring-cap  { border-color: rgba(200,160,240,0.5); }
    .pulse-ring-exp  { border-color: rgba(128,232,184,0.5); }
    @media (max-width: 768px) {
      .pulse-ring { width: 120px; height: 120px; }
    }
    #heroMarkSvg { width: 180px; height: 180px; }
    @media (max-width: 768px) {
      #heroMarkSvg { width: 120px; height: 120px; }
    }
    #animMark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
    #animMarkSvg { width: min(300px, 55vw); height: min(300px, 55vw); }
    @media (max-width: 768px) {
      #animMarkSvg { width: min(220px, 60vw); height: min(220px, 60vw); }
    }
    @keyframes markBreathe {
      0%, 100% { filter: drop-shadow(0 0 20px rgba(136,120,255,0.3)) drop-shadow(0 0 50px rgba(200,160,240,0.12)); }
      50% { filter: drop-shadow(0 0 30px rgba(136,120,255,0.5)) drop-shadow(0 0 70px rgba(200,160,240,0.2)); }
    }
    .mark-breathing { animation: markBreathe 3s ease-in-out infinite; }
    #orbAuth.orb-converging { box-shadow: 0 0 40px 15px rgba(160,144,255,0.3); }
    #orbCap.orb-converging { box-shadow: 0 0 40px 15px rgba(200,160,240,0.3); }
    #orbExp.orb-converging { box-shadow: 0 0 40px 15px rgba(128,232,184,0.3); }

    /* ═══ Mobile chat: new scene types (context, memory, pattern) + artifact tweaks ═══ */

    /* Context source chips — vault + MCP surfaces */
    .mc-context {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0;
      padding: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .mc-context.show { opacity: 1; }
    .mc-ctx-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border: 1px solid rgba(140,120,255,0.15);
      border-radius: 999px;
      background: rgba(140,120,255,0.04);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
    }

    /* Auto-memory card — mirrors ACE Desktop .chat-memory-card bloom */
    .mc-memory {
      border: 1px solid rgba(140,120,255,0.12);
      border-radius: 10px;
      background: rgba(16,20,32,0.4);
      padding: 0;
      margin: 8px 0;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.4s ease;
      animation: mcMemBloom 1.8s ease-out;
    }
    .mc-memory.show { opacity: 1; }
    @keyframes mcMemBloom {
      0%   { box-shadow: 0 0 0 rgba(212,165,116,0); }
      25%  { box-shadow: 0 0 14px rgba(212,165,116,0.22); }
      100% { box-shadow: 0 0 0 rgba(212,165,116,0); }
    }
    .mc-mem-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
    }
    .mc-mem-icon { font-size: 12px; }
    .mc-mem-title { font-weight: 500; }
    .mc-mem-type {
      font-size: 8px;
      padding: 1px 6px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border: 1px solid transparent;
      margin-left: 4px;
    }
    .mc-mem-type-project {
      background: rgba(96,216,168,0.10);
      color: #60d8a8;
      border-color: rgba(96,216,168,0.22);
    }
    .mc-mem-type-feedback {
      background: rgba(212,165,116,0.10);
      color: #d4a574;
      border-color: rgba(212,165,116,0.22);
    }
    .mc-mem-type-user {
      background: rgba(200,160,240,0.10);
      color: #c8a0f0;
      border-color: rgba(200,160,240,0.22);
    }
    .mc-mem-type-reference {
      background: rgba(140,140,168,0.06);
      color: #8c8ca8;
      border-color: rgba(140,140,168,0.18);
    }
    .mc-mem-body {
      padding: 0 12px 10px;
      font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
      font-size: 13px;
      line-height: 1.5;
      color: var(--m-text);
    }

    /* Pattern-noticed card — /blind-spots warm-gold accent */
    .mc-pattern {
      border: 1px solid rgba(140,120,255,0.12);
      border-left: 3px solid #d4a574;
      border-radius: 8px;
      background: rgba(16,20,32,0.3);
      padding: 10px 14px;
      margin: 8px 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      animation: mcPatBloom 1.8s ease-out;
    }
    .mc-pattern.show { opacity: 1; }
    @keyframes mcPatBloom {
      0%   { box-shadow: 0 0 0 rgba(212,165,116,0); }
      25%  { box-shadow: 0 0 14px rgba(212,165,116,0.22); }
      100% { box-shadow: 0 0 0 rgba(212,165,116,0); }
    }
    .mc-pat-head {
      display: flex;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: #d4a574;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 4px;
    }
    .mc-pat-body {
      font-size: 13px;
      line-height: 1.5;
      color: var(--m-text);
    }

    /* Parallel-thread card — green live pulse (mobile-native multi-agent beat) */
    .mc-parallel {
      border: 1px solid rgba(96,216,168,0.22);
      border-left: 3px solid #60d8a8;
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(96,216,168,0.06), rgba(16,20,32,0.3));
      padding: 10px 14px;
      margin: 8px 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      animation: mcParBloom 1.8s ease-out;
    }
    .mc-parallel.show { opacity: 1; }
    @keyframes mcParBloom {
      0%   { box-shadow: 0 0 0 rgba(96,216,168,0); transform: translateX(-4px); }
      25%  { box-shadow: 0 0 14px rgba(96,216,168,0.28); transform: translateX(0); }
      100% { box-shadow: 0 0 0 rgba(96,216,168,0); }
    }
    .mc-par-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: #60d8a8;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
    }
    .mc-par-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #60d8a8;
      box-shadow: 0 0 6px rgba(96,216,168,0.6);
      animation: mcParDot 1.4s ease-in-out infinite;
    }
    @keyframes mcParDot {
      0%, 100% { box-shadow: 0 0 4px rgba(96,216,168,0.4); opacity: 0.7; }
      50%      { box-shadow: 0 0 10px rgba(96,216,168,0.9); opacity: 1; }
    }
    .mc-par-title { flex: 1; color: var(--m-text); font-weight: 500; letter-spacing: 0.02em; }
    .mc-par-status {
      font-size: 7px;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(96,216,168,0.12);
      border: 1px solid rgba(96,216,168,0.24);
      color: #60d8a8;
    }
    .mc-par-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .mc-par-line {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--m-text-mid);
      padding-left: 12px;
      position: relative;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .mc-par-line::before {
      content: '\u203A';
      position: absolute;
      left: 0; top: 0;
      color: #60d8a8;
      opacity: 0.6;
    }
    .mc-par-line.show {
      opacity: 1;
      transform: translateX(0);
    }

    /* Light-mode overrides */
    body.light .mc-memory {
      border-color: rgba(100,80,200,0.14);
      background: rgba(255,255,255,0.6);
      animation: mcMemBloomLight 1.8s ease-out;
    }
    body.light .mc-pattern {
      border-color: rgba(100,80,200,0.14);
      border-left-color: #b88855;
      background: rgba(255,255,255,0.5);
      animation: mcPatBloomLight 1.8s ease-out;
    }
    body.light .mc-pat-head { color: #b88855; }
    body.light .mc-parallel {
      border-color: rgba(100,80,200,0.14);
      border-left-color: #1a8a60;
      background: linear-gradient(180deg, rgba(26,138,96,0.06), rgba(255,255,255,0.5));
    }
    body.light .mc-par-head { color: #1a8a60; }
    body.light .mc-par-dot { background: #1a8a60; box-shadow: 0 0 6px rgba(26,138,96,0.5); }
    body.light .mc-par-status { background: rgba(26,138,96,0.14); border-color: rgba(26,138,96,0.3); color: #1a8a60; }
    @keyframes mcMemBloomLight {
      0%   { box-shadow: 0 0 0 rgba(184,136,85,0); }
      25%  { box-shadow: 0 0 14px rgba(184,136,85,0.30); }
      100% { box-shadow: 0 0 0 rgba(184,136,85,0); }
    }
    @keyframes mcPatBloomLight {
      0%   { box-shadow: 0 0 0 rgba(184,136,85,0); }
      25%  { box-shadow: 0 0 14px rgba(184,136,85,0.30); }
      100% { box-shadow: 0 0 0 rgba(184,136,85,0); }
    }

    /* Respect reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .mc-memory,
      .mc-pattern,
      .mc-parallel,
      body.light .mc-memory,
      body.light .mc-pattern,
      body.light .mc-parallel {
        animation: none;
      }
      .mc-par-dot { animation: none; }
    }