npm - groove-dev - Versions diffs - 0.26.39 → 0.27.1 - Mend

groove-dev 0.26.39 → 0.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (915) hide show

package/slides/index.html DELETED Viewed

@@ -1,825 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>GROOVE — Intelligent Orchestration for AI Coding Agents</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css">
-  <style>
-    :root {
-      --bg-1: #0F172A; --bg-2: #1E293B; --bg-3: #334155;
-      --surface: rgba(255,255,255,0.04);
-      --border: rgba(255,255,255,0.08);
-      --text: #F5F5F5; --muted: #94A3B8;
-      --accent: #4338CA; --accent-light: #6366F1;
-      --amber: #D97706; --amber-light: #F59E0B;
-      --rose: #E11D48;
-    }
-    .reveal { font-family: Arial, Helvetica, sans-serif; color: var(--text); }
-    .reveal h1, .reveal h2, .reveal h3 { font-family: Georgia, 'Times New Roman', serif; text-transform: none; }
-    .reveal .slides section {
-      text-align: left; padding: 3rem; height: 100%; box-sizing: border-box;
-    }
-    .reveal .slides section::after {
-      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
-    }
-    .reveal .slides section > * { position: relative; z-index: 2; }
-    /* Backgrounds */
-    .bg-steel { background: linear-gradient(135deg, #0F172A, #1E293B, #334155); }
-    .bg-midnight { background: linear-gradient(135deg, #0B0B1A, #1A1A3E, #0F0F2A); }
-    .bg-ink { background: linear-gradient(145deg, #0C0C1D, #151530, #1A1A2E); }
-    .bg-obsidian { background: linear-gradient(160deg, #121215, #1C1917, #0C0A09); }
-    .bg-deep { background: linear-gradient(135deg, #0A0A1F, #12123A, #1A1A50); }
-    /* Typography */
-    .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--accent-light); font-family: Arial, sans-serif; font-weight: 700; margin-bottom: 0.75rem; }
-    .brand { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.05em; position: absolute; top: 1.5rem; left: 3rem; z-index: 10; }
-    .category { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.3em; text-transform: uppercase; position: absolute; top: 1.5rem; right: 3rem; z-index: 10; }
-    .divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 1.5rem 0; }
-    .accent-block { border-left: 3px solid var(--accent); padding-left: 1.5rem; }
-    .col-row { display: flex; gap: 3rem; }
-    .col-row > div { flex: 1; }
-    /* Slide-specific */
-    .hero-number { font-family: Georgia, serif; font-size: 72px; font-weight: 700; color: var(--accent-light); line-height: 1; }
-    .hero-unit { font-size: 18px; color: var(--text); font-weight: 700; margin-top: 0.25rem; }
-    .pain-word { position: absolute; font-style: italic; color: rgba(255,255,255,0.15); font-family: Arial, sans-serif; }
-    /* Responsive slides */
-    .reveal .slides { width: 960px !important; height: 540px !important; }
-    .slide-content { position: relative; width: 100%; height: 100%; }
-  </style>
-</head>
-<body>
-<div class="reveal"><div class="slides">
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 1 — TITLE
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-steel">
-  <div class="slide-content" style="display:flex; align-items:center; justify-content:space-between;">
-    <div style="max-width:55%; padding-top:1rem;">
-      <div class="label" style="margin-bottom:1.5rem;">INVESTOR PRESENTATION — 2026</div>
-      <h1 style="font-size:56px; margin:0; line-height:1.1; color:#F5F5F5; font-weight:700;">GROOVE.</h1>
-      <p style="font-size:22px; color:var(--muted); margin-top:1rem; line-height:1.5; max-width:420px;">
-        The intelligent orchestration layer<br>for AI coding agents.
-      </p>
-      <hr class="divider" style="max-width:280px; margin-top:2rem;">
-      <p style="font-size:12px; color:var(--muted); letter-spacing:0.1em;">groovedev.ai</p>
-    </div>
-    <div style="position:absolute; right:-60px; top:-40px;">
-      <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="width:420px; height:420px; opacity:0.85;">
-        <defs>
-          <radialGradient id="orb1" cx="35%" cy="30%" r="60%">
-            <stop offset="0%" stop-color="#6366F1" stop-opacity="0.5"/>
-            <stop offset="40%" stop-color="#4338CA" stop-opacity="0.3"/>
-            <stop offset="100%" stop-color="#1E1B4B" stop-opacity="0.05"/>
-          </radialGradient>
-          <radialGradient id="hl1" cx="30%" cy="25%" r="25%">
-            <stop offset="0%" stop-color="#fff" stop-opacity="0.25"/>
-            <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
-          </radialGradient>
-          <filter id="glow1"><feGaussianBlur stdDeviation="20" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-        </defs>
-        <circle cx="250" cy="250" r="220" fill="url(#orb1)" filter="url(#glow1)"/>
-        <circle cx="250" cy="250" r="220" fill="url(#hl1)"/>
-        <ellipse cx="250" cy="430" rx="180" ry="20" fill="#000" opacity="0.15" filter="url(#glow1)"/>
-      </svg>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 2 — THE PROBLEM
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-midnight">
-  <span class="brand">GROOVE.</span>
-  <span class="category">THE PROBLEM</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">WHY THIS MATTERS</div>
-    <h2 style="font-size:40px; margin:0; line-height:1.2; max-width:52%;">AI coding tools are broken<br>at the multi-agent level.</h2>
-    <p style="font-size:15px; color:var(--muted); margin-top:1rem; max-width:48%; line-height:1.6;">
-      Agents clash on files. Context degrades mid-session. Every new session starts blind. Tokens vanish with zero transparency.
-    </p>
-    <!-- Scattered pain words -->
-    <span class="pain-word" style="right:80px; top:60px; font-size:22px; opacity:0.18;">Agents Clash</span>
-    <span class="pain-word" style="right:40px; top:160px; font-size:17px; opacity:0.13;">Cold-Start Tax</span>
-    <span class="pain-word" style="right:120px; top:250px; font-size:20px; opacity:0.16;">Context Decay</span>
-    <span class="pain-word" style="right:20px; top:330px; font-size:15px; opacity:0.11;">Invisible Waste</span>
-    <span class="pain-word" style="right:90px; top:400px; font-size:18px; opacity:0.14;">Terminal-Only</span>
-    <span class="pain-word" style="right:200px; top:120px; font-size:14px; opacity:0.10;">No Coordination</span>
-    <span class="pain-word" style="right:180px; top:360px; font-size:16px; opacity:0.12;">Session Loss</span>
-    <!-- Atmospheric blob -->
-    <svg viewBox="0 0 600 600" style="position:absolute; right:-80px; bottom:-120px; width:450px; opacity:0.4; z-index:1;">
-      <defs>
-        <radialGradient id="blob-p" cx="40%" cy="40%">
-          <stop offset="0%" stop-color="#E11D48" stop-opacity="0.35"/>
-          <stop offset="100%" stop-color="#E11D48" stop-opacity="0"/>
-        </radialGradient>
-        <filter id="blob-blur-p"><feGaussianBlur stdDeviation="35"/></filter>
-      </defs>
-      <path d="M300,80 C420,80 520,180 500,300 C480,420 380,520 260,500 C140,480 60,380 80,260 C100,140 180,80 300,80 Z" fill="url(#blob-p)" filter="url(#blob-blur-p)"/>
-    </svg>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 3 — THE COST OF CHAOS
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-ink">
-  <span class="brand">GROOVE.</span>
-  <span class="category">MARKET REALITY</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">THE TOKEN CRISIS</div>
-    <h2 style="font-size:36px; margin:0; line-height:1.2; max-width:55%;">Providers subsidize billions<br>in wasted compute.</h2>
-    <div style="display:flex; gap:4rem; margin-top:2.5rem; align-items:flex-end;">
-      <div>
-        <div class="hero-number" style="color:var(--amber);">$600M</div>
-        <div class="hero-unit">Annual subsidy burn<br><span style="font-size:12px; color:var(--muted);">per 10K Max subscribers</span></div>
-      </div>
-      <div style="flex:1; max-width:340px;">
-        <svg viewBox="0 0 400 200" style="width:100%;">
-          <defs>
-            <linearGradient id="bar-g1" x1="0" y1="1" x2="0" y2="0">
-              <stop offset="0%" stop-color="#D97706" stop-opacity="0.15"/>
-              <stop offset="100%" stop-color="#D97706" stop-opacity="0.7"/>
-            </linearGradient>
-            <linearGradient id="bar-g2" x1="0" y1="1" x2="0" y2="0">
-              <stop offset="0%" stop-color="#4338CA" stop-opacity="0.15"/>
-              <stop offset="100%" stop-color="#4338CA" stop-opacity="0.7"/>
-            </linearGradient>
-          </defs>
-          <!-- Bars: User pays vs Actual cost -->
-          <rect x="30" y="165" width="55" height="25" rx="4" fill="url(#bar-g2)" style="filter:drop-shadow(0 -2px 6px rgba(67,56,202,0.3))"/>
-          <rect x="110" y="30" width="55" height="160" rx="4" fill="url(#bar-g1)" style="filter:drop-shadow(0 -3px 10px rgba(217,119,6,0.4))"/>
-          <rect x="200" y="155" width="55" height="35" rx="4" fill="url(#bar-g2)" style="filter:drop-shadow(0 -2px 6px rgba(67,56,202,0.3))"/>
-          <rect x="280" y="10" width="55" height="180" rx="4" fill="url(#bar-g1)" style="filter:drop-shadow(0 -3px 10px rgba(217,119,6,0.4))"/>
-          <!-- Labels -->
-          <text x="57" y="198" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">$20</text>
-          <text x="137" y="198" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">$200-500</text>
-          <text x="227" y="198" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">$200</text>
-          <text x="307" y="198" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">$3-5K</text>
-          <!-- Group labels -->
-          <text x="95" y="12" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="10" font-family="Arial" font-weight="bold">Pro</text>
-          <text x="265" y="12" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="10" font-family="Arial" font-weight="bold">Max</text>
-          <text x="57" y="158" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="8" font-family="Arial">Pays</text>
-          <text x="137" y="24" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="8" font-family="Arial">Costs</text>
-        </svg>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 4 — THE SOLUTION / 6-LAYER ARCHITECTURE
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-steel">
-  <span class="brand">GROOVE.</span>
-  <span class="category">THE SOLUTION</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">SIX-LAYER ORCHESTRATION</div>
-    <h2 style="font-size:34px; margin:0 0 1.5rem; line-height:1.2; max-width:50%;">The coordination layer your agents are missing.</h2>
-    <div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
-      <!-- Left: stacked layers -->
-      <div style="flex:1; max-width:52%;">
-        <div style="display:flex; flex-direction:column; gap:3px;">
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#6366F1;">
-            <span style="font-size:10px; color:#6366F1; font-weight:700; letter-spacing:0.15em;">01</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Process Management</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">Spawn, kill, monitor across providers</span>
-          </div>
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#818CF8;">
-            <span style="font-size:10px; color:#818CF8; font-weight:700; letter-spacing:0.15em;">02</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Coordination</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">File locks, introductions, conflict prevention</span>
-          </div>
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#A78BFA;">
-            <span style="font-size:10px; color:#A78BFA; font-weight:700; letter-spacing:0.15em;">03</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Intelligence</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">Journalist, rotation, degradation detection</span>
-          </div>
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#D97706;">
-            <span style="font-size:10px; color:#D97706; font-weight:700; letter-spacing:0.15em;">04</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Cost Optimization</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">Adaptive routing, token tracking, savings</span>
-          </div>
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#F59E0B;">
-            <span style="font-size:10px; color:#F59E0B; font-weight:700; letter-spacing:0.15em;">05</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Integration</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">MCP servers, federation, scheduling</span>
-          </div>
-          <div class="accent-block" style="padding:0.35rem 0 0.35rem 1rem; border-color:#FBBF24;">
-            <span style="font-size:10px; color:#FBBF24; font-weight:700; letter-spacing:0.15em;">06</span>
-            <span style="font-size:13px; color:var(--text); font-weight:700; margin-left:0.5rem;">Interface</span>
-            <span style="font-size:11px; color:var(--muted); margin-left:0.5rem;">REST API, WebSocket, React GUI, CLI</span>
-          </div>
-        </div>
-      </div>
-      <!-- Right: node network -->
-      <div style="flex:1; display:flex; align-items:center; justify-content:center;">
-        <svg viewBox="0 0 320 280" style="width:300px;">
-          <defs>
-            <filter id="ng"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-          </defs>
-          <!-- Connections -->
-          <path d="M160,30 C160,80 80,80 80,110" fill="none" stroke="#6366F1" stroke-width="1.5" opacity="0.4" filter="url(#ng)"/>
-          <path d="M160,30 C160,80 240,80 240,110" fill="none" stroke="#6366F1" stroke-width="1.5" opacity="0.4" filter="url(#ng)"/>
-          <path d="M80,110 C80,160 120,160 120,190" fill="none" stroke="#818CF8" stroke-width="1.5" opacity="0.35" filter="url(#ng)"/>
-          <path d="M80,110 C50,160 70,190 80,210" fill="none" stroke="#818CF8" stroke-width="1.5" opacity="0.35" filter="url(#ng)"/>
-          <path d="M240,110 C240,160 200,160 200,190" fill="none" stroke="#A78BFA" stroke-width="1.5" opacity="0.35" filter="url(#ng)"/>
-          <path d="M240,110 C270,160 250,190 240,210" fill="none" stroke="#A78BFA" stroke-width="1.5" opacity="0.35" filter="url(#ng)"/>
-          <path d="M120,190 C140,230 170,240 160,260" fill="none" stroke="#D97706" stroke-width="1.5" opacity="0.3" filter="url(#ng)"/>
-          <path d="M200,190 C180,230 170,240 160,260" fill="none" stroke="#D97706" stroke-width="1.5" opacity="0.3" filter="url(#ng)"/>
-          <!-- Nodes -->
-          <circle cx="160" cy="30" r="18" fill="rgba(255,255,255,0.05)" stroke="#6366F1" stroke-width="2" filter="url(#ng)"/>
-          <text x="160" y="34" text-anchor="middle" fill="white" font-size="8" font-family="Arial" font-weight="700">GROOVE</text>
-          <circle cx="80" cy="110" r="15" fill="rgba(255,255,255,0.04)" stroke="#818CF8" stroke-width="1.5"/>
-          <text x="80" y="114" text-anchor="middle" fill="white" font-size="7" font-family="Arial">Claude</text>
-          <circle cx="240" cy="110" r="15" fill="rgba(255,255,255,0.04)" stroke="#A78BFA" stroke-width="1.5"/>
-          <text x="240" y="114" text-anchor="middle" fill="white" font-size="7" font-family="Arial">Codex</text>
-          <circle cx="120" cy="190" r="13" fill="rgba(255,255,255,0.03)" stroke="#D97706" stroke-width="1.5"/>
-          <text x="120" y="194" text-anchor="middle" fill="white" font-size="7" font-family="Arial">Gemini</text>
-          <circle cx="200" cy="190" r="13" fill="rgba(255,255,255,0.03)" stroke="#F59E0B" stroke-width="1.5"/>
-          <text x="200" y="194" text-anchor="middle" fill="white" font-size="7" font-family="Arial">Ollama</text>
-          <circle cx="80" cy="210" r="11" fill="rgba(255,255,255,0.03)" stroke="#818CF8" stroke-width="1"/>
-          <text x="80" y="214" text-anchor="middle" fill="white" font-size="6" font-family="Arial">Aider</text>
-          <circle cx="240" cy="210" r="11" fill="rgba(255,255,255,0.03)" stroke="#A78BFA" stroke-width="1"/>
-          <text x="240" y="214" text-anchor="middle" fill="white" font-size="6" font-family="Arial">Future</text>
-          <circle cx="160" cy="260" r="16" fill="rgba(255,255,255,0.04)" stroke="#FBBF24" stroke-width="1.5"/>
-          <text x="160" y="264" text-anchor="middle" fill="white" font-size="7" font-family="Arial">GUI</text>
-        </svg>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 5 — ZERO COLD-START (THE JOURNALIST)
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-obsidian">
-  <span class="brand">GROOVE.</span>
-  <span class="category">INTELLIGENCE</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">ZERO COLD-START</div>
-    <h2 style="font-size:36px; margin:0; line-height:1.2; max-width:52%;">Open a new session.<br>It already knows everything.</h2>
-    <p style="font-size:14px; color:var(--muted); margin-top:0.75rem; max-width:46%; line-height:1.6;">
-      The Journalist synthesizes all agent activity into living documentation. New agents read one file and know the entire project state.
-    </p>
-    <!-- Spline area chart showing context growth -->
-    <svg viewBox="0 0 800 220" style="width:100%; margin-top:1.5rem;">
-      <defs>
-        <linearGradient id="area-j" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stop-color="#4338CA" stop-opacity="0.25"/>
-          <stop offset="100%" stop-color="#4338CA" stop-opacity="0"/>
-        </linearGradient>
-        <filter id="glow-j"><feGaussianBlur stdDeviation="2"/></filter>
-      </defs>
-      <!-- Grid lines -->
-      <line x1="40" y1="30" x2="40" y2="190" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
-      <line x1="40" y1="190" x2="780" y2="190" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
-      <line x1="40" y1="140" x2="780" y2="140" stroke="rgba(255,255,255,0.03)" stroke-width="1" stroke-dasharray="4"/>
-      <line x1="40" y1="90" x2="780" y2="90" stroke="rgba(255,255,255,0.03)" stroke-width="1" stroke-dasharray="4"/>
-      <!-- Area fill -->
-      <path d="M40,185 C120,180 200,160 300,130 S450,70 550,55 C620,45 700,38 780,32 L780,190 L40,190 Z" fill="url(#area-j)"/>
-      <!-- Spline -->
-      <path d="M40,185 C120,180 200,160 300,130 S450,70 550,55 C620,45 700,38 780,32" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round" style="filter:drop-shadow(0 0 6px #4338CA)"/>
-      <!-- Data points -->
-      <circle cx="40" cy="185" r="3" fill="#6366F1" style="filter:drop-shadow(0 0 6px #4338CA)"/>
-      <circle cx="300" cy="130" r="4" fill="#6366F1" style="filter:drop-shadow(0 0 8px #4338CA)"/>
-      <circle cx="550" cy="55" r="4" fill="#6366F1" style="filter:drop-shadow(0 0 8px #4338CA)"/>
-      <circle cx="780" cy="32" r="5" fill="#6366F1" style="filter:drop-shadow(0 0 10px #4338CA)"/>
-      <!-- Labels -->
-      <text x="40" y="208" fill="rgba(255,255,255,0.4)" font-size="9" font-family="Arial">Agent 1 spawns</text>
-      <text x="280" y="208" fill="rgba(255,255,255,0.4)" font-size="9" font-family="Arial">Journalist cycle</text>
-      <text x="520" y="208" fill="rgba(255,255,255,0.4)" font-size="9" font-family="Arial">Agent 3 spawns</text>
-      <text x="720" y="208" fill="rgba(255,255,255,0.4)" font-size="9" font-family="Arial">Full context</text>
-      <!-- Annotation -->
-      <text x="600" y="80" fill="var(--accent-light)" font-size="11" font-family="Georgia" font-style="italic">Zero cold-start</text>
-    </svg>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 6 — INFINITE SESSIONS (CONTEXT ROTATION)
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-deep">
-  <span class="brand">GROOVE.</span>
-  <span class="category">CONTEXT ENGINE</span>
-  <div class="slide-content" style="display:flex; align-items:center; padding-top:2rem;">
-    <div style="max-width:50%;">
-      <div class="label">INFINITE SESSIONS</div>
-      <h2 style="font-size:38px; margin:0; line-height:1.15;">Sessions that<br>never degrade.</h2>
-      <p style="font-size:14px; color:var(--muted); margin-top:1rem; line-height:1.6;">
-        Adaptive rotation detects quality degradation in real-time. Kills the session before it fails. Respawns with fresh context and a perfect handoff brief.
-      </p>
-      <div style="margin-top:1.5rem;">
-        <div class="accent-block" style="margin-bottom:0.75rem; border-color:#D97706;">
-          <div style="font-size:13px; color:var(--text); font-weight:700;">Degradation Detection</div>
-          <div style="font-size:11px; color:var(--muted);">Sliding window scores health 0-100 every 15s</div>
-        </div>
-        <div class="accent-block" style="border-color:#4338CA;">
-          <div style="font-size:13px; color:var(--text); font-weight:700;">Adaptive Thresholds</div>
-          <div style="font-size:11px; color:var(--muted);">Learns per provider + role. Converges in ~10 rotations.</div>
-        </div>
-      </div>
-    </div>
-    <!-- Progress arc visual -->
-    <div style="flex:1; display:flex; align-items:center; justify-content:center;">
-      <svg viewBox="0 0 280 280" style="width:260px;">
-        <defs>
-          <linearGradient id="arc-g" x1="0" y1="0" x2="1" y2="1">
-            <stop offset="0%" stop-color="#6366F1"/>
-            <stop offset="100%" stop-color="#4338CA"/>
-          </linearGradient>
-        </defs>
-        <!-- Background arc -->
-        <circle cx="140" cy="140" r="110" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="22"/>
-        <!-- Quality arc (90% = 324 of 360) — dasharray = 2*pi*r * pct -->
-        <circle cx="140" cy="140" r="110" fill="none" stroke="url(#arc-g)" stroke-width="22"
-          stroke-dasharray="622 691" stroke-linecap="round"
-          transform="rotate(-90 140 140)" style="filter:drop-shadow(0 0 12px #4338CA)"/>
-        <!-- Center content -->
-        <text x="140" y="130" text-anchor="middle" fill="white" font-size="42" font-weight="bold" font-family="Georgia">90%</text>
-        <text x="140" y="155" text-anchor="middle" fill="var(--muted)" font-size="12" font-family="Arial">Quality Score</text>
-        <text x="140" y="175" text-anchor="middle" fill="#6366F1" font-size="10" font-family="Arial" font-weight="700">HEALTHY</text>
-        <!-- Threshold marker -->
-        <line x1="140" y1="38" x2="140" y2="48" stroke="#D97706" stroke-width="2" transform="rotate(90 140 140)"/>
-        <text x="258" y="144" fill="#D97706" font-size="9" font-family="Arial" font-weight="700">75% threshold</text>
-      </svg>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 7 — ADAPTIVE INTELLIGENCE
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-midnight">
-  <span class="brand">GROOVE.</span>
-  <span class="category">INTELLIGENCE</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">ADAPTIVE MODEL ROUTING</div>
-    <h2 style="font-size:34px; margin:0; line-height:1.2; max-width:52%;">The right model for every task.<br>Automatically.</h2>
-    <div style="display:flex; gap:2.5rem; margin-top:1.5rem; align-items:flex-start;">
-      <div style="flex:1;">
-        <div style="margin-bottom:1rem;">
-          <div style="display:flex; align-items:baseline; gap:0.5rem;">
-            <span style="font-size:11px; color:#A78BFA; font-weight:700; letter-spacing:0.1em;">HEAVY</span>
-            <span style="font-size:20px; color:var(--text); font-weight:700; font-family:Georgia;">Opus</span>
-          </div>
-          <div style="font-size:11px; color:var(--muted);">Planning, architecture, complex refactors</div>
-          <div style="font-size:11px; color:#D97706; margin-top:2px;">$0.045/1K tokens</div>
-        </div>
-        <hr class="divider">
-        <div style="margin-bottom:1rem;">
-          <div style="display:flex; align-items:baseline; gap:0.5rem;">
-            <span style="font-size:11px; color:#6366F1; font-weight:700; letter-spacing:0.1em;">MEDIUM</span>
-            <span style="font-size:20px; color:var(--text); font-weight:700; font-family:Georgia;">Sonnet</span>
-          </div>
-          <div style="font-size:11px; color:var(--muted);">Backend, frontend, testing</div>
-          <div style="font-size:11px; color:#D97706; margin-top:2px;">$0.009/1K tokens</div>
-        </div>
-        <hr class="divider">
-        <div>
-          <div style="display:flex; align-items:baseline; gap:0.5rem;">
-            <span style="font-size:11px; color:#818CF8; font-weight:700; letter-spacing:0.1em;">LIGHT</span>
-            <span style="font-size:20px; color:var(--text); font-weight:700; font-family:Georgia;">Haiku</span>
-          </div>
-          <div style="font-size:11px; color:var(--muted);">Docs, synthesis, simple queries</div>
-          <div style="font-size:11px; color:#D97706; margin-top:2px;">$0.002/1K tokens</div>
-        </div>
-      </div>
-      <!-- Radar chart -->
-      <div style="flex:1; display:flex; align-items:center; justify-content:center;">
-        <svg viewBox="0 0 280 280" style="width:260px;">
-          <defs>
-            <filter id="rg"><feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-          </defs>
-          <!-- Concentric hexagons -->
-          <polygon points="140,30 230,80 230,180 140,230 50,180 50,80" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
-          <polygon points="140,63 207,96 207,164 140,197 73,164 73,96" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
-          <polygon points="140,97 183,113 183,147 140,163 97,147 97,113" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
-          <!-- Axes -->
-          <line x1="140" y1="30" x2="140" y2="230" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
-          <line x1="50" y1="80" x2="230" y2="180" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
-          <line x1="50" y1="180" x2="230" y2="80" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
-          <!-- Data polygon (GROOVE) -->
-          <polygon points="140,40 225,88 215,175 140,215 60,170 55,85" fill="#4338CA" fill-opacity="0.15" stroke="#6366F1" stroke-width="2" filter="url(#rg)"/>
-          <!-- Competitor polygon (smaller) -->
-          <polygon points="140,75 195,105 185,155 140,180 90,155 85,105" fill="#D97706" fill-opacity="0.08" stroke="#D97706" stroke-width="1" stroke-dasharray="4" opacity="0.5"/>
-          <!-- Data points -->
-          <circle cx="140" cy="40" r="4" fill="#6366F1" style="filter:drop-shadow(0 0 6px #4338CA)"/>
-          <circle cx="225" cy="88" r="4" fill="#6366F1"/>
-          <circle cx="215" cy="175" r="4" fill="#6366F1"/>
-          <circle cx="140" cy="215" r="4" fill="#6366F1"/>
-          <circle cx="60" cy="170" r="4" fill="#6366F1"/>
-          <circle cx="55" cy="85" r="4" fill="#6366F1"/>
-          <!-- Labels -->
-          <text x="140" y="20" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Speed</text>
-          <text x="248" y="85" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Quality</text>
-          <text x="240" y="182" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Accuracy</text>
-          <text x="140" y="245" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Cost</text>
-          <text x="15" y="178" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Context</text>
-          <text x="15" y="82" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Multi-tool</text>
-          <!-- Legend -->
-          <line x1="60" y1="260" x2="80" y2="260" stroke="#6366F1" stroke-width="2"/>
-          <text x="85" y="264" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">GROOVE</text>
-          <line x1="150" y1="260" x2="170" y2="260" stroke="#D97706" stroke-width="1" stroke-dasharray="4"/>
-          <text x="175" y="264" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Arial">Alternatives</text>
-        </svg>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 8 — TOKEN ECONOMICS (BREATHING SLIDE)
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-ink">
-  <span class="brand">GROOVE.</span>
-  <span class="category">ECONOMICS</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">TOKEN ECONOMICS</div>
-    <h2 style="font-size:36px; margin:0; line-height:1.2; max-width:55%;">Groove pays for itself<br>in the first session.</h2>
-    <div style="display:flex; gap:5rem; margin-top:2.5rem;">
-      <!-- Metric 1 -->
-      <div>
-        <div class="hero-number">40–60%</div>
-        <div class="hero-unit">Token Savings</div>
-        <div style="margin-top:1rem;">
-          <svg viewBox="0 0 160 160" style="width:120px;">
-            <circle cx="80" cy="80" r="60" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="16"/>
-            <circle cx="80" cy="80" r="60" fill="none" stroke="url(#ring-g1)" stroke-width="16"
-              stroke-dasharray="188 377" stroke-linecap="round"
-              transform="rotate(-90 80 80)" style="filter:drop-shadow(0 0 8px #4338CA)"/>
-            <defs><linearGradient id="ring-g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/></linearGradient></defs>
-            <text x="80" y="86" text-anchor="middle" fill="white" font-size="22" font-weight="bold" font-family="Georgia">50%</text>
-          </svg>
-        </div>
-      </div>
-      <div style="border-left:1px solid rgba(255,255,255,0.06); height:auto;"></div>
-      <!-- Metric 2 -->
-      <div>
-        <div class="hero-number" style="color:var(--amber);">90%</div>
-        <div class="hero-unit">Cold-Start Reduction</div>
-        <div style="margin-top:1rem;">
-          <svg viewBox="0 0 160 160" style="width:120px;">
-            <circle cx="80" cy="80" r="60" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="16"/>
-            <circle cx="80" cy="80" r="60" fill="none" stroke="url(#ring-g2)" stroke-width="16"
-              stroke-dasharray="339 377" stroke-linecap="round"
-              transform="rotate(-90 80 80)" style="filter:drop-shadow(0 0 8px #D97706)"/>
-            <defs><linearGradient id="ring-g2" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#D97706"/></linearGradient></defs>
-            <text x="80" y="86" text-anchor="middle" fill="white" font-size="22" font-weight="bold" font-family="Georgia">90%</text>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 9 — MULTI-PROVIDER SUPPORT
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-steel">
-  <span class="brand">GROOVE.</span>
-  <span class="category">PLATFORM</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">PROVIDER AGNOSTIC</div>
-    <h2 style="font-size:34px; margin:0; line-height:1.2; max-width:55%;">One orchestration layer.<br>Every provider.</h2>
-    <p style="font-size:13px; color:var(--muted); margin-top:0.5rem; max-width:46%; line-height:1.6;">
-      The only orchestrator that works across Claude Code, Codex, Gemini, Ollama, and Aider. Mix models per agent.
-    </p>
-    <!-- Heatmap grid -->
-    <div style="margin-top:1.5rem;">
-      <div style="display:grid; grid-template-columns: 120px repeat(5,1fr); gap:2px; max-width:680px;">
-        <!-- Header row -->
-        <div></div>
-        <div style="text-align:center; font-size:9px; color:var(--muted); padding:6px; letter-spacing:0.1em;">CLAUDE</div>
-        <div style="text-align:center; font-size:9px; color:var(--muted); padding:6px; letter-spacing:0.1em;">CODEX</div>
-        <div style="text-align:center; font-size:9px; color:var(--muted); padding:6px; letter-spacing:0.1em;">GEMINI</div>
-        <div style="text-align:center; font-size:9px; color:var(--muted); padding:6px; letter-spacing:0.1em;">OLLAMA</div>
-        <div style="text-align:center; font-size:9px; color:var(--muted); padding:6px; letter-spacing:0.1em;">AIDER</div>
-        <!-- Row 1: Multi-Agent -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Multi-Agent</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <!-- Row 2: Context Rotation -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Ctx Rotation</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <!-- Row 3: Model Routing -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Model Routing</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.7; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.7; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.4; padding:8px; text-align:center;"><span style="font-size:12px; opacity:0.6;">&#8212;</span></div>
-        <div style="background:var(--accent); opacity:0.7; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <!-- Row 4: Hot Swap -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Hot Swap</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.15; padding:8px; text-align:center;"><span style="font-size:12px; opacity:0.4;">&#10007;</span></div>
-        <div style="background:var(--accent); opacity:0.15; padding:8px; text-align:center;"><span style="font-size:12px; opacity:0.4;">&#10007;</span></div>
-        <div style="background:var(--accent); opacity:0.15; padding:8px; text-align:center;"><span style="font-size:12px; opacity:0.4;">&#10007;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <!-- Row 5: Token Tracking -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Token Tracking</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <!-- Row 6: Federation -->
-        <div style="font-size:11px; color:var(--text); padding:8px 0; font-weight:600;">Federation</div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-        <div style="background:var(--accent); opacity:0.85; padding:8px; text-align:center;"><span style="font-size:14px;">&#10003;</span></div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 10 — MARKET OPPORTUNITY
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-obsidian">
-  <span class="brand">GROOVE.</span>
-  <span class="category">MARKET</span>
-  <div class="slide-content" style="display:flex; align-items:center; padding-top:2rem;">
-    <div style="max-width:48%;">
-      <div class="label">MARKET OPPORTUNITY</div>
-      <h2 style="font-size:36px; margin:0; line-height:1.2;">The AI dev tooling<br>market is exploding.</h2>
-      <div style="margin-top:1.5rem;">
-        <div style="margin-bottom:1.2rem;">
-          <div style="font-size:11px; color:var(--muted); letter-spacing:0.15em; font-weight:700;">TAM</div>
-          <div style="font-size:28px; color:var(--text); font-weight:700; font-family:Georgia;">$45B</div>
-          <div style="font-size:11px; color:var(--muted);">AI-assisted software development</div>
-        </div>
-        <hr class="divider" style="max-width:200px;">
-        <div style="margin-bottom:1.2rem;">
-          <div style="font-size:11px; color:var(--muted); letter-spacing:0.15em; font-weight:700;">SAM</div>
-          <div style="font-size:28px; color:var(--accent-light); font-weight:700; font-family:Georgia;">$8B</div>
-          <div style="font-size:11px; color:var(--muted);">AI coding agent orchestration</div>
-        </div>
-        <hr class="divider" style="max-width:200px;">
-        <div>
-          <div style="font-size:11px; color:var(--muted); letter-spacing:0.15em; font-weight:700;">SOM</div>
-          <div style="font-size:28px; color:var(--amber); font-weight:700; font-family:Georgia;">$800M</div>
-          <div style="font-size:11px; color:var(--muted);">Power users on Claude/Codex/Gemini</div>
-        </div>
-      </div>
-    </div>
-    <!-- Concentric rings -->
-    <div style="flex:1; display:flex; align-items:center; justify-content:center;">
-      <svg viewBox="0 0 360 360" style="width:320px;">
-        <defs>
-          <filter id="cr-glow"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-        </defs>
-        <circle cx="180" cy="180" r="160" fill="#4338CA" opacity="0.06" stroke="#4338CA" stroke-width="1" stroke-opacity="0.15"/>
-        <circle cx="180" cy="180" r="105" fill="#4338CA" opacity="0.12" stroke="#6366F1" stroke-width="1" stroke-opacity="0.25"/>
-        <circle cx="180" cy="180" r="50" fill="#4338CA" opacity="0.25" stroke="#6366F1" stroke-width="2" filter="url(#cr-glow)"/>
-        <text x="180" y="185" text-anchor="middle" fill="white" font-size="14" font-weight="bold" font-family="Georgia">$800M</text>
-        <text x="180" y="115" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-size="12" font-family="Georgia">$8B</text>
-        <text x="180" y="48" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="12" font-family="Georgia">$45B</text>
-      </svg>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 11 — STRATEGIC MOAT (PROVIDER ALIGNMENT)
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-deep">
-  <span class="brand">GROOVE.</span>
-  <span class="category">STRATEGY</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">THE UNFORKABLE MOAT</div>
-    <h2 style="font-size:34px; margin:0; line-height:1.2; max-width:55%;">Harnesses get banned.<br>GROOVE gets partnered.</h2>
-    <!-- Before / After split -->
-    <div style="display:flex; gap:0; margin-top:2rem;">
-      <!-- Before: Harnesses -->
-      <div style="flex:1; padding:1.5rem; border-right:1px solid rgba(255,255,255,0.06);">
-        <div style="font-size:11px; color:#E11D48; font-weight:700; letter-spacing:0.2em; margin-bottom:0.75rem;">HARNESSES</div>
-        <svg viewBox="0 0 200 120" style="width:100%; margin-bottom:0.75rem;">
-          <!-- Chaotic scattered dots -->
-          <circle cx="30" cy="40" r="5" fill="#E11D48" opacity="0.5"/><circle cx="80" cy="20" r="3" fill="#E11D48" opacity="0.3"/>
-          <circle cx="150" cy="60" r="6" fill="#E11D48" opacity="0.4"/><circle cx="60" cy="80" r="4" fill="#E11D48" opacity="0.35"/>
-          <circle cx="120" cy="35" r="3" fill="#E11D48" opacity="0.25"/><circle cx="170" cy="90" r="5" fill="#E11D48" opacity="0.45"/>
-          <circle cx="40" cy="100" r="4" fill="#E11D48" opacity="0.3"/><circle cx="100" cy="70" r="3" fill="#E11D48" opacity="0.2"/>
-          <circle cx="140" cy="100" r="5" fill="#E11D48" opacity="0.4"/><circle cx="20" cy="70" r="3" fill="#E11D48" opacity="0.25"/>
-          <!-- Crossing lines = chaos -->
-          <line x1="30" y1="40" x2="150" y2="60" stroke="#E11D48" stroke-width="0.5" opacity="0.2"/>
-          <line x1="80" y1="20" x2="60" y2="80" stroke="#E11D48" stroke-width="0.5" opacity="0.2"/>
-          <line x1="120" y1="35" x2="40" y2="100" stroke="#E11D48" stroke-width="0.5" opacity="0.2"/>
-        </svg>
-        <div style="font-size:12px; color:var(--muted); line-height:1.5;">
-          Burn tokens faster<br>
-          <span style="color:#E11D48;">Adversarial</span> to provider economics<br>
-          Result: <span style="color:#E11D48; font-weight:700;">Banned</span>
-        </div>
-      </div>
-      <!-- After: GROOVE -->
-      <div style="flex:1; padding:1.5rem;">
-        <div style="font-size:11px; color:#6366F1; font-weight:700; letter-spacing:0.2em; margin-bottom:0.75rem;">GROOVE</div>
-        <svg viewBox="0 0 200 120" style="width:100%; margin-bottom:0.75rem;">
-          <!-- Organized nodes -->
-          <circle cx="40" cy="30" r="8" fill="rgba(255,255,255,0.04)" stroke="#6366F1" stroke-width="1.5"/>
-          <circle cx="100" cy="30" r="8" fill="rgba(255,255,255,0.04)" stroke="#6366F1" stroke-width="1.5"/>
-          <circle cx="160" cy="30" r="8" fill="rgba(255,255,255,0.04)" stroke="#6366F1" stroke-width="1.5"/>
-          <circle cx="70" cy="70" r="8" fill="rgba(255,255,255,0.04)" stroke="#818CF8" stroke-width="1.5"/>
-          <circle cx="130" cy="70" r="8" fill="rgba(255,255,255,0.04)" stroke="#818CF8" stroke-width="1.5"/>
-          <circle cx="100" cy="105" r="10" fill="rgba(255,255,255,0.06)" stroke="#4338CA" stroke-width="2" style="filter:drop-shadow(0 0 6px #4338CA)"/>
-          <!-- Clean connections -->
-          <line x1="40" y1="38" x2="70" y2="62" stroke="#6366F1" stroke-width="1" opacity="0.4"/>
-          <line x1="100" y1="38" x2="70" y2="62" stroke="#6366F1" stroke-width="1" opacity="0.4"/>
-          <line x1="100" y1="38" x2="130" y2="62" stroke="#6366F1" stroke-width="1" opacity="0.4"/>
-          <line x1="160" y1="38" x2="130" y2="62" stroke="#6366F1" stroke-width="1" opacity="0.4"/>
-          <line x1="70" y1="78" x2="100" y2="95" stroke="#818CF8" stroke-width="1" opacity="0.4"/>
-          <line x1="130" y1="78" x2="100" y2="95" stroke="#818CF8" stroke-width="1" opacity="0.4"/>
-        </svg>
-        <div style="font-size:12px; color:var(--muted); line-height:1.5;">
-          Accomplish more with fewer tokens<br>
-          <span style="color:#6366F1;">Aligned</span> with provider economics<br>
-          Result: <span style="color:#6366F1; font-weight:700;">Partnered</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 12 — PRODUCT DEPTH
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-midnight">
-  <span class="brand">GROOVE.</span>
-  <span class="category">PRODUCT</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">WHAT'S BUILT</div>
-    <h2 style="font-size:34px; margin:0; line-height:1.2; max-width:55%;">Production-grade.<br>Shipping today.</h2>
-    <div style="display:flex; gap:3rem; margin-top:1.5rem;">
-      <div style="flex:1;">
-        <!-- Vertical metrics with accent borders -->
-        <div class="accent-block" style="margin-bottom:1rem; border-color:#6366F1;">
-          <div style="font-size:32px; color:var(--accent-light); font-weight:700; font-family:Georgia;">70+</div>
-          <div style="font-size:12px; color:var(--muted);">REST API Endpoints</div>
-        </div>
-        <div class="accent-block" style="margin-bottom:1rem; border-color:#818CF8;">
-          <div style="font-size:32px; color:#818CF8; font-weight:700; font-family:Georgia;">59</div>
-          <div style="font-size:12px; color:var(--muted);">GUI Components</div>
-        </div>
-        <div class="accent-block" style="margin-bottom:1rem; border-color:#A78BFA;">
-          <div style="font-size:32px; color:#A78BFA; font-weight:700; font-family:Georgia;">42</div>
-          <div style="font-size:12px; color:var(--muted);">Daemon Source Files</div>
-        </div>
-        <div class="accent-block" style="border-color:#D97706;">
-          <div style="font-size:32px; color:var(--amber); font-weight:700; font-family:Georgia;">137</div>
-          <div style="font-size:12px; color:var(--muted);">Automated Tests</div>
-        </div>
-      </div>
-      <!-- Right: bar chart -->
-      <div style="flex:1; display:flex; align-items:center; justify-content:center;">
-        <svg viewBox="0 0 300 240" style="width:280px;">
-          <defs>
-            <linearGradient id="bar-prod" x1="0" y1="1" x2="0" y2="0">
-              <stop offset="0%" stop-color="#4338CA" stop-opacity="0.1"/>
-              <stop offset="100%" stop-color="#6366F1" stop-opacity="0.8"/>
-            </linearGradient>
-          </defs>
-          <!-- Horizontal bars -->
-          <rect x="90" y="15" width="180" height="28" rx="3" fill="url(#bar-prod)" style="filter:drop-shadow(0 0 8px rgba(67,56,202,0.3))"/>
-          <rect x="90" y="55" width="150" height="28" rx="3" fill="url(#bar-prod)" style="filter:drop-shadow(0 0 6px rgba(67,56,202,0.2))"/>
-          <rect x="90" y="95" width="110" height="28" rx="3" fill="url(#bar-prod)" style="filter:drop-shadow(0 0 6px rgba(67,56,202,0.2))"/>
-          <rect x="90" y="135" width="85" height="28" rx="3" fill="url(#bar-prod)" style="filter:drop-shadow(0 0 6px rgba(67,56,202,0.2))"/>
-          <rect x="90" y="175" width="55" height="28" rx="3" fill="url(#bar-prod)" style="filter:drop-shadow(0 0 6px rgba(67,56,202,0.2))"/>
-          <!-- Labels -->
-          <text x="85" y="34" text-anchor="end" fill="rgba(255,255,255,0.5)" font-size="10" font-family="Arial">API</text>
-          <text x="85" y="74" text-anchor="end" fill="rgba(255,255,255,0.5)" font-size="10" font-family="Arial">GUI</text>
-          <text x="85" y="114" text-anchor="end" fill="rgba(255,255,255,0.5)" font-size="10" font-family="Arial">Daemon</text>
-          <text x="85" y="154" text-anchor="end" fill="rgba(255,255,255,0.5)" font-size="10" font-family="Arial">CLI</text>
-          <text x="85" y="194" text-anchor="end" fill="rgba(255,255,255,0.5)" font-size="10" font-family="Arial">Tests</text>
-          <!-- Values -->
-          <text x="275" y="34" fill="rgba(255,255,255,0.6)" font-size="11" font-family="Georgia" font-weight="700">70+</text>
-          <text x="245" y="74" fill="rgba(255,255,255,0.6)" font-size="11" font-family="Georgia" font-weight="700">59</text>
-          <text x="205" y="114" fill="rgba(255,255,255,0.6)" font-size="11" font-family="Georgia" font-weight="700">42</text>
-          <text x="180" y="154" fill="rgba(255,255,255,0.6)" font-size="11" font-family="Georgia" font-weight="700">21+</text>
-          <text x="150" y="194" fill="rgba(255,255,255,0.6)" font-size="11" font-family="Georgia" font-weight="700">137</text>
-        </svg>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 13 — BUSINESS MODEL
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-ink">
-  <span class="brand">GROOVE.</span>
-  <span class="category">BUSINESS MODEL</span>
-  <div class="slide-content" style="padding-top:2.5rem;">
-    <div class="label">MONETIZATION</div>
-    <h2 style="font-size:34px; margin:0; line-height:1.2; max-width:55%;">Free forever at the core.<br>Revenue above.</h2>
-    <div style="display:flex; gap:0; margin-top:2rem;">
-      <!-- Free tier -->
-      <div style="flex:1; padding:0 1.5rem 0 0;">
-        <div style="font-size:14px; color:var(--text); font-weight:700; margin-bottom:0.25rem;">Free</div>
-        <div style="font-size:36px; color:var(--muted); font-weight:700; font-family:Georgia;">$0</div>
-        <hr class="divider">
-        <div style="font-size:11px; color:var(--muted); line-height:1.8;">
-          3 concurrent agents<br>Basic GUI<br>Community support<br>Manual rotation
-        </div>
-      </div>
-      <div style="width:1px; background:rgba(255,255,255,0.06);"></div>
-      <!-- Pro tier (highlighted) -->
-      <div style="flex:1; padding:0 1.5rem; background:rgba(255,255,255,0.02);">
-        <div style="font-size:14px; color:var(--accent-light); font-weight:700; margin-bottom:0.25rem;">Pro</div>
-        <div style="font-size:36px; color:var(--accent-light); font-weight:700; font-family:Georgia;">$20<span style="font-size:16px; color:var(--muted);">/mo</span></div>
-        <hr class="divider">
-        <div style="font-size:11px; color:var(--muted); line-height:1.8;">
-          Unlimited agents<br>Adaptive auto-rotation<br>Full model routing<br>Token dashboard<br>The Journalist
-        </div>
-      </div>
-      <div style="width:1px; background:rgba(255,255,255,0.06);"></div>
-      <!-- Team tier -->
-      <div style="flex:1; padding:0 0 0 1.5rem;">
-        <div style="font-size:14px; color:var(--text); font-weight:700; margin-bottom:0.25rem;">Team</div>
-        <div style="font-size:36px; color:var(--text); font-weight:700; font-family:Georgia;">$40<span style="font-size:16px; color:var(--muted);">/user</span></div>
-        <hr class="divider">
-        <div style="font-size:11px; color:var(--muted); line-height:1.8;">
-          Shared registry<br>Admin + budgets<br>Audit + compliance<br>Team-wide synthesis<br>Federation
-        </div>
-      </div>
-    </div>
-    <p style="font-size:12px; color:var(--muted); margin-top:1.5rem; font-style:italic; font-family:Georgia;">
-      "You saved $284 this month. GROOVE Pro is $20."
-    </p>
-  </div>
-</section>
-<!-- ═══════════════════════════════════════════════════════════
-     SLIDE 14 — CTA / CLOSING
-     ═══════════════════════════════════════════════════════════ -->
-<section class="bg-steel">
-  <div class="slide-content" style="display:flex; align-items:center; justify-content:space-between;">
-    <div style="max-width:55%; padding-top:1rem;">
-      <div class="label" style="margin-bottom:1.5rem;">THE OPPORTUNITY</div>
-      <h1 style="font-size:48px; margin:0; line-height:1.1; color:#F5F5F5; font-weight:700;">The orchestration layer<br>the industry needs.</h1>
-      <p style="font-size:16px; color:var(--muted); margin-top:1.25rem; line-height:1.6; max-width:400px;">
-        Multi-provider. Adaptive intelligence.<br>
-        Provider-aligned economics.<br>
-        Shipping today.
-      </p>
-      <hr class="divider" style="max-width:280px; margin-top:2rem;">
-      <div style="display:flex; gap:2rem; align-items:center;">
-        <div>
-          <div style="font-size:13px; color:var(--text); font-weight:700;">hello@groovedev.ai</div>
-          <div style="font-size:11px; color:var(--muted); margin-top:2px;">groovedev.ai</div>
-        </div>
-        <div style="font-size:13px; color:var(--accent-light); font-weight:700; font-family:Georgia;">GROOVE.</div>
-      </div>
-    </div>
-    <div style="position:absolute; right:-60px; top:-40px;">
-      <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="width:420px; height:420px; opacity:0.85;">
-        <defs>
-          <radialGradient id="orb-end" cx="35%" cy="30%" r="60%">
-            <stop offset="0%" stop-color="#6366F1" stop-opacity="0.5"/>
-            <stop offset="40%" stop-color="#4338CA" stop-opacity="0.3"/>
-            <stop offset="100%" stop-color="#1E1B4B" stop-opacity="0.05"/>
-          </radialGradient>
-          <radialGradient id="hl-end" cx="30%" cy="25%" r="25%">
-            <stop offset="0%" stop-color="#fff" stop-opacity="0.25"/>
-            <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
-          </radialGradient>
-          <filter id="glow-end"><feGaussianBlur stdDeviation="20" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-        </defs>
-        <circle cx="250" cy="250" r="220" fill="url(#orb-end)" filter="url(#glow-end)"/>
-        <circle cx="250" cy="250" r="220" fill="url(#hl-end)"/>
-        <ellipse cx="250" cy="430" rx="180" ry="20" fill="#000" opacity="0.15" filter="url(#glow-end)"/>
-      </svg>
-    </div>
-  </div>
-</section>
-</div></div>
-<!-- Download button -->
-<a href="./deck.pptx" download style="position:fixed;bottom:2rem;right:2rem;z-index:9999;
-  background:rgba(255,255,255,0.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
-  border:1px solid rgba(255,255,255,0.12);color:#fff;padding:0.75rem 1.5rem;border-radius:12px;
-  font:500 14px/1 system-ui,sans-serif;text-decoration:none;letter-spacing:0.03em;
-  transition:all 0.2s;box-shadow:0 8px 32px rgba(0,0,0,0.4);"
-  onmouseover="this.style.background='rgba(255,255,255,0.16)'"
-  onmouseout="this.style.background='rgba(255,255,255,0.08)'"
->&#8595; Download PPTX</a>
-<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
-<script>Reveal.initialize({ hash: true, transition: 'fade', backgroundTransition: 'fade', width: 960, height: 540 });</script>
-</body>
-</html>