diff --git a/README.md b/README.md
index 3e4817b..91b7beb 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,19 @@
 
 This is a starter template for building AI agents using Agent Spec and CopilotKit. It provides a modern Next.js application wired to a FastAPI backend that serves an Agent Spec agent with A2UI-powered frontend tool rendering (calendar, inbox, email compose, daily brief dashboard).
 
-![Demo](demo.gif)
+<div align="center">
+
+https://github.com/user-attachments/assets/c0223e5d-aa92-49af-a1f9-115d28bae170
+
+</div>
+
+## Architecture
+
+| Layer | Role |
+|-------|------|
+| **[Agent Spec](https://agentspec.org)** | Portable, declarative agent definition — system prompt, server/client tools, and LLM configuration in one serializable spec. Runs on any compatible runtime (LangGraph, WayFlow). |
+| **[AG-UI Protocol](https://github.com/ag-ui-protocol/ag-ui)** | Streaming event protocol between the agent backend and CopilotKit frontend. Carries text tokens, tool calls, and state updates over a single connection. |
+| **[A2UI](https://docs.copilotkit.ai/guides/generative-ui)** | Generative UI framework — agents emit declarative component trees (cards, rows, modals, etc.) that the frontend renders as native interactive widgets inside the chat. |
 
 ## Prerequisites
 
diff --git a/demo.gif b/demo.gif
deleted file mode 100644
index 0aa4ac9..0000000
Binary files a/demo.gif and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..e91e340
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#9599CC"/>
+      <stop offset="100%" stop-color="#1B936F"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="url(#g)"/>
+  <text x="16" y="22" text-anchor="middle" fill="white" font-family="system-ui" font-weight="700" font-size="18">A</text>
+</svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index f8806b5..644e9e9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,24 +1,253 @@
 @import "tailwindcss";
 
+/* === Brand Design Tokens === */
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Existing compatibility */
+  --background: #F7F7F9;
+  --foreground: #010507;
+
+  /* CopilotKit Brand Colors */
+  --color-lilac: #BEC2FF;
+  --color-lilac-light: #D4D7FF;
+  --color-lilac-dark: #9599CC;
+  --color-mint: #85E0CE;
+  --color-mint-light: #A8E9DC;
+  --color-mint-dark: #1B936F;
+
+  /* Surfaces */
+  --color-surface: #DEDEE9;
+  --color-surface-light: #F7F7F9;
+  --color-container: #FFFFFF;
+
+  /* Text */
+  --color-text-primary: #010507;
+  --color-text-secondary: #57575B;
+  --color-text-tertiary: #8E8E93;
+
+  /* Borders */
+  --color-border: #DBDBE5;
+  --color-border-light: #EBEBF0;
+  --color-border-glass: rgba(255, 255, 255, 0.3);
+
+  /* Glassmorphism */
+  --color-glass: rgba(255, 255, 255, 0.7);
+  --color-glass-subtle: rgba(255, 255, 255, 0.5);
+  --color-glass-dark: rgba(255, 255, 255, 0.85);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);
+  --shadow-glow-lilac: 0 0 20px rgba(190, 194, 255, 0.3);
+  --shadow-glow-mint: 0 0 20px rgba(133, 224, 206, 0.3);
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+
+  /* Typography */
+  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
+
+  color-scheme: light dark;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+
+    --color-surface: #1a1a2e;
+    --color-surface-light: #0f0f1a;
+    --color-container: #1a1a2e;
+
+    --color-text-primary: #e5e7eb;
+    --color-text-secondary: #9ca3af;
+    --color-text-tertiary: #6b7280;
+
+    --color-border: rgba(255, 255, 255, 0.1);
+    --color-border-light: rgba(255, 255, 255, 0.06);
+    --color-border-glass: rgba(255, 255, 255, 0.08);
+
+    --color-glass: rgba(20, 20, 40, 0.7);
+    --color-glass-subtle: rgba(20, 20, 40, 0.5);
+    --color-glass-dark: rgba(10, 10, 20, 0.85);
+
+    --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.3);
+    --shadow-glow-lilac: 0 0 20px rgba(190, 194, 255, 0.15);
+    --shadow-glow-mint: 0 0 20px rgba(133, 224, 206, 0.15);
+  }
+
+  /* CopilotKit user message bubble — make transparent in glass container */
+  [data-copilotkit] {
+    --muted: oklch(26.9% 0 0 / 0.08) !important;
   }
 }
 
+/* === Base Styles === */
+
 body {
+  font-family: var(--font-family);
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body,
 html {
   height: 100%;
 }
+
+/* === Animated Background === */
+
+.abstract-bg {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+  background: linear-gradient(135deg, var(--color-surface-light) 0%, var(--color-surface) 100%);
+}
+
+.abstract-bg::before,
+.abstract-bg::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.6;
+}
+
+.abstract-bg::before {
+  width: 600px;
+  height: 600px;
+  background: var(--color-lilac);
+  top: -200px;
+  right: -100px;
+  animation: blob1 25s ease-in-out infinite;
+}
+
+.abstract-bg::after {
+  width: 500px;
+  height: 500px;
+  background: var(--color-mint);
+  bottom: -150px;
+  left: -100px;
+  animation: blob2 30s ease-in-out infinite;
+}
+
+.blob-3 {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  background: linear-gradient(135deg, var(--color-lilac-light), var(--color-mint-light));
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.4;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: blob3 35s ease-in-out infinite;
+}
+
+@keyframes blob1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(-30px, 50px) scale(1.1); }
+  50% { transform: translate(20px, -30px) scale(0.95); }
+  75% { transform: translate(40px, 20px) scale(1.05); }
+}
+
+@keyframes blob2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(50px, -40px) scale(1.1); }
+  66% { transform: translate(-30px, 30px) scale(0.9); }
+}
+
+@keyframes blob3 {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); }
+  25% { transform: translate(-45%, -55%) scale(1.15); }
+  50% { transform: translate(-55%, -45%) scale(0.9); }
+  75% { transform: translate(-48%, -52%) scale(1.1); }
+}
+
+@media (max-width: 767px) {
+  .abstract-bg::before {
+    width: 350px;
+    height: 350px;
+    filter: blur(60px);
+  }
+  .abstract-bg::after {
+    width: 300px;
+    height: 300px;
+    filter: blur(60px);
+  }
+  .blob-3 {
+    width: 250px;
+    height: 250px;
+    filter: blur(70px);
+  }
+}
+
+/* === Glassmorphism Utilities === */
+
+.glass {
+  background: var(--color-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-glass);
+}
+
+.glass-subtle {
+  background: var(--color-glass-subtle);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-lg);
+}
+
+.glass-card {
+  background: var(--color-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-glass);
+  padding: var(--space-6);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+/* === Gradient Utilities === */
+
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.border-gradient {
+  border: 2px solid transparent;
+  background: linear-gradient(var(--color-container), var(--color-container)) padding-box,
+              linear-gradient(135deg, var(--color-lilac), var(--color-mint)) border-box;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e2c4250..50386b0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,8 +4,20 @@ import "./globals.css";
 import "./style.css";
 
 export const metadata: Metadata = {
-  title: "Scheduling Assistant",
-  description: "AI scheduling assistant demo — manage your calendar, inbox, and emails",
+  title: "Portable Agents with Generative UI",
+  description: "Built with Agent Spec, CopilotKit, and A2UI — manage your calendar, inbox, and emails with conversational AI",
+  openGraph: {
+    title: "Portable Agents with Generative UI",
+    description: "Built with Agent Spec, CopilotKit, and A2UI",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Portable Agents with Generative UI",
+    description: "Built with Agent Spec, CopilotKit, and A2UI",
+  },
+  icons: {
+    icon: "/favicon.svg",
+  },
 };
 
 export default function RootLayout({
@@ -17,6 +29,10 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: `(function(){var d=document.documentElement;var m=window.matchMedia('(prefers-color-scheme:dark)');function u(e){d.classList.toggle('dark',e.matches)}u(m);m.addEventListener('change',u)})()` }} />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
+        />
         <link
           rel="stylesheet"
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6cf9c8..0af0f02 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,10 +7,12 @@ import {
   ToolCallStatus,
   useFrontendTool,
   useConfigureSuggestions,
+  useAgent,
+  useCopilotKit,
 } from "@copilotkit/react-core/v2";
 import { createA2UIMessageRenderer, A2UIViewer } from "@copilotkit/a2ui-renderer";
 import { z } from "zod";
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef, type ReactNode } from "react";
 
 import { withA2UIActivityMessage } from "@/components/a2ui-activity-wrapper";
 import { theme } from "./theme";
@@ -20,6 +22,8 @@ import { InboxView, InboxLoadingState } from "@/components/inbox-view";
 import type { Email } from "@/components/inbox-view";
 import { EmailComposeView, EmailComposeLoadingState } from "@/components/email-compose-view";
 import type { EmailComposeData } from "@/components/email-compose-view";
+import { CTABanner } from "@/components/cta-banner";
+import { ExplainerTitle, ExplainerCards } from "@/components/explainer-section";
 
 // Disable static optimization for this page
 export const dynamic = "force-dynamic";
@@ -89,6 +93,13 @@ function deduplicateMessages(
   return elements.filter((_, i) => !dominated.has(i));
 }
 
+function MessageTracker({ count, onChange }: { count: number; onChange: (v: boolean) => void }): ReactNode {
+  useEffect(() => {
+    onChange(count > 0);
+  }, [count, onChange]);
+  return null;
+}
+
 function parseEmailList(raw: string): Email[] {
   const parsed = JSON.parse(raw);
   return parsed.map((e: any, i: number) => ({
@@ -439,15 +450,37 @@ function Chat({
     [isCanvasMode, onCanvasUpdate, onShowChat]
   );
 
-  useConfigureSuggestions({
-    suggestions: [
-      { title: "Show inbox", message: "Check my inbox" },
-      { title: "Show calendar", message: "Show me my schedule for today" },
-      { title: "Write brief", message: "Create my daily brief" },
-    ],
-    available: "always",
+  const suggestions = useMemo(() => [
+    { title: "Show inbox", message: "Check my inbox" },
+    { title: "Show calendar", message: "Show me my schedule for today" },
+    { title: "Write brief", message: "Create my daily brief" },
+  ], []);
+
+  useConfigureSuggestions({ suggestions, available: "always" }, []);
+
+  const { agent } = useAgent({ agentId: "my_a2ui_agent" });
+  const { copilotkit } = useCopilotKit();
+
+  const agentRef = useRef(agent);
+  agentRef.current = agent;
+  const copilotkitRef = useRef(copilotkit);
+  copilotkitRef.current = copilotkit;
+
+  const submitSuggestion = useCallback(async (message: string) => {
+    const a = agentRef.current;
+    a.addMessage({
+      id: crypto.randomUUID(),
+      role: "user",
+      content: message,
+    });
+    try {
+      await copilotkitRef.current.runAgent({ agent: a });
+    } catch (error) {
+      console.error("submitSuggestion: runAgent failed", error);
+    }
   }, []);
 
+  const [hasMessages, setHasMessages] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const [sentinelEl, setSentinelEl] = useState<HTMLDivElement | null>(null);
   const sentinelRef = useCallback((node: HTMLDivElement | null) => {
@@ -472,15 +505,18 @@ function Chat({
     <CopilotChat
       className="flex-1 min-h-0 overflow-hidden"
       agentId="my_a2ui_agent"
+      welcomeScreen={false}
       labels={{
-        welcomeMessageText: "How can I help you today?",
+        welcomeMessageText: "",
         chatInputPlaceholder: isCanvasMode
           ? "Type a message..."
           : "Ask about your schedule, inbox, or compose an email...",
       }}
+      input={{ showDisclaimer: false, positioning: "static" }}
       messageView={{
         children: ({ messages, messageElements, interruptElement, isRunning }) => (
           <>
+            <MessageTracker count={messages.length} onChange={setHasMessages} />
             {deduplicateMessages(messages, messageElements)}
             {interruptElement}
             {isRunning && (
@@ -497,12 +533,37 @@ function Chat({
       }}
     >
       {({ scrollView, input, suggestionView }) => (
-        <div className="copilot-custom-chat">
-          {scrollView}
-          <div className="chips-above-input" style={{ opacity: isAtBottom ? 1 : 0, pointerEvents: isAtBottom ? undefined : "none", transition: "opacity 0.2s ease" }}>
-            {suggestionView}
+        <div className={`copilot-custom-chat ${hasMessages ? "copilot-custom-chat--has-messages" : ""}`}>
+          <div style={hasMessages
+            ? { flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }
+            : { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, visibility: 'hidden', pointerEvents: 'none' }
+          }>
+            {scrollView}
           </div>
+          {!isCanvasMode && !hasMessages && <ExplainerTitle />}
           {input}
+          {!isCanvasMode && !hasMessages && <ExplainerCards />}
+          {!isCanvasMode && !hasMessages && (
+            <div className="explainer-prompts">
+              <p className="explainer-prompts-label">Try these prompts:</p>
+              <div className="suggestion-chips">
+                {suggestions.map((s) => (
+                  <button
+                    key={s.title}
+                    className="suggestion-chip"
+                    onClick={() => submitSuggestion(s.message)}
+                  >
+                    {s.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          {(isCanvasMode || hasMessages) && (
+            <div className="chips-above-input" style={{ opacity: isAtBottom ? 1 : 0, pointerEvents: isAtBottom ? undefined : "none", transition: "opacity 0.2s ease" }}>
+              {suggestionView}
+            </div>
+          )}
         </div>
       )}
     </CopilotChat>
@@ -542,15 +603,31 @@ export default function Page() {
       showDevConsole="auto"
       renderActivityMessages={activityRenderers}
     >
-      <div className={`a2ui-chat-container flex h-full min-h-0 overflow-hidden ${isCanvasMode ? "layout-split" : "layout-chat"}`}>
-        {isCanvasMode && canvas.content && (
-          <Canvas content={canvas.content} onClose={handleShowChat} />
-        )}
-        <div
-          className={`chat-panel flex flex-col min-h-0 overflow-hidden ${isCanvasMode ? "chat-sidebar" : "flex-1"}`}
-          {...(isCanvasMode ? { "data-sidebar-chat": true } : {})}
-        >
-          <Chat isCanvasMode={isCanvasMode} hasCanvasContent={canvas.content !== null} onCanvasUpdate={handleCanvasUpdate} onShowChat={handleShowChat} onShowCanvas={handleShowCanvas} />
+      {/* Animated background blobs */}
+      <div className="abstract-bg">
+        <div className="blob-3" />
+      </div>
+
+      {/* Main content above background */}
+      <div className={`relative z-10 h-full min-h-0 overflow-hidden ${isCanvasMode ? "flex flex-col" : "brand-shell"}`}>
+        {/* Glass container */}
+        <div className={`brand-glass-container flex flex-col min-h-0 overflow-hidden ${isCanvasMode ? "flex-1 brand-glass-container--split" : ""}`}>
+          {/* CTA Banner */}
+          <CTABanner />
+
+          {/* App layout */}
+          <div className={`a2ui-chat-container flex flex-1 min-h-0 overflow-hidden ${isCanvasMode ? "layout-split" : "layout-chat"}`}>
+            {isCanvasMode && canvas.content && (
+              <Canvas content={canvas.content} onClose={handleShowChat} />
+            )}
+            <div
+              className={`chat-panel flex flex-col min-h-0 overflow-hidden ${isCanvasMode ? "chat-sidebar" : "flex-1"}`}
+              {...(isCanvasMode ? { "data-sidebar-chat": true } : {})}
+            >
+              <Chat isCanvasMode={isCanvasMode} hasCanvasContent={canvas.content !== null} onCanvasUpdate={handleCanvasUpdate} onShowChat={handleShowChat} onShowCanvas={handleShowCanvas} />
+            </div>
+          </div>
+
         </div>
       </div>
     </CopilotKitProvider>
diff --git a/src/app/style.css b/src/app/style.css
index 41fda88..db21fa7 100644
--- a/src/app/style.css
+++ b/src/app/style.css
@@ -19,9 +19,9 @@
   --border-light: #f3f4f6;
   --border-card: transparent;
 
-  --accent-indigo: #6366f1;
-  --accent-blue: #3b82f6;
-  --accent-emerald: #10b981;
+  --accent-indigo: #9599CC;
+  --accent-blue: #BEC2FF;
+  --accent-emerald: #85E0CE;
 
   --backdrop: rgba(0, 0, 0, 0.4);
 
@@ -31,63 +31,98 @@
   --shadow-compact-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
   --shadow-canvas-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
   --shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  --copilot-kit-primary-color: var(--color-lilac-dark);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --surface-primary: rgba(0, 0, 0, 0.35);
-    --surface-secondary: #111;
-    --surface-tertiary: rgba(255, 255, 255, 0.1);
-    --surface-quaternary: rgba(255, 255, 255, 0.08);
+    --surface-primary: rgba(255, 255, 255, 0.04);
+    --surface-secondary: rgba(255, 255, 255, 0.02);
+    --surface-tertiary: rgba(255, 255, 255, 0.06);
+    --surface-quaternary: rgba(255, 255, 255, 0.05);
     --surface-btn: rgba(255, 255, 255, 0.06);
     --surface-btn-hover: rgba(255, 255, 255, 0.1);
-    --surface-canvas-header: rgba(0, 0, 0, 0.3);
-    --surface-dialog: #1f2937;
+    --surface-canvas-header: rgba(10, 10, 10, 1);
+    --surface-dialog: rgba(30, 30, 50, 0.9);
 
     --text-primary: #e5e7eb;
     --text-secondary: #9ca3af;
     --text-tertiary: #6b7280;
 
-    --border-default: rgba(255, 255, 255, 0.1);
-    --border-hover: rgba(255, 255, 255, 0.16);
-    --border-subtle: rgba(255, 255, 255, 0.1);
-    --border-light: rgba(255, 255, 255, 0.08);
-    --border-card: rgba(255, 255, 255, 0.1);
+    --border-default: rgba(255, 255, 255, 0.08);
+    --border-hover: rgba(255, 255, 255, 0.14);
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-light: rgba(255, 255, 255, 0.05);
+    --border-card: rgba(255, 255, 255, 0.06);
 
     --backdrop: rgba(0, 0, 0, 0.6);
 
-    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.4);
-    --shadow-compact: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-compact-hover: 0 2px 6px rgba(0, 0, 0, 0.4);
-    --shadow-canvas-card: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-card: none;
+    --shadow-card-hover: none;
+    --shadow-compact: none;
+    --shadow-compact-hover: none;
+    --shadow-canvas-card: none;
     --shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 
   }
 }
 
+/* ===================================================================
+   CopilotKit Glass Integration
+   Tested with: @copilotkit/react-core 0.0.0-mme-ag-ui-0-0-46-20260227141603
+
+   Relied-upon selectors (update if CopilotKit DOM changes):
+     [data-copilotkit]                       — root theme scope
+     [data-testid="copilot-user-message"]    — user message bubble
+     [data-testid="copilot-assistant-message"] — assistant message bubble
+     [data-testid="copilot-welcome-screen"]  — welcome screen wrapper
+     [data-testid="copilot-welcome-message"] — welcome text
+     [data-testid="copilot-suggestions"]     — suggestion chip container
+     [data-testid="copilot-scroll-to-bottom"] — scroll button
+     [data-testid="copilot-disclaimer"]      — disclaimer element
+     [data-testid="copilot-chat-input"]      — input area
+     [class*="cpk:bg-muted"]                 — muted background utility
+     [class*="bg-background"]                — background utility
+     .copilotKitMessages                     — v1 message container
+
+   These overrides use !important to force transparency inside the
+   glassmorphism shell. Verify after any CopilotKit version bump.
+   =================================================================== */
+
+/* CopilotKit v2 light mode — transparent backgrounds for glass container */
+[data-copilotkit][data-copilotkit] {
+  --background: transparent;
+  --card: transparent;
+  --popover: oklch(98% 0 0);
+  --secondary: oklch(96% 0 0 / 0.6);
+  --muted: oklch(96% 0 0 / 0.5);
+  --border: oklch(90% 0 0 / 0.5);
+  --input: oklch(90% 0 0 / 0.5);
+}
+
 /* CopilotKit v2 dark mode — media-query override so we don't need .dark class
    (avoids Next.js hydration mismatch from toggling className on <html>). */
 @media (prefers-color-scheme: dark) {
   [data-copilotkit][data-copilotkit] {
-    --background: oklch(14.5% 0 0);
+    --background: transparent;
     --foreground: oklch(98.5% 0 0);
-    --card: oklch(14.5% 0 0);
+    --card: transparent;
     --card-foreground: oklch(98.5% 0 0);
     --popover: oklch(14.5% 0 0);
     --popover-foreground: oklch(98.5% 0 0);
     --primary: oklch(98.5% 0 0);
     --primary-foreground: oklch(20.5% 0 0);
-    --secondary: oklch(26.9% 0 0);
+    --secondary: oklch(26.9% 0 0 / 0.6);
     --secondary-foreground: oklch(98.5% 0 0);
-    --muted: oklch(26.9% 0 0);
+    --muted: oklch(26.9% 0 0 / 0.15);
     --muted-foreground: oklch(70.8% 0 0);
     --accent: oklch(26.9% 0 0);
     --accent-foreground: oklch(98.5% 0 0);
     --destructive: oklch(39.6% .141 25.723);
     --destructive-foreground: oklch(63.7% .237 25.331);
-    --border: oklch(26.9% 0 0);
-    --input: oklch(26.9% 0 0);
+    --border: oklch(26.9% 0 0 / 0.5);
+    --input: oklch(26.9% 0 0 / 0.5);
     --ring: oklch(55.6% 0 0);
     --sidebar: oklch(20.5% 0 0);
     --sidebar-foreground: oklch(98.5% 0 0);
@@ -101,11 +136,11 @@
 
   /* CopilotKit v1 fallback variables */
   :root {
-    --copilot-kit-primary-color: rgb(255, 255, 255);
+    --copilot-kit-primary-color: var(--color-lilac);
     --copilot-kit-contrast-color: rgb(28, 28, 28);
-    --copilot-kit-background-color: rgb(17, 17, 17);
-    --copilot-kit-input-background-color: #2c2c2c;
-    --copilot-kit-secondary-color: rgb(28, 28, 28);
+    --copilot-kit-background-color: transparent;
+    --copilot-kit-input-background-color: transparent;
+    --copilot-kit-secondary-color: transparent;
     --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
     --copilot-kit-separator-color: rgb(45, 45, 45);
     --copilot-kit-muted-color: rgb(45, 45, 45);
@@ -120,12 +155,135 @@
   }
 }
 
-/* Fix for messages being hidden behind the absolutely-positioned input */
+/* === Glass-aware variable overrides === */
+
+/* The :root dark-mode values above are already glass-friendly (transparent
+   surfaces, no box-shadows). The scoped override below is a safety net in case
+   anything re-declares opaquer values higher in the cascade. */
+@media (prefers-color-scheme: dark) {
+  .brand-glass-container {
+    --surface-primary: rgba(255, 255, 255, 0.04);
+    --surface-secondary: rgba(255, 255, 255, 0.02);
+    --border-card: rgba(255, 255, 255, 0.06);
+    --shadow-card: none;
+    --shadow-card-hover: none;
+    --shadow-compact: none;
+  }
+}
+
+/* CopilotKit v2 user message bubble — uses cpk:bg-muted */
+@media (prefers-color-scheme: dark) {
+  .brand-glass-container [data-copilotkit][data-copilotkit] {
+    --muted: oklch(26.9% 0 0 / 0.25);
+  }
+
+  /* Blend chat messages into the glass shell (remove hard dark edges). */
+  .brand-glass-container [data-testid="copilot-user-message"] [class*="cpk:bg-muted"],
+  .brand-glass-container [data-testid="copilot-user-message"] [class*="bg-muted"] {
+    background: transparent !important;
+    box-shadow: none !important;
+    border-color: rgba(255, 255, 255, 0.08) !important;
+  }
+
+  .brand-glass-container [data-testid="copilot-assistant-message"],
+  .brand-glass-container [data-testid="copilot-assistant-message"] [class*="cpk:prose"],
+  .brand-glass-container [data-testid="copilot-assistant-message"] [class*="prose"] {
+    background: transparent !important;
+  }
+
+  .brand-glass-container [data-testid="copilot-user-message"],
+  .brand-glass-container [data-testid="copilot-assistant-message"] {
+    color: rgba(245, 245, 245, 0.95);
+  }
+
+  .brand-glass-container [data-testid="copilot-assistant-message"] code {
+    color: rgba(220, 220, 255, 0.9);
+  }
+
+  .brand-glass-container [data-testid="copilot-assistant-message"] a {
+    color: var(--color-lilac-light);
+  }
+}
+
+/* CopilotKit v1 class overrides — make containers transparent inside glass */
+.brand-glass-container .copilotKitMessages {
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+/* A2UI activity messages — soften within glass */
+.brand-glass-container .a2ui-activity-message {
+  background: rgba(255, 255, 255, 0.5) !important;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .brand-glass-container .a2ui-activity-message {
+    background: rgba(255, 255, 255, 0.04) !important;
+    border-color: rgba(255, 255, 255, 0.06) !important;
+    box-shadow: none !important;
+  }
+  .brand-glass-container .a2ui-activity-header {
+    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
+  }
+  .brand-glass-container .a2ui-activity-toggle {
+    border-color: rgba(255, 255, 255, 0.06);
+    background: rgba(255, 255, 255, 0.04);
+  }
+}
+
+/* CopilotKit input area — glass treatment */
+.brand-glass-container [data-copilotkit] [class*="bg-background"] {
+  background: transparent !important;
+}
+
+/* CopilotKit input wrapper — match content area background */
+.copilot-custom-chat--has-messages {
+  background: #fff;
+}
+
+.copilot-custom-chat > [data-copilotkit] {
+  padding: 8px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .copilot-custom-chat--has-messages {
+    background: rgba(10, 10, 10, 1);
+  }
+}
+
+/* CopilotKit Content wrapper — opaque dark background for scroll container */
+@media (prefers-color-scheme: dark) {
+  .copilot-custom-chat [data-copilotkit] > div {
+    background-color: rgba(10, 10, 10, 1);
+  }
+}
+
+/* Breathing room at the bottom of the message scroll area */
 .a2ui-chat-container [class*="overflow-y-scroll"] {
-  padding-bottom: 120px !important;
+  padding-bottom: 16px !important;
+  background-color: var(--background);
+  background-image: none;
+  background-clip: unset;
+  -webkit-background-clip: unset;
 }
 
-/* === Custom chat layout: chips above input pill === */
+.a2ui-chat-container {
+  background-clip: unset;
+  -webkit-background-clip: unset;
+}
+
+@media (prefers-color-scheme: dark) {
+  .a2ui-chat-container,
+  .a2ui-chat-container [class*="overflow-y-scroll"] {
+    color: rgba(250, 250, 250, 1);
+  }
+}
+
+/* === Custom chat layout === */
 
 /* The children render prop layout container */
 .copilot-custom-chat {
@@ -133,15 +291,25 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+}
+
+/* When messages exist, switch to top-aligned scrollable layout */
+.copilot-custom-chat--has-messages {
+  justify-content: flex-start;
+}
+
+.copilot-custom-chat--has-messages > :first-child {
+  flex: 1 1 0%;
+  min-height: 0;
 }
 
-/* Hide the duplicate suggestions inside the scroll area (they're also rendered
-   separately in .chips-above-input via the suggestionView render prop) */
-.copilot-custom-chat > :first-child [data-testid="copilot-suggestions"] {
+/* Hide duplicate suggestion chips rendered by CopilotKit inside the scroll area */
+.copilot-custom-chat--has-messages > :first-child [data-testid="copilot-suggestions"] {
   display: none !important;
 }
 
-/* Floating suggestion chips positioned just above the input pill */
+/* Floating suggestion chips — only used in canvas/sidebar mode */
 .chips-above-input {
   position: absolute;
   bottom: 110px;
@@ -164,20 +332,23 @@
   display: none !important;
 }
 
-/* === Suggestion chips: welcome screen reordering === */
+/* === Welcome screen overrides === */
 
-/* On the welcome screen (no messages), CopilotChatView renders its own layout.
-   Reorder children so chips appear above the input pill. */
-[data-testid="copilot-welcome-screen"] > div > div:nth-child(2) {
-  order: 3;
+[data-testid="copilot-welcome-screen"] {
+  background-color: var(--surface-secondary);
+  background-clip: unset;
+  -webkit-background-clip: unset;
 }
-[data-testid="copilot-welcome-screen"] > div > div:nth-child(3) {
-  order: 2;
-  width: 100%;
-  justify-content: center;
-  margin-top: 0;
-  margin-bottom: 12px;
-  padding-inline: 0;
+
+@media (prefers-color-scheme: dark) {
+  [data-testid="copilot-welcome-screen"] {
+    color: rgba(250, 250, 250, 1);
+  }
+}
+
+/* Hide the default welcome screen suggestion chips (we render our own below the cards) */
+[data-testid="copilot-welcome-screen"] [data-testid="copilot-suggestions"] {
+  display: none !important;
 }
 
 /* === Suggestion chips: shared styles === */
@@ -188,6 +359,11 @@
   overflow-x: auto !important;
   overflow-y: hidden !important;
   max-width: 100% !important;
+  background-image: radial-gradient(circle at 50% 50%, rgba(250, 250, 250, 1) 0%, rgba(0, 0, 0, 0) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-color: rgba(255, 255, 255, 0);
   padding-bottom: 2px; /* prevent clipping box-shadow on pills */
   justify-content: center;
   /* Hide scrollbar (still scrollable) */
@@ -200,9 +376,9 @@
 
 /* Use the system font for A2UI surfaces to match the rest of the UI. */
 .a2ui-chat-container .a2ui-surface {
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
-  --font-family-flex: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  --font-family-flex: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
 }
 
@@ -233,7 +409,7 @@
 
 @keyframes a2ui-activity-flash {
   0% {
-    outline: 2px solid rgba(99, 102, 241, 0.5);
+    outline: 2px solid rgba(190, 194, 255, 0.5);
     outline-offset: 2px;
   }
   100% {
@@ -296,7 +472,7 @@
 }
 
 .a2ui-chat-container .a2ui-activity-toggle:focus-visible {
-  outline: 2px solid rgba(99, 102, 241, 0.5);
+  outline: 2px solid rgba(190, 194, 255, 0.5);
   outline-offset: 2px;
 }
 
@@ -424,6 +600,25 @@
   grid-row: 1 !important;
 }
 
+/* === Tool Result Card Surfaces ===
+   Direct values (not CSS variables) to avoid Turbopack dev-mode cascade issues
+   between globals.css (@import "tailwindcss") and style.css variable scopes. */
+
+.surface-card {
+  background: #fff;
+  border: 1px solid transparent;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .surface-card {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
+    box-shadow: none;
+  }
+}
+
 /* === Compact Tool Cards (chat sidebar when content is in canvas) === */
 
 .compact-tool-card {
@@ -635,6 +830,371 @@
   padding: 4px 0;
 }
 
+/* === Brand Shell & Glass Container === */
+
+/* In chat-only mode, pad the outer shell so the blobs show around the edges */
+.brand-shell {
+  display: flex;
+  align-items: stretch;
+  padding: 16px;
+  height: 100%;
+}
+
+/* The glass card that holds header + chat */
+.brand-glass-container {
+  background: var(--color-glass-dark);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-glass);
+  flex: 1;
+  overflow: hidden;
+}
+
+/* In split/canvas mode, remove the rounded corners and margin */
+.brand-glass-container--split {
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+@media (max-width: 768px) {
+  .brand-shell {
+    padding: 8px;
+  }
+}
+
+/* === Branded Title Block (above input pill) === */
+
+.explainer-title-block {
+  flex-shrink: 0;
+  text-align: center;
+  padding: 0 24px 20px;
+}
+
+.branded-header-title {
+  font-family: var(--font-family);
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: center;
+  background: linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.branded-header-subtitle {
+  font-size: 15px;
+  color: var(--text-tertiary);
+  font-weight: 400;
+  text-align: center;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
+/* === CTA Banner === */
+
+.cta-banner {
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border-glass);
+  background: linear-gradient(
+    135deg,
+    rgba(190, 194, 255, 0.08) 0%,
+    rgba(133, 224, 206, 0.06) 100%
+  );
+}
+
+.cta-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 20px;
+}
+
+.cta-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.cta-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--color-lilac), var(--color-mint));
+  color: #fff;
+}
+
+.cta-headline {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.cta-subtext {
+  font-weight: 400;
+  color: var(--text-secondary);
+}
+
+.cta-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+.cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 180ms ease;
+  cursor: pointer;
+}
+
+.cta-btn--primary {
+  background: linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark));
+  color: #fff;
+  border: none;
+  box-shadow: 0 1px 4px rgba(149, 153, 204, 0.3);
+}
+
+.cta-btn--primary:hover {
+  box-shadow: 0 2px 10px rgba(149, 153, 204, 0.45);
+  transform: translateY(-1px);
+}
+
+.cta-btn--secondary {
+  background: var(--surface-btn);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-default);
+}
+
+.cta-btn--secondary:hover {
+  background: var(--surface-btn-hover);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.cta-btn:active {
+  transform: translateY(0);
+}
+
+@media (max-width: 640px) {
+  .cta-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 16px;
+  }
+
+  .cta-actions {
+    width: 100%;
+  }
+
+  .cta-btn {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .cta-banner {
+    background: linear-gradient(
+      135deg,
+      rgba(190, 194, 255, 0.04) 0%,
+      rgba(133, 224, 206, 0.03) 100%
+    );
+  }
+
+  .cta-btn--primary {
+    box-shadow: 0 1px 4px rgba(149, 153, 204, 0.2);
+  }
+
+  .cta-btn--primary:hover {
+    box-shadow: 0 2px 10px rgba(149, 153, 204, 0.35);
+  }
+}
+
+/* === Explainer Section (below input pill) === */
+
+.explainer-section {
+  flex-shrink: 0;
+  padding: 24px 24px 16px;
+  text-align: center;
+}
+
+.explainer-headline {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  max-width: 480px;
+  margin: 0 auto 20px;
+}
+
+.explainer-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.explainer-card {
+  background: var(--surface-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  padding: 20px 16px;
+  text-align: left;
+  box-shadow: var(--shadow-card);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.explainer-card:hover {
+  box-shadow: var(--shadow-card-hover);
+  transform: translateY(-1px);
+}
+
+.explainer-card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.explainer-card-icon--lilac {
+  background: rgba(190, 194, 255, 0.2);
+  color: var(--accent-indigo);
+}
+
+.explainer-card-icon--mixed {
+  background: linear-gradient(135deg, rgba(190, 194, 255, 0.15), rgba(133, 224, 206, 0.15));
+  color: var(--accent-indigo);
+}
+
+.explainer-card-icon--mint {
+  background: rgba(133, 224, 206, 0.2);
+  color: var(--accent-emerald);
+}
+
+.explainer-card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+  line-height: 1.3;
+}
+
+.explainer-card-desc {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .explainer-cards {
+    grid-template-columns: 1fr;
+    max-width: 320px;
+  }
+
+  .explainer-section {
+    padding: 16px 16px 24px;
+  }
+}
+
+/* === Explainer Prompts (suggestion chips below cards) === */
+
+.explainer-prompts {
+  flex-shrink: 0;
+  text-align: center;
+  padding: 20px 16px 24px;
+}
+
+.explainer-prompts-label {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+  margin: 0 0 10px;
+}
+
+/* Custom suggestion chips in the welcome view */
+.suggestion-chips {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.suggestion-chip {
+  font-family: var(--font-family);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--color-border-glass);
+  border-radius: 20px;
+  padding: 6px 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
+}
+
+.suggestion-chip:hover {
+  background: rgba(255, 255, 255, 0.95);
+  border-color: var(--color-lilac-dark);
+  color: var(--color-lilac-dark);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
+  transform: translateY(-1px);
+}
+
+/* Hide the default CopilotKit welcome message (replaced by branded title) */
+[data-testid="copilot-welcome-screen"] [data-testid="copilot-welcome-message"] {
+  display: none !important;
+}
+
+/* Hide the disclaimer fallback */
+[data-testid="copilot-disclaimer"] {
+  display: none !important;
+}
+
+/* === Glassmorphism Panel Overlays === */
+
+.layout-split .canvas-panel {
+  background: var(--color-glass-dark);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.layout-split .chat-sidebar {
+  background: var(--color-glass-dark);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
 /* Responsive: stack on mobile */
 @media (max-width: 768px) {
   .layout-split {
diff --git a/src/components/calendar-view.tsx b/src/components/calendar-view.tsx
index 276c3d2..63f8db3 100644
--- a/src/components/calendar-view.tsx
+++ b/src/components/calendar-view.tsx
@@ -100,7 +100,7 @@ export function CalendarView({ date, dayName, events }: CalendarViewProps) {
   const pendingCount = guests.filter((g) => g.status === "pending" || g.status === "maybe").length;
 
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3">
       {/* Header */}
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -267,7 +267,7 @@ export function CalendarView({ date, dayName, events }: CalendarViewProps) {
 
 export function CalendarLoadingState() {
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3 animate-pulse" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3 animate-pulse">
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center gap-2">
         <div className="w-5 h-5 bg-[var(--surface-quaternary)] rounded" />
         <div className="h-4 w-20 bg-[var(--surface-quaternary)] rounded" />
diff --git a/src/components/cta-banner.tsx b/src/components/cta-banner.tsx
new file mode 100644
index 0000000..098c9f1
--- /dev/null
+++ b/src/components/cta-banner.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+const DOCS_URL = "https://docs.copilotkit.ai/agent-spec";
+const BLOG_URL = "https://go.copilotkit.ai/oracle-a2ui-blog";
+
+export function CTABanner() {
+  return (
+    <div className="cta-banner">
+      <div className="cta-content">
+        <div className="cta-text">
+          <span className="cta-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
+            </svg>
+          </span>
+          <p className="cta-headline">
+            Build AI agents with a universal spec.{" "}
+            <span className="cta-subtext">Open Agent Specification (Agent Spec) is a portable language for defining agentic systems.</span>
+          </p>
+        </div>
+        <div className="cta-actions">
+          <a href={DOCS_URL} target="_blank" rel="noopener noreferrer" className="cta-btn cta-btn--primary">
+            Get Started
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M7 17L17 7" />
+              <path d="M7 7h10v10" />
+            </svg>
+          </a>
+          <a href={BLOG_URL} target="_blank" rel="noopener noreferrer" className="cta-btn cta-btn--secondary">
+            Read More
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M7 17L17 7" />
+              <path d="M7 7h10v10" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/email-compose-view.tsx b/src/components/email-compose-view.tsx
index 96ed4f0..0880d54 100644
--- a/src/components/email-compose-view.tsx
+++ b/src/components/email-compose-view.tsx
@@ -24,7 +24,7 @@ export function EmailComposeView({ email }: EmailComposeViewProps) {
 
   if (discarded) {
     return (
-      <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3" style={{ boxShadow: 'var(--shadow-card)' }}>
+      <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3">
         <div className="px-5 py-4 text-sm text-[var(--text-tertiary)] text-center">
           Draft discarded.
         </div>
@@ -34,7 +34,7 @@ export function EmailComposeView({ email }: EmailComposeViewProps) {
 
   if (sent) {
     return (
-      <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3" style={{ boxShadow: 'var(--shadow-card)' }}>
+      <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3">
         <div className="px-5 py-4 flex items-center justify-center gap-2 text-sm text-emerald-600">
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -48,7 +48,7 @@ export function EmailComposeView({ email }: EmailComposeViewProps) {
   const isReply = email.subject.startsWith("Re:");
 
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3">
       {/* Header */}
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -115,7 +115,7 @@ export function EmailComposeView({ email }: EmailComposeViewProps) {
 
 export function EmailComposeLoadingState() {
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3 animate-pulse" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3 animate-pulse">
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center gap-2">
         <div className="w-5 h-5 bg-[var(--surface-quaternary)] rounded" />
         <div className="h-4 w-24 bg-[var(--surface-quaternary)] rounded" />
diff --git a/src/components/explainer-section.tsx b/src/components/explainer-section.tsx
new file mode 100644
index 0000000..1688aeb
--- /dev/null
+++ b/src/components/explainer-section.tsx
@@ -0,0 +1,68 @@
+export function ExplainerTitle() {
+  return (
+    <div className="explainer-title-block">
+      <div className="branded-header-title">Portable Agents with Generative UI</div>
+      <div className="branded-header-subtitle">
+        Bring your Agent Spec Agent Configurations to interactive, renderable
+        UIs, powered by A2UI components over the AGUI Protocol
+      </div>
+    </div>
+  );
+}
+
+export function ExplainerCards() {
+  return (
+    <div className="explainer-section">
+      <p className="explainer-headline">
+        Built with Agent Spec, CopilotKit AG-UI, and A2UI
+      </p>
+
+      <div className="explainer-cards">
+        <div className="explainer-card">
+          <div className="explainer-card-icon explainer-card-icon--lilac">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+              <line x1="16" y1="13" x2="8" y2="13" />
+              <line x1="16" y1="17" x2="8" y2="17" />
+              <polyline points="10 9 9 9 8 9" />
+            </svg>
+          </div>
+          <div className="explainer-card-title">Open Agent Specification (Agent Spec)</div>
+          <p className="explainer-card-desc">
+            Define agent behavior and workflows once, run them across compatible runtimes.
+          </p>
+        </div>
+
+        <div className="explainer-card">
+          <div className="explainer-card-icon explainer-card-icon--mixed">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="16 18 22 12 16 6" />
+              <polyline points="8 6 2 12 8 18" />
+              <line x1="14" y1="4" x2="10" y2="20" />
+            </svg>
+          </div>
+          <div className="explainer-card-title">AG-UI (CopilotKit)</div>
+          <p className="explainer-card-desc">
+            Standardize the live, tool-aware interaction stream between an agent run and an application.
+          </p>
+        </div>
+
+        <div className="explainer-card">
+          <div className="explainer-card-icon explainer-card-icon--mint">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="3" width="7" height="7" rx="1" />
+              <rect x="14" y="3" width="7" height="7" rx="1" />
+              <rect x="3" y="14" width="7" height="7" rx="1" />
+              <rect x="14" y="14" width="7" height="7" rx="1" />
+            </svg>
+          </div>
+          <div className="explainer-card-title">A2UI (Google)</div>
+          <p className="explainer-card-desc">
+            Let agents propose safe, declarative UI surfaces that applications can render natively.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/inbox-view.tsx b/src/components/inbox-view.tsx
index f444439..c3238ad 100644
--- a/src/components/inbox-view.tsx
+++ b/src/components/inbox-view.tsx
@@ -55,7 +55,7 @@ export function InboxView({ emails }: InboxViewProps) {
   const selectedEmail = emails.find((e) => e.id === selected);
 
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3">
       {/* Header */}
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -207,7 +207,7 @@ export function InboxView({ emails }: InboxViewProps) {
 
 export function InboxLoadingState() {
   return (
-    <div className="max-w-2xl w-full rounded-xl bg-[var(--surface-primary)] border border-[var(--border-card)] overflow-hidden my-3 animate-pulse" style={{ boxShadow: 'var(--shadow-card)' }}>
+    <div className="max-w-2xl w-full bg-white dark:bg-transparent border border-transparent dark:border-white/[0.06] rounded-xl shadow-md dark:shadow-none overflow-hidden my-3 animate-pulse">
       <div className="px-5 py-3.5 border-b border-[var(--border-default)] flex items-center gap-2">
         <div className="w-5 h-5 bg-[var(--surface-quaternary)] rounded" />
         <div className="h-4 w-16 bg-[var(--surface-quaternary)] rounded" />