diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html
index 010e8a3fb..5538216aa 100644
--- a/website/comprehensive-demo.html
+++ b/website/comprehensive-demo.html
@@ -3,34 +3,52 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Comprehensive SAMO-DL Demo - All Core Features</title>
-    <meta name="description" content="Interactive demo showcasing all SAMO-DL core features: emotion detection, voice transcription, text summarization, batch processing, and more">
+    <title>SAMO Emotion Detection API - SAMO Deep Learning</title>
+    <meta name="description" content="Interactive demo showcasing SAMO Whisper (voice transcription), SAMO T5 (text summarization), and SAMO DeBERTa v3 Large (emotion detection)">
+
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <!-- Content Security Policy is now handled by HTTP headers -->
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Font Awesome -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <!-- Chart.js for visualizations -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <!-- Google Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->
-    <link href="css/styles.css" rel="stylesheet">
-
+    <link rel="stylesheet" href="css/comprehensive-demo.css">
+    <!-- Highcharts removed - using pure HTML/CSS charts -->
+    <!-- Performance Optimizer -->
+    <!-- <script src="js/performance-optimizer.js"></script> -->
 </head>
-<body>
+<body class="comprehensive-demo">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
         <div class="container">
-            <a class="navbar-brand fw-bold" href="#">
-                <i class="fas fa-brain text-primary me-2"></i>
-                SAMO-DL Demo
+            <a class="navbar-brand fw-bold" href="index.html">
+                <span class="material-icons text-primary me-2">psychology</span>
+                SAMO-DL
             </a>
-            <div class="navbar-nav ms-auto">
-                <a class="nav-link" href="index.html">Home</a>
-                <a class="nav-link active" href="comprehensive-demo.html">Demo</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="comprehensive-demo.html">All Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="integration.html">Integration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="btn btn-primary ms-2" href="#demo">Try Now</a>
+                    </li>
+                </ul>
             </div>
         </div>
     </nav>
@@ -38,34 +56,56 @@
     <!-- Hero Section -->
     <section class="hero-section">
         <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-8 mx-auto text-center hero-content">
+            <div class="row align-items-center hero-content">
+                <div class="col-lg-6">
                     <h1 class="display-4 fw-bold mb-4">
-                        <i class="fas fa-rocket me-3"></i>
-                        Comprehensive SAMO-DL Demo
+                        SAMO Emotion Detection API
                     </h1>
                     <p class="lead mb-4">
-                        Experience all the core features of our enterprise-grade AI system:
-                        emotion detection, voice transcription, text summarization, batch processing,
-                        and real-time monitoring.
+                        Experience the full power of our AI platform with <strong>SAMO Whisper</strong> for voice transcription,
+                        <strong>SAMO T5</strong> for text summarization, and <strong>SAMO DeBERTa v3 Large</strong> for emotion detection.
                     </p>
-                    <div class="d-flex justify-content-center gap-3 flex-wrap">
-                        <span class="security-badge">
-                            <i class="fas fa-shield-alt me-1"></i>
-                            Production Ready
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-bolt me-1"></i>
-                            >90% F1 Score
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-tachometer-alt me-1"></i>
-                            2.3x Performance
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-cloud me-1"></i>
-                            Cloud Deployed
-                        </span>
+                    <div class="d-flex gap-3">
+                        <a href="#demo" class="btn btn-light btn-lg">
+                            <span class="material-icons me-2">play_arrow</span>
+                            Start Demo
+                        </a>
+                        <a href="integration.html" class="btn btn-outline-light btn-lg">
+                            <span class="material-icons me-2">code</span>
+                            View Code
+                        </a>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="row g-3">
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-primary mb-2" style="font-size: 2rem;">mic</span>
+                                <h6 class="fw-bold">SAMO Whisper</h6>
+                                <small class="text-muted">Voice Transcription</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-success mb-2" style="font-size: 2rem;">description</span>
+                                <h6 class="fw-bold">SAMO T5</h6>
+                                <small class="text-muted">Text Summarization</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-warning mb-2" style="font-size: 2rem;">favorite</span>
+                                <h6 class="fw-bold">SAMO DeBERTa v3 Large</h6>
+                                <small class="text-muted">28 Emotions</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-info mb-2" style="font-size: 2rem;">rocket_launch</span>
+                                <h6 class="fw-bold">Complete Pipeline</h6>
+                                <small class="text-muted">End-to-End AI</small>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -73,1185 +113,479 @@ <h1 class="display-4 fw-bold mb-4">
     </section>
 
     <!-- Demo Container -->
-    <div class="container">
-        <div class="demo-container">
-            <!-- Feature Tabs -->
-            <div class="text-center mb-4">
-                <button class="demo-tab active" onclick="showFeature('emotion', event)">
-                    <i class="fas fa-heart me-2"></i>
-                    Emotion Detection
-                </button>
-                <button class="demo-tab" onclick="showFeature('voice', event)">
-                    <i class="fas fa-microphone me-2"></i>
-                    Voice Transcription
-                </button>
-                <button class="demo-tab" onclick="showFeature('batch', event)">
-                    <i class="fas fa-layer-group me-2"></i>
-                    Batch Processing
-                </button>
-                <button class="demo-tab" onclick="showFeature('summarization', event)">
-                    <i class="fas fa-compress-alt me-2"></i>
-                    Text Summarization
-                </button>
-                <button class="demo-tab" onclick="showFeature('monitoring', event)">
-                    <i class="fas fa-chart-line me-2"></i>
-                    Real-time Monitoring
-                </button>
-                <button class="demo-tab" onclick="showFeature('security', event)">
-                    <i class="fas fa-shield-alt me-2"></i>
-                    Security Features
-                </button>
-            </div>
-
-            <!-- Emotion Detection Demo -->
-            <div id="emotion-demo" class="feature-demo">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-heart text-danger me-2"></i>
-                    Emotion Detection
-                </h3>
-                <p class="text-muted mb-4">
-                    Our flagship feature with >90% F1 score. Analyze text and detect emotions with high accuracy.
-                </p>
-
+    <section id="demo" class="py-4">
+        <div class="container-fluid px-4">
+            <div class="demo-container">
                 <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="emotion-text" class="form-label fw-bold">Enter your text:</label>
-                            <textarea class="form-control" id="emotion-text" rows="4"
-                                placeholder="Try: 'I am feeling really happy and excited about this project!'"></textarea>
-                        </div>
-                        <button class="btn btn-primary btn-lg" onclick="analyzeEmotion()">
-                            <i class="fas fa-magic me-2"></i>
-                            Analyze Emotions
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <div id="emotion-results"></div>
+                    <div class="col-12 text-center mb-3">
+                        <p class="text-muted mb-0">
+                            Enter text to see our AI pipeline in action
+                        </p>
                     </div>
                 </div>
 
-                <div class="loading-spinner" id="emotion-loading">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Analyzing emotions...</p>
-                </div>
-            </div>
-
-            <!-- Voice Transcription Demo -->
-            <div id="voice-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-microphone text-info me-2"></i>
-                    Voice-to-Text Transcription
-                </h3>
-                <p class="text-muted mb-4">
-                    Convert speech to text with emotion analysis using OpenAI Whisper integration.
-                </p>
-
-                <div class="voice-recorder">
-                    <button class="record-button" id="record-btn" onclick="toggleRecording()">
-                        <i class="fas fa-microphone" id="record-icon"></i>
-                    </button>
-                    <p class="mt-3" id="recording-status">Click to start recording</p>
-                </div>
-
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Transcription Result:</h5>
-                        <div id="transcription-result" class="result-card">
-                            <p class="text-muted">Record audio to see transcription here...</p>
+                <!-- Dynamic Layout: Title with Flow | Centered Input | Hidden Results -->
+                <div class="row" id="titleWithFlow">
+                    <div class="col-12 d-flex align-items-center justify-content-center mb-4">
+                        <div class="d-flex align-items-center gap-4">
+                            <h2 class="h3 fw-bold mb-0">SAMO Emotion Pipeline</h2>
+                            <!-- Horizontal Progress Flow -->
+                            <div class="progress-pipeline-horizontal">
+                                <div class="progress-step-horizontal" id="step1">
+                                    <div class="step-icon-small pending" id="step1-icon">
+                                        <span class="material-icons">upload</span>
+                                    </div>
+                                    <span class="step-label">Input</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step2">
+                                    <div class="step-icon-small pending" id="step2-icon">
+                                        <span class="material-icons">mic</span>
+                                    </div>
+                                    <span class="step-label">Transcription</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step3">
+                                    <div class="step-icon-small pending" id="step3-icon">
+                                        <span class="material-icons">description</span>
+                                    </div>
+                                    <span class="step-label">Summarization</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step4">
+                                    <div class="step-icon-small pending" id="step4-icon">
+                                        <span class="material-icons">favorite</span>
+                                    </div>
+                                    <span class="step-label">Emotion Analysis</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Emotion Analysis:</h5>
-                        <div id="voice-emotion-results"></div>
-                    </div>
                 </div>
 
-                <div class="loading-spinner" id="voice-loading">
-                    <div class="spinner-border text-info" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing audio...</p>
-                </div>
-            </div>
-
-            <!-- Batch Processing Demo -->
-            <div id="batch-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-layer-group text-warning me-2"></i>
-                    Batch Processing
-                </h3>
-                <p class="text-muted mb-4">
-                    Process multiple texts efficiently with optimized batch processing capabilities.
-                </p>
-
-                <div class="batch-input">
-                    <label class="form-label fw-bold">Enter multiple texts (one per line):</label>
-                    <textarea class="form-control" id="batch-texts" rows="6"
-                        placeholder="I am feeling really happy today!
-This is so frustrating, nothing works properly.
-I'm really excited about this new project.
-I feel a bit sad about the changes."></textarea>
-                    <button class="btn btn-warning btn-lg mt-3" onclick="processBatch()">
-                        <i class="fas fa-cogs me-2"></i>
-                        Process Batch
-                    </button>
-                </div>
-
-                <div id="batch-results"></div>
+                <!-- Initial Input Layout -->
+                <div class="row" id="inputLayout">
+                    <!-- Centered Input Section -->
+                    <div class="col-lg-8 offset-lg-2">
+                        <!-- API Notice -->
+                        <div class="alert alert-info mb-3" role="alert">
+                            <span class="material-icons me-2">info</span>
+                            <strong>Live API Demo:</strong> This demo connects to our live SAMO APIs. Full voice processing now available!
+                        </div>
 
-                <div class="loading-spinner" id="batch-loading">
-                    <div class="spinner-border text-warning" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing batch...</p>
-                </div>
-            </div>
+                        <!-- Input Section -->
+                        <!-- Audio Upload -->
+                        <div class="mb-4">
+                            <label for="audioFile" class="form-label fw-bold fs-5">
+                                <i class="fas fa-microphone me-2"></i>
+                                Upload Audio File
+                            </label>
+                            <input type="file" class="form-control form-control-lg" id="audioFile" accept="audio/*" aria-describedby="audioFile-help">
+                            <div id="audioFile-help" class="form-text">Upload an audio file for transcription and emotion analysis. Supported formats: WebM, WAV, MP4.</div>
+                        </div>
 
-            <!-- Text Summarization Demo -->
-            <div id="summarization-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-compress-alt text-success me-2"></i>
-                    Text Summarization
-                </h3>
-                <p class="text-muted mb-4">
-                    Generate intelligent summaries while preserving emotional context.
-                </p>
+                        <!-- Audio Recording -->
+                        <div class="mb-4">
+                            <label class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2">fiber_manual_record</span>
+                                Record Audio
+                            </label>
+                            <div class="d-flex gap-3 justify-content-center">
+                                <button class="btn btn-outline-secondary btn-lg" id="recordBtn" disabled aria-label="Start audio recording">
+                                    <i class="fas fa-microphone me-2" aria-hidden="true"></i>
+                                    Start Recording
+                                </button>
+                                <button class="btn btn-outline-secondary btn-lg" id="stopBtn" disabled aria-label="Stop audio recording">
+                                    <span class="material-icons me-2" aria-hidden="true">stop</span>
+                                    Stop Recording
+                                </button>
+                            </div>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="summary-text" class="form-label fw-bold">Enter long text to summarize:</label>
-                        <textarea class="form-control" id="summary-text" rows="8"
-                            placeholder="Today has been an incredible day! I woke up feeling refreshed and ready to tackle the world. The weather was perfect - sunny with a gentle breeze that made me feel alive and grateful. I had a productive morning meeting where my team praised my contributions, which made me feel proud and accomplished. Later, I had lunch with an old friend who shared some exciting news about their new job opportunity. I felt genuinely happy for them and excited about our future conversations. The afternoon was filled with creative work that challenged me in the best way possible. I love days like this where everything seems to align perfectly."></textarea>
-                        <button class="btn btn-success btn-lg mt-3" onclick="generateSummary()">
-                            <i class="fas fa-magic me-2"></i>
-                            Generate Summary
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Summary Result:</h5>
-                        <div id="summary-result" class="result-card">
-                            <p class="text-muted">Enter text to see summary here...</p>
+                            <!-- Recording Timer -->
+                            <div class="recording-time text-center mt-2">
+                                <span class="badge bg-secondary" id="recordingTime" style="display: none;">0:00</span>
+                            </div>
+                            <!-- Audio Visualizer -->
+                            <div id="audioVisualizer" class="audio-visualizer mt-3" style="display: none;">
+                                <div class="text-center">
+                                    <div class="recording-indicator">
+                                        <span class="material-icons text-danger">fiber_manual_record</span>
+                                        <span class="ms-2">Recording...</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-text text-muted">Click "Start Recording" to begin voice transcription.</div>
                         </div>
-                    </div>
-                </div>
-
-                <div class="loading-spinner" id="summary-loading">
-                    <div class="spinner-border text-success" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Generating summary...</p>
-                </div>
-            </div>
 
-            <!-- Real-time Monitoring Demo -->
-            <div id="monitoring-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-chart-line text-primary me-2"></i>
-                    Real-time Monitoring
-                </h3>
-                <p class="text-muted mb-4">
-                    Live system metrics and performance monitoring dashboard.
-                </p>
+                        <!-- Text Input -->
+                        <div class="mb-4">
+                            <label for="textInput" class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2">keyboard</span>
+                                Or Enter Text Directly
+                            </label>
+                            <textarea
+                                class="form-control form-control-lg"
+                                id="textInput"
+                                rows="4"
+                                placeholder="Enter your text here for summarization and emotion analysis..."
+                            >I am so excited and happy today! This is such wonderful news and I feel optimistic about the future. I can't wait to see what amazing opportunities await us. However, I'm also a bit nervous about the challenges ahead, but I'm confident we can overcome them together.</textarea>
+                        </div>
 
-                <div class="metrics-grid">
-                    <div class="metric-card">
-                        <div class="metric-value" id="uptime-metric">99.9%</div>
-                        <div class="metric-label">Uptime</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="response-time-metric">43ms</div>
-                        <div class="metric-label">Avg Response Time</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="requests-metric">1,247</div>
-                        <div class="metric-label">Requests Today</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="accuracy-metric">90.7%</div>
-                        <div class="metric-label">Model Accuracy</div>
+                        <div class="d-flex gap-3 justify-content-center flex-wrap">
+                            <button class="btn btn-primary btn-lg px-4" id="processBtn" aria-label="Process text with AI models for summarization and emotion analysis">
+                                <span class="material-icons me-2" aria-hidden="true">auto_fix_high</span>
+                                Process
+                            </button>
+                            <button class="btn btn-success btn-lg px-4" id="generateBtn" aria-label="Generate sample text using AI">
+                                <span class="material-icons me-2" aria-hidden="true">auto_awesome</span>
+                                Generate
+                            </button>
+                            <button class="btn btn-outline-secondary btn-lg px-4" id="clearBtn" aria-label="Clear all inputs and results">
+                                <span class="material-icons me-2" aria-hidden="true">delete</span>
+                                Clear All
+                            </button>
+                            <button class="btn btn-outline-warning btn-lg px-4" id="apiKeyBtn" title="Manage OpenAI API Key">
+                                <span class="material-icons me-2" aria-hidden="true">key</span>
+                                API Key
+                            </button>
+                        </div>
                     </div>
                 </div>
 
-                <div class="row mt-4">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Performance Chart:</h5>
-                        <canvas id="performanceChart" width="400" height="200"></canvas>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Recent Activity:</h5>
-                        <div id="activity-log" class="result-card" style="max-height: 300px; overflow-y: auto;">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Emotion analysis request</span>
-                                <span class="performance-indicator performance-fast">43ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Batch processing (5 texts)</span>
-                                <span class="performance-indicator performance-fast">156ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Voice transcription</span>
-                                <span class="performance-indicator performance-medium">892ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Text summarization</span>
-                                <span class="performance-indicator performance-medium">1.2s</span>
+                <!-- Results Layout (Initially Hidden) -->
+                <div class="d-none" id="resultsLayout">
+                    <!-- Enhanced Loading Section -->
+                    <div id="loadingSection" class="loading-spinner text-center mb-4" role="status" aria-live="polite" aria-busy="true">
+                        <div class="row justify-content-center">
+                            <div class="col-md-8">
+                                <div class="feature-card p-4">
+                                    <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                    <h5 class="text-primary mb-3">🚀 AI Processing Pipeline</h5>
+
+                                    <!-- Progress Steps -->
+                                    <div class="row g-3 mb-4">
+                                        <div class="col-md-6">
+                                            <div id="emotionStep" class="process-step">
+                                                <span class="material-icons text-warning me-2">psychology</span>
+                                                <span class="step-text">Emotion Analysis</span>
+                                                <div class="step-status" id="emotionStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div id="summaryStep" class="process-step">
+                                                <span class="material-icons text-success me-2">description</span>
+                                                <span class="step-text">Text Summarization</span>
+                                                <div class="step-status" id="summaryStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <p class="text-muted mb-2" id="loadingMessage">Initializing AI models...</p>
+                                    <small class="text-muted" id="timeEstimate">Estimated time: 2-4 seconds</small>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <button class="btn btn-primary mt-3" onclick="refreshMetrics()">
-                    <i class="fas fa-sync-alt me-2"></i>
-                    Refresh Metrics
-                </button>
-            </div>
-
-            <!-- Security Features Demo -->
-            <div id="security-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-shield-alt text-success me-2"></i>
-                    Security Features
-                </h3>
-                <p class="text-muted mb-4">
-                    Enterprise-grade security with rate limiting, input sanitization, and threat detection.
-                </p>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Security Status:</h5>
-                        <div class="result-card">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Rate Limiting</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Input Sanitization</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>XSS Protection</span>
-                                <span class="security-badge">Active</span>
+                    <!-- Side-by-Side Results Section -->
+                    <div class="row" id="resultSection">
+                        <!-- Left Column: Emotion Analysis -->
+                        <div class="col-lg-6">
+                            <!-- Emotion Analysis Results -->
+                            <div class="mb-4 result-section-hidden" id="emotionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-warning me-2">favorite</span>
+                                        Emotion Analysis (SAMO DeBERTa v3 Large)
+                                    </h5>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <div class="emotion-chart-container">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">bar_chart</span>
+                                                    Top 5 Emotions
+                                                </h6>
+                                                <div id="emotionBadges" class="mb-3"></div>
+                                                <div id="emotionChart"></div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <!-- Detailed Model Output -->
+                                            <div class="mt-0">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">psychology</span>
+                                                    Detailed Model Analysis
+                                                </h6>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Primary Emotion</div>
+                                                    <div class="model-detail-value" id="primaryEmotion">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Emotional Intensity
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Strength of the detected emotion (0-100%). Higher values indicate stronger emotional expression.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="emotionalIntensity">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Sentiment Score
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Overall sentiment polarity from the emotion analysis (0-100). Scores above 50 typically indicate positive sentiment.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="sentimentScore">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Confidence Range
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Model's certainty range for the prediction. Narrower ranges indicate higher confidence in the results.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="confidenceRange">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Model Processing Details</div>
+                                                    <div class="model-detail-text" id="modelDetails">-</div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Additional Emotion Details -->
+                                            <div class="mt-3">
+                                                <div id="emotionDetails"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>SQL Injection Protection</span>
-                                <span class="security-badge">Active</span>
+                        </div>
+
+                        <!-- Right Column: Summarization -->
+                        <div class="col-lg-6">
+                            <!-- Summarization Results -->
+                            <div class="mb-4 result-section-hidden" id="summarizationResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-success me-2">description</span>
+                                        Summarization Results
+                                    </h5>
+                                    <div id="summaryText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <small class="text-muted">Original Length: <span id="originalLength">-</span> characters</small>
+                                        <small class="text-muted">Summary Length: <span id="summaryLength">-</span> characters</small>
+                                    </div>
+                                    <div id="summaryChart"></div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Threat Detection</span>
-                                <span class="security-badge">Active</span>
+
+                            <!-- Transcription Results (Optional - may be hidden) -->
+                            <div class="mb-4 result-section-hidden" id="transcriptionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-primary me-2">mic</span>
+                                        Transcription Results
+                                    </h5>
+                                    <div id="transcriptionText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <small class="text-muted">Confidence: <span id="transcriptionConfidence">-</span></small>
+                                        <small class="text-muted">Duration: <span id="transcriptionDuration">-</span></small>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Rate Limit Test:</h5>
-                        <div class="result-card">
-                            <p>Test rate limiting by making rapid requests:</p>
-                            <button class="btn btn-danger" onclick="testRateLimit()">
-                                <i class="fas fa-bolt me-2"></i>
-                                Test Rate Limit
-                            </button>
-                            <div id="rate-limit-result" class="mt-3"></div>
-                        </div>
-                    </div>
-                </div>
 
-                <div class="row mt-4">
-                    <div class="col-12">
-                        <h5 class="fw-bold">Security Headers:</h5>
-                        <div class="code-block">
-                            <pre><code class="language-json">{
-  "Content-Security-Policy": "default-src 'self'",
-  "X-Frame-Options": "DENY",
-  "X-Content-Type-Options": "nosniff",
-  "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
-  "X-XSS-Protection": "1; mode=block",
-  "Referrer-Policy": "strict-origin-when-cross-origin"
-}</code></pre>
+                    <!-- Bottom: Processing Information & Controls (Horizontal Layout) -->
+                    <div class="row mt-4">
+                        <div class="col-12">
+                            <div class="feature-card">
+                                <div class="card-body">
+                                    <h6 class="fw-bold mb-3 text-center">Processing Information</h6>
+                                    <div class="row g-3">
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-primary me-2" style="font-size: 1.2rem;">schedule</span>
+                                                    <small class="fw-bold">Total Time</small>
+                                                </div>
+                                                <small class="text-muted" id="totalTimeCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-success me-2" style="font-size: 1.2rem;">check_circle</span>
+                                                    <small class="fw-bold">Status</small>
+                                                </div>
+                                                <small class="text-muted" id="processingStatusCompact">Ready</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-warning me-2" style="font-size: 1.2rem;">psychology</span>
+                                                    <small class="fw-bold">Models Used</small>
+                                                </div>
+                                                <small class="text-muted" id="modelsUsedCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-info me-2" style="font-size: 1.2rem;">trending_up</span>
+                                                    <small class="fw-bold">Confidence</small>
+                                                </div>
+                                                <small class="text-muted" id="avgConfidenceCompact">-</small>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Control Buttons Row -->
+                                    <div class="row mt-3">
+                                        <div class="col-md-6 text-center">
+                                            <!-- Reset Button -->
+                                            <button class="btn btn-outline-primary btn-sm me-2" id="resetBtn" onclick="clearAllWithStateManagement()">
+                                                <span class="material-icons me-1" style="font-size: 1rem;">refresh</span>
+                                                New Analysis
+                                            </button>
+                                            <!-- Debug Toggle Button -->
+                                            <button class="btn btn-outline-secondary btn-sm" id="debugToggleBtn" onclick="LayoutManager.toggleDebugSection()">
+                                                <span class="material-icons me-1" style="font-size: 1rem;">bug_report</span>
+                                                Show Debug
+                                            </button>
+                                        </div>
+                                        <div class="col-md-6 text-center">
+                                            <!-- Debug Test (Hidden by Default, Toggleable) -->
+                                            <div class="d-none" id="debugTestSection">
+                                                <div class="d-flex justify-content-center gap-2">
+                                                    <button class="btn btn-success btn-sm" onclick="testWithRealAPI()">Test with Real API</button>
+                                                    <button class="btn btn-secondary btn-sm" onclick="clearAll()">Clear All</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Progress Console (Added for user-friendly feedback) -->
+                                    <div class="row mt-3" id="progressConsoleRow" style="display: none;">
+                                        <div class="col-12">
+                                            <div class="bg-dark bg-opacity-75 rounded p-3">
+                                                <h6 class="fw-bold mb-3 text-light">
+                                                    <span class="material-icons text-info me-2" style="font-size: 1.2rem;">terminal</span>
+                                                    Processing Console
+                                                </h6>
+                                                <div id="progressConsole" class="bg-black rounded p-2" style="height: 150px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.85rem;">
+                                                    <div class="text-success">SAMO-DL Processing Console Ready...</div>
+                                                </div>
+                                                <div class="mt-2 text-end">
+                                                    <button class="btn btn-outline-light btn-sm" onclick="clearProgressConsole()">
+                                                        <span class="material-icons me-1" style="font-size: 0.9rem;">clear</span>
+                                                        Clear Console
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </section>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 mx-auto text-center">
-                    <h5 class="fw-bold mb-3">SAMO Deep Learning</h5>
-                    <p class="text-muted mb-4">
-                        Enterprise-grade AI system with >90% F1 score and 2.3x performance optimization.
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">
+                        <span class="material-icons text-primary me-2">psychology</span>
+                        SAMO-DL
+                    </h5>
+                    <p class="text-muted">
+                        Complete AI platform with voice transcription, text summarization, and emotion detection.
+                    </p>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Product</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="index.html" class="text-muted text-decoration-none">Home</a></li>
+                        <li><a href="comprehensive-demo.html" class="text-muted text-decoration-none">All Features</a></li>
+                        <li><a href="integration.html" class="text-muted text-decoration-none">Integration</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Resources</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">API Docs</a></li>
+                        <li><a href="https://huggingface.co/duelker/samo-goemotions-deberta-v3-large" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">DeBERTa Model</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/README.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">Support</a></li>
+                    </ul>
+                </div>
+            </div>
+            <hr class="my-4">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">
+                        © 2025 SAMO-DL
+                    </p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <p class="text-muted mb-0">
+                        Built with ❤ during TechLabs Berlin Summer '25
                     </p>
-                    <div class="d-flex justify-content-center gap-3">
-                        <a href="index.html" class="text-muted text-decoration-none">Home</a>
-                        <a href="comprehensive-demo.html" class="text-muted text-decoration-none">Demo</a>
-                    </div>
                 </div>
             </div>
         </div>
     </footer>
 
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-
-    <script>
-        // API Configuration (Unified API)
-        const API_BASE_URL = 'https://samo-unified-api-frrnetyhfa-uc.a.run.app';
-        let AUTH_TOKEN = null;
-        let CHAT_WS = null;
-
-        // Chart Management - Better pattern than global window storage
-        const ChartManager = {
-            charts: new Map(),
-
-            destroy(chartId) {
-                const chart = this.charts.get(chartId);
-                if (chart && typeof chart.destroy === 'function') {
-                    try {
-                        chart.destroy();
-                        console.log(`Chart '${chartId}' destroyed successfully`);
-                    } catch (e) {
-                        console.warn(
-                            `Error destroying chart '${chartId}'. Chart instance:`, chart,
-                            'Operation: destroy',
-                            'Error:', e
-                        );
-                    }
-                }
-                this.charts.delete(chartId);
-            },
-
-            set(chartId, chartInstance) {
-                // Destroy existing chart if it exists
-                this.destroy(chartId);
-                // Store new chart
-                this.charts.set(chartId, chartInstance);
-                console.log(`Chart '${chartId}' registered in ChartManager`);
-            },
-
-            get(chartId) {
-                return this.charts.get(chartId);
-            },
-
-            has(chartId) {
-                return this.charts.has(chartId);
-            },
-
-            clear() {
-                for (const [chartId] of this.charts) {
-                    this.destroy(chartId);
-                }
-                console.log('All charts cleared from ChartManager');
-            }
-        };
-
-        // Demo state
-        let isRecording = false;
-        let mediaRecorder = null;
-        let audioChunks = [];
-
-        // Feature switching
-        function showFeature(feature, event) {
-            // Hide all demos
-            document.querySelectorAll('.feature-demo').forEach(demo => {
-                demo.style.display = 'none';
-            });
-
-            // Remove active class from all tabs
-            document.querySelectorAll('.demo-tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-
-            // Show selected demo
-            document.getElementById(feature + '-demo').style.display = 'block';
-
-            // Add active class to clicked tab
-            event.target.classList.add('active');
-        }
-
-        // Emotion Detection (Unified API -> /analyze/journal)
-        function _emotionsDictToArray(emotions) {
-            return Object.entries(emotions || {}).map(([emotion, confidence]) => ({ emotion, confidence }));
-        }
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
 
-        async function analyzeEmotion() {
-            const text = document.getElementById('emotion-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to analyze');
-                return;
-            }
+    <!-- Configuration Script -->
+    <script src="js/config.js"></script>
 
-            showLoading('emotion');
+    <!-- Chart.js for emotion visualization - MUST load before simple-demo-functions.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"
+            onload="console.log('✅ Chart.js loaded successfully')"
+            onerror="console.error('❌ Failed to load Chart.js')"></script>
 
-            try {
-                const response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, generate_summary: false })
-                });
+    <!-- Simple Working Functions -->
+    <!-- <script src="js/simple-demo-functions.js"></script> -->
 
-                const unified = await response.json();
-                const adapted = _emotionsDictToArray(
-                    unified?.emotion_analysis?.emotions || {}
-                );
-                displayEmotionResults(adapted);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('emotion-results').innerHTML =
-                    '<div class="alert alert-danger">Error analyzing emotions. Please try again.</div>';
-            } finally {
-                hideLoading('emotion');
-            }
-        }
+    <!-- Dynamic Layout State Management -->
+    <!-- Layout Manager Script -->
+    <script src="js/layout-manager.js"></script>
 
-        function displayEmotionResults(result, container = null) {
-            const targetContainer = container || document.getElementById('emotion-results');
-            targetContainer.innerHTML = ''; // Clear previous results
+    <!-- Main comprehensive demo script - MUST load before demo-initialization -->
+    <script src="js/comprehensive-demo.js"></script>
 
-            if (Array.isArray(result) && result.length > 0) {
-                const title = document.createElement('h5');
-                title.className = 'fw-bold mb-3';
-                title.textContent = 'Detected Emotions:';
-                targetContainer.appendChild(title);
+    <!-- Demo Initialization Script - loads AFTER functions are defined -->
+    <script src="js/demo-initialization.js"></script>
 
-                result.forEach(emotion => {
-                    const confidence = (emotion.confidence * 100).toFixed(1);
-                    const color = getEmotionColor(emotion.emotion);
+    <!-- Voice Recording Module -->
+    <script src="js/voice-recorder.js"></script>
 
-                    const resultCard = document.createElement('div');
-                    resultCard.className = 'result-card';
-
-                    const headerDiv = document.createElement('div');
-                    headerDiv.className = 'd-flex justify-content-between align-items-center mb-2';
-
-                    const emotionSpan = document.createElement('span');
-                    emotionSpan.className = 'fw-bold text-capitalize';
-                    emotionSpan.textContent = emotion.emotion; // textContent automatically escapes HTML
-                    headerDiv.appendChild(emotionSpan);
-
-                    const badgeSpan = document.createElement('span');
-                    badgeSpan.className = `badge bg-${color}`;
-                    badgeSpan.textContent = `${confidence}%`;
-                    headerDiv.appendChild(badgeSpan);
-
-                    resultCard.appendChild(headerDiv);
-
-                    const progressDiv = document.createElement('div');
-                    progressDiv.className = 'progress';
-                    progressDiv.style.height = '8px';
-
-                    const progressBar = document.createElement('div');
-                    progressBar.className = `progress-bar bg-${color}`;
-                    progressBar.style.width = `${confidence}%`;
-                    progressDiv.appendChild(progressBar);
-
-                    resultCard.appendChild(progressDiv);
-                    targetContainer.appendChild(resultCard);
-                });
-            } else {
-                const alertDiv = document.createElement('div');
-                alertDiv.className = 'alert alert-warning';
-                alertDiv.textContent = 'No emotions detected.';
-                targetContainer.appendChild(alertDiv);
-            }
-        }
-
-        function getEmotionColor(emotion) {
-            const colors = {
-                'joy': 'success',
-                'happiness': 'success',
-                'excitement': 'warning',
-                'sadness': 'info',
-                'anger': 'danger',
-                'fear': 'warning',
-                'surprise': 'primary',
-                'disgust': 'secondary'
-            };
-            return colors[emotion] || 'primary';
-        }
-
-        // Minimal Chat Demo (Auth + HTTP + WS)
-        document.addEventListener('DOMContentLoaded', () => {
-            const saved = localStorage.getItem('samo_auth_token');
-            if (saved) {
-                AUTH_TOKEN = saved;
-                setAuthStatus(true);
-            }
-        });
-
-        function setAuthStatus(ok) {
-            const badge = document.getElementById('chat-auth-status');
-            if (!badge) return;
-            badge.textContent = ok ? 'AUTH OK' : 'AUTH REQ';
-            badge.className = `badge ${ok ? 'bg-success' : 'bg-warning text-dark'}`;
-        }
-
-        async function chatLogin() {
-            const u = document.getElementById('chat-username').value.trim();
-            const p = document.getElementById('chat-password').value;
-            const out = document.getElementById('chat-output');
-            out.textContent = 'Logging in...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/auth/login`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ username: u, password: p })
-                });
-                const data = await resp.json();
-                if (!resp.ok || !data.access_token) throw new Error(data.detail || 'Login failed');
-                AUTH_TOKEN = data.access_token;
-                localStorage.setItem('samo_auth_token', AUTH_TOKEN);
-                setAuthStatus(true);
-                out.textContent = 'Login successful.';
-            } catch (e) {
-                out.textContent = 'Login error: ' + e.message;
-                setAuthStatus(false);
-            }
-        }
-
-        function appendChatMessage(sender, text, summary = null) {
-            const list = document.getElementById('chat-messages');
-            const item = document.createElement('div');
-            item.className = 'p-2 mb-2 rounded ' + (sender === 'you' ? 'bg-primary bg-opacity-10' : 'bg-dark bg-opacity-10');
-            const who = document.createElement('div');
-            who.className = 'small text-muted mb-1';
-            who.textContent = sender;
-            const body = document.createElement('div');
-            body.textContent = text || '';
-            item.appendChild(who);
-            item.appendChild(body);
-            if (summary) {
-                const sum = document.createElement('div');
-                sum.className = 'mt-1 text-secondary';
-                sum.textContent = 'summary: ' + summary;
-                item.appendChild(sum);
-            }
-            list.appendChild(item);
-            list.scrollTop = list.scrollHeight;
-        }
-
-        async function sendChatHttp() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            appendChatMessage('you', text);
-            out.textContent = '...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/chat`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${AUTH_TOKEN}` },
-                    body: JSON.stringify({ text, summarize: true, model: 't5-small' })
-                });
-                const data = await resp.json();
-                out.textContent = '';
-                appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-            } catch (e) {
-                out.textContent = 'Error sending message';
-            }
-        }
-
-        function buildWsUrl(path) {
-            if (!API_BASE_URL.startsWith('https://')) return null;
-            return API_BASE_URL.replace('https://', 'wss://') + path;
-        }
-
-        async function connectChatWs() {
-            const out = document.getElementById('chat-output');
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            const url = buildWsUrl(`/ws/chat?token=${encodeURIComponent(AUTH_TOKEN)}`);
-            if (!url) { out.textContent = 'WS requires https base URL.'; return; }
-            out.textContent = 'Connecting WS...';
-            try {
-                CHAT_WS = new WebSocket(url);
-                CHAT_WS.onopen = () => { out.textContent = 'WS connected.'; };
-                CHAT_WS.onmessage = (evt) => {
-                    try {
-                        const data = JSON.parse(evt.data);
-                        appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-                    } catch (e) { console.error("Error processing WebSocket message:", e); }
-                };
-                CHAT_WS.onerror = () => { out.textContent = 'WS error'; };
-                CHAT_WS.onclose = () => { out.textContent = 'WS disconnected.'; };
-            } catch (e) {
-                out.textContent = 'WS connect failed';
-            }
-        }
-
-        function disconnectChatWs() {
-            if (CHAT_WS) {
-                try { CHAT_WS.close(); } catch {}
-                CHAT_WS = null;
-            }
-        }
-
-        function sendChatWs() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!CHAT_WS || CHAT_WS.readyState !== 1) { out.textContent = 'WS not connected'; return; }
-            appendChatMessage('you', text);
-            CHAT_WS.send(JSON.stringify({ text, summarize: true, model: 't5-small' }));
-        }
-
-        // Voice Recording
-        async function toggleRecording() {
-            if (!isRecording) {
-                startRecording();
-            } else {
-                stopRecording();
-            }
-        }
-
-        async function startRecording() {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                mediaRecorder = new MediaRecorder(stream);
-                audioChunks = [];
-
-                mediaRecorder.ondataavailable = (event) => {
-                    audioChunks.push(event.data);
-                };
-
-                mediaRecorder.onstop = async () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    await processAudio(audioBlob);
-                };
-
-                mediaRecorder.start();
-                isRecording = true;
-
-                document.getElementById('record-btn').classList.add('recording');
-                document.getElementById('record-icon').className = 'fas fa-stop';
-                document.getElementById('recording-status').textContent = 'Recording... Click to stop';
-            } catch (error) {
-                console.error('Error accessing microphone:', error);
-                alert('Error accessing microphone. Please check permissions.');
-            }
-        }
-
-        function stopRecording() {
-            if (mediaRecorder && isRecording) {
-                mediaRecorder.stop();
-                mediaRecorder.stream.getTracks().forEach(track => track.stop());
-
-                isRecording = false;
-                document.getElementById('record-btn').classList.remove('recording');
-                document.getElementById('record-icon').className = 'fas fa-microphone';
-                document.getElementById('recording-status').textContent = 'Processing audio...';
-            }
-        }
-
-        async function processAudio(audioBlob) {
-            showLoading('voice');
-
-            try {
-                const formData = new FormData();
-                formData.append('audio_file', audioBlob, 'recording.wav');
-
-                // Use AbortController for proper timeout handling
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/transcribe/voice`, {
-                        method: 'POST',
-                        body: formData,
-                        signal: controller.signal
-                    });
-                } catch (error) {
-                    if (error.name === 'AbortError') {
-                        throw new Error('Voice transcription request timed out after 30 seconds');
-                    }
-                    throw error;
-                } finally {
-                    clearTimeout(timeoutId);
-                }
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to transcribe audio';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
-                    }
-                    throw new Error(errorMessage);
-                }
-
-                const data = await response.json();
-                const transcription = data.transcription || data.text || 'No transcription available.';
-
-                document.getElementById('transcription-result').innerHTML = '';
-                const transcriptionTitle = document.createElement('p');
-                transcriptionTitle.className = 'fw-bold';
-                transcriptionTitle.textContent = 'Transcription:';
-
-                const transcriptionText = document.createElement('p');
-                transcriptionText.textContent = transcription;
-
-                document.getElementById('transcription-result').appendChild(transcriptionTitle);
-                document.getElementById('transcription-result').appendChild(transcriptionText);
-
-                // If transcription is successful, analyze emotions from the transcribed text
-                if (transcription && transcription !== 'No transcription available.') {
-                    try {
-                        const emotionController = new AbortController();
-                        const emotionTimeout = setTimeout(() => emotionController.abort(), 15000); // 15 seconds
-
-                        let emotionResponse;
-                        try {
-                            emotionResponse = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ text: transcription, generate_summary: false }),
-                                signal: emotionController.signal
-                            });
-                        } catch (error) {
-                            if (error.name === 'AbortError') {
-                                console.error('Emotion analysis request timed out.');
-                                // Show a message to the user about the timeout
-                                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis timed out</p>';
-                                return;
-                            } else {
-                                throw error;
-                            }
-                        } finally {
-                            clearTimeout(emotionTimeout);
-                        }
-
-                        if (emotionResponse.ok) {
-                            const emotionData = await emotionResponse.json();
-                            const emotions = _emotionsDictToArray(
-                                emotionData?.emotion_analysis?.emotions || {}
-                            );
-
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6>';
-                            displayEmotionResults(emotions, voiceEmotionContainer);
-                        } else {
-                            // Fallback with simulated emotions if emotion analysis fails
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
-                        }
-                    } catch (emotionError) {
-                        console.warn('Emotion analysis failed for transcribed text:', emotionError);
-                        const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                        voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
-                    }
-                }
-
-            } catch (error) {
-                console.error('Error processing audio:', error);
-                const resultContainer = document.getElementById('transcription-result');
-                resultContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                resultContainer.appendChild(errorDiv);
-
-                // Clear emotion results on error
-                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Processing failed</p>';
-            } finally {
-                hideLoading('voice');
-                document.getElementById('recording-status').textContent = 'Click to start recording';
-            }
-        }
-
-        // Batch Processing
-        async function processBatch() {
-            const texts = document.getElementById('batch-texts').value
-                .split('\n')
-                .map(text => text.trim())
-                .filter(text => text.length > 0);
-
-            if (texts.length === 0) {
-                alert('Please enter some texts to process');
-                return;
-            }
-
-            showLoading('batch');
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/predict_batch`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
-                });
-
-                const results = await response.json();
-                displayBatchResults(texts, results);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('batch-results').innerHTML =
-                    '<div class="alert alert-danger">Error processing batch. Please try again.</div>';
-            } finally {
-                hideLoading('batch');
-            }
-        }
-
-        function displayBatchResults(texts, results) {
-            const container = document.getElementById('batch-results');
-            container.innerHTML = ''; // Clear previous results
-
-            const title = document.createElement('h5');
-            title.className = 'fw-bold mb-3';
-            title.textContent = 'Batch Processing Results:';
-            container.appendChild(title);
-
-            texts.forEach((text, index) => {
-                const result = results[index] || [];
-
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'batch-item';
-
-                const textTitle = document.createElement('p');
-                textTitle.className = 'fw-bold mb-2';
-                textTitle.textContent = `Text ${index + 1}:`;
-                itemDiv.appendChild(textTitle);
-
-                const textContent = document.createElement('p');
-                textContent.className = 'text-muted mb-2';
-                textContent.textContent = `"${text}"`; // textContent automatically escapes HTML
-                itemDiv.appendChild(textContent);
-
-                const badgesDiv = document.createElement('div');
-                badgesDiv.className = 'd-flex flex-wrap gap-2';
-
-                // Create badges safely
-                result.forEach(emotion => {
-                    const badge = document.createElement('span');
-                    badge.className = `badge bg-${getEmotionColor(emotion.emotion)}`;
-                    badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                    badgesDiv.appendChild(badge);
-                });
-
-                itemDiv.appendChild(badgesDiv);
-                container.appendChild(itemDiv);
-            });
-        }
-
-        // Text Summarization
-        async function generateSummary() {
-            const text = document.getElementById('summary-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to summarize');
-                return;
-            }
-
-            showLoading('summary');
-
-            try {
-                // Call the actual summarization API with proper timeout
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            text: text,
-                            generate_summary: true,
-                            summary_model: 't5-small'
-                        }),
-                        signal: controller.signal
-                    });
-                    clearTimeout(timeoutId);
-                } catch (error) {
-                    clearTimeout(timeoutId);
-                    if (error.name === 'AbortError') {
-                        throw new Error('Summary request timed out. Please try with shorter text or try again later.');
-                    }
-                    throw error;
-                }
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to generate summary';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
-                    }
-                    throw new Error(errorMessage);
-                }
-
-                const data = await response.json();
-                const summary = data.summary || data.text_summary || 'No summary available.';
-
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = ''; // Clear previous results
-
-                const summaryTitle = document.createElement('p');
-                summaryTitle.className = 'fw-bold';
-                summaryTitle.textContent = 'Summary:';
-                summaryContainer.appendChild(summaryTitle);
-
-                const summaryText = document.createElement('p');
-                summaryText.textContent = summary; // textContent automatically escapes HTML
-                summaryContainer.appendChild(summaryText);
-
-                // Add emotional context if available
-                if (data.emotion_analysis && data.emotion_analysis.emotions) {
-                    const emotionDiv = document.createElement('div');
-                    emotionDiv.className = 'mt-3 p-3 rounded emotional-context-card';
-
-                    const emotionTitle = document.createElement('h6');
-                    emotionTitle.className = 'fw-bold mb-2';
-                    emotionTitle.textContent = 'Emotional Tone:';
-                    emotionDiv.appendChild(emotionTitle);
-
-                    const emotions = _emotionsDictToArray(data.emotion_analysis.emotions);
-                    emotions.slice(0, 3).forEach(emotion => {
-                        const badge = document.createElement('span');
-                        badge.className = 'badge me-2 mb-1';
-                        badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                        emotionDiv.appendChild(badge);
-                    });
-
-                    summaryContainer.appendChild(emotionDiv);
-                }
-
-                const infoDiv = document.createElement('div');
-                infoDiv.className = 'mt-3';
-
-                const infoText = document.createElement('small');
-                infoText.className = 'text-muted';
-
-                const icon = document.createElement('i');
-                icon.className = 'fas fa-info-circle me-1';
-                infoText.appendChild(icon);
-
-                const originalWords = text.split(' ').length;
-                const summaryWords = summary.split(' ').length;
-                const compressionRatio = Math.max(0, ((originalWords - summaryWords) / originalWords * 100)).toFixed(1);
-
-                const infoContent = document.createTextNode(
-                    `Original: ${originalWords} words | Summary: ${summaryWords} words | Compression: ${compressionRatio}%`
-                );
-                infoText.appendChild(infoContent);
-                infoDiv.appendChild(infoText);
-                summaryContainer.appendChild(infoDiv);
-
-            } catch (error) {
-                console.error('Error:', error);
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                summaryContainer.appendChild(errorDiv);
-            } finally {
-                hideLoading('summary');
-            }
-        }
-
-        // Monitoring
-        function refreshMetrics() {
-            // Simulate refreshing metrics
-            document.getElementById('uptime-metric').textContent = '99.9%';
-            document.getElementById('response-time-metric').textContent = '43ms';
-            document.getElementById('requests-metric').textContent = Math.floor(Math.random() * 2000 + 1000);
-            document.getElementById('accuracy-metric').textContent = '90.7%';
-
-            // Update performance chart
-            updatePerformanceChart();
-        }
-
-        function updatePerformanceChart() {
-            const chartCanvas = document.getElementById('performanceChart');
-            if (!chartCanvas) {
-                console.warn('Performance chart canvas not found');
-                const chartContainer = document.querySelector('.col-md-6') || document.body;
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-warning';
-                errorDiv.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Performance chart unavailable.';
-                chartContainer.appendChild(errorDiv);
-                return;
-            }
-
-            const ctx = chartCanvas.getContext('2d');
-
-            // Safely destroy existing chart instance using ChartManager
-            ChartManager.destroy('performanceChart');
-
-            // Generate realistic performance data
-            const now = new Date();
-            const timeLabels = [];
-            const responseData = [];
-
-            for (let i = 4; i >= 0; i--) {
-                const timestamp = new Date(now - i * 15000); // 15 seconds intervals
-                timeLabels.push(i === 0 ? 'Now' : `${i * 15}s ago`);
-                responseData.push(35 + Math.random() * 20); // Random response times between 35-55ms
-            }
-
-            try {
-                const performanceChart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: timeLabels,
-                        datasets: [{
-                            label: 'Response Time (ms)',
-                            data: responseData,
-                            borderColor: 'rgba(139, 92, 246, 1)',
-                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
-                            borderWidth: 3,
-                            tension: 0.4,
-                            fill: true,
-                            pointBackgroundColor: 'rgba(139, 92, 246, 1)',
-                            pointBorderColor: 'rgba(255, 255, 255, 1)',
-                            pointBorderWidth: 2,
-                            pointRadius: 6
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        interaction: {
-                            intersect: false,
-                            mode: 'index'
-                        },
-                        plugins: {
-                            legend: {
-                                display: false
-                            },
-                            tooltip: {
-                                backgroundColor: 'rgba(15, 15, 35, 0.9)',
-                                titleColor: '#e2e8f0',
-                                bodyColor: '#e2e8f0',
-                                borderColor: 'rgba(139, 92, 246, 0.5)',
-                                borderWidth: 1
-                            }
-                        },
-                        scales: {
-                            x: {
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1'
-                                }
-                            },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1',
-                                    callback: function(value) {
-                                        return value + 'ms';
-                                    }
-                                }
-                            }
-                        }
-                    }
-                });
-
-                // Register chart with ChartManager for proper lifecycle management
-                ChartManager.set('performanceChart', performanceChart);
-            } catch (error) {
-                console.error('Error creating performance chart:', error);
-                // Fallback: show text-based metrics if chart fails
-                const chartContainer = chartCanvas.parentElement;
-                if (chartContainer) {
-                    chartContainer.innerHTML = '<div class="alert alert-info">Chart visualization temporarily unavailable</div>';
-                }
-            }
-        }
-
-        // Security Testing
-        async function testRateLimit() {
-            const container = document.getElementById('rate-limit-result');
-            container.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Testing...';
-
-            try {
-                const promises = Array(10).fill().map(() =>
-                    fetch(`${API_BASE_URL}/predict`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ text: 'test' })
-                    })
-                );
-
-                const responses = await Promise.all(promises);
-                const successCount = responses.filter(r => r.ok).length;
-                const rateLimitedCount = responses.filter(r => r.status === 429).length;
-
-                container.innerHTML = `
-                    <div class="alert alert-info">
-                        <strong>Rate Limit Test Results:</strong><br>
-                        Successful requests: ${successCount}<br>
-                        Rate limited requests: ${rateLimitedCount}<br>
-                        Rate limiting is working correctly!
-                    </div>
-                `;
-            } catch (error) {
-                container.innerHTML = '<div class="alert alert-warning">Rate limit test completed (simulated).</div>';
-            }
-        }
-
-        // Utility functions
-        function showLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'block';
-        }
-
-        function hideLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'none';
-        }
-
-        // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
-            updatePerformanceChart();
-            refreshMetrics();
-        });
-    </script>
-
-    <!-- Simple Chat UI -->
-    <section class="py-5 bg-light">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <div class="card border-0 shadow-sm">
-                        <div class="card-body">
-                            <h5 class="fw-bold mb-3">Chat Demo</h5>
-                            <div class="d-flex align-items-center gap-2 mb-3">
-                                <span id="chat-auth-status" class="badge bg-warning text-dark">AUTH REQ</span>
-                                <input id="chat-username" class="form-control form-control-sm" placeholder="email" style="max-width:220px" />
-                                <input id="chat-password" class="form-control form-control-sm" placeholder="password" type="password" style="max-width:180px" />
-                                <button class="btn btn-sm btn-outline-primary" onclick="chatLogin()">Login</button>
-                                <button class="btn btn-sm btn-outline-success" onclick="connectChatWs()">Connect WS</button>
-                                <button class="btn btn-sm btn-outline-secondary" onclick="disconnectChatWs()">Disconnect</button>
-                            </div>
-                            <div id="chat-messages" class="mb-3" style="height:220px; overflow:auto; background:#0b1324; color:#e2e8f0; border-radius:8px; padding:10px;"></div>
-                            <div class="input-group mb-3">
-                                <input id="chat-input" class="form-control" placeholder="Type a message..." />
-                                <button class="btn btn-primary" onclick="sendChatHttp()">Send HTTP</button>
-                                <button class="btn btn-outline-primary" onclick="sendChatWs()">Send WS</button>
-                            </div>
-                            <pre id="chat-output" class="code-block" style="min-height:80px"></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+    <!-- Legacy Scripts (commented out for now) -->
+    <!-- <script src="js/api-client.js"></script> -->
+    <!-- <script src="js/ui-controller.js"></script> -->
+    <!-- <script src="js/chart-utils.js"></script> -->
+    <!-- <script src="js/comprehensive-demo-new.js"></script> -->
+    <!-- <script src="test-functionality.js"></script> -->
 </body>
 </html>
diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css
new file mode 100644
index 000000000..3d642f408
--- /dev/null
+++ b/website/css/comprehensive-demo.css
@@ -0,0 +1,1252 @@
+/* Comprehensive Demo Styles - Extracted from HTML for better maintainability */
+
+/* CSS Variables */
+:root {
+    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+    --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+    --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+    --primary-color: #8b5cf6;
+    --secondary-color: #a855f7;
+    --accent-color: #c084fc;
+    --dark-color: #0f0f23;
+    --darker-color: #0a0a1a;
+    --light-accent: #e9d5ff;
+    --glass-bg: rgba(139, 92, 246, 0.1);
+    --glass-border: rgba(139, 92, 246, 0.2);
+    --error-color: #ef4444;
+    --success-color: #10b981;
+
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Material Icons styling */
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+}
+
+/* Info icon styling */
+.info-icon {
+    font-size: 16px !important;
+    color: #6b7280;
+    margin-left: 6px;
+    cursor: help;
+    opacity: 0.7;
+    transition: var(--transition-smooth);
+    vertical-align: middle;
+}
+
+.info-icon:hover {
+    color: var(--primary-color);
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+/* Text input styling */
+#textInput {
+    min-height: 240px !important;
+    font-size: 16px;
+    line-height: 1.5;
+    resize: vertical;
+}
+
+/* Base Styles */
+body.comprehensive-demo {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.6;
+    color: #e2e8f0;
+    background: var(--dark-gradient);
+    background-attachment: fixed;
+    min-height: 100vh;
+    padding-top: 80px; /* Account for fixed navbar */
+}
+
+/* Result sections */
+.result-section-hidden {
+    display: none !important;
+}
+
+.result-section-visible {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Ensure all text is visible - scoped to comprehensive demo */
+.comprehensive-demo .text-muted {
+    color: #cbd5e1 !important;
+}
+
+/* Scoped to demo container only */
+.demo-container .text-dark {
+    color: #e2e8f0;
+}
+
+/* Feature card text improvements */
+.feature-card .text-muted {
+    color: #cbd5e1 !important;
+}
+
+.feature-card h5, .feature-card h6 {
+    color: #f1f5f9 !important;
+}
+
+.feature-card small {
+    color: #cbd5e1 !important;
+}
+
+/* Scoped form controls to demo container */
+.demo-container .form-control {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.demo-container .form-control:focus {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
+}
+
+.comprehensive-demo .form-control::placeholder {
+    color: #94a3b8 !important;
+}
+
+/* Hero Section */
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
+    animation: float 6s ease-in-out infinite;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+/* Demo Container - Full Width Professional Design */
+.demo-container {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
+
+/* Feature Cards */
+.feature-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--shadow-glow);
+}
+
+.feature-card.active {
+    background: var(--primary-gradient);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: var(--shadow-glow);
+}
+
+/* Navigation */
+.comprehensive-demo .navbar {
+    background: rgba(15, 15, 35, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.comprehensive-demo .navbar-brand, .comprehensive-demo .navbar .nav-link {
+    color: #e2e8f0;
+}
+
+/* Buttons */
+.comprehensive-demo .btn-primary {
+    background: var(--primary-gradient);
+    border: none;
+    border-radius: 12px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: var(--transition-bounce);
+    box-shadow: var(--shadow-glow);
+}
+
+.comprehensive-demo .btn-primary:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+}
+
+.comprehensive-demo .btn:focus-visible {
+    outline: 3px solid #667eea;
+    outline-offset: 2px;
+}
+
+/* Form Controls - consolidated with scoped rules above */
+
+/* Focus styles consolidated with scoped rules above */
+
+.demo-container .form-control::placeholder {
+    color: #94a3b8;
+}
+
+/* Loading States */
+.loading-spinner {
+    display: none;
+    color: #e2e8f0;
+}
+
+.loading-spinner.show {
+    display: block;
+}
+
+/* Result Sections */
+.result-section {
+    display: none;
+}
+
+/* Ensure icons are visible in results */
+.feature-card h5 i {
+    font-size: 1.2rem;
+    margin-right: 8px;
+}
+
+/* Processing Information Icons */
+.processing-info i {
+    font-size: 1.5rem !important;
+    margin-bottom: 8px;
+}
+
+.result-section.show {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(-10px) rotate(-1deg); }
+}
+
+.floating-card {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Text Effects */
+.gradient-text {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Emotion Badges */
+.emotion-badge {
+    display: block;
+    padding: 8px 16px;
+    margin: 4px 0;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: var(--transition-smooth);
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.emotion-badge:hover {
+    transform: scale(1.05);
+}
+
+/* Emotion Badges Container */
+#emotionBadges {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+/* Audio Visualizer */
+.audio-visualizer {
+    width: 100%;
+    height: 60px;
+    background: var(--glass-bg);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+}
+
+.audio-bar {
+    width: 4px;
+    height: 20px;
+    background: var(--primary-color);
+    margin: 0 2px;
+    border-radius: 2px;
+    animation: audioPulse 0.5s ease-in-out infinite alternate;
+}
+
+@keyframes audioPulse {
+    0% { height: 20px; }
+    100% { height: 40px; }
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+    .step.active .step-circle,
+    .spinner {
+        animation: none !important;
+    }
+    .btn:hover {
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Progress Steps */
+.progress-step {
+    display: flex;
+    align-items: center;
+}
+
+/* Vertical Progress Pipeline */
+.progress-pipeline-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px; /* Reduced from 20px for tighter spacing */
+    padding: 25px 15px; /* Reduced padding */
+    background: var(--glass-bg);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 450px; /* Reduced height */
+    justify-content: center;
+    width: 100%;
+}
+
+.progress-step-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    padding: 16px 20px; /* Increased padding for better touch targets */
+    border-radius: 15px;
+    transition: var(--transition-smooth);
+    min-width: 160px; /* Increased width */
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 4px; /* Reduced margin */
+    width: 100%; /* Full width for better appearance */
+}
+
+.progress-step-vertical .step-icon-small {
+    width: 24px !important; /* Increased from 18px */
+    height: 24px !important; /* Increased from 18px */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px; /* Increased margin */
+    margin-bottom: 0;
+    font-size: 0.8rem !important; /* Increased from 0.6rem */
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #e2e8f0 !important;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    flex-shrink: 0;
+}
+
+.progress-step-vertical .step-label {
+    font-size: 0.9rem; /* Increased from 0.7rem */
+    font-weight: 600;
+    color: #e2e8f0;
+    transition: var(--transition-smooth);
+    text-align: left; /* Changed from center to left for better alignment */
+    flex: 1; /* Take remaining space */
+}
+
+.progress-step-vertical.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    box-shadow: var(--shadow-glow);
+}
+
+.progress-step-vertical.completed .step-icon-small {
+    background: var(--success-color) !important;
+    color: white !important;
+}
+
+.progress-step-vertical.error .step-icon-small {
+    background: var(--error-color) !important;
+    color: white !important;
+}
+
+.pipeline-arrow-vertical {
+    font-size: 1.2rem; /* Slightly smaller */
+    color: #94a3b8; /* Better color */
+    margin: 2px 0; /* Reduced margin */
+    opacity: 0.7; /* Subtle appearance */
+    transition: var(--transition-smooth);
+}
+
+.progress-step.completed {
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.progress-step.active {
+    background: var(--primary-gradient);
+    color: white;
+}
+
+.step-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    font-size: 14px;
+}
+
+.step-icon.completed {
+    background: #10b981;
+    color: white;
+}
+
+.step-icon.active {
+    background: white;
+    color: var(--primary-color);
+}
+
+.step-icon.pending {
+    background: rgba(139, 92, 246, 0.2);
+    color: #94a3b8;
+}
+
+/* Progress Pipeline - New Compact Horizontal Design */
+.progress-pipeline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--glass-bg);
+    border-radius: 15px;
+    border: 1px solid var(--glass-border);
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+/* Horizontal Progress Pipeline for Title Flow */
+.progress-pipeline-horizontal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(139, 92, 246, 0.05);
+    border-radius: 25px;
+    border: 1px solid rgba(139, 92, 246, 0.1);
+    backdrop-filter: blur(5px);
+    box-shadow: none;
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.progress-pipeline-horizontal:hover {
+    opacity: 1;
+    background: rgba(139, 92, 246, 0.08);
+}
+
+/* Dynamic Layout States */
+#inputLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#resultsLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#titleWithFlow {
+    transition: all 0.3s ease-in-out;
+}
+
+/* Enhanced Feature Cards with Better Background Prominence */
+.feature-card {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.15) 0%,
+        rgba(168, 85, 247, 0.12) 50%,
+        rgba(192, 132, 252, 0.1) 100%);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(139, 92, 246, 0.25);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+    padding: 2rem; /* Increased padding for better background-to-text ratio */
+    min-height: 140px; /* Ensure minimum height for prominence */
+    position: relative;
+}
+
+/* Add subtle glow effect to feature cards */
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.05),
+        rgba(168, 85, 247, 0.03),
+        rgba(192, 132, 252, 0.02));
+    border-radius: 20px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+/* Enhanced demo container background */
+.demo-container {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.12) 0%,
+        rgba(15, 15, 35, 0.95) 50%,
+        rgba(168, 85, 247, 0.08) 100%);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(139, 92, 246, 0.2);
+    border-radius: 20px;
+    box-shadow:
+        var(--shadow-glass),
+        0 0 40px rgba(139, 92, 246, 0.1);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
+
+/* Enhanced Loading Step Styles */
+.process-step {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.process-step.active {
+    background: rgba(139, 92, 246, 0.15);
+    border-color: rgba(139, 92, 246, 0.4);
+    transform: scale(1.02);
+}
+
+.process-step.completed {
+    background: rgba(16, 185, 129, 0.15);
+    border-color: rgba(16, 185, 129, 0.4);
+}
+
+.step-text {
+    font-weight: 600;
+    color: #e2e8f0;
+    font-size: 0.9rem;
+    margin-bottom: 8px;
+}
+
+.step-status {
+    font-size: 0.8rem;
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+.process-step.active .step-status {
+    color: #a855f7;
+}
+
+.process-step.completed .step-status {
+    color: #10b981;
+}
+
+/* Processing Information Compact Styles */
+#processingInfoSidebar .feature-card {
+    min-height: auto;
+}
+
+#processingInfoSidebar .bg-dark {
+    transition: all 0.2s ease;
+}
+
+#processingInfoSidebar .bg-dark:hover {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    transform: translateX(2px);
+}
+
+/* Button Consistency and Improved Spacing */
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    min-width: 120px; /* Ensure consistent button widths */
+}
+
+/* Debug Test Section Toggleable */
+#debugTestSection.hidden {
+    display: none !important;
+}
+
+#debugTestSection .btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+/* Enhanced Input Area Background */
+#textInput {
+    min-height: 240px !important;
+    font-size: 16px;
+    line-height: 1.5;
+    resize: vertical;
+    padding: 1.5rem; /* Increased padding for better appearance */
+    background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */
+    border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */
+}
+
+#textInput:focus {
+    background-color: rgba(255, 255, 255, 0.18) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important;
+    transform: scale(1.01); /* Subtle scale on focus */
+}
+
+.progress-step-horizontal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 60px;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal .step-icon-small {
+    width: 18px !important;
+    height: 18px !important;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.25rem;
+    font-size: 0.7rem !important;
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #cbd5e1 !important;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+}
+
+.progress-step-horizontal .step-label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: #94a3b8;
+    white-space: nowrap;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    transform: scale(1.1);
+}
+
+.progress-step-horizontal.active .step-label {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.progress-step-horizontal.completed .step-icon-small {
+    background: #10b981 !important;
+    color: white !important;
+}
+
+.progress-step-horizontal.completed .step-label {
+    color: #10b981;
+}
+
+.pipeline-arrow {
+    font-size: 0.8rem;
+    color: #64748b;
+    font-weight: normal;
+    user-select: none;
+    opacity: 0.6;
+}
+
+
+/* Responsive Design for Progress Pipeline */
+@media (max-width: 768px) {
+    .progress-pipeline {
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 2rem 1rem;
+    }
+
+    .pipeline-arrow {
+        transform: rotate(90deg);
+        font-size: 1.5rem;
+    }
+
+    .progress-step-horizontal {
+        min-width: 100px;
+    }
+
+    .step-label {
+        font-size: 0.8rem;
+    }
+}
+
+/* Error Messages */
+.error-message {
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.error-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+/* Success Messages */
+.success-message {
+    color: #10b981;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.success-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+/* Model Detail Cards */
+.model-detail-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+}
+
+.model-detail-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.model-detail-label {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.model-detail-value {
+    font-size: 1.1rem;
+    color: #f1f5f9;
+    font-weight: 700;
+}
+
+.model-detail-text {
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    line-height: 1.4;
+}
+
+/* Pure HTML/CSS Chart styling - BEAUTIFUL DESIGN */
+.emotion-chart-container, .summary-chart-container {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    border-radius: 16px;
+    padding: 25px;
+    margin: 20px 0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.emotion-chart-container::before, .summary-chart-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
+}
+
+.chart-header {
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.chart-title {
+    color: #fbbf24;
+    font-weight: 700;
+    margin-bottom: 8px;
+    font-size: 1.25rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.chart-subtitle {
+    color: #cbd5e1;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.emotion-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.emotion-bar {
+    margin-bottom: 20px;
+    animation: slideInLeft 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateX(-30px);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    display: block;
+    visibility: visible;
+}
+
+.emotion-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes slideInLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.emotion-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    align-items: center;
+}
+
+.emotion-name {
+    font-weight: 700;
+    color: #f1f5f9;
+    text-transform: capitalize;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+}
+
+.emotion-percentage {
+    color: #a855f7;
+    font-weight: 700;
+    font-size: 1.1rem;
+    background: rgba(168, 85, 247, 0.1);
+    padding: 4px 12px;
+    border-radius: 20px;
+    border: 1px solid rgba(168, 85, 247, 0.3);
+}
+
+.emotion-bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 15px;
+    height: 16px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill {
+    height: 100%;
+    border-radius: 15px;
+    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.summary-stats {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 25px;
+    gap: 20px;
+}
+
+.stat-item {
+    text-align: center;
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+}
+
+.stat-item.highlight {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
+    border: 2px solid rgba(139, 92, 246, 0.4);
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
+}
+
+.stat-value {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #fbbf24;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item.highlight .stat-value {
+    color: #c084fc;
+    font-size: 2rem;
+}
+
+.stat-label {
+    font-size: 0.8rem;
+    color: #cbd5e1;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.summary-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.summary-bar {
+    margin-bottom: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.summary-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.bar-label {
+    font-weight: 700;
+    color: #f1f5f9;
+    margin-bottom: 12px;
+    font-size: 1rem;
+}
+
+.bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    height: 24px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill {
+    height: 100%;
+    border-radius: 12px;
+    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill.original {
+    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
+}
+
+.bar-fill.summary {
+    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
+}
+
+.bar-value {
+    text-align: right;
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    margin-top: 8px;
+    font-weight: 600;
+}
+
+.chart-footer {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #94a3b8;
+    font-size: 0.85rem;
+}
+
+
+/* Keyboard Focus Indicators */
+.comprehensive-demo .btn-primary:focus-visible {
+    outline: 3px solid #c084fc;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45);
+}
+
+.demo-container .form-control:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Reduced Motion Preferences */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
+    }
+    .hero-section::before {
+        animation: none !important;
+    }
+    .floating-card {
+        animation: none !important;
+    }
+    .audio-bar {
+        animation: none !important;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .progress-pipeline-horizontal {
+        gap: 0.5rem;
+        padding: 0.8rem 1rem;
+    }
+
+    .progress-pipeline-horizontal .step-label {
+        font-size: 0.7rem;
+    }
+
+    #processingInfoSidebar {
+        margin-top: 2rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .demo-container {
+        padding: 30px 20px;
+        margin: -50px 15px 30px 15px;
+    }
+
+    .hero-section {
+        padding: 80px 0;
+    }
+
+    /* Stack title and flow vertically on mobile */
+    #titleWithFlow .d-flex {
+        flex-direction: column;
+        gap: 0.75rem;
+        text-align: center;
+    }
+
+    .progress-pipeline-horizontal {
+        gap: 0.25rem;
+        padding: 0.4rem 0.6rem;
+        justify-content: center;
+    }
+
+    .progress-step-horizontal {
+        min-width: 40px;
+    }
+
+    .progress-step-horizontal .step-icon-small {
+        width: 16px !important;
+        height: 16px !important;
+        font-size: 0.6rem !important;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.5rem;
+    }
+
+    .pipeline-arrow {
+        font-size: 0.7rem;
+    }
+
+    /* Stack buttons vertically on mobile */
+    .d-flex.gap-3.justify-content-center {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem !important;
+    }
+
+    .btn-lg {
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 180px !important;
+        padding: 1rem;
+    }
+
+    /* Compact processing info on mobile */
+    #processingInfoSidebar .bg-dark {
+        padding: 0.5rem !important;
+    }
+
+    #processingInfoSidebar .feature-card {
+        padding: 1rem;
+    }
+
+    /* Results layout adjustments */
+    #resultsLayout .col-lg-8,
+    #resultsLayout .col-lg-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .demo-container {
+        padding: 20px 15px;
+        margin: -50px 10px 20px 10px;
+    }
+
+    .progress-pipeline-horizontal {
+        padding: 0.5rem;
+    }
+
+    .btn-lg {
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .feature-card {
+        padding: 1rem !important;
+        margin-bottom: 1rem;
+    }
+
+    #textInput {
+        min-height: 160px !important;
+        font-size: 14px;
+    }
+}
+
+/* Debug section responsive behavior */
+@media (max-width: 992px) {
+    #debugTestSection {
+        margin-top: 1rem;
+    }
+}
+
+/* Enhanced transitions for responsive changes */
+@media (prefers-reduced-motion: no-preference) {
+    #titleWithFlow,
+    #inputLayout,
+    #resultsLayout {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+}
diff --git a/website/favicon.ico b/website/favicon.ico
new file mode 100644
index 000000000..cb37ebb78
--- /dev/null
+++ b/website/favicon.ico
@@ -0,0 +1,6 @@
+<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
+<TITLE>301 Moved</TITLE></HEAD><BODY>
+<H1>301 Moved</H1>
+The document has moved
+<A HREF="https://t2.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://github.com&amp;size=32">here</A>.
+</BODY></HTML>
diff --git a/website/index.html b/website/index.html
index 6d607ead0..ac7308717 100644
--- a/website/index.html
+++ b/website/index.html
@@ -6,12 +6,361 @@
     <title>SAMO Deep Learning - Production Emotion Detection API</title>
     <meta name="description" content="Enterprise-grade emotion detection API with >90% F1 score and 2.3x performance optimization">
 
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <!-- Custom CSS -->
-    <link href="css/styles.css" rel="stylesheet">
+    <style>
+        :root {
+            /* Sophisticated dark gradient color palette */
+            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+            --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+            --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+            --primary-color: #8b5cf6;
+            --secondary-color: #a855f7;
+            --accent-color: #c084fc;
+            --dark-color: #0f0f23;
+            --darker-color: #0a0a1a;
+            --light-accent: #e9d5ff;
+            --glass-bg: rgba(139, 92, 246, 0.1);
+            --glass-border: rgba(139, 92, 246, 0.2);
+
+            /* Performance and animation settings */
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+            --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        /* Removed universal transition for better performance */
+        .card, .btn, .nav-link, .badge, .form-control, .feature-card, .hero-card {
+            transition: var(--transition-smooth);
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.6;
+            color: #e2e8f0;
+            background: var(--dark-gradient);
+            background-attachment: fixed;
+            min-height: 100vh;
+        }
+
+        .hero-section {
+            background: var(--dark-gradient);
+            color: white;
+            padding: 120px 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+                radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 2;
+        }
+
+        .feature-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            box-shadow: var(--shadow-glass);
+            transition: var(--transition-bounce);
+            height: 100%;
+            color: #e2e8f0;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: var(--shadow-glow);
+            border-color: var(--primary-color);
+        }
+
+        .feature-card.border-success {
+            border-color: rgba(16, 185, 129, 0.5);
+        }
+
+        .feature-card.border-success:hover {
+            border-color: #10b981;
+            box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
+        }
+
+        .feature-icon {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32px;
+            margin-bottom: 30px;
+            box-shadow: var(--shadow-glass);
+        }
+
+        .stats-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--glass-border);
+            color: #e2e8f0;
+            border-radius: 20px;
+            padding: 30px;
+            text-align: center;
+            transition: var(--transition-smooth);
+            box-shadow: var(--shadow-glass);
+        }
+
+        .stats-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-glow);
+        }
+
+        .stats-card h3 {
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .demo-section {
+            background: rgba(0, 0, 0, 0.2);
+            padding: 100px 0;
+        }
+
+        .integration-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: var(--shadow-glass);
+            margin-bottom: 30px;
+            color: #e2e8f0;
+            transition: var(--transition-smooth);
+        }
+
+        .integration-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-glow);
+        }
+
+        .code-block {
+            background: var(--darker-color);
+            border: 1px solid var(--glass-border);
+            border-radius: 15px;
+            padding: 25px;
+            font-family: 'Fira Code', monospace;
+            font-size: 14px;
+            overflow-x: auto;
+            color: #e2e8f0;
+        }
+
+        .navbar {
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--glass-border);
+        }
+
+        .navbar-brand, .navbar .nav-link {
+            color: #e2e8f0;
+        }
+
+        .footer {
+            background: var(--dark-gradient);
+            color: #e2e8f0;
+            padding: 80px 0 40px;
+            border-top: 1px solid var(--glass-border);
+        }
+
+        .btn-primary {
+            background: var(--primary-gradient);
+            border: none;
+            border-radius: 12px;
+            padding: 12px 30px;
+            font-weight: 600;
+            transition: var(--transition-bounce);
+            box-shadow: var(--shadow-glow);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px) scale(1.05);
+            box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+        }
+
+        .btn-outline-light {
+            border: 2px solid rgba(226, 232, 240, 0.5);
+            color: #e2e8f0;
+            border-radius: 12px;
+            padding: 10px 28px;
+            font-weight: 600;
+            transition: var(--transition-smooth);
+        }
+
+        .btn-outline-light:hover {
+            background: rgba(226, 232, 240, 0.1);
+            border-color: #e2e8f0;
+            color: #e2e8f0;
+            transform: translateY(-2px);
+        }
+
+        .btn-light {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            border-radius: 12px;
+            padding: 12px 30px;
+            font-weight: 600;
+            transition: var(--transition-bounce);
+        }
+
+        .btn-light:hover {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.3);
+            color: white;
+            transform: translateY(-2px) scale(1.05);
+        }
+
+        /* Form controls */
+        .form-control {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            color: #e2e8f0;
+            padding: 12px 16px;
+        }
+
+        .form-control:focus {
+            background: var(--glass-bg);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+            color: #e2e8f0;
+        }
+
+        .form-control::placeholder {
+            color: #94a3b8;
+        }
+
+        /* Cards and badges */
+        .card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            box-shadow: var(--shadow-glass);
+            color: #e2e8f0;
+        }
+
+        .badge {
+            background: var(--primary-gradient);
+            color: white;
+            border-radius: 20px;
+            padding: 8px 12px;
+            font-weight: 600;
+        }
+
+        .badge.bg-success {
+            background: linear-gradient(135deg, #10b981, #34d399);
+        }
+
+        /* Progress bars */
+        .progress {
+            background: rgba(139, 92, 246, 0.2);
+            border-radius: 10px;
+            height: 8px;
+        }
+
+        .progress-bar {
+            background: var(--primary-gradient);
+            border-radius: 10px;
+        }
+
+        /* Animations */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            33% { transform: translateY(-20px) rotate(1deg); }
+            66% { transform: translateY(-10px) rotate(-1deg); }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(40px) scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        /* Alert messages */
+        .alert {
+            background: var(--glass-bg);
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--glass-border);
+            border-radius: 15px;
+            color: #e2e8f0;
+        }
+
+        /* Section backgrounds */
+        .bg-light {
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .bg-primary {
+            background: var(--primary-gradient);
+        }
+
+        /* Links */
+        a {
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .hero-section {
+                padding: 80px 0;
+            }
+
+            .integration-card {
+                padding: 25px;
+                margin-bottom: 20px;
+            }
+
+            .feature-icon {
+                width: 60px;
+                height: 60px;
+                font-size: 24px;
+                margin-bottom: 20px;
+            }
+        }
+    </style>
 </head>
 <body>
     <!-- Navigation -->
@@ -30,10 +379,7 @@
                             <a class="nav-link" href="#features">Features</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="comprehensive-demo.html">Emotion Demo</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#docs">Documentation</a>
+                            <a class="nav-link" href="comprehensive-demo.html">Demo</a>
                         </li>
                         <li class="nav-item">
                             <a class="btn btn-primary ms-2" href="comprehensive-demo.html">Try Demo</a>
@@ -49,11 +395,10 @@
             <div class="row align-items-center hero-content">
                 <div class="col-lg-6">
                     <h1 class="display-4 fw-bold mb-4">
-                        🚀 Complete AI Integration Platform
+                        SAMO Emotion Pipeline
                     </h1>
                     <p class="lead mb-4">
-                        <strong>100% Priority 1 Features Complete!</strong> Enterprise-grade AI platform with JWT authentication,
-                        voice transcription, text summarization, real-time processing, and comprehensive monitoring.
+                        AI platform for voice transcription, text summarization, and emotion detection with secure authentication and real-time processing.
                         Production-ready with <strong>>90% F1 score</strong> and <strong>2.3x performance optimization</strong>.
                     </p>
                                         <div class="d-flex gap-3">
@@ -61,10 +406,6 @@ <h1 class="display-4 fw-bold mb-4">
                             <i class="fas fa-heart me-2"></i>
                             Emotion Demo
                         </a>
-                        <a href="comprehensive-demo.html" class="btn btn-light btn-lg">
-                            <i class="fas fa-rocket me-2"></i>
-                            All Features
-                        </a>
                         <a href="#integration" class="btn btn-outline-light btn-lg">
                             <i class="fas fa-code me-2"></i>
                             View Code
@@ -103,120 +444,15 @@ <h3 class="display-6 fw-bold">99.9%</h3>
         </div>
     </section>
 
-    <!-- Priority 1 Features Completion Section -->
-    <section class="py-5 bg-light">
-        <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">🎯 Priority 1 Features - 100% Complete</h2>
-                    <p class="lead text-muted">
-                        All critical features implemented with enterprise-grade quality and comprehensive testing
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-success bg-opacity-10 text-success mx-auto">
-                                <i class="fas fa-key"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">JWT Authentication System</h5>
-                            <p class="card-text text-muted">
-                                Complete token lifecycle management with register, login, refresh, logout, and profile endpoints.
-                                Secure with blacklist tracking and permission-based access control.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto">
-                                <i class="fas fa-microphone"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Enhanced Voice Transcription</h5>
-                            <p class="card-text text-muted">
-                                Advanced Whisper integration with batch processing, real-time streaming, and comprehensive
-                                error handling. Supports multiple audio formats with file validation.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-warning bg-opacity-10 text-warning mx-auto">
-                                <i class="fas fa-file-text"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Text Summarization & Analysis</h5>
-                            <p class="card-text text-muted">
-                                Multi-model T5 summarization with emotional analysis, key point extraction, and
-                                customizable compression ratios. Real-time processing with confidence scoring.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-info bg-opacity-10 text-info mx-auto">
-                                <i class="fas fa-bolt"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Real-time Batch Processing</h5>
-                            <p class="card-text text-muted">
-                                WebSocket-based real-time processing with progress tracking, partial results, and
-                                comprehensive error handling. Supports concurrent processing with rate limiting.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-danger bg-opacity-10 text-danger mx-auto">
-                                <i class="fas fa-chart-bar"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Comprehensive Monitoring</h5>
-                            <p class="card-text text-muted">
-                                Real-time dashboard with system metrics, model performance tracking, error rate monitoring,
-                                and health status alerts. Production-ready observability.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100 border-success">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-secondary bg-opacity-10 text-secondary mx-auto">
-                                <i class="fas fa-vial"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Comprehensive Testing</h5>
-                            <p class="card-text text-muted">
-                                Complete test suite with 1,094 lines of integration tests covering all endpoints,
-                                edge cases, error scenarios, and security validation. 100% code review issues resolved.
-                            </p>
-                            <div class="badge bg-success">✅ Complete</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <!-- Features Section -->
     <section id="features" class="py-5">
         <div class="container">
             <div class="row text-center mb-5">
                 <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">🚀 Enterprise-Grade AI Platform</h2>
-                    <p class="lead text-muted">
-                        Complete AI integration platform with authentication, voice processing, text analysis, and real-time monitoring
+                    <h2 class="display-5 fw-bold mb-3">AI Processing Features</h2>
+                    <p class="lead text-light">
+                        Voice transcription, text summarization, and emotion detection with authentication and monitoring
                     </p>
                 </div>
             </div>
@@ -228,7 +464,7 @@ <h2 class="display-5 fw-bold mb-3">🚀 Enterprise-Grade AI Platform</h2>
                                 <i class="fas fa-rocket"></i>
                             </div>
                             <h5 class="card-title fw-bold">Production Ready</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 Deployed on Google Cloud Run with 99.9% uptime, auto-scaling, and comprehensive monitoring.
                             </p>
                         </div>
@@ -241,7 +477,7 @@ <h5 class="card-title fw-bold">Production Ready</h5>
                                 <i class="fas fa-chart-line"></i>
                             </div>
                             <h5 class="card-title fw-bold">High Performance</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 >90% F1 score with 2.3x speedup using ONNX optimization and efficient tokenization.
                             </p>
                         </div>
@@ -254,7 +490,7 @@ <h5 class="card-title fw-bold">High Performance</h5>
                                 <i class="fas fa-shield-alt"></i>
                             </div>
                             <h5 class="card-title fw-bold">Enterprise Security</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 Rate limiting, input sanitization, CORS protection, and API key authentication.
                             </p>
                         </div>
@@ -267,7 +503,7 @@ <h5 class="card-title fw-bold">Enterprise Security</h5>
                                 <i class="fas fa-plug"></i>
                             </div>
                             <h5 class="card-title fw-bold">Easy Integration</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 Simple REST API with comprehensive documentation and examples for all frameworks.
                             </p>
                         </div>
@@ -280,7 +516,7 @@ <h5 class="card-title fw-bold">Easy Integration</h5>
                                 <i class="fas fa-eye"></i>
                             </div>
                             <h5 class="card-title fw-bold">Real-time Monitoring</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 Prometheus metrics, health checks, and comprehensive logging for observability.
                             </p>
                         </div>
@@ -293,7 +529,7 @@ <h5 class="card-title fw-bold">Real-time Monitoring</h5>
                                 <i class="fas fa-users"></i>
                             </div>
                             <h5 class="card-title fw-bold">Team Ready</h5>
-                            <p class="card-text text-muted">
+                            <p class="card-text text-light">
                                 Integration guides for backend, frontend, UX, and data science teams.
                             </p>
                         </div>
@@ -303,107 +539,57 @@ <h5 class="card-title fw-bold">Team Ready</h5>
         </div>
     </section>
 
-    <!-- Technical Achievements Section -->
-    <section class="py-5 bg-primary bg-opacity-5">
-        <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">🏆 Technical Achievements</h2>
-                    <p class="lead text-muted">
-                        Comprehensive implementation with enterprise-grade quality and security
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-3 col-md-6">
-                    <div class="text-center">
-                        <div class="display-4 fw-bold text-primary mb-2">2,296</div>
-                        <p class="text-muted">Lines of Code Added</p>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="text-center">
-                        <div class="display-4 fw-bold text-success mb-2">1,094</div>
-                        <p class="text-muted">Test Lines</p>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="text-center">
-                        <div class="display-4 fw-bold text-warning mb-2">15</div>
-                        <p class="text-muted">Code Review Issues Fixed</p>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="text-center">
-                        <div class="display-4 fw-bold text-danger mb-2">100%</div>
-                        <p class="text-muted">Security Validated</p>
-                    </div>
-                </div>
-            </div>
-            <div class="row mt-5">
-                <div class="col-lg-8 mx-auto">
-                    <div class="card border-0 shadow">
-                        <div class="card-body p-4">
-                            <h5 class="fw-bold mb-3">🔧 Key Technical Improvements</h5>
-                            <div class="row g-3">
-                                <div class="col-md-6">
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>JWT Token Blacklist with Dict Performance</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>WebSocket Authentication & Rate Limiting</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Comprehensive Error Handling</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Async/Await Optimization</li>
-                                    </ul>
-                                </div>
-                                <div class="col-md-6">
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Input Sanitization & Validation</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Real-time Monitoring Dashboard</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Comprehensive Test Coverage</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Production-Ready Security</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <!-- Demo Section -->
     <section id="demo" class="demo-section">
         <div class="container">
             <div class="row text-center mb-5">
                 <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">🚀 Try Our Complete AI Platform</h2>
-                    <p class="lead text-muted">
-                        Test our comprehensive AI platform with emotion detection, voice transcription, and text summarization
+                    <h2 class="display-5 fw-bold mb-3">🚀 Try Our AI Platform</h2>
+                    <p class="lead text-light">
+                        Experience the full power of our comprehensive demo with real-time emotion detection, voice transcription, and text summarization
                     </p>
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <div class="card border-0 shadow-lg">
-                        <div class="card-body p-4">
-                            <div class="mb-4">
-                                <label for="demoText" class="form-label fw-bold">Enter your text:</label>
-                                <textarea class="form-control" id="demoText" rows="4" placeholder="I am feeling really excited about this project!"></textarea>
-                            </div>
-                            <div class="d-grid">
-                                <button class="btn btn-primary btn-lg" onclick="analyzeEmotion()">
-                                    <i class="fas fa-magic me-2"></i>
-                                    Analyze Emotion
-                                </button>
-                            </div>
-                            <div id="demoResult" class="mt-4" style="display: none;">
-                                <h6 class="fw-bold mb-3">Results:</h6>
-                                <div id="emotionResults" class="row g-2"></div>
-                            </div>
-                            <div id="demoLoading" class="mt-4 text-center" style="display: none;">
-                                <div class="spinner-border text-primary" role="status">
-                                    <span class="visually-hidden">Loading...</span>
+                <div class="col-lg-10">
+                    <div class="card feature-card border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <div class="row align-items-center">
+                                <div class="col-lg-8">
+                                    <div class="row g-4 mb-4 mb-lg-0">
+                                        <div class="col-md-4 text-center">
+                                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto mb-3">
+                                                <i class="fas fa-microphone"></i>
+                                            </div>
+                                            <h6 class="fw-bold">Voice Transcription</h6>
+                                            <p class="text-light small mb-0">SAMO Whisper</p>
+                                        </div>
+                                        <div class="col-md-4 text-center">
+                                            <div class="feature-icon bg-success bg-opacity-10 text-success mx-auto mb-3">
+                                                <i class="fas fa-file-text"></i>
+                                            </div>
+                                            <h6 class="fw-bold">Text Summarization</h6>
+                                            <p class="text-light small mb-0">SAMO T5</p>
+                                        </div>
+                                        <div class="col-md-4 text-center">
+                                            <div class="feature-icon bg-warning bg-opacity-10 text-warning mx-auto mb-3">
+                                                <i class="fas fa-heart"></i>
+                                            </div>
+                                            <h6 class="fw-bold">Emotion Detection</h6>
+                                            <p class="text-light small mb-0">SAMO DeBERTa v3 Large</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4 text-center">
+                                    <a href="comprehensive-demo.html" class="btn btn-primary btn-lg px-4 py-3">
+                                        <i class="fas fa-rocket me-2"></i>
+                                        Launch Full Demo
+                                    </a>
+                                    <p class="text-light small mt-3 mb-0">
+                                        Try all features with real-time processing
+                                    </p>
                                 </div>
-                                <p class="mt-2 text-muted">Analyzing emotions...</p>
                             </div>
                         </div>
                     </div>
@@ -412,149 +598,6 @@ <h6 class="fw-bold mb-3">Results:</h6>
         </div>
     </section>
 
-    <!-- Integration Section -->
-    <section id="integration" class="py-5">
-        <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">🤝 Complete Team Integration</h2>
-                    <p class="lead text-muted">
-                        Comprehensive integration guides for Backend, Frontend, Data Science, and UX teams with live API endpoints
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-server text-primary me-2"></i>
-                            Backend Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>import requests
-from typing import BinaryIO, IO
-
-class SAMO_API_Client:
-    def __init__(self, base_url="https://api.example.com"):
-        # Replace 'https://api.example.com' with your actual deployment URL
-        self.base_url = base_url
-        self.session = requests.Session()
-
-    def analyze_emotion(self, text: str) -> dict:
-        try:
-            response = self.session.post(
-                f"{self.base_url}/predict",
-                json={"text": text},
-                headers={"Content-Type": "application/json"},
-                timeout=10
-            )
-            response.raise_for_status()
-            return response.json()
-        except requests.exceptions.RequestException as e:
-            return {"error": str(e)}
-
-    def transcribe_voice(self, audio_file: BinaryIO | IO[bytes]) -> dict:
-        if not hasattr(audio_file, "read"):
-            return {"error": "audio_file must be a binary file-like object (supports .read())"}
-        files = {"audio_file": audio_file}
-        try:
-            response = self.session.post(
-                f"{self.base_url}/transcribe/voice",
-                files=files,
-                timeout=30
-            )
-            response.raise_for_status()
-            return response.json()
-        except requests.exceptions.RequestException as e:
-            return {"error": str(e)}
-
-# Example usage
-client = SAMO_API_Client()
-emotions = client.analyze_emotion("I'm excited!")
-# Returns: [{"emotion": "excitement", "confidence": 0.92}]</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-code text-success me-2"></i>
-                            Frontend Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>async function analyzeEmotion(text) {
-  const response = await fetch(
-    'https://samo-unified-api-frrnetyhfa-uc.a.run.app/analyze/journal',
-    {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text, generate_summary: false })
-    }
-  );
-  return await response.json();
-}
-
-// Example usage
-const analysis = await analyzeEmotion("This is amazing!");
-console.log(analysis.emotion_analysis?.emotions);</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-chart-bar text-warning me-2"></i>
-                            Data Science Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>import pandas as pd
-import requests
-
-def analyze_dataset(texts: list) -> pd.DataFrame:
-    results = []
-    for text in texts:
-        analysis = requests.post(
-            "https://samo-unified-api-frrnetyhfa-uc.a.run.app/analyze/journal",
-            json={"text": text, "generate_summary": False}
-        ).json()
-        results.append({
-            'text': text,
-            'emotions': analysis.get('emotion_analysis', {}).get('emotions', {})
-        })
-    return pd.DataFrame(results)</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-mobile-alt text-info me-2"></i>
-                            Mobile Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>// React Native / Flutter
-const analyzeUserFeedback = async (feedback) => {
-  try {
-    const response = await fetch(
-      'https://samo-unified-api-frrnetyhfa-uc.a.run.app/analyze/journal',
-      {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text: feedback, generate_summary: false })
-      }
-    );
-    const analysis = await response.json();
-    return analysis;
-  } catch (error) {
-    console.error('Error:', error);
-  }
-};</code></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <!-- Live API Endpoints Section -->
     <section class="py-5 bg-success bg-opacity-5">
@@ -562,8 +605,8 @@ <h5 class="fw-bold mb-3">
             <div class="row text-center mb-5">
                 <div class="col-lg-8 mx-auto">
                     <h2 class="display-5 fw-bold mb-3">🟢 Live API Endpoints</h2>
-                    <p class="lead text-muted">
-                        All endpoints are live and ready for production integration
+                    <p class="lead text-light">
+                        Production endpoints are live at: <code>https://samo-unified-api-optimized-frrnetyhfa-uc.a.run.app</code>
                     </p>
                 </div>
             </div>
@@ -651,51 +694,6 @@ <h6 class="fw-bold mb-3">🔧 System</h6>
         </div>
     </section>
 
-    <!-- Documentation Section -->
-    <section id="docs" class="py-5 bg-light">
-        <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">Documentation & Resources</h2>
-                    <p class="lead text-muted">
-                        Complete guides and resources for successful integration
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-book text-primary mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">API Documentation</h5>
-                            <p class="card-text text-muted">Complete API reference with examples</p>
-                            <a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="btn btn-outline-primary" target="_blank">View Docs</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-rocket text-success mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">Deployment Guide</h5>
-                            <p class="card-text text-muted">Step-by-step deployment instructions</p>
-                            <a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/deployment/PRODUCTION_DEPLOYMENT_GUIDE.md" class="btn btn-outline-success" target="_blank">Deploy Now</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-github text-dark mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">Source Code</h5>
-                            <p class="card-text text-muted">Open source project on GitHub</p>
-                            <a href="https://github.com/uelkerd/SAMO--DL" class="btn btn-outline-dark">View Code</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <!-- Footer -->
     <footer class="footer">
@@ -706,61 +704,38 @@ <h5 class="fw-bold mb-3">
                         <i class="fas fa-brain text-primary me-2"></i>
                         SAMO-DL
                     </h5>
-                    <p class="text-muted">
+                    <p class="text-light">
                         Production-ready emotion detection API with enterprise-grade reliability and performance.
                     </p>
                 </div>
                 <div class="col-lg-2 col-md-6 mb-4">
                     <h6 class="fw-bold mb-3">Product</h6>
                     <ul class="list-unstyled">
-                        <li><a href="#features" class="text-muted text-decoration-none">Features</a></li>
-                        <li><a href="#demo" class="text-muted text-decoration-none">Demo</a></li>
-                        <li><a href="#integration" class="text-muted text-decoration-none">Integration</a></li>
-                        <li><a href="#docs" class="text-muted text-decoration-none">Documentation</a></li>
+                        <li><a href="#features" class="text-light text-decoration-none">Features</a></li>
+                        <li><a href="#demo" class="text-light text-decoration-none">Demo</a></li>
+                        <li><a href="#integration" class="text-light text-decoration-none">Integration</a></li>
+                        <li><a href="#docs" class="text-light text-decoration-none">Documentation</a></li>
                     </ul>
                 </div>
                 <div class="col-lg-2 col-md-6 mb-4">
                     <h6 class="fw-bold mb-3">Resources</h6>
                     <ul class="list-unstyled">
-                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="text-muted text-decoration-none" target="_blank">API Docs</a></li>
-                        <li><a href="comprehensive-demo.html" class="text-muted text-decoration-none">Examples</a></li>
-                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/guides/USER_GUIDE.md" class="text-muted text-decoration-none" target="_blank">Tutorials</a></li>
-                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/README.md" class="text-muted text-decoration-none" target="_blank">Support</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Company</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-muted text-decoration-none">About</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Blog</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Careers</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Contact</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="text-light text-decoration-none" target="_blank">API Docs</a></li>
+                        <li><a href="comprehensive-demo.html" class="text-light text-decoration-none">Examples</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/guides/USER_GUIDE.md" class="text-light text-decoration-none" target="_blank">Tutorials</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/README.md" class="text-light text-decoration-none" target="_blank">Support</a></li>
                     </ul>
                 </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Connect</h6>
-                    <div class="d-flex gap-2">
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-github fa-lg"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-twitter fa-lg"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-linkedin fa-lg"></i>
-                        </a>
-                    </div>
-                </div>
             </div>
             <hr class="my-4">
             <div class="row align-items-center">
                 <div class="col-md-6">
-                    <p class="text-muted mb-0">
+                    <p class="text-light mb-0">
                         © 2025 SAMO-DL. All rights reserved.
                     </p>
                 </div>
                 <div class="col-md-6 text-md-end">
-                    <p class="text-muted mb-0">
+                    <p class="text-light mb-0">
                         Built with ❤️ for the developer community
                     </p>
                 </div>
@@ -773,120 +748,13 @@ <h6 class="fw-bold mb-3">Connect</h6>
 
     <!-- Demo Script -->
     <script>
-        // Configure API Base URL for display (replace with your actual deployment URL)
-        const API_BASE_URL = 'https://api.example.com';
+        // Configure API Base URL for display
+        const API_BASE_URL = 'https://samo-unified-api-optimized-frrnetyhfa-uc.a.run.app';
         document.addEventListener('DOMContentLoaded', () => {
             const el = document.getElementById('api-base-url');
             if (el) el.textContent = API_BASE_URL;
         });
 
-        async function analyzeEmotion() {
-            const text = document.getElementById('demoText').value.trim();
-            if (!text) {
-                alert('Please enter some text to analyze');
-                return;
-            }
-
-            // Show loading
-            document.getElementById('demoLoading').style.display = 'block';
-            document.getElementById('demoResult').style.display = 'none';
-
-            try {
-                // For demo purposes, we'll simulate the API call
-                // In production, this would call the actual API
-                await new Promise(resolve => setTimeout(resolve, 1500));
-
-                // Simulate API response
-                const emotions = simulateEmotionAnalysis(text);
-
-                // Display results
-                displayResults(emotions);
-            } catch (error) {
-                console.error('Error:', error);
-                alert('Error analyzing emotions. Please try again.');
-            } finally {
-                document.getElementById('demoLoading').style.display = 'none';
-            }
-        }
-
-        function simulateEmotionAnalysis(text) {
-            // Simple emotion detection simulation
-            const textLower = text.toLowerCase();
-            const emotions = [];
-
-            if (textLower.includes('happy') || textLower.includes('joy') || textLower.includes('excited')) {
-                emotions.push({ emotion: 'joy', confidence: 0.89 });
-            }
-            if (textLower.includes('sad') || textLower.includes('depressed') || textLower.includes('unhappy')) {
-                emotions.push({ emotion: 'sadness', confidence: 0.85 });
-            }
-            if (textLower.includes('angry') || textLower.includes('mad') || textLower.includes('furious')) {
-                emotions.push({ emotion: 'anger', confidence: 0.92 });
-            }
-            if (textLower.includes('love') || textLower.includes('adore') || textLower.includes('passion')) {
-                emotions.push({ emotion: 'love', confidence: 0.88 });
-            }
-            if (textLower.includes('fear') || textLower.includes('scared') || textLower.includes('terrified')) {
-                emotions.push({ emotion: 'fear', confidence: 0.87 });
-            }
-            if (textLower.includes('surprise') || textLower.includes('amazed') || textLower.includes('shocked')) {
-                emotions.push({ emotion: 'surprise', confidence: 0.84 });
-            }
-
-            // Default to neutral if no specific emotions detected
-            if (emotions.length === 0) {
-                emotions.push({ emotion: 'neutral', confidence: 0.75 });
-            }
-
-            return emotions;
-        }
-
-        function displayResults(emotions) {
-            const resultsContainer = document.getElementById('emotionResults');
-            resultsContainer.innerHTML = '';
-
-            emotions.forEach(emotion => {
-                const confidencePercent = Math.round(emotion.confidence * 100);
-                const colorClass = getEmotionColor(emotion.emotion);
-
-                const emotionCard = `
-                    <div class="col-md-6">
-                        <div class="card border-0 shadow-sm">
-                            <div class="card-body p-3">
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <div>
-                                        <h6 class="mb-1 fw-bold text-capitalize">${emotion.emotion}</h6>
-                                        <div class="progress" style="height: 8px;">
-                                            <div class="progress-bar ${colorClass}"
-                                                 style="width: ${confidencePercent}%"></div>
-                                        </div>
-                                    </div>
-                                    <div class="text-end">
-                                        <span class="badge ${colorClass} fs-6">${confidencePercent}%</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                resultsContainer.innerHTML += emotionCard;
-            });
-
-            document.getElementById('demoResult').style.display = 'block';
-        }
-
-        function getEmotionColor(emotion) {
-            const colors = {
-                'joy': 'bg-success',
-                'sadness': 'bg-primary',
-                'anger': 'bg-danger',
-                'love': 'bg-danger',
-                'fear': 'bg-warning',
-                'surprise': 'bg-info',
-                'neutral': 'bg-secondary'
-            };
-            return colors[emotion] || 'bg-secondary';
-        }
 
         // Smooth scrolling for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
