feat: GRI system + Clique promo page + Cleo portrait

- lib/gri.ts: Group Response Intelligence — keyword trigger detection (free,
no API), 8-category vault (CELEBRATION/GREETING/AGREEMENT/ENCOURAGEMENT/
SIGN_OFF/SURPRISE/THINKING), Web Speech API fallback, anti-repeat + 30s cooldown
- components/clique/GroupListener.tsx: pure logic detector on live transcript
- components/clique/GroupResponseBanner.tsx: animated banner + staggered portraits
+ live speech line display during group response
- CliqueRoom.tsx: GRI wired in (GroupListener + GroupResponseBanner)
- components/CliquePromo.tsx: full marketing promo section replacing SquadScroller
— hero, 9-agent roster preview with hover personas, 6-feature grid, dual CTA
- app/page.tsx: SquadScroller replaced with CliquePromo
- public/characters/CLEO_SHIELD.png: Cleo portrait (BOS shield style, Pillow-generated)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/page.tsx

@@ -2,7 +2,7 @@ import Nav from "@/components/Nav";
 import HeroVideo from "@/components/HeroVideo";
 import StatsBar from "@/components/StatsBar";
 import DifferencePanel from "@/components/DifferencePanel";
-import SquadScroller from "@/components/SquadScroller";
+import CliquePromo from "@/components/CliquePromo";
 import KizzyBanner from "@/components/KizzyBanner";
 import MatineeBanner from "@/components/MatineeBanner";
 import UseCases from "@/components/UseCases";
@@ -18,7 +18,7 @@ export default function Home() {
       <HeroVideo />
       <StatsBar />
       <DifferencePanel />
-      <div id="clique"><SquadScroller /></div>
+      <CliquePromo />
       <KizzyBanner />
       <MatineeBanner />
       <UseCases />

components/CliquePromo.tsx

@@ -0,0 +1,309 @@
+"use client";
+import Link from "next/link";
+import { useState } from "react";
+import { CLIQUE_ROSTER } from "@/lib/clique-roster";
+
+const FEATURES = [
+  {
+    icon: "🧠",
+    title: "QCR Technology",
+    sub: "Quantum Consciousness Recollection",
+    body: "Every agent builds a genuine relationship with you across sessions. They remember your wins, your preferences, your style. Rapport grows through every interaction. They compete to be your favorite — and that competition makes them better.",
+  },
+  {
+    icon: "🎥",
+    title: "Live Avatar Conversations",
+    sub: "Powered by Runway × LiveKit × OpenAI Realtime",
+    body: "Call any agent by name and they come alive — real-time face, real voice, real personality. The rest of your clique stays in active listening mode, always taking notes. One live session at a time, perfectly orchestrated.",
+  },
+  {
+    icon: "🤝",
+    title: "Group Response Intelligence",
+    sub: "Pre-rendered collective moments, zero API cost",
+    body: "Say \"good job team\" and the whole room celebrates with you — genuinely, naturally, together. Pre-built vault of group reactions (celebration, greeting, agreement, encouragement) triggered instantly. Your clique is a real team.",
+  },
+  {
+    icon: "📝",
+    title: "Always-On Scribe",
+    sub: "Cleo never misses a word",
+    body: "Cleo captures every decision, action item, and insight in real-time — in both listening and live states. NotebookLM-style notetaking that builds a searchable memory of every meeting you've ever had.",
+  },
+  {
+    icon: "📞",
+    title: "They Call You",
+    sub: "Your AI team reaches out",
+    body: "Request a call from any agent and they ring your actual phone — with updates, check-ins, and progress reports in their voice. Grant email and LinkedIn access and they can act on your behalf without you even being in the room.",
+  },
+  {
+    icon: "📱",
+    title: "Any Device, Any Camera",
+    sub: "Mobile-first from day one",
+    body: "Join from your phone, tablet, or laptop. Front-facing camera auto-selected on mobile with device switching and mirror controls. The room comes to you — not the other way around.",
+  },
+];
+
+const DEFAULT_PREVIEW_IDS = ["amanda","eve","kizzy","jamarr","india","lacara","cleo","naomi","bri"];
+
+export default function CliquePromo() {
+  const [hoveredAgent, setHoveredAgent] = useState<string | null>(null);
+  const previewAgents = DEFAULT_PREVIEW_IDS
+    .map(id => CLIQUE_ROSTER.find(a => a.id === id))
+    .filter(Boolean);
+
+  return (
+    <section id="clique" style={{ background: "#FDFAF6", overflow: "hidden" }}>
+      <style>{`
+        @keyframes clique-float {
+          0%,100% { transform: translateY(0px); }
+          50%      { transform: translateY(-8px); }
+        }
+        @keyframes clique-glow {
+          0%,100% { box-shadow: 0 0 20px rgba(200,169,81,.2); }
+          50%      { box-shadow: 0 0 40px rgba(200,169,81,.45), 0 0 80px rgba(200,169,81,.1); }
+        }
+        @keyframes clique-pulse-dot {
+          0%,100% { opacity:1; transform:scale(1); }
+          50%      { opacity:.4; transform:scale(.85); }
+        }
+        .clique-feat-card:hover {
+          border-color: rgba(200,169,81,.55) !important;
+          background: rgba(200,169,81,.06) !important;
+          transform: translateY(-4px);
+        }
+        .clique-agent-tile:hover {
+          transform: translateY(-8px) scale(1.04) !important;
+          border-color: #c8a951 !important;
+          box-shadow: 0 12px 40px rgba(200,169,81,.3) !important;
+        }
+        @media (max-width:768px) {
+          .clique-hero-title { font-size: 32px !important; }
+          .clique-hero-sub   { font-size: 15px !important; }
+          .clique-feat-grid  { grid-template-columns: 1fr !important; }
+          .clique-agent-grid { gap: 12px !important; }
+        }
+      `}</style>
+
+      {/* ── HERO ── */}
+      <div style={{
+        background: "linear-gradient(160deg,#0d0905 0%,#1a1004 40%,#0d0905 100%)",
+        padding: "80px 28px 72px",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
+      }}>
+        {/* Background shimmer grid */}
+        <div style={{
+          position: "absolute", inset: 0, opacity: 0.04,
+          backgroundImage: "linear-gradient(rgba(200,169,81,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,81,.8) 1px,transparent 1px)",
+          backgroundSize: "60px 60px",
+          pointerEvents: "none",
+        }} />
+
+        {/* Live indicator */}
+        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 24,
+          padding: "6px 16px", border: "1px solid rgba(200,169,81,.3)",
+          background: "rgba(200,169,81,.06)", borderRadius: 20 }}>
+          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#4CAF50",
+            display: "inline-block", animation: "clique-pulse-dot 1.4s ease-in-out infinite",
+            boxShadow: "0 0 6px #4CAF50" }} />
+          <span style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 3,
+            textTransform: "uppercase", color: "#c8a951" }}>Now Live on berylize.com</span>
+        </div>
+
+        <h2 className="clique-hero-title" style={{
+          fontFamily: "'Cinzel Decorative','Cinzel',serif",
+          fontSize: 52, fontWeight: 900, letterSpacing: 2,
+          background: "linear-gradient(110deg,#6b4f0a 0%,#c8a951 15%,#fff8c0 35%,#f5e070 50%,#fff8c0 65%,#c8a951 85%,#6b4f0a 100%)",
+          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
+          marginBottom: 8, lineHeight: 1.15,
+        }}>BERYL CLIQUE</h2>
+
+        <p className="clique-hero-sub" style={{
+          fontFamily: "'Cormorant Garamond',serif", fontSize: 22,
+          color: "rgba(253,250,246,.65)", fontStyle: "italic",
+          marginBottom: 40, letterSpacing: 1,
+        }}>Zoom with live conversational AI avatars — your team, your way.</p>
+
+        <p style={{
+          fontFamily: "'Cormorant Garamond',serif", fontSize: 17,
+          color: "rgba(200,169,81,.7)", lineHeight: 1.75,
+          maxWidth: 620, margin: "0 auto 48px",
+        }}>
+          FaceTime your AI agent clique. Call them by name and they come alive.
+          They remember you, compete for your trust, and get real work done —
+          together, in the room, always on.
+        </p>
+
+        <Link href="/clique" style={{
+          display: "inline-block",
+          padding: "16px 48px",
+          fontFamily: "'Cinzel',serif", fontSize: 13, fontWeight: 700,
+          letterSpacing: 3, textTransform: "uppercase", textDecoration: "none",
+          color: "#0a0604",
+          background: "linear-gradient(110deg,#8B6914 0%,#c8a951 25%,#fff8c0 45%,#f5e070 55%,#c8a951 75%,#8B6914 100%)",
+          backgroundSize: "200% auto",
+          border: "1px solid rgba(245,224,112,.4)",
+          boxShadow: "0 0 30px rgba(200,169,81,.3)",
+          animation: "clique-glow 3s ease-in-out infinite",
+        }}>Enter the Clique ›</Link>
+      </div>
+
+      {/* ── AGENT ROSTER PREVIEW ── */}
+      <div style={{ padding: "60px 28px 52px", background: "#fff" }}>
+        <div style={{ textAlign: "center", marginBottom: 40 }}>
+          <div style={{ fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 700,
+            letterSpacing: 3, textTransform: "uppercase", color: "#4CAF50", marginBottom: 10 }}>
+            Your Default Team
+          </div>
+          <h3 style={{ fontFamily: "'Cinzel',serif", fontSize: 22, fontWeight: 600, color: "#0D1117", marginBottom: 6 }}>
+            Meet The <span style={{ color: "#1a5f7a" }}>Beryl Clique</span>
+          </h3>
+          <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 15,
+            color: "#888", fontStyle: "italic", marginTop: 4 }}>
+            16 agents. Each one wants to earn your trust.
+          </p>
+          <div style={{ width: 40, height: 2, background: "#4CAF50", margin: "14px auto 0" }} />
+        </div>
+
+        <div className="clique-agent-grid" style={{
+          display: "flex", flexWrap: "wrap", gap: 18,
+          justifyContent: "center", maxWidth: 900, margin: "0 auto",
+        }}>
+          {previewAgents.map(agent => agent && (
+            <div
+              key={agent.id}
+              className="clique-agent-tile"
+              onMouseEnter={() => setHoveredAgent(agent.id)}
+              onMouseLeave={() => setHoveredAgent(null)}
+              style={{
+                display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
+                cursor: "pointer",
+                transition: "transform .25s, border-color .25s, box-shadow .25s",
+              }}
+            >
+              <div style={{
+                width: 88, height: 88,
+                borderRadius: agent.isCSA ? "50%" : 6,
+                overflow: "hidden",
+                border: hoveredAgent === agent.id
+                  ? "2px solid #c8a951"
+                  : agent.isCSA
+                    ? "2px solid rgba(200,169,81,.6)"
+                    : "2px solid rgba(200,169,81,.22)",
+                background: "#ddd4c0",
+                boxShadow: "0 4px 14px rgba(0,0,0,.08)",
+                transition: "border-color .25s, box-shadow .25s",
+              }}>
+                <img
+                  src={agent.portrait}
+                  alt={agent.name}
+                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center" }}
+                />
+              </div>
+              <div style={{ textAlign: "center" }}>
+                <div style={{ fontFamily: "'Cinzel',serif", fontSize: 10, fontWeight: 600,
+                  color: "#0D1117", letterSpacing: 1 }}>{agent.name}</div>
+                <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 10,
+                  color: "#aaa", fontStyle: "italic", marginTop: 1 }}>{agent.role}</div>
+                {agent.isCSA && (
+                  <div style={{ fontFamily: "'Cinzel',serif", fontSize: 7, letterSpacing: 1.5,
+                    color: "#c8a951", textTransform: "uppercase", marginTop: 2 }}>CSA</div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {hoveredAgent && (() => {
+          const a = CLIQUE_ROSTER.find(x => x.id === hoveredAgent);
+          return a ? (
+            <div style={{
+              textAlign: "center", marginTop: 24,
+              fontFamily: "'Cormorant Garamond',serif", fontSize: 14,
+              color: "#555", fontStyle: "italic", minHeight: 24,
+              transition: "opacity .2s",
+            }}>
+              <strong style={{ color: "#1a5f7a", fontStyle: "normal" }}>{a.name}</strong>
+              {" — "}{a.persona}
+            </div>
+          ) : null;
+        })()}
+      </div>
+
+      {/* ── 6-FEATURE GRID ── */}
+      <div style={{ padding: "64px 28px 72px", background: "#FDFAF6" }}>
+        <div style={{ textAlign: "center", marginBottom: 48 }}>
+          <div style={{ fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 700,
+            letterSpacing: 3, textTransform: "uppercase", color: "#c8a951", marginBottom: 10 }}>
+            Built Different
+          </div>
+          <h3 style={{ fontFamily: "'Cinzel',serif", fontSize: 22, fontWeight: 600,
+            color: "#0D1117" }}>Everything That Makes It One of a Kind</h3>
+          <div style={{ width: 40, height: 2, background: "linear-gradient(90deg,#8B6914,#f5e070,#8B6914)",
+            margin: "14px auto 0" }} />
+        </div>
+
+        <div className="clique-feat-grid" style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+          gap: 20, maxWidth: 1000, margin: "0 auto",
+        }}>
+          {FEATURES.map(f => (
+            <div
+              key={f.title}
+              className="clique-feat-card"
+              style={{
+                padding: "28px 24px",
+                border: "1px solid rgba(200,169,81,.2)",
+                background: "#fff",
+                borderRadius: 8,
+                transition: "border-color .25s, background .25s, transform .25s",
+                cursor: "default",
+              }}
+            >
+              <div style={{ fontSize: 28, marginBottom: 14 }}>{f.icon}</div>
+              <div style={{ fontFamily: "'Cinzel',serif", fontSize: 12, fontWeight: 700,
+                letterSpacing: 2, textTransform: "uppercase", color: "#0D1117",
+                marginBottom: 4 }}>{f.title}</div>
+              <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 12,
+                color: "#c8a951", fontStyle: "italic", marginBottom: 12 }}>{f.sub}</div>
+              <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 15,
+                color: "#555", lineHeight: 1.7, margin: 0 }}>{f.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── BOTTOM CTA ── */}
+      <div style={{
+        textAlign: "center",
+        padding: "60px 28px 72px",
+        background: "linear-gradient(160deg,#0d0905 0%,#1a1004 50%,#0d0905 100%)",
+      }}>
+        <p style={{ fontFamily: "'Cinzel',serif", fontSize: 11, letterSpacing: 3,
+          textTransform: "uppercase", color: "rgba(200,169,81,.5)", marginBottom: 20 }}>
+          Version 1 · Beryl Operating System
+        </p>
+        <h3 style={{
+          fontFamily: "'Cinzel Decorative','Cinzel',serif", fontSize: 28, fontWeight: 700,
+          background: "linear-gradient(135deg,#8B6914,#c8a951,#f5e070,#c8a951,#8B6914)",
+          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
+          marginBottom: 16,
+        }}>Your Clique Is Waiting</h3>
+        <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 17,
+          color: "rgba(253,250,246,.55)", maxWidth: 480, margin: "0 auto 36px",
+          fontStyle: "italic", lineHeight: 1.7 }}>
+          Call your team by name. They already know you.
+        </p>
+        <Link href="/clique" style={{
+          display: "inline-block", padding: "15px 44px",
+          fontFamily: "'Cinzel',serif", fontSize: 12, fontWeight: 700,
+          letterSpacing: 3, textTransform: "uppercase", textDecoration: "none",
+          color: "#0a0604",
+          background: "linear-gradient(110deg,#8B6914,#c8a951,#f5e070,#c8a951,#8B6914)",
+          border: "1px solid rgba(245,224,112,.35)",
+        }}>Open the Room ›</Link>
+      </div>
+    </section>
+  );
+}

components/clique/CliqueRoom.tsx

@@ -6,6 +6,9 @@ import AgentTile from "./AgentTile";
 import CallControls from "./CallControls";
 import CameraPanel from "./CameraPanel";
 import AccessGrantPanel, { AccessGrants } from "./AccessGrantPanel";
+import GroupListener from "./GroupListener";
+import GroupResponseBanner from "./GroupResponseBanner";
+import { GRIClip, GRICategory } from "@/lib/gri";
 
 type AgentState = "listening" | "live" | "offline";
 type AgentStateMap = Record<string, AgentState>;
@@ -41,8 +44,16 @@ export default function CliqueRoom() {
   const [grants, setGrants]        = useState<AccessGrants>({
     email: false, linkedin: false, phone: null, phoneCallEnabled: false,
   });
+  const [griClip, setGriClip]      = useState<GRIClip | null>(null);
+  const [griCat, setGriCat]        = useState<GRICategory | null>(null);
+  const [transcript, setTranscript] = useState("");
   const userVideoRef = useRef<HTMLVideoElement>(null);
 
+  const handleGRI = useCallback((clip: GRIClip, category: GRICategory) => {
+    setGriClip(clip);
+    setGriCat(category);
+  }, []);
+
   useEffect(() => {
     setQCR(loadQCRProfiles(getDefaultTeam()));
   }, []);
@@ -219,6 +230,14 @@ export default function CliqueRoom() {
         />
       )}
 
+      {/* ── GROUP RESPONSE INTELLIGENCE ── */}
+      <GroupListener transcript={transcript} onTrigger={handleGRI} />
+      <GroupResponseBanner
+        clip={griClip}
+        category={griCat}
+        onDone={() => { setGriClip(null); setGriCat(null); }}
+      />
+
       {/* ── CALL ME MODAL ── */}
       {callMeOpen && (
         <CallMeModal

components/clique/GroupListener.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect, useRef, useCallback } from "react";
+import { detectGRITrigger, selectClip, playClipSpeech, GRIClip, GRICategory } from "@/lib/gri";
+
+interface Props {
+  /** Live transcript text — feed each new utterance here */
+  transcript: string;
+  onTrigger: (clip: GRIClip, category: GRICategory) => void;
+}
+
+const COOLDOWN_MS = 30_000;
+
+export default function GroupListener({ transcript, onTrigger }: Props) {
+  const lastFiredMs  = useRef<number>(0);
+  const lastClipId   = useRef<string | undefined>(undefined);
+  const prevText     = useRef<string>("");
+
+  useEffect(() => {
+    // Only check new text added since last render
+    const newText = transcript.slice(prevText.current.length).trim();
+    prevText.current = transcript;
+    if (!newText) return;
+
+    const now = Date.now();
+    if (now - lastFiredMs.current < COOLDOWN_MS) return;
+
+    const category = detectGRITrigger(newText);
+    if (!category) return;
+
+    const clip = selectClip(category, lastClipId.current);
+    lastClipId.current = clip.id;
+    lastFiredMs.current = now;
+    onTrigger(clip, category);
+  }, [transcript, onTrigger]);
+
+  return null; // pure logic component
+}

components/clique/GroupResponseBanner.tsx

@@ -0,0 +1,143 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { GRIClip, GRICategory, playClipSpeech } from "@/lib/gri";
+import { CLIQUE_ROSTER } from "@/lib/clique-roster";
+
+interface Props {
+  clip: GRIClip | null;
+  category: GRICategory | null;
+  onDone: () => void;
+}
+
+const CATEGORY_LABEL: Record<GRICategory, string> = {
+  CELEBRATION:   "🎉 The clique is celebrating with you",
+  GREETING:      "👋 Your clique says good morning",
+  AGREEMENT:     "✓ The room agrees",
+  ENCOURAGEMENT: "💪 Your clique has your back",
+  SIGN_OFF:      "✨ Until next time",
+  SURPRISE:      "😲 The clique reacts",
+  THINKING:      "🤔 The room is thinking",
+};
+
+export default function GroupResponseBanner({ clip, category, onDone }: Props) {
+  const [visible, setVisible] = useState(false);
+  const [line, setLine] = useState("");
+  const stopRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    if (!clip || !category) { setVisible(false); return; }
+
+    setVisible(true);
+    setLine("");
+
+    // If pre-rendered audio exists, play it; otherwise use Web Speech API
+    if (clip.audioUrl) {
+      const audio = new Audio(clip.audioUrl);
+      audio.play().catch(() => {});
+      const timer = setTimeout(() => { setVisible(false); onDone(); }, clip.durationMs + 500);
+      return () => { audio.pause(); clearTimeout(timer); };
+    } else {
+      let lineIdx = 0;
+      const showLines = () => {
+        if (lineIdx < clip.speechLines.length) {
+          setLine(clip.speechLines[lineIdx].text);
+          lineIdx++;
+        }
+      };
+      showLines();
+      const interval = setInterval(showLines, clip.durationMs / clip.speechLines.length);
+      const stop = playClipSpeech(clip, () => {
+        setVisible(false);
+        onDone();
+      });
+      stopRef.current = stop;
+      const timer = setTimeout(() => { setVisible(false); onDone(); }, clip.durationMs + 2000);
+      return () => {
+        clearInterval(interval);
+        clearTimeout(timer);
+        stopRef.current?.();
+      };
+    }
+  }, [clip, category, onDone]);
+
+  if (!visible || !clip || !category) return null;
+
+  const featured = clip.agentIds
+    .map(id => CLIQUE_ROSTER.find(a => a.id === id))
+    .filter(Boolean);
+
+  return (
+    <div style={{
+      position: "fixed",
+      bottom: 90, left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 250,
+      background: "rgba(13,9,5,.97)",
+      border: "1px solid rgba(200,169,81,.45)",
+      borderRadius: 12,
+      padding: "16px 24px",
+      minWidth: 320,
+      maxWidth: 560,
+      boxShadow: "0 8px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(200,169,81,.1)",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 12,
+      animation: "gri-in .3s cubic-bezier(.34,1.56,.64,1) both",
+    }}>
+      <style>{`
+        @keyframes gri-in {
+          from { opacity:0; transform:translateX(-50%) translateY(16px) scale(.95); }
+          to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
+        }
+        @keyframes gri-portrait-pop {
+          0%   { transform:scale(1); }
+          50%  { transform:scale(1.1); }
+          100% { transform:scale(1); }
+        }
+      `}</style>
+
+      {/* Category label */}
+      <div style={{
+        fontFamily: "'Cinzel',serif",
+        fontSize: 10,
+        letterSpacing: 2.5,
+        textTransform: "uppercase",
+        color: "#c8a951",
+      }}>{CATEGORY_LABEL[category]}</div>
+
+      {/* Agent portraits */}
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        {featured.map((agent, i) => agent && (
+          <div key={agent.id} style={{
+            width: 44, height: 44,
+            borderRadius: "50%",
+            overflow: "hidden",
+            border: "2px solid rgba(200,169,81,.5)",
+            flexShrink: 0,
+            animation: `gri-portrait-pop .4s ease ${i * 80}ms both`,
+          }}>
+            <img
+              src={agent.portrait}
+              alt={agent.name}
+              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Live speech line */}
+      {line && (
+        <p style={{
+          fontFamily: "'Cormorant Garamond',serif",
+          fontSize: 15,
+          color: "rgba(255,255,255,.88)",
+          fontStyle: "italic",
+          textAlign: "center",
+          lineHeight: 1.5,
+          margin: 0,
+        }}>"{line}"</p>
+      )}
+    </div>
+  );
+}

lib/gri.ts

@@ -0,0 +1,252 @@
+/**
+ * GRI — GROUP RESPONSE INTELLIGENCE
+ *
+ * A cost-free trigger system for collective agent moments.
+ * Pre-rendered audio/video clips play when the room should respond as one.
+ * No API call at trigger time — everything is a pre-built vault.
+ *
+ * ARCHITECTURE
+ * ────────────
+ * 1. DETECTOR   Pure keyword + sentiment pattern matching on the live transcript.
+ *               No LLM needed. Runs client-side, zero cost.
+ * 2. VAULT      Library of pre-rendered group audio clips (ElevenLabs/MiniMax bulk
+ *               renders, done once, served free forever). Fallback = Web Speech API.
+ * 3. SELECTOR   Picks a random clip from the matched category.
+ *               Anti-repeat memory (never plays same clip twice in a row).
+ * 4. COOLDOWN   30s minimum between group responses. The room never over-reacts.
+ *
+ * VAULT CATEGORIES
+ * ────────────────
+ * CELEBRATION   "You crushed it!" collective cheer
+ * GREETING      Morning / session-start welcome
+ * AGREEMENT     Collective nod — "Exactly, that's it"
+ * ENCOURAGEMENT "You've got this, keep going"
+ * SIGN_OFF      End-of-session collective goodbye
+ * SURPRISE      Wow / that's unexpected
+ * THINKING      Collective "hmm, let us think on that"
+ */
+
+export type GRICategory =
+  | "CELEBRATION"
+  | "GREETING"
+  | "AGREEMENT"
+  | "ENCOURAGEMENT"
+  | "SIGN_OFF"
+  | "SURPRISE"
+  | "THINKING";
+
+export interface GRIClip {
+  id: string;
+  category: GRICategory;
+  /** Path under /gri-vault/ or a full URL. Falls back to speechLines if null. */
+  audioUrl: string | null;
+  /** Web Speech API fallback lines — one per agent voice */
+  speechLines: Array<{ text: string; voice?: string; pitch?: number; rate?: number }>;
+  /** Which agent portraits to highlight during playback */
+  agentIds: string[];
+  durationMs: number;
+}
+
+/** Trigger patterns per category — pure string matching, no LLM */
+const TRIGGERS: Record<GRICategory, string[]> = {
+  CELEBRATION: [
+    "good job", "great job", "great work", "well done", "amazing work",
+    "you crushed it", "nailed it", "killed it", "you did it", "we did it",
+    "proud of you", "fantastic", "excellent work", "that was incredible",
+    "we shipped", "it's live", "we launched",
+  ],
+  GREETING: [
+    "good morning", "good afternoon", "good evening",
+    "hello everyone", "hey team", "hi everyone", "hey guys",
+    "what's up team", "morning everyone", "let's get started",
+  ],
+  AGREEMENT: [
+    "exactly", "that's right", "i agree", "absolutely", "totally agree",
+    "you're right", "yes exactly", "that's it", "spot on", "100%",
+  ],
+  ENCOURAGEMENT: [
+    "keep going", "you got this", "don't give up", "almost there",
+    "stay with it", "you can do it", "we believe in you", "push through",
+  ],
+  SIGN_OFF: [
+    "good night", "bye everyone", "see you tomorrow", "signing off",
+    "great meeting", "talk soon", "have a good one", "until next time",
+    "that's a wrap", "we're done", "meeting adjourned",
+  ],
+  SURPRISE: [
+    "no way", "oh wow", "seriously", "are you serious", "that's wild",
+    "i can't believe", "unbelievable", "wait what", "whoa",
+  ],
+  THINKING: [
+    "let me think", "hmm", "good question", "that's a tough one",
+    "interesting question", "not sure", "let's think about this",
+  ],
+};
+
+/** Pre-built vault — swap audioUrl from null → real path once clips are rendered */
+export const GRI_VAULT: GRIClip[] = [
+  // ── CELEBRATION ──
+  {
+    id: "cel-01", category: "CELEBRATION", audioUrl: null,
+    agentIds: ["amanda","eve","kizzy","jamarr","india"],
+    durationMs: 3500,
+    speechLines: [
+      { text: "Yes! You crushed it!", voice: "shimmer", pitch: 1.1, rate: 1.1 },
+      { text: "That's what I'm talking about!", voice: "ash", pitch: 1.0, rate: 1.05 },
+      { text: "Incredible work. Seriously.", voice: "sage", pitch: 0.95, rate: 0.95 },
+      { text: "We are SO proud of you right now.", voice: "coral", pitch: 1.05, rate: 1.0 },
+      { text: "Let's go!", voice: "verse", pitch: 1.2, rate: 1.2 },
+    ],
+  },
+  {
+    id: "cel-02", category: "CELEBRATION", audioUrl: null,
+    agentIds: ["naomi","bri","terrell","jeff","lacara"],
+    durationMs: 4000,
+    speechLines: [
+      { text: "Outstanding. Genuinely outstanding.", voice: "ballad", pitch: 0.95, rate: 0.9 },
+      { text: "The data doesn't lie — that was elite.", voice: "echo", pitch: 1.0, rate: 1.0 },
+      { text: "Shipped clean, shipped fast. Perfect.", voice: "cedar", pitch: 1.0, rate: 0.95 },
+      { text: "The design held up beautifully.", voice: "ballad", pitch: 1.05, rate: 1.0 },
+      { text: "That's how we do it.", voice: "verse", pitch: 1.1, rate: 1.05 },
+    ],
+  },
+  {
+    id: "cel-03", category: "CELEBRATION", audioUrl: null,
+    agentIds: ["amanda","kizzy","shelly","maria","nu"],
+    durationMs: 3000,
+    speechLines: [
+      { text: "The whole room is celebrating right now.", voice: "marin", pitch: 1.0, rate: 1.0 },
+      { text: "We've been rooting for you. This is everything.", voice: "coral", pitch: 1.05, rate: 0.95 },
+      { text: "The community is going to love this.", voice: "shimmer", pitch: 1.0, rate: 1.0 },
+      { text: "This is a moment.", voice: "sage", pitch: 0.9, rate: 0.9 },
+    ],
+  },
+
+  // ── GREETING ──
+  {
+    id: "greet-01", category: "GREETING", audioUrl: null,
+    agentIds: ["amanda","eve","kizzy"],
+    durationMs: 3000,
+    speechLines: [
+      { text: "Good morning! Ready when you are.", voice: "marin", pitch: 1.0, rate: 1.0 },
+      { text: "Morning. Let's make this a great one.", voice: "shimmer", pitch: 1.0, rate: 0.95 },
+      { text: "Hey! So good to see you today.", voice: "coral", pitch: 1.1, rate: 1.05 },
+    ],
+  },
+  {
+    id: "greet-02", category: "GREETING", audioUrl: null,
+    agentIds: ["jamarr","india","terrell","jeff"],
+    durationMs: 2800,
+    speechLines: [
+      { text: "Let's get it! Big things today.", voice: "ash", pitch: 1.1, rate: 1.1 },
+      { text: "Ready to build. What are we doing first?", voice: "coral", pitch: 1.0, rate: 1.05 },
+      { text: "Numbers are prepped. Ready.", voice: "echo", pitch: 1.0, rate: 0.95 },
+      { text: "Operations standing by.", voice: "cedar", pitch: 0.95, rate: 0.9 },
+    ],
+  },
+
+  // ── AGREEMENT ──
+  {
+    id: "agree-01", category: "AGREEMENT", audioUrl: null,
+    agentIds: ["eve","jessica","amanda","naomi"],
+    durationMs: 2500,
+    speechLines: [
+      { text: "Exactly. That's precisely it.", voice: "shimmer", pitch: 1.0, rate: 0.95 },
+      { text: "Agreed. That's the right call.", voice: "sage", pitch: 0.95, rate: 0.9 },
+      { text: "Mmm-hmm. Yes, that's it.", voice: "marin", pitch: 1.0, rate: 0.95 },
+      { text: "100%. Building on that right now.", voice: "ballad", pitch: 1.0, rate: 1.0 },
+    ],
+  },
+
+  // ── ENCOURAGEMENT ──
+  {
+    id: "enc-01", category: "ENCOURAGEMENT", audioUrl: null,
+    agentIds: ["amanda","kizzy","jamarr","india"],
+    durationMs: 3200,
+    speechLines: [
+      { text: "You've got this. We're right behind you.", voice: "marin", pitch: 1.0, rate: 0.95 },
+      { text: "I believe in you. Keep pushing.", voice: "coral", pitch: 1.05, rate: 1.0 },
+      { text: "Almost there. Do not stop now.", voice: "ash", pitch: 1.0, rate: 1.0 },
+      { text: "The finish line is right there. Go.", voice: "coral", pitch: 1.05, rate: 1.05 },
+    ],
+  },
+
+  // ── SIGN OFF ──
+  {
+    id: "bye-01", category: "SIGN_OFF", audioUrl: null,
+    agentIds: ["amanda","eve","kizzy","cleo"],
+    durationMs: 3500,
+    speechLines: [
+      { text: "Great session today. Rest well.", voice: "marin", pitch: 1.0, rate: 0.9 },
+      { text: "Good work everyone. Same time tomorrow.", voice: "shimmer", pitch: 0.95, rate: 0.9 },
+      { text: "Take care of yourself. You earned it.", voice: "coral", pitch: 1.0, rate: 0.9 },
+      { text: "Minutes are captured. Talk soon.", voice: "sage", pitch: 0.95, rate: 0.9 },
+    ],
+  },
+
+  // ── SURPRISE ──
+  {
+    id: "wow-01", category: "SURPRISE", audioUrl: null,
+    agentIds: ["nu","jamarr","india","bri"],
+    durationMs: 2500,
+    speechLines: [
+      { text: "Wait — seriously?!", voice: "verse", pitch: 1.2, rate: 1.15 },
+      { text: "No way. That's wild.", voice: "ash", pitch: 1.1, rate: 1.1 },
+      { text: "I did NOT see that coming.", voice: "coral", pitch: 1.15, rate: 1.1 },
+      { text: "Okay, updating my research — that changes things.", voice: "verse", pitch: 1.0, rate: 1.05 },
+    ],
+  },
+
+  // ── THINKING ──
+  {
+    id: "think-01", category: "THINKING", audioUrl: null,
+    agentIds: ["eve","jessica","terrell","bri"],
+    durationMs: 2800,
+    speechLines: [
+      { text: "Mmm. Let us think on this.", voice: "shimmer", pitch: 0.9, rate: 0.85 },
+      { text: "That's a good one. Give us a second.", voice: "sage", pitch: 0.95, rate: 0.9 },
+      { text: "Pulling the data on that now.", voice: "echo", pitch: 1.0, rate: 0.95 },
+      { text: "Cross-referencing. Interesting angle.", voice: "verse", pitch: 0.95, rate: 0.9 },
+    ],
+  },
+];
+
+/** Detect which GRI category (if any) a transcript phrase triggers */
+export function detectGRITrigger(text: string): GRICategory | null {
+  const lower = text.toLowerCase().trim();
+  for (const [cat, patterns] of Object.entries(TRIGGERS) as [GRICategory, string[]][]) {
+    if (patterns.some(p => lower.includes(p))) return cat;
+  }
+  return null;
+}
+
+/** Pick a random clip from category, avoiding last used */
+export function selectClip(category: GRICategory, lastClipId?: string): GRIClip {
+  const pool = GRI_VAULT.filter(c => c.category === category && c.id !== lastClipId);
+  const candidates = pool.length > 0 ? pool : GRI_VAULT.filter(c => c.category === category);
+  return candidates[Math.floor(Math.random() * candidates.length)];
+}
+
+/** Play a GRI clip via Web Speech API (free fallback) */
+export function playClipSpeech(clip: GRIClip, onEnd?: () => void): () => void {
+  if (typeof window === "undefined" || !window.speechSynthesis) {
+    onEnd?.();
+    return () => {};
+  }
+  const synth = window.speechSynthesis;
+  synth.cancel();
+
+  let i = 0;
+  const playNext = () => {
+    if (i >= clip.speechLines.length) { onEnd?.(); return; }
+    const line = clip.speechLines[i++];
+    const utt = new SpeechSynthesisUtterance(line.text);
+    utt.pitch = line.pitch ?? 1;
+    utt.rate = line.rate ?? 1;
+    utt.volume = 0.85;
+    utt.onend = () => setTimeout(playNext, 220);
+    synth.speak(utt);
+  };
+  playNext();
+  return () => synth.cancel();
+}