diff --git a/PROMPT.md b/PROMPT.md
index 97ae8248..225d745e 100644
--- a/PROMPT.md
+++ b/PROMPT.md
@@ -580,3 +580,100 @@ HEAR variable
 SEND MAIL to, subject, body, attachments
 SEND TEMPLATE recipients, template, variables
 ```
+
+---
+
+## Conversation Examples (WhatsApp Style)
+
+All conversation examples throughout the book use the WhatsApp-style HTML format. This provides a familiar, visually consistent representation of bot interactions.
+
+### Standard Format
+
+```html
+<div class="wa-chat">
+  <div class="wa-message user">
+    <div class="wa-bubble">
+      <p>User message goes here</p>
+      <div class="wa-time">10:30</div>
+    </div>
+  </div>
+  <div class="wa-message bot">
+    <div class="wa-bubble">
+      <p>Bot response goes here</p>
+      <div class="wa-time">10:30</div>
+    </div>
+  </div>
+</div>
+```
+
+### Message Classes
+
+| Class | Usage |
+|-------|-------|
+| `wa-chat` | Container for the conversation |
+| `wa-message` | Individual message wrapper |
+| `wa-message user` | User message (right-aligned, colored) |
+| `wa-message bot` | Bot message (left-aligned) |
+| `wa-bubble` | Message bubble with styling |
+| `wa-time` | Timestamp display |
+
+### Formatting Guidelines
+
+1. **User messages** — Use `wa-message user` class
+2. **Bot messages** — Use `wa-message bot` class
+3. **Timestamps** — Include `wa-time` div with realistic times
+4. **Multi-line responses** — Use separate `<p>` tags for each line
+5. **Status indicators** — Use text indicators (Success, Error, etc.) not emojis
+6. **Bold text** — Use `<strong>` for emphasis
+7. **Attachments** — Indicate with text like "[Attachment: filename.pdf]"
+
+### Complete Example
+
+```html
+<div class="wa-chat">
+  <div class="wa-message bot">
+    <div class="wa-bubble">
+      <p>Hello! How can I help you today?</p>
+      <div class="wa-time">10:30</div>
+    </div>
+  </div>
+  <div class="wa-message user">
+    <div class="wa-bubble">
+      <p>I want to enroll in computer science</p>
+      <div class="wa-time">10:31</div>
+    </div>
+  </div>
+  <div class="wa-message bot">
+    <div class="wa-bubble">
+      <p>I'll help you enroll! What's your name?</p>
+      <div class="wa-time">10:31</div>
+    </div>
+  </div>
+  <div class="wa-message user">
+    <div class="wa-bubble">
+      <p>Sarah Chen</p>
+      <div class="wa-time">10:31</div>
+    </div>
+  </div>
+  <div class="wa-message bot">
+    <div class="wa-bubble">
+      <p><strong>Success:</strong> Welcome to Computer Science, Sarah!</p>
+      <p>Your enrollment ID is: ENR-2025-0142</p>
+      <div class="wa-time">10:31</div>
+    </div>
+  </div>
+</div>
+```
+
+### When to Use Each Format
+
+| Content Type | Format |
+|--------------|--------|
+| Interface screenshots | SVG wireframe |
+| System architecture | SVG diagram |
+| Data flow diagrams | SVG diagram |
+| Bot conversations | WhatsApp HTML |
+| API examples | Code blocks |
+| Configuration | Code blocks |
+
+The WhatsApp chat styling is defined in `src/whatsapp-chat.css` and automatically included in the book build.
diff --git a/src/ROADMAP.md b/src/ROADMAP.md
new file mode 100644
index 00000000..98810018
--- /dev/null
+++ b/src/ROADMAP.md
@@ -0,0 +1,204 @@
+# General Bots Roadmap 2018-2026
+
+<style>
+.roadmap-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.roadmap-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
+}
+.roadmap-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
+  justify-content: center;
+  align-items: center;
+}
+.roadmap-overlay.active {
+  display: flex;
+}
+.roadmap-popup {
+  background: #FFFFFF;
+  border-radius: 16px;
+  width: 95vw;
+  height: 90vh;
+  max-width: 1800px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+}
+@media (prefers-color-scheme: dark) {
+  .roadmap-popup {
+    background: #1E293B;
+  }
+}
+.roadmap-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #E2E8F0;
+}
+@media (prefers-color-scheme: dark) {
+  .roadmap-popup-header {
+    border-bottom-color: #334155;
+  }
+}
+.roadmap-popup-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1E1B4B;
+  margin: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .roadmap-popup-title {
+    color: #F1F5F9;
+  }
+}
+.roadmap-popup-close {
+  background: #F1F5F9;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  font-size: 20px;
+  cursor: pointer;
+  color: #64748B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.roadmap-popup-close:hover {
+  background: #E2E8F0;
+  color: #334155;
+}
+@media (prefers-color-scheme: dark) {
+  .roadmap-popup-close {
+    background: #334155;
+    color: #94A3B8;
+  }
+  .roadmap-popup-close:hover {
+    background: #475569;
+    color: #E2E8F0;
+  }
+}
+.roadmap-iframe {
+  flex: 1;
+  width: 100%;
+  border: none;
+}
+</style>
+
+<button class="roadmap-btn" onclick="openRoadmap()">
+  View Interactive Roadmap
+</button>
+
+<div class="roadmap-overlay" id="roadmap-overlay" onclick="closeRoadmap(event)">
+  <div class="roadmap-popup" onclick="event.stopPropagation()">
+    <div class="roadmap-popup-header">
+      <h3 class="roadmap-popup-title">General Bots Roadmap 2018-2026</h3>
+      <button class="roadmap-popup-close" onclick="closeRoadmap()">X</button>
+    </div>
+    <iframe class="roadmap-iframe" src="assets/roadmap.html" title="Roadmap"></iframe>
+  </div>
+</div>
+
+<script>
+function openRoadmap() {
+  document.getElementById('roadmap-overlay').classList.add('active');
+  document.body.style.overflow = 'hidden';
+}
+function closeRoadmap(event) {
+  if (!event || event.target.id === 'roadmap-overlay') {
+    document.getElementById('roadmap-overlay').classList.remove('active');
+    document.body.style.overflow = '';
+  }
+}
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') closeRoadmap();
+});
+</script>
+
+---
+
+## Timeline Overview
+
+| Period | Focus | Features | Key Deliverables |
+|--------|-------|----------|------------------|
+| **2018-2024** | v1-v5 Pre-LLM | 12 ✅ | Package System, TALK/HEAR, NLP/BERT, GPT-3.5, QR CODE, SET SCHEDULE |
+| **2024** | v6 Foundation | 8 ✅ | Rust Core, Migration v5→v6, New Architecture, PostgreSQL, Vault, Minimal Flow |
+| **2025 H1** | Rust Migration | 10 ✅ | BASIC Engine, Channels, Drive (S3), Email, REST API, WhatsApp, Telegram, PDF |
+| **2025 H2** | Features & AUTOTASK | 19 ✅ | Tasks AI, KB, Vector DB, Tools, Generators, Multimodal, NVIDIA GPU/LXC, Paper, Research, Calendar, Meet |
+| **2026 Q1** | Tasks AI GO ⭐ | 12 📋 | Production Autonomous, Gmail, Outlook, Google Drive, OneDrive, Google/Outlook Calendars, Transfer to Human |
+| **2026 Q2** | Collaboration | 10 📋 | Multi-Agent, Teams, Google Meet, Zoom, Slack, Discord, Docker, Compliance, Marketplace |
+| **2026 Q3** | Workflow & CRM | 2 📋 | Workflow Designer, CRM Integration |
+| **2026 Q4** | Enterprise | 4 📋 | Mobile Apps, Enterprise SSO, White Label, Advanced Monitoring |
+
+**Total: 77 Features** (49 Complete ✅ • 28 Planned 📋)
+
+---
+
+## Feature Highlights
+
+### Tasks (AI Autonomous) GO
+
+The flagship feature enabling fully autonomous AI task execution:
+
+- Human provides intent in natural language
+- AI creates execution plan
+- AI generates code/content
+- AI deploys result
+- Human reviews and approves
+
+**Available in:** 2025 H2 (scaffolding), Q1 2026 (production)
+
+### Generators
+
+| Generator | Purpose |
+|-----------|---------|
+| BOT | Conversational bots |
+| APP | Full applications |
+| SITE | HTMX websites |
+| GENERAL | General content |
+| LANDPAGE | Landing pages |
+
+---
+
+## Technology Stack
+
+**Backend:** Rust, Actix-Web, Tokio, SQLx  
+**Database:** PostgreSQL  
+**Storage:** MinIO (S3-compatible)  
+**Cache:** Valkey (Redis alternative)  
+**UI:** HTMX, Askama templates  
+**Desktop/Mobile:** Tauri  
+
+---
+
+## Status Legend
+
+| Status | Description |
+|--------|-------------|
+| Complete | Feature is fully implemented and available |
+| In Progress | Feature is currently being developed |
+| Planned | Feature is scheduled for future development |
+
+Click the **View Interactive Roadmap** button above to explore all 77 features with detailed descriptions. Scroll horizontally to navigate the timeline from 2018 to 2026.
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index 26e10113..8d4e8481 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -1,6 +1,7 @@
 # Summary
 
 [Executive Vision](./executive-vision.md)
+[Roadmap 2024-2026](./ROADMAP.md)
 [Introduction](./introduction.md)
 
 # Part I - Getting Started
@@ -399,8 +400,6 @@
   - [Backup and Recovery](./19-maintenance/backup-recovery.md)
   - [Troubleshooting](./19-maintenance/troubleshooting.md)
 
-- [Appendix D: Documentation Style](./16-appendix-docs-style/conversation-examples.md)
-  - [SVG and Conversation Standards](./16-appendix-docs-style/svg.md)
 
 [Glossary](./glossary.md)
 [Contact](./contact/README.md)
diff --git a/src/assets/roadmap-complete.md b/src/assets/roadmap-complete.md
new file mode 100644
index 00000000..7505dae0
--- /dev/null
+++ b/src/assets/roadmap-complete.md
@@ -0,0 +1,216 @@
+# General Bots Complete Roadmap 2018-2026
+
+## Merged Timeline: User Requirements + botbook Documentation
+
+This table merges the proposed timeline with all features documented in botbook/src.
+
+---
+
+## Summary
+
+| Period | Focus | Feature Count | Status |
+|--------|-------|---------------|--------|
+| 2018-2024 | v1-v5 Pre-LLM | 12 | ✅ Complete |
+| 2024 | v6 Foundation | 8 | ✅ Complete |
+| 2025 H1 | Rust Migration | 10 | ✅ Complete |
+| 2025 H2 | Features & Tasks | 10 | ✅ Complete |
+| 2026 Q1 | Autonomous GO | 12 | 📋 Planned |
+| 2026 Q2 | Collaboration | 12 | 📋 Planned |
+| 2026 Q3 | AI Features | 8 | 📋 Planned |
+| 2026 Q4 | Enterprise | 8 | 📋 Planned |
+| **TOTAL** | | **80** | |
+
+---
+
+## 2018-2024: v1-v5 Pre-LLM Era ✅
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Package System (.gbai/.gbot/.gbkb/.gbdialog/.gbtheme) | Your list + botbook | 02-templates/ |
+| 2 | TALK / HEAR Keywords | Your list + botbook | 06-gbdialog/keyword-talk.md |
+| 3 | NLP / BERT Intent Recognition | Your list | 06-gbdialog/ |
+| 4 | GPT-3.5 Integration | Your list | 08-config/llm-config.md |
+| 5 | QR CODE Keyword | Your list + botbook | 06-gbdialog/keyword-qrcode.md |
+| 6 | SET SCHEDULE Keyword | Your list + botbook | 06-gbdialog/keyword-set-schedule.md |
+| 7 | LLM Keyword | Your list + botbook | 06-gbdialog/ |
+| 8 | Node.js Core | Your list | Historical |
+| 9 | Azure Bot Service | Your list + botbook | Historical |
+| 10 | DirectLine API | botbook | Historical |
+| 11 | MS Teams Bot | botbook | Historical |
+| 12 | Web Server | botbook | Historical |
+
+---
+
+## 2024: v6 Rust Foundation ✅
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Migration v5 → v6 | Your list | 14-migration/ |
+| 2 | Node.js → Rust Rewrite | Your list + botbook | 07-gbapp/architecture.md |
+| 3 | New Rust Architecture | Your list + botbook | 07-gbapp/crates.md |
+| 4 | Minimal Flow MVP | Your list | 07-gbapp/ |
+| 5 | PostgreSQL + Diesel ORM | botbook | 15-appendix/schema.md |
+| 6 | Auto-Bootstrap System | botbook | 01-introduction/ |
+| 7 | Vault Secrets Management | botbook | 08-config/secrets-management.md |
+| 8 | Basic HTMX UI | botbook | 04-gbui/htmx-architecture.md |
+
+---
+
+## 2025 H1: Rust Migration & Channels ✅
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | BASIC Engine (70+ keywords) | Your list + botbook | 06-gbdialog/keywords.md |
+| 2 | System Automation (cron) | Your list + botbook | 11-features/automation.md |
+| 3 | Web Chat Channel | Your list + botbook | 04-gbui/apps/chat.md |
+| 4 | LLM Integration (multi-provider) | Your list + botbook | 08-config/llm-config.md |
+| 5 | Drive Storage (S3) | Your list + botbook | 02-templates/gbdrive.md |
+| 6 | Email System (IMAP/SMTP) | Your list + botbook | 11-features/email.md |
+| 7 | REST API | Your list + botbook | 10-rest/ |
+| 8 | **Telegram Channel** | botbook ROADMAP | 11-features/channels.md |
+| 9 | **PDF Generation** | botbook ROADMAP | 06-gbdialog/keyword-generate-pdf.md |
+| 10 | **WhatsApp Channel** | botbook ROADMAP | 11-features/channels.md |
+
+---
+
+## 2025 H2: Features & Autonomous Tasks ✅
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Tasks AI Autonomous (AUTOTASK) | Your list + botbook | 07-gbapp/autonomous-tasks.md |
+| 2 | Knowledge Base (Vector) | Your list + botbook | 03-knowledge-base/ |
+| 3 | Vector Database (Qdrant) | Your list + botbook | 03-knowledge-base/vector-collections.md |
+| 4 | Tools System (MCP) | Your list + botbook | 09-tools/ |
+| 5 | UI Minimal Suite | Your list + botbook | 04-gbui/ |
+| 6 | APP Generator | Your list + botbook | 07-gbapp/autonomous-tasks.md |
+| 7 | **BOT Generator** | botbook | 07-gbapp/autonomous-tasks.md |
+| 8 | **SITE Generator** | botbook | 06-gbdialog/keyword-create-site.md |
+| 9 | **LANDPAGE Generator** | botbook | 07-gbapp/autonomous-tasks.md |
+| 10 | **Analytics Dashboard** | botbook | 04-gbui/apps/analytics.md |
+
+---
+
+## 2026 Q1: Autonomous GO ⭐ FLAGSHIP 📋
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | **Tasks AI GO** ⭐ | Your list + botbook | 07-gbapp/autonomous-tasks.md |
+| 2 | Gmail Integration | Your list | 10-rest/email-api.md |
+| 3 | Outlook/Hotmail | Your list | 10-rest/email-api.md |
+| 4 | Google Drive | Your list | 08-config/drive.md |
+| 5 | OneDrive | Your list | 08-config/drive.md |
+| 6 | Google Calendar | Your list | 10-rest/calendar-api.md |
+| 7 | Outlook Calendar | Your list | 10-rest/calendar-api.md |
+| 8 | Speech to Text | Your list | 08-config/multimodal.md |
+| 9 | Image Generation | Your list | 08-config/multimodal.md |
+| 10 | Vision Analysis | Your list | 08-config/multimodal.md |
+| 11 | **Transfer to Human** | botbook | 11-features/transfer-to-human.md |
+| 12 | **LLM-Assisted Attendant** | botbook | 11-features/attendant-llm-assist.md |
+
+---
+
+## 2026 Q2: Collaboration Tools 📋
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Multi-Agent System | Your list + botbook | 11-features/multi-agent-orchestration.md |
+| 2 | Bot Marketplace | Your list | Future |
+| 3 | Compliance Suite | Your list + botbook | 04-gbui/apps/compliance.md |
+| 4 | MS Teams Channel | Your list | 11-features/channels.md |
+| 5 | Analytics Reports | Your list + botbook | 10-rest/analytics-api.md |
+| 6 | **Google Meet** | botbook ROADMAP | 04-gbui/apps/meet.md |
+| 7 | **Zoom Integration** | botbook ROADMAP | Future |
+| 8 | **Slack Channel** | botbook ROADMAP | 11-features/channels.md |
+| 9 | **Discord Channel** | botbook ROADMAP | 11-features/channels.md |
+| 10 | **Google Sheets** | botbook ROADMAP | Future |
+| 11 | **Excel Online** | botbook ROADMAP | Future |
+| 12 | **Whiteboard Collaboration** | botbook | 10-rest/whiteboard-api.md |
+
+---
+
+## 2026 Q3: Advanced AI Features 📋
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Workflow Designer | Your list + botbook | 04-gbui/apps/designer.md |
+| 2 | CRM Integration | Your list | 02-templates/template-crm.md |
+| 3 | **Voice Synthesis (TTS)** | botbook ROADMAP | 08-config/multimodal.md |
+| 4 | **ERP Integration** | botbook ROADMAP | 02-templates/template-erp.md |
+| 5 | **Paper App (AI Writing)** | botbook | 04-gbui/apps/paper.md |
+| 6 | **Research App (AI Search)** | botbook | 04-gbui/apps/research.md |
+| 7 | **Player App (Media)** | botbook | 04-gbui/apps/player.md |
+| 8 | **Sources App (Prompts)** | botbook | 04-gbui/apps/sources.md |
+
+---
+
+## 2026 Q4: Enterprise Scale 📋
+
+| # | Feature | Source | Documentation |
+|---|---------|--------|---------------|
+| 1 | Mobile Apps (iOS/Android) | Your list + botbook | 13-devices/mobile.md |
+| 2 | Enterprise SSO (SAML/OIDC) | Your list + botbook | 12-auth/ |
+| 3 | White Label | Your list | Future |
+| 4 | **Backup & Restore** | botbook | 10-rest/backup-api.md |
+| 5 | **NVIDIA GPU Support** | botbook | 09-tools/nvidia-gpu-setup.md |
+| 6 | **Docker Deployment** | botbook | 07-gbapp/docker-deployment.md |
+| 7 | **LXC Containers** | botbook | 07-gbapp/containers.md |
+| 8 | **Advanced Monitoring** | botbook | 10-rest/monitoring-api.md |
+
+---
+
+## Suite Apps Status
+
+| App | Category | Timeline | Documentation |
+|-----|----------|----------|---------------|
+| Chat | Core | 2025 H1 | 04-gbui/apps/chat.md |
+| Drive | Storage | 2025 H1 | 04-gbui/apps/drive.md |
+| Tasks | Productivity | 2025 H2 | 04-gbui/apps/tasks.md |
+| Mail | Communication | 2025 H1 | 04-gbui/apps/mail.md |
+| Calendar | Scheduling | 2026 Q1 | 04-gbui/apps/calendar.md |
+| Meet | Video | 2026 Q2 | 04-gbui/apps/meet.md |
+| Paper | AI Writing | 2026 Q3 | 04-gbui/apps/paper.md |
+| Research | AI Search | 2026 Q3 | 04-gbui/apps/research.md |
+| Analytics | Reports | 2025 H2 | 04-gbui/apps/analytics.md |
+| Designer | Visual | 2026 Q3 | 04-gbui/apps/designer.md |
+| Sources | Prompts | 2026 Q3 | 04-gbui/apps/sources.md |
+| Compliance | Security | 2026 Q2 | 04-gbui/apps/compliance.md |
+| Player | Media | 2026 Q3 | 04-gbui/apps/player.md |
+
+---
+
+## Channel Support Status
+
+| Channel | Timeline | Documentation |
+|---------|----------|---------------|
+| Web Chat | 2025 H1 ✅ | 04-gbui/apps/chat.md |
+| WhatsApp | 2025 H1 ✅ | 11-features/channels.md |
+| Telegram | 2025 H1 ✅ | 11-features/channels.md |
+| MS Teams | 2026 Q2 📋 | 11-features/channels.md |
+| Slack | 2026 Q2 📋 | 11-features/channels.md |
+| Discord | 2026 Q2 📋 | 11-features/channels.md |
+| Instagram | Future | 11-features/channels.md |
+| SMS | Future | 06-gbdialog/keyword-sms.md |
+
+---
+
+## Infrastructure Features
+
+| Feature | Timeline | Documentation |
+|---------|----------|---------------|
+| PostgreSQL | 2024 ✅ | 15-appendix/schema.md |
+| Redis Cache | 2024 ✅ | 07-gbapp/architecture.md |
+| MinIO/S3 | 2024 ✅ | 08-config/drive.md |
+| Qdrant Vector | 2025 H2 ✅ | 03-knowledge-base/ |
+| Vault Secrets | 2024 ✅ | 08-config/secrets-management.md |
+| NVIDIA GPU | 2026 Q4 📋 | 09-tools/nvidia-gpu-setup.md |
+| Docker | 2026 Q4 📋 | 07-gbapp/docker-deployment.md |
+| LXC | 2026 Q4 📋 | 07-gbapp/containers.md |
+
+---
+
+## Legend
+
+- ✅ Complete
+- 📋 Planned
+- ⭐ Flagship Feature
+- **Bold** = Added from botbook (missing from original timeline)
diff --git a/src/assets/roadmap.html b/src/assets/roadmap.html
new file mode 100644
index 00000000..5221017a
--- /dev/null
+++ b/src/assets/roadmap.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>General Bots Roadmap 2018-2026</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
+  color: #fff;
+  min-height: 100vh;
+  padding: 40px 20px;
+  line-height: 1.5;
+}
+
+.header { text-align: center; margin-bottom: 50px; }
+h1 {
+  font-size: 2.5rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 10px;
+}
+.subtitle { color: #888; font-size: 1.1rem; margin-bottom: 20px; }
+.badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #7b2cbf, #00d4ff);
+  padding: 8px 24px;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.stats { display: flex; justify-content: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
+.stat { text-align: center; }
+.stat-num {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.stat-label { color: #888; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
+
+.suite {
+  max-width: 1000px;
+  margin: 0 auto 60px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 20px;
+  padding: 30px;
+}
+.suite-title { font-size: 1.3rem; color: #00d4ff; margin-bottom: 25px; text-align: center; }
+.apps { display: grid; grid-template-columns: repeat(9, 1fr); gap: 15px; }
+@media (max-width: 900px) { .apps { grid-template-columns: repeat(5, 1fr); } }
+@media (max-width: 500px) { .apps { grid-template-columns: repeat(3, 1fr); } }
+.app {
+  background: rgba(0,212,255,0.08);
+  border: 1px solid rgba(0,212,255,0.2);
+  border-radius: 16px;
+  padding: 20px 10px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.app:hover {
+  transform: translateY(-5px);
+  background: rgba(0,212,255,0.15);
+  box-shadow: 0 10px 30px rgba(0,212,255,0.2);
+}
+.app-icon { font-size: 2.2rem; margin-bottom: 8px; }
+.app-name { font-size: 0.9rem; font-weight: 600; }
+.app-desc { font-size: 0.7rem; color: #888; margin-top: 4px; }
+
+.timeline-arrow {
+  max-width: 1200px;
+  margin: 0 auto 20px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+.arrow-line {
+  flex: 1;
+  height: 4px;
+  background: linear-gradient(90deg, #64748b, #e74c3c, #27ae60, #f39c12, #3498db, #9b59b6, #1abc9c, #e91e63);
+  border-radius: 2px;
+}
+.arrow-head {
+  width: 0;
+  height: 0;
+  border-left: 20px solid #e91e63;
+  border-top: 12px solid transparent;
+  border-bottom: 12px solid transparent;
+}
+.timeline-labels {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto 50px;
+  padding: 0 20px;
+}
+.timeline-label { text-align: center; cursor: pointer; transition: transform 0.2s; }
+.timeline-label:hover { transform: scale(1.1); }
+.label-dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 8px; }
+.label-year { font-size: 1rem; font-weight: 700; }
+.label-desc { font-size: 0.75rem; color: #888; }
+.label-count { font-size: 0.7rem; margin-top: 4px; }
+.timeline-label.active .label-dot {
+  box-shadow: 0 0 20px currentColor;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 10px currentColor; }
+  50% { box-shadow: 0 0 25px currentColor; }
+}
+
+.periods { max-width: 1200px; margin: 0 auto; }
+.period-section {
+  margin-bottom: 30px;
+  background: rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 16px;
+  overflow: hidden;
+}
+.period-header {
+  padding: 20px 25px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.period-header:hover { background: rgba(255,255,255,0.03); }
+.period-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
+.period-info { flex: 1; }
+.period-title { font-size: 1.2rem; font-weight: 600; }
+.period-subtitle { font-size: 0.85rem; color: #888; }
+.period-badge { padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
+.period-badge.complete { background: rgba(39, 174, 96, 0.2); color: #27ae60; }
+.period-badge.planned { background: rgba(52, 152, 219, 0.2); color: #3498db; }
+.period-badge.flagship {
+  background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(155, 89, 182, 0.3));
+  color: #fff;
+  animation: glow 2s infinite;
+}
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
+  50% { box-shadow: 0 0 15px rgba(52, 152, 219, 0.8); }
+}
+
+.period-features {
+  padding: 0 25px 25px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+.feature {
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 10px;
+  padding: 12px 15px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.feature:hover { background: rgba(255,255,255,0.06); transform: translateX(5px); }
+.feature-icon { font-size: 1.3rem; }
+.feature-text { flex: 1; }
+.feature-name { font-size: 0.9rem; font-weight: 500; }
+.feature-status { font-size: 0.7rem; color: #888; }
+.feature.flagship {
+  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(155, 89, 182, 0.15));
+  border-color: rgba(52, 152, 219, 0.3);
+}
+.feature.flagship .feature-name { color: #3498db; font-weight: 700; }
+
+.legend {
+  max-width: 1200px;
+  margin: 40px auto 0;
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  flex-wrap: wrap;
+  padding: 20px;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #888; }
+.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.9);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+.modal.show { display: flex; }
+.modal-box {
+  background: linear-gradient(135deg, #12122a, #1a1a3a);
+  border-radius: 20px;
+  max-width: 500px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  border: 1px solid rgba(255,255,255,0.1);
+  position: relative;
+}
+.modal-header { padding: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+.modal-header h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
+.modal-header p { color: #888; font-size: 0.9rem; margin-top: 8px; }
+.close-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  font-size: 1.5rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: #666;
+  transition: color 0.2s;
+}
+.close-btn:hover { color: #fff; }
+.modal-body { padding: 25px; }
+.modal-body h4 { color: #00d4ff; margin: 15px 0 10px; font-size: 0.95rem; }
+.modal-body ul { list-style: none; }
+.modal-body li {
+  padding: 10px 12px;
+  background: rgba(255,255,255,0.03);
+  margin-bottom: 6px;
+  border-radius: 8px;
+  border-left: 3px solid #00d4ff;
+  font-size: 0.9rem;
+}
+.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
+.tag {
+  padding: 5px 14px;
+  background: rgba(123,44,191,0.2);
+  border: 1px solid rgba(123,44,191,0.3);
+  border-radius: 15px;
+  font-size: 0.75rem;
+}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>🤖 General Bots Roadmap</h1>
+  <p class="subtitle">Enterprise LLM Orchestrator & AI Automation Platform</p>
+  <div class="badge">🚀 V6.0 Rust Edition • 2018-2026</div>
+  <div class="stats">
+    <div class="stat"><div class="stat-num">77</div><div class="stat-label">Total Features</div></div>
+    <div class="stat"><div class="stat-num">49</div><div class="stat-label">Complete ✅</div></div>
+    <div class="stat"><div class="stat-num">28</div><div class="stat-label">Planned 📋</div></div>
+    <div class="stat"><div class="stat-num">9</div><div class="stat-label">Apps in Suite</div></div>
+  </div>
+</div>
+
+<div class="suite">
+  <div class="suite-title">📱 General Bots Suite — 9 Apps</div>
+  <div class="apps">
+    <div class="app" onclick="showApp('chat')"><div class="app-icon">💬</div><div class="app-name">Chat</div><div class="app-desc">AI Assistant</div></div>
+    <div class="app" onclick="showApp('tasks')"><div class="app-icon">⚡</div><div class="app-name">Tasks</div><div class="app-desc">AUTOTASK</div></div>
+    <div class="app" onclick="showApp('drive')"><div class="app-icon">📁</div><div class="app-name">Drive</div><div class="app-desc">File Storage</div></div>
+    <div class="app" onclick="showApp('mail')"><div class="app-icon">✉️</div><div class="app-name">Mail</div><div class="app-desc">Email</div></div>
+    <div class="app" onclick="showApp('calendar')"><div class="app-icon">📅</div><div class="app-name">Calendar</div><div class="app-desc">Scheduling</div></div>
+    <div class="app" onclick="showApp('meet')"><div class="app-icon">🎥</div><div class="app-name">Meet</div><div class="app-desc">Video Calls</div></div>
+    <div class="app" onclick="showApp('paper')"><div class="app-icon">📝</div><div class="app-name">Paper</div><div class="app-desc">Documents</div></div>
+    <div class="app" onclick="showApp('research')"><div class="app-icon">🔍</div><div class="app-name">Research</div><div class="app-desc">AI Search</div></div>
+    <div class="app" onclick="showApp('analytics')"><div class="app-icon">📊</div><div class="app-name">Analytics</div><div class="app-desc">Reports</div></div>
+  </div>
+</div>
+
+<div class="timeline-arrow"><div class="arrow-line"></div><div class="arrow-head"></div></div>
+
+<div class="timeline-labels">
+  <div class="timeline-label" style="color:#64748b"><div class="label-dot" style="background:#64748b"></div><div class="label-year">2018-24</div><div class="label-desc">Pre-LLM</div><div class="label-count">12 ✅</div></div>
+  <div class="timeline-label" style="color:#e74c3c"><div class="label-dot" style="background:#e74c3c"></div><div class="label-year">2024</div><div class="label-desc">v6 Foundation</div><div class="label-count">8 ✅</div></div>
+  <div class="timeline-label" style="color:#27ae60"><div class="label-dot" style="background:#27ae60"></div><div class="label-year">2025 H1</div><div class="label-desc">Rust</div><div class="label-count">10 ✅</div></div>
+  <div class="timeline-label active" style="color:#f39c12"><div class="label-dot" style="background:#f39c12"></div><div class="label-year">2025 H2</div><div class="label-desc">AUTOTASK</div><div class="label-count">19 ✅</div></div>
+  <div class="timeline-label active" style="color:#3498db"><div class="label-dot" style="background:#3498db"></div><div class="label-year">2026 Q1</div><div class="label-desc">GO ⭐</div><div class="label-count">12 📋</div></div>
+  <div class="timeline-label" style="color:#9b59b6"><div class="label-dot" style="background:#9b59b6"></div><div class="label-year">2026 Q2</div><div class="label-desc">Collab</div><div class="label-count">10 📋</div></div>
+  <div class="timeline-label" style="color:#1abc9c"><div class="label-dot" style="background:#1abc9c"></div><div class="label-year">2026 Q3</div><div class="label-desc">Workflow</div><div class="label-count">2 📋</div></div>
+  <div class="timeline-label" style="color:#e91e63"><div class="label-dot" style="background:#e91e63"></div><div class="label-year">2026 Q4</div><div class="label-desc">Enterprise</div><div class="label-count">4 📋</div></div>
+</div>
+
+<div class="periods">
+  <!-- 2018-2024 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#64748b"></div>
+      <div class="period-info"><div class="period-title">📦 2018-2024 — Pre-LLM Foundation</div><div class="period-subtitle">Node.js platform • Package system • BASIC keywords • Bot Service</div></div>
+      <div class="period-badge complete">12 Complete</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">📦</span><div class="feature-text"><div class="feature-name">Package System</div><div class="feature-status">.gbai .gbkb .gbdialog .gbot</div></div></div>
+      <div class="feature"><span class="feature-icon">🗣️</span><div class="feature-text"><div class="feature-name">TALK / HEAR</div><div class="feature-status">Core dialog keywords</div></div></div>
+      <div class="feature"><span class="feature-icon">🧠</span><div class="feature-text"><div class="feature-name">NLP / BERT</div><div class="feature-status">Intent recognition</div></div></div>
+      <div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">GPT-3.5 Integration</div><div class="feature-status">First LLM support</div></div></div>
+      <div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">QR CODE</div><div class="feature-status">WhatsApp auth</div></div></div>
+      <div class="feature"><span class="feature-icon">⏰</span><div class="feature-text"><div class="feature-name">SET SCHEDULE</div><div class="feature-status">Cron automation</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2024 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#e74c3c"></div>
+      <div class="period-info"><div class="period-title">🦀 2024 — v6 Rust Foundation</div><div class="period-subtitle">Migration v5→v6 • New architecture • Minimal Flow MVP</div></div>
+      <div class="period-badge complete">8 Complete</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">🦀</span><div class="feature-text"><div class="feature-name">Rust Core</div><div class="feature-status">10x faster, 70% less memory</div></div></div>
+      <div class="feature"><span class="feature-icon">🔄</span><div class="feature-text"><div class="feature-name">Migration v5→v6</div><div class="feature-status">Node.js to Rust</div></div></div>
+      <div class="feature"><span class="feature-icon">🏗️</span><div class="feature-text"><div class="feature-name">New Architecture</div><div class="feature-status">Single crate design</div></div></div>
+      <div class="feature"><span class="feature-icon">🗄️</span><div class="feature-text"><div class="feature-name">PostgreSQL + Diesel</div><div class="feature-status">Database layer</div></div></div>
+      <div class="feature"><span class="feature-icon">🔐</span><div class="feature-text"><div class="feature-name">Vault Secrets</div><div class="feature-status">Secure credentials</div></div></div>
+      <div class="feature"><span class="feature-icon">🖥️</span><div class="feature-text"><div class="feature-name">Minimal Flow MVP</div><div class="feature-status">HTMX UI</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2025 H1 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#27ae60"></div>
+      <div class="period-info"><div class="period-title">🚀 2025 H1 — Rust Migration</div><div class="period-subtitle">BASIC Engine • Channels • Drive • Email • REST API</div></div>
+      <div class="period-badge complete">10 Complete</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">⚡</span><div class="feature-text"><div class="feature-name">BASIC Engine</div><div class="feature-status">70+ keywords</div></div></div>
+      <div class="feature"><span class="feature-icon">⚙️</span><div class="feature-text"><div class="feature-name">System Automation</div><div class="feature-status">Cron jobs</div></div></div>
+      <div class="feature"><span class="feature-icon">🌐</span><div class="feature-text"><div class="feature-name">Web Chat</div><div class="feature-status">HTMX widget</div></div></div>
+      <div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">LLM Integration</div><div class="feature-status">Multi-provider</div></div></div>
+      <div class="feature"><span class="feature-icon">📁</span><div class="feature-text"><div class="feature-name">Drive (S3)</div><div class="feature-status">File storage</div></div></div>
+      <div class="feature"><span class="feature-icon">✉️</span><div class="feature-text"><div class="feature-name">Email System</div><div class="feature-status">IMAP/SMTP</div></div></div>
+      <div class="feature"><span class="feature-icon">🔌</span><div class="feature-text"><div class="feature-name">REST API</div><div class="feature-status">Full endpoints</div></div></div>
+      <div class="feature"><span class="feature-icon">💬</span><div class="feature-text"><div class="feature-name">WhatsApp</div><div class="feature-status">Cloud API</div></div></div>
+      <div class="feature"><span class="feature-icon">✈️</span><div class="feature-text"><div class="feature-name">Telegram</div><div class="feature-status">Bot API</div></div></div>
+      <div class="feature"><span class="feature-icon">📄</span><div class="feature-text"><div class="feature-name">PDF Generation</div><div class="feature-status">Document export</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2025 H2 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#f39c12"></div>
+      <div class="period-info"><div class="period-title">⚡ 2025 H2 — Features & AUTOTASK</div><div class="period-subtitle">Autonomous Tasks • KB • Vector DB • Tools • Generators • Multimodal</div></div>
+      <div class="period-badge complete">19 Complete</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">⚡</span><div class="feature-text"><div class="feature-name">Tasks AI Autonomous</div><div class="feature-status">Intent → Plan → Execute</div></div></div>
+      <div class="feature"><span class="feature-icon">📚</span><div class="feature-text"><div class="feature-name">Knowledge Base</div><div class="feature-status">Vector embeddings</div></div></div>
+      <div class="feature"><span class="feature-icon">🗄️</span><div class="feature-text"><div class="feature-name">Vector DB (Qdrant)</div><div class="feature-status">Semantic search</div></div></div>
+      <div class="feature"><span class="feature-icon">🔧</span><div class="feature-text"><div class="feature-name">Tools / MCP</div><div class="feature-status">Function calling</div></div></div>
+      <div class="feature"><span class="feature-icon">🖥️</span><div class="feature-text"><div class="feature-name">UI Minimal</div><div class="feature-status">Suite interface</div></div></div>
+      <div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">APP Generator</div><div class="feature-status">App scaffolding</div></div></div>
+      <div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">BOT Generator</div><div class="feature-status">Bot scaffolding</div></div></div>
+      <div class="feature"><span class="feature-icon">🌐</span><div class="feature-text"><div class="feature-name">SITE Generator</div><div class="feature-status">Website creation</div></div></div>
+      <div class="feature"><span class="feature-icon">🎯</span><div class="feature-text"><div class="feature-name">LANDPAGE Generator</div><div class="feature-status">Marketing pages</div></div></div>
+      <div class="feature"><span class="feature-icon">📊</span><div class="feature-text"><div class="feature-name">Analytics Dashboard</div><div class="feature-status">Real-time metrics</div></div></div>
+      <div class="feature"><span class="feature-icon">🎙️</span><div class="feature-text"><div class="feature-name">Speech to Text</div><div class="feature-status">Voice input</div></div></div>
+      <div class="feature"><span class="feature-icon">🔊</span><div class="feature-text"><div class="feature-name">Voice Synthesis</div><div class="feature-status">TTS output</div></div></div>
+      <div class="feature"><span class="feature-icon">🎨</span><div class="feature-text"><div class="feature-name">Image Generation</div><div class="feature-status">AI art</div></div></div>
+      <div class="feature"><span class="feature-icon">👁️</span><div class="feature-text"><div class="feature-name">Vision Analysis</div><div class="feature-status">Image understanding</div></div></div>
+      <div class="feature"><span class="feature-icon">🎮</span><div class="feature-text"><div class="feature-name">NVIDIA GPU / LXC</div><div class="feature-status">Containers ready</div></div></div>
+      <div class="feature"><span class="feature-icon">📝</span><div class="feature-text"><div class="feature-name">Paper App</div><div class="feature-status">AI writing assistant</div></div></div>
+      <div class="feature"><span class="feature-icon">🔍</span><div class="feature-text"><div class="feature-name">Research App</div><div class="feature-status">Semantic search</div></div></div>
+      <div class="feature"><span class="feature-icon">📅</span><div class="feature-text"><div class="feature-name">Calendar (iCal)</div><div class="feature-status">Event management</div></div></div>
+      <div class="feature"><span class="feature-icon">🎥</span><div class="feature-text"><div class="feature-name">Meet (WebRTC)</div><div class="feature-status">Voice/video calls</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2026 Q1 - FLAGSHIP -->
+  <div class="period-section" style="border-color:rgba(52,152,219,0.4);box-shadow:0 0 30px rgba(52,152,219,0.1)">
+    <div class="period-header">
+      <div class="period-dot" style="background:#3498db;box-shadow:0 0 15px #3498db"></div>
+      <div class="period-info"><div class="period-title">🚀 2026 Q1 — Tasks AI GO ⭐ FLAGSHIP</div><div class="period-subtitle">Production autonomous • Full integrations • Transfer to Human</div></div>
+      <div class="period-badge flagship">⭐ 12 Planned</div>
+    </div>
+    <div class="period-features">
+      <div class="feature flagship"><span class="feature-icon">🚀</span><div class="feature-text"><div class="feature-name">Tasks AI GO ⭐</div><div class="feature-status">Production autonomous</div></div></div>
+      <div class="feature"><span class="feature-icon">📧</span><div class="feature-text"><div class="feature-name">Gmail Integration</div><div class="feature-status">Full email automation</div></div></div>
+      <div class="feature"><span class="feature-icon">📬</span><div class="feature-text"><div class="feature-name">Outlook/Hotmail</div><div class="feature-status">Microsoft email</div></div></div>
+      <div class="feature"><span class="feature-icon">📁</span><div class="feature-text"><div class="feature-name">Google Drive</div><div class="feature-status">File sync + Sheets/Docs</div></div></div>
+      <div class="feature"><span class="feature-icon">☁️</span><div class="feature-text"><div class="feature-name">OneDrive</div><div class="feature-status">Microsoft storage + Excel</div></div></div>
+      <div class="feature"><span class="feature-icon">📅</span><div class="feature-text"><div class="feature-name">Google Calendar</div><div class="feature-status">Event scheduling</div></div></div>
+      <div class="feature"><span class="feature-icon">📆</span><div class="feature-text"><div class="feature-name">Outlook Calendar</div><div class="feature-status">Microsoft scheduling</div></div></div>
+      <div class="feature"><span class="feature-icon">👤</span><div class="feature-text"><div class="feature-name">Transfer to Human</div><div class="feature-status">Bot → Agent handoff</div></div></div>
+      <div class="feature"><span class="feature-icon">🧠</span><div class="feature-text"><div class="feature-name">LLM-Assisted Attendant</div><div class="feature-status">AI copilot for agents</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2026 Q2 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#9b59b6"></div>
+      <div class="period-info"><div class="period-title">🤝 2026 Q2 — Collaboration</div><div class="period-subtitle">Multi-Agent • Meet • Teams • Slack • Docker</div></div>
+      <div class="period-badge planned">10 Planned</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">Multi-Agent System</div><div class="feature-status">Coordinated AI agents</div></div></div>
+      <div class="feature"><span class="feature-icon">🏪</span><div class="feature-text"><div class="feature-name">Bot Marketplace</div><div class="feature-status">Share & sell bots</div></div></div>
+      <div class="feature"><span class="feature-icon">🛡️</span><div class="feature-text"><div class="feature-name">Compliance Suite</div><div class="feature-status">GDPR, SOC2, HIPAA</div></div></div>
+      <div class="feature"><span class="feature-icon">👥</span><div class="feature-text"><div class="feature-name">MS Teams</div><div class="feature-status">Team collaboration</div></div></div>
+      <div class="feature"><span class="feature-icon">📊</span><div class="feature-text"><div class="feature-name">Analytics Reports</div><div class="feature-status">Advanced insights</div></div></div>
+      <div class="feature"><span class="feature-icon">🎥</span><div class="feature-text"><div class="feature-name">Google Meet</div><div class="feature-status">Video calls</div></div></div>
+      <div class="feature"><span class="feature-icon">📹</span><div class="feature-text"><div class="feature-name">Zoom</div><div class="feature-status">Video meetings</div></div></div>
+      <div class="feature"><span class="feature-icon">💼</span><div class="feature-text"><div class="feature-name">Slack</div><div class="feature-status">Team messaging</div></div></div>
+      <div class="feature"><span class="feature-icon">🎮</span><div class="feature-text"><div class="feature-name">Discord</div><div class="feature-status">Community channel</div></div></div>
+      <div class="feature"><span class="feature-icon">🐳</span><div class="feature-text"><div class="feature-name">Docker Deployment</div><div class="feature-status">Container packaging</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2026 Q3 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#1abc9c"></div>
+      <div class="period-info"><div class="period-title">🧠 2026 Q3 — Workflow & CRM</div><div class="period-subtitle">Workflow Designer • CRM Integration</div></div>
+      <div class="period-badge planned">2 Planned</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">⚙️</span><div class="feature-text"><div class="feature-name">Workflow Designer</div><div class="feature-status">Visual automation</div></div></div>
+      <div class="feature"><span class="feature-icon">👤</span><div class="feature-text"><div class="feature-name">CRM Integration</div><div class="feature-status">Customer management</div></div></div>
+    </div>
+  </div>
+
+  <!-- 2026 Q4 -->
+  <div class="period-section">
+    <div class="period-header">
+      <div class="period-dot" style="background:#e91e63"></div>
+      <div class="period-info"><div class="period-title">🏆 2026 Q4 — Enterprise</div><div class="period-subtitle">Mobile Apps • SSO • White Label</div></div>
+      <div class="period-badge planned">4 Planned</div>
+    </div>
+    <div class="period-features">
+      <div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">Mobile Apps</div><div class="feature-status">iOS & Android</div></div></div>
+      <div class="feature"><span class="feature-icon">🔐</span><div class="feature-text"><div class="feature-name">Enterprise SSO</div><div class="feature-status">SAML, OIDC</div></div></div>
+      <div class="feature"><span class="feature-icon">🏷️</span><div class="feature-text"><div class="feature-name">White Label</div><div class="feature-status">Full branding</div></div></div>
+      <div class="feature"><span class="feature-icon">📈</span><div class="feature-text"><div class="feature-name">Advanced Monitoring</div><div class="feature-status">Enterprise observability</div></div></div>
+    </div>
+  </div>
+</div>
+
+<div class="legend">
+  <div class="legend-item"><div class="legend-dot" style="background:#27ae60"></div>Complete</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#3498db"></div>Planned</div>
+  <div class="legend-item"><div class="legend-dot" style="background:linear-gradient(135deg,#3498db,#9b59b6)"></div>Flagship</div>
+</div>
+
+<div class="modal" id="modal" onclick="if(event.target.id==='modal')closeModal()">
+  <div class="modal-box">
+    <div class="modal-header">
+      <h2 id="modal-title"></h2>
+      <p id="modal-subtitle"></p>
+      <button class="close-btn" onclick="closeModal()">×</button>
+    </div>
+    <div class="modal-body" id="modal-body"></div>
+  </div>
+</div>
+
+<script>
+const data = {
+  chat: { t: '💬 Chat', s: 'AI-powered conversations', d: [{h:'Features',i:['Real-time messaging','Context awareness','Multi-turn dialogs','File sharing','History search']}], tg:['Chat','AI','Suite'] },
+  tasks: { t: '⚡ Tasks (AUTOTASK)', s: 'Autonomous AI task execution', d: [{h:'AUTOTASK Flow',i:['1. Human provides intent','2. AI creates execution plan','3. AI generates code/content','4. AI deploys result']},{h:'Generators',i:['BOT - conversational bots','APP - applications','SITE - websites','LANDPAGE - marketing']}], tg:['AUTOTASK','Autonomous','AI'] },
+  drive: { t: '📁 Drive', s: 'File storage with Sheets/Docs', d: [{h:'Features',i:['Google Drive sync','OneDrive sync','Spreadsheet automation','Document editing','File versioning']}], tg:['Drive','Storage','Suite'] },
+  mail: { t: '✉️ Mail', s: 'Email management', d: [{h:'Features',i:['Gmail integration','Outlook/Hotmail','Smart compose','Templates','AI categorization']}], tg:['Mail','Email','Suite'] },
+  calendar: { t: '📅 Calendar', s: 'Scheduling & events', d: [{h:'Features',i:['Google Calendar sync','Outlook Calendar','Meeting scheduling','Reminders','Recurring events']}], tg:['Calendar','Suite'] },
+  meet: { t: '🎥 Meet', s: 'Video conferencing', d: [{h:'Features',i:['Google Meet','Zoom integration','Screen sharing','Recording','Meeting notes']}], tg:['Meet','Video','Suite'] },
+  paper: { t: '📝 Paper', s: 'AI-powered documents', d: [{h:'Features',i:['Rich text editor','AI writing assistance','Templates','Collaboration','Export options']}], tg:['Paper','Documents','Suite'] },
+  research: { t: '🔍 Research', s: 'AI search & analysis', d: [{h:'Features',i:['Multi-source search','AI summaries','Citations','Knowledge extraction']}], tg:['Research','AI','Suite'] },
+  analytics: { t: '📊 Analytics', s: 'Reports & insights', d: [{h:'Features',i:['Real-time dashboards','Usage metrics','Performance KPIs','Custom reports']}], tg:['Analytics','Suite'] }
+};
+
+function showApp(id) { if(data[id]) showModal(data[id]); }
+
+function showModal(item) {
+  document.getElementById('modal-title').innerHTML = item.t;
+  document.getElementById('modal-subtitle').textContent = item.s;
+  let html = '';
+  item.d.forEach(section => {
+    html += '<h4>' + section.h + '</h4><ul>';
+    section.i.forEach(i => html += '<li>' + i + '</li>');
+    html += '</ul>';
+  });
+  html += '<div class="tags">';
+  item.tg.forEach(t => html += '<span class="tag">' + t + '</span>');
+  html += '</div>';
+  document.getElementById('modal-body').innerHTML = html;
+  document.getElementById('modal').classList.add('show');
+}
+
+function closeModal() {
+  document.getElementById('modal').classList.remove('show');
+}
+
+document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });
+</script>
+</body>
+</html>
diff --git a/src/assets/roadmap.svg b/src/assets/roadmap.svg
new file mode 100644
index 00000000..cb394474
--- /dev/null
+++ b/src/assets/roadmap.svg
@@ -0,0 +1,137 @@
+<svg viewBox="0 0 1200 850" xmlns="http://www.w3.org/2000/svg">
+<style>
+.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; }
+.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; }
+.secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+.white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+@media (prefers-color-scheme: dark) { .title-text { fill: #F1F5F9; } .main-text { fill: #E2E8F0; } .secondary-text { fill: #94A3B8; } }
+</style>
+<defs>
+<linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#6366F1"/><stop offset="100%" style="stop-color:#8B5CF6"/></linearGradient>
+<linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#06B6D4"/><stop offset="100%" style="stop-color:#0EA5E9"/></linearGradient>
+<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#10B981"/><stop offset="100%" style="stop-color:#34D399"/></linearGradient>
+<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#F59E0B"/><stop offset="100%" style="stop-color:#FBBF24"/></linearGradient>
+<linearGradient id="grayGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#64748B"/><stop offset="100%" style="stop-color:#94A3B8"/></linearGradient>
+<linearGradient id="timelineGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#64748B"/><stop offset="18%" style="stop-color:#10B981"/><stop offset="35%" style="stop-color:#F59E0B"/><stop offset="52%" style="stop-color:#06B6D4"/><stop offset="68%" style="stop-color:#6366F1"/><stop offset="84%" style="stop-color:#10B981"/><stop offset="100%" style="stop-color:#8B5CF6"/></linearGradient>
+<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#6366F1" flood-opacity="0.12"/></filter>
+<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.05"/></pattern>
+</defs>
+<rect width="1200" height="850" fill="#FAFBFC"/><rect width="1200" height="850" fill="url(#dots)"/>
+<text x="600" y="35" font-size="20" class="title-text" text-anchor="middle">General Bots Roadmap 2024-2026</text>
+<text x="600" y="55" font-size="11" class="secondary-text" text-anchor="middle">Enterprise LLM Orchestrator - V6.0 Rust Edition</text>
+<path d="M45 80 L45 820" stroke="url(#timelineGrad)" stroke-width="3" fill="none"/>
+
+<!-- 2024 -->
+<text x="45" y="95" font-size="13" class="title-text" text-anchor="middle">2024</text>
+<circle cx="45" cy="110" r="7" fill="url(#grayGrad)"/>
+<rect x="65" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="77" y="114" font-size="9" class="main-text">Conversation System</text>
+<rect x="205" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="217" y="114" font-size="9" class="main-text">Architecture Design</text>
+<rect x="345" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="357" y="114" font-size="9" class="main-text">Node.js Prototype</text>
+
+<!-- 2025 H1 -->
+<text x="45" y="165" font-size="12" class="title-text" text-anchor="middle">2025 H1</text>
+<text x="45" y="178" font-size="7" class="secondary-text" text-anchor="middle">RUST</text>
+<circle cx="45" cy="192" r="7" fill="url(#greenGrad)"/>
+<rect x="65" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="194" font-size="8" class="main-text">Rust Migration</text>
+<rect x="185" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="194" font-size="8" class="main-text">Actix-Web</text>
+<rect x="305" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="194" font-size="8" class="main-text">Tokio Runtime</text>
+<rect x="425" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="194" font-size="8" class="main-text">SQLx+PostgreSQL</text>
+<rect x="545" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="556" y="194" font-size="8" class="main-text">MinIO Storage</text>
+<rect x="665" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="676" y="194" font-size="8" class="main-text">Valkey Cache</text>
+<rect x="65" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="231" font-size="8" class="main-text">Knowledge Base</text>
+<rect x="185" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="231" font-size="8" class="main-text">BASIC Engine</text>
+<rect x="305" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="231" font-size="8" class="main-text">LLM Integration</text>
+<rect x="425" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="231" font-size="8" class="main-text">Vector DB</text>
+<rect x="545" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="556" y="231" font-size="8" class="main-text">Tools System</text>
+<rect x="665" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="676" y="231" font-size="8" class="main-text">HTMX UI</text>
+<rect x="65" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="268" font-size="8" class="main-text">Embeddings</text>
+<rect x="185" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="268" font-size="8" class="main-text">Semantic Cache</text>
+<rect x="305" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="268" font-size="8" class="main-text">Documentation</text>
+<rect x="425" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="268" font-size="8" class="main-text">.gbai Packages</text>
+
+<!-- 2025 H2 -->
+<text x="45" y="315" font-size="12" class="title-text" text-anchor="middle">2025 H2</text>
+<text x="45" y="328" font-size="7" class="secondary-text" text-anchor="middle">AUTOTASK</text>
+<circle cx="45" cy="345" r="9" fill="url(#orangeGrad)"><animate attributeName="r" values="7;11;7" dur="2s" repeatCount="indefinite"/></circle>
+<rect x="65" y="325" width="220" height="42" rx="6" fill="url(#orangeGrad)" filter="url(#shadow)"/><text x="82" y="345" font-size="12" class="white-text" font-weight="700">Tasks (AI Autonomous) GO</text><text x="82" y="360" font-size="8" class="white-text" opacity="0.9">Human intent - AI plans - AI deploys</text>
+<rect x="295" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="306" y="343" font-size="8" class="main-text">CREATE SITE</text><text x="306" y="355" font-size="7" class="secondary-text">HTMX generation</text>
+<rect x="420" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="431" y="343" font-size="8" class="main-text">App Generator</text><text x="431" y="355" font-size="7" class="secondary-text">BOT, APP, SITE</text>
+<rect x="545" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="556" y="343" font-size="8" class="main-text">A2A Protocol</text><text x="556" y="355" font-size="7" class="secondary-text">Agent-to-Agent</text>
+<rect x="670" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="681" y="343" font-size="8" class="main-text">Multi-Agent</text><text x="681" y="355" font-size="7" class="secondary-text">Orchestration</text>
+<rect x="65" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="76" y="391" font-size="8" class="main-text">Memory</text>
+<rect x="175" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="186" y="391" font-size="8" class="main-text">Sandbox</text>
+<rect x="285" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="296" y="391" font-size="8" class="main-text">SSE Stream</text>
+<rect x="395" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="406" y="391" font-size="8" class="main-text">Reflection</text>
+<rect x="505" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="516" y="391" font-size="8" class="main-text">Model Route</text>
+<rect x="615" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="626" y="391" font-size="8" class="main-text">gRPC</text>
+
+<!-- 2026 Q1 -->
+<text x="45" y="435" font-size="12" class="title-text" text-anchor="middle">Q1 2026</text>
+<text x="45" y="448" font-size="7" class="secondary-text" text-anchor="middle">CHANNELS</text>
+<circle cx="45" cy="462" r="7" fill="url(#cyanGrad)"/>
+<rect x="65" y="445" width="145" height="35" rx="5" fill="url(#cyanGrad)" filter="url(#shadow)"/><text x="78" y="463" font-size="10" class="white-text" font-weight="700">Tasks (AI Auto) GO</text><text x="78" y="475" font-size="7" class="white-text" opacity="0.9">Production release</text>
+<rect x="220" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="231" y="463" font-size="8" class="main-text">WhatsApp</text>
+<rect x="330" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="341" y="463" font-size="8" class="main-text">Security</text>
+<rect x="440" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="451" y="463" font-size="8" class="main-text">Desktop App</text>
+<rect x="550" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="561" y="463" font-size="8" class="main-text">TLS/Auth</text>
+<rect x="660" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="671" y="463" font-size="8" class="main-text">Audit</text>
+<rect x="65" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="75" y="500" font-size="7" class="main-text">Chat</text>
+<rect x="160" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="170" y="500" font-size="7" class="main-text">Drive</text>
+<rect x="255" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="265" y="500" font-size="7" class="main-text">Tasks</text>
+<rect x="350" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="360" y="500" font-size="7" class="main-text">Mail</text>
+<rect x="445" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="455" y="500" font-size="7" class="main-text">Calendar</text>
+<rect x="540" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="550" y="500" font-size="7" class="main-text">Meet</text>
+<rect x="635" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="645" y="500" font-size="7" class="main-text">Paper</text>
+
+<!-- 2026 Q2 -->
+<text x="45" y="545" font-size="12" class="title-text" text-anchor="middle">Q2 2026</text>
+<text x="45" y="558" font-size="7" class="secondary-text" text-anchor="middle">INTEGRATIONS</text>
+<circle cx="45" cy="572" r="7" fill="url(#primaryGrad)"/>
+<rect x="65" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="76" y="573" font-size="8" class="main-text">Gmail</text>
+<rect x="175" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="186" y="573" font-size="8" class="main-text">Outlook</text>
+<rect x="285" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="296" y="573" font-size="8" class="main-text">Google Calendar</text>
+<rect x="395" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="406" y="573" font-size="8" class="main-text">O365 Calendar</text>
+<rect x="505" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="516" y="573" font-size="8" class="main-text">Instagram</text>
+<rect x="615" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="626" y="573" font-size="8" class="main-text">MS Teams</text>
+<rect x="65" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="75" y="610" font-size="7" class="main-text">Analytics</text>
+<rect x="160" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="170" y="610" font-size="7" class="main-text">Designer</text>
+<rect x="255" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="265" y="610" font-size="7" class="main-text">CRM</text>
+<rect x="350" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="360" y="610" font-size="7" class="main-text">Billing</text>
+<rect x="445" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="455" y="610" font-size="7" class="main-text">Board</text>
+<rect x="540" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="550" y="610" font-size="7" class="main-text">Forms</text>
+
+<!-- 2026 Q3 -->
+<text x="45" y="655" font-size="12" class="title-text" text-anchor="middle">Q3 2026</text>
+<text x="45" y="668" font-size="7" class="secondary-text" text-anchor="middle">STORAGE</text>
+<circle cx="45" cy="682" r="7" fill="url(#greenGrad)"/>
+<rect x="65" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="683" font-size="8" class="main-text">Google Drive</text>
+<rect x="175" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="186" y="683" font-size="8" class="main-text">OneDrive</text>
+<rect x="285" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="296" y="683" font-size="8" class="main-text">Dropbox</text>
+<rect x="395" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="406" y="683" font-size="8" class="main-text">Telegram</text>
+<rect x="505" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="516" y="683" font-size="8" class="main-text">Slack</text>
+<rect x="615" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="626" y="683" font-size="8" class="main-text">Discord</text>
+<rect x="65" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="75" y="720" font-size="7" class="main-text">Sheets</text>
+<rect x="160" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="170" y="720" font-size="7" class="main-text">Excel</text>
+<rect x="255" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="265" y="720" font-size="7" class="main-text">PDF Gen</text>
+<rect x="350" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="360" y="720" font-size="7" class="main-text">Image AI</text>
+<rect x="445" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="455" y="720" font-size="7" class="main-text">Video AI</text>
+<rect x="540" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="550" y="720" font-size="7" class="main-text">OCR</text>
+<rect x="635" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="645" y="720" font-size="7" class="main-text">TTS</text>
+
+<!-- 2026 Q4 -->
+<text x="45" y="765" font-size="12" class="title-text" text-anchor="middle">Q4 2026</text>
+<text x="45" y="778" font-size="7" class="secondary-text" text-anchor="middle">MOBILE</text>
+<circle cx="45" cy="795" r="9" fill="url(#primaryGrad)"><animate attributeName="r" values="7;11;7" dur="2s" repeatCount="indefinite"/></circle>
+<rect x="65" y="775" width="155" height="38" rx="5" fill="url(#primaryGrad)" filter="url(#shadow)"/><text x="80" y="793" font-size="10" class="white-text" font-weight="700">Mobile App</text><text x="80" y="806" font-size="7" class="white-text" opacity="0.9">iOS/Android Tauri</text>
+<rect x="230" y="775" width="155" height="38" rx="5" fill="url(#primaryGrad)" filter="url(#shadow)"/><text x="245" y="793" font-size="10" class="white-text" font-weight="700">IoT Gateway</text><text x="245" y="806" font-size="7" class="white-text" opacity="0.9">Device control</text>
+<rect x="395" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="406" y="796" font-size="8" class="main-text">SMS</text>
+<rect x="505" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="516" y="796" font-size="8" class="main-text">Email Channel</text>
+<rect x="615" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="626" y="796" font-size="8" class="main-text">WeChat</text>
+<rect x="65" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="75" y="834" font-size="7" class="main-text">STT</text>
+<rect x="160" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="170" y="834" font-size="7" class="main-text">Translate</text>
+<rect x="255" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="265" y="834" font-size="7" class="main-text">Sentiment</text>
+<rect x="350" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="360" y="834" font-size="7" class="main-text">Intent</text>
+<rect x="445" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="455" y="834" font-size="7" class="main-text">NER</text>
+<rect x="540" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="550" y="834" font-size="7" class="main-text">Summary</text>
+<rect x="635" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="645" y="834" font-size="7" class="main-text">Q and A</text>
+</svg>