diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,1511 +3,842 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rookus - AI-Powered Marketing Automation</title>
+    <title>Rookus - AI Marketing Automation</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap" rel="stylesheet">
     <style>
-        .gradient-bg {
-            background: linear-gradient(135deg, #f9c5d1 0%, #9795ef 100%);
+        :root {
+            --neon-cyan: #0ff;
+            --neon-pink: #f0f;
+            --neon-purple: #a020f0;
+            --matrix-green: #0f0;
         }
-        .gradient-text {
-            background: linear-gradient(90deg, #ec4899, #8b5cf6);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
+        
+        body {
+            background: linear-gradient(135deg, #0a0a12 0%, #151528 100%);
+            color: #e0e0ff;
+            font-family: 'Exo 2', sans-serif;
+            overflow-x: hidden;
         }
-        .chat-bubble {
-            border-radius: 20px 20px 20px 0;
+        
+        .neon-text {
+            text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
+            color: white;
         }
-        .user-bubble {
-            border-radius: 20px 20px 0 20px;
+        
+        .neon-pink {
+            text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
+            color: white;
         }
-        .glow-card {
-            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+        
+        .neon-purple {
+            text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
+            color: white;
         }
-        .layer-card:hover {
-            transform: translateY(-5px);
+        
+        .futuristic-card {
+            background: rgba(20, 20, 35, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(100, 100, 255, 0.2);
+            border-radius: 12px;
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
             transition: all 0.3s ease;
         }
-        .animate-pulse-slow {
-            animation: pulse 3s infinite;
+        
+        .futuristic-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0 30px rgba(0, 200, 255, 0.3);
+            border-color: rgba(100, 100, 255, 0.4);
         }
-        @keyframes pulse {
-            0%, 100% {
-                opacity: 1;
-            }
-            50% {
-                opacity: 0.7;
-            }
+        
+        .glowing-border {
+            position: relative;
+            overflow: hidden;
         }
-        .progress-ring__circle {
-            transition: stroke-dashoffset 0.35s;
-            transform: rotate(-90deg);
-            transform-origin: 50% 50%;
+        
+        .glowing-border::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ff00cc);
+            background-size: 400% 400%;
+            z-index: -1;
+            border-radius: 12px;
+            animation: glowing 3s ease infinite;
         }
-        .animate-pulse {
-            animation: pulse 2s infinite;
+        
+        .glowing-border::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(20, 20, 35, 0.9);
+            border-radius: 12px;
+            z-index: -1;
         }
-        @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
+        
+        @keyframes glowing {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
-        .tooltip {
+        
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+            opacity: 0.05;
+            background: repeating-linear-gradient(
+                0deg,
+                transparent,
+                transparent 1px,
+                rgba(0, 255, 0, 0.05) 1px,
+                rgba(0, 255, 0, 0.05) 2px
+            );
+        }
+        
+        .cyber-button {
+            background: linear-gradient(45deg, #ff00cc, #3333ff);
+            border: none;
+            border-radius: 30px;
+            color: white;
+            font-weight: 600;
+            padding: 12px 28px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
             position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 200px;
-            background-color: #555;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
+        
+        .cyber-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(255, 0, 204, 0.4);
+        }
+        
+        .cyber-button::after {
+            content: '';
             position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -100px;
-            opacity: 0;
-            transition: opacity 0.3s;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+            transition: 0.5s;
         }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
+        
+        .cyber-button:hover::after {
+            left: 100%;
+        }
+        
+        .holographic-line {
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-pink), transparent);
+            margin: 20px 0;
+        }
+        
+        .ai-response {
+            border-left: 3px solid var(--neon-cyan);
+            padding-left: 15px;
+            margin: 15px 0;
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .pricing-card {
+            transition: all 0.4s ease;
+        }
+        
+        .pricing-card:hover {
+            transform: scale(1.05);
+        }
+        
+        .feature-icon {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 50, 100, 0.3);
+            border-radius: 50%;
+            margin-bottom: 20px;
+            font-size: 24px;
+            color: var(--neon-cyan);
+            border: 1px solid rgba(0, 200, 255, 0.3);
         }
+        
+        .neon-pulse {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(0, 200, 255, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); }
+        }
+        
+        .terminal-input {
+            background: rgba(10, 20, 30, 0.7);
+            border: 1px solid rgba(0, 200, 255, 0.3);
+            border-radius: 8px;
+            color: white;
+            padding: 15px;
+            font-family: 'Courier New', monospace;
+            width: 100%;
+        }
+        
+        .terminal-input:focus {
+            outline: none;
+            border-color: var(--neon-cyan);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
+        }
+        
         .page-section {
             display: none;
         }
+        
         .page-section.active {
             display: block;
+            animation: fadeIn 0.8s ease;
+        }
+        
+        .nav-active {
+            color: var(--neon-cyan) !important;
+            text-shadow: 0 0 10px var(--neon-cyan);
+            position: relative;
+        }
+        
+        .nav-active::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--neon-cyan);
+            box-shadow: 0 0 10px var(--neon-cyan);
+        }
+        
+        .matrix-text {
+            color: var(--matrix-green);
+            font-family: 'Courier New', monospace;
+            text-shadow: 0 0 5px var(--matrix-green);
+        }
+        
+        .cyber-loader {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .cyber-loader div {
+            width: 20px;
+            height: 20px;
+            background: var(--neon-cyan);
+            border-radius: 50%;
+            margin: 0 5px;
+            animation: loader 1.2s infinite ease-in-out;
+        }
+        
+        .cyber-loader div:nth-child(1) { animation-delay: -0.32s; }
+        .cyber-loader div:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes loader {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
+        }
+        
+        .hologram-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .hologram-effect::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                transparent,
+                rgba(0, 255, 255, 0.1),
+                transparent
+            );
+            transform: rotate(45deg);
+            animation: hologram 4s linear infinite;
+        }
+        
+        @keyframes hologram {
+            0% { transform: rotate(45deg) translateX(-100%); }
+            100% { transform: rotate(45deg) translateX(100%); }
         }
     </style>
 </head>
-<body class="bg-gray-50 font-sans">
+<body>
+    <!-- Matrix background effect -->
+    <div class="matrix-bg"></div>
+    
     <!-- Navigation -->
-    <nav class="bg-white shadow-sm">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0 flex items-center">
-                        <span class="text-2xl font-bold gradient-text">Rookus</span>
-                    </div>
-                </div>
-                <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
-                    <a href="#" data-page="home" class="nav-link text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
-                    <a href="#" data-page="features" class="nav-link text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a>
-                    <a href="#" data-page="demo" class="nav-link text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Try Demo</a>
-                    <a href="#" data-page="pricing" class="nav-link text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing</a>
-                    <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">
-                        Get Started
-                    </button>
-                </div>
-                <div class="-mr-2 flex items-center sm:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
-                        <span class="sr-only">Open main menu</span>
-                        <i class="fas fa-bars"></i>
-                    </button>
+    <nav class="py-4 px-6 md:px-12">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="text-3xl font-bold neon-text">
+                    <i class="fas fa-robot mr-2"></i>ROOKUS
                 </div>
             </div>
+            
+            <div class="hidden md:flex space-x-8">
+                <a href="#" data-page="home" class="nav-link text-lg hover:text-cyan-300 transition nav-active">Home</a>
+                <a href="#" data-page="features" class="nav-link text-lg hover:text-cyan-300 transition">Features</a>
+                <a href="#" data-page="demo" class="nav-link text-lg hover:text-cyan-300 transition">Try Demo</a>
+                <a href="#" data-page="pricing" class="nav-link text-lg hover:text-cyan-300 transition">Pricing</a>
+            </div>
+            
+            <button class="cyber-button">
+                <i class="fas fa-rocket mr-2"></i>Get Started
+            </button>
+            
+            <button class="md:hidden text-cyan-300 text-2xl">
+                <i class="fas fa-bars"></i>
+            </button>
         </div>
     </nav>
-
+    
     <!-- Home Page -->
     <div id="home-page" class="page-section active">
         <!-- Hero Section -->
-        <div class="gradient-bg">
-            <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
-                <div class="text-center">
-                    <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
-                        <span class="block">AI-Powered Marketing</span>
-                        <span class="block">At Your Fingertips</span>
-                    </h1>
-                    <p class="mt-3 max-w-md mx-auto text-base text-white sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
-                        Meet Jarvis, your AI marketing assistant that handles everything from ad creation to campaign deployment.
-                    </p>
-                    <div class="mt-10 flex justify-center space-x-4">
-                        <button class="bg-white text-purple-600 px-8 py-3 rounded-full text-base font-medium hover:bg-gray-100 transition duration-300">
-                            Try for Free
-                        </button>
-                        <button class="demo-btn bg-purple-800 bg-opacity-70 text-white px-8 py-3 rounded-full text-base font-medium hover:bg-opacity-90 transition duration-300">
-                            See Demo
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- AI Agent Section -->
-        <div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
-            <div class="max-w-4xl mx-auto">
-                <div class="text-center mb-12">
-                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                        Meet <span class="gradient-text">Jarvis</span>, Your Marketing AI
-                    </h2>
-                    <p class="mt-4 text-lg text-gray-600">
-                        Jarvis understands your needs and executes the entire marketing process from start to finish.
-                    </p>
+        <section class="py-16 md:py-24 px-6">
+            <div class="container mx-auto max-w-6xl text-center">
+                <div class="inline-block px-6 py-2 bg-cyan-900 bg-opacity-30 rounded-full mb-6 neon-pulse">
+                    <span class="neon-text">AI-POWERED MARKETING</span>
                 </div>
                 
-                <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
-                    <div class="flex items-start space-x-4">
-                        <div class="flex-shrink-0 bg-purple-500 rounded-full p-2">
-                            <i class="fas fa-robot text-white text-xl"></i>
-                        </div>
-                        <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900">Jarvis</p>
-                            <div class="mt-1 text-sm text-gray-700 bg-white p-4 rounded-lg chat-bubble">
-                                Hi there! I'm Jarvis, your AI marketing assistant. Tell me about your campaign goals and I'll handle everything from market research to ad creation and deployment.
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-4 flex items-start justify-end space-x-4">
-                        <div class="flex-1 min-w-0 flex justify-end">
-                            <div class="mt-1 text-sm text-white bg-purple-600 p-4 rounded-lg user-bubble max-w-xs">
-                                Promote organic skincare with pink Gen Z theme
-                            </div>
-                        </div>
-                        <div class="flex-shrink-0 bg-gray-200 rounded-full p-2">
-                            <i class="fas fa-user text-gray-600 text-xl"></i>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-4 flex items-start space-x-4">
-                        <div class="flex-shrink-0 bg-purple-500 rounded-full p-2">
-                            <i class="fas fa-robot text-white text-xl"></i>
-                        </div>
-                        <div class="flex-1 min-w-0">
-                            <div class="mt-1 text-sm text-gray-700 bg-white p-4 rounded-lg chat-bubble">
-                                <div class="animate-pulse-slow flex items-center">
-                                    <div class="h-2 w-2 bg-purple-500 rounded-full mr-1"></div>
-                                    <div class="h-2 w-2 bg-purple-500 rounded-full mr-1"></div>
-                                    <div class="h-2 w-2 bg-purple-500 rounded-full"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-6">
-                        <div class="relative">
-                            <input type="text" class="block w-full rounded-full border-gray-300 pl-5 pr-12 py-3 focus:ring-purple-500 focus:border-purple-500" placeholder="Type your campaign goals...">
-                            <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-                                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
-                                    <i class="fas fa-paper-plane mr-2"></i> Send
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Features Section -->
-        <div id="features" class="py-16 bg-gray-50 px-4 sm:px-6 lg:px-8">
-            <div class="max-w-7xl mx-auto">
-                <div class="text-center mb-16">
-                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                        The <span class="gradient-text">8-Layer</span> Marketing Stack
-                    </h2>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
-                        Jarvis handles every aspect of your marketing campaign with AI precision
-                    </p>
-                </div>
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text">
+                    Transform Your Marketing with <span class="neon-pink">JARVIS</span>
+                </h1>
                 
-                <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-                    <!-- Layer 1 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-comment-dots text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 1</h3>
-                            <p class="text-gray-600 mb-4">User Input & Intent Understanding</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>NLP Parser with DistilBERT/T5</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Intent Detection & NER</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Prompt-to-Plan Conversion</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 2 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-chart-line text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 2</h3>
-                            <p class="text-gray-600 mb-4">Market Insight & Ad Scraping</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Playwright crawler</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <极
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Sentence-BERT embeddings</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Semantic ad search</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 3 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-pen-fancy text-xl"></极>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 3</h3>
-                            <p class="text-gray-600 mb-4">Ad Script Generation</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Mistral/GPT-3.5/LLaMA-3</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Persona/tone conditioning</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Style adapters</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 4 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-image text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray极9 mb-2">Layer 4</h3>
-                            <p class="text-gray-600 mb-4">Poster Generation</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>SDXL/DALLE-3 integration</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Aesthetic scoring</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Style presets</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 5 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-bullhorn text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 5</h3>
-                            <p class="text-gray-600 mb-4">Tagline & CTA Creator</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>GPT-2 fine-tuned on ads</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>AIDA Prompt Templates</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Tone matching</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 6 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-edit text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 6</h3>
-                            <p class="text-gray-600 mb-4">Feedback & Editor</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>WYSIWYG editing</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Prompt rewriter</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>ControlNet Inpainting</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 7 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-chart-bar text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 7</h3>
-                            <p class="text-gray-600 mb-4">A/B Testing & Performance</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Multi-version generator</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>CTR Predictor</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Conversion estimator</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <!-- Layer 8 -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden layer-card transition duration-300 hover:shadow-lg glow-card">
-                        <div class="p-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
-                                <i class="fas fa-rocket text-xl"></i>
-                            </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-2">Layer 8</h3>
-                            <p class="text-gray-600 mb-4">Campaign Deployment</p>
-                            <ul class="text-sm text-gray-600 space-y-2">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Platform APIs integration</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Scheduler</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Meta Ad API handlers</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- How It Works Section -->
-        <div id="how-it-works" class="py-16 bg-white px-4 sm:px-6 lg:px-8">
-            <div class="max-w-7xl mx-auto">
-                <div class="text-center mb-16">
-                    <h2 class="text-3极 font-extrabold text-gray-900 sm:text-4xl">
-                        How <span class="gradient-text">Jarvis</span> Works
-                    </h2>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
-                        From your simple input to complete campaign execution
-                    </p>
-                </div>
-                
-                <div class="relative">
-                    <!-- Vertical line -->
-                    <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-purple-200 to-purple-500 transform -translate-x-1/2"></div>
-                    
-                    <!-- Steps -->
-                    <div class="space-y-12">
-                        <!-- Step 1 -->
-                        <div class="relative flex flex-col md:flex-row items-center">
-                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-xl font-bold border-4 border-white shadow-md mx-auto md:mx-0">
-                                1
-                            </div>
-                            <div class="mt-4 md:mt-0 md:ml-12 md:mr-12 flex-1">
-                                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
-                                    <h3 class="text-lg font-medium text-gray-900">User Input & Intent Understanding</h3>
-                                    <p class="mt-2 text-gray-600">
-                                        Jarvis uses advanced NLP models to understand your campaign goals, extract key entities, and create an execution plan.
-                                    </p>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            DistilBERT
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            spaCy NER
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            GPT-3.5
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Step 2 -->
-                        <div class="relative flex flex-col md:flex-row items-center">
-                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-xl font-bold border-4 border-white shadow-md mx-auto md:mx-0 order-last md:order-none">
-                                2
-                            </div>
-                            <div class="mt-4 md:mt-0 md:ml-12 md:mr-12 flex-1">
-                                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
-                                    <h3 class="text-lg font-medium text-gray-900">Market Insight & Ad Scraping</h3>
-                                    <p class="mt-2 text-gray-600">
-                                        Jarvis analyzes top-performing ads in your niche, extracts keywords, and identifies trends to inform your campaign strategy.
-                                    </p>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Playwright
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Sentence-BERT
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            ColBERT
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Step 3 -->
-                        <div class="relative flex flex-col md:flex-row items-center">
-                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-xl font-bold border-4 border-white shadow-md mx-auto md:mx-0">
-                                3
-                            </div>
-                            <div class="mt-4 md:mt-0 md:ml-12 md:mr-12 flex-1">
-                                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
-                                    <h3 class="text-lg font-medium text-gray-900">Ad Script Generation</h3>
-                                    <p class="mt-2 text-gray-600">
-                                        Based on market insights, Jarvis generates compelling ad copy in your preferred style, tone, and persona.
-                                    </p>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Mistral
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            GPT-3.5
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            CTRL
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Step 4 -->
-                        <div class="relative flex flex-col md:flex-row items-center">
-                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-xl font-bold border-4 border-white shadow-md mx-auto md:mx-0 order-last md:order-none">
-                                4
-                            </div>
-                            <div class="mt-4 md:mt-0 md:ml-12 md:mr-12 flex-1">
-                                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
-                                    <h3 class="text-lg font-medium text-gray-900">Visual Content Creation</h3>
-                                    <p class="mt-2 text-gray-600">
-                                        Jarvis transforms your description into stunning visuals with the perfect aesthetic for your target audience.
-                                    </p>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            SDXL
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            DALLE-3
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            CLIP
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Step 5 -->
-                        <div class="relative flex flex-col md:flex-row items-center">
-                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 text-xl font-bold border-4 border-white shadow-md mx-auto md:mx-0">
-                                5
-                            </div>
-                            <div class="mt-4 md:mt-0 md:ml-12 md:mr-12 flex-1">
-                                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
-                                    <h3 class="text-lg font-medium text-gray-900">Campaign Deployment</h3>
-                                    <p class="mt-2 text-gray-600">
-                                        Jarvis handles the final deployment across platforms, scheduling, and optimization for maximum impact.
-                                    </p>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Meta API
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Google Ads
-                                        </span>
-                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                                            Instagram
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Demo Section -->
-        <div class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
-            <div class="max-w-7xl mx-auto">
-                <div class="text-center mb-12">
-                    <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-                        See <span class="gradient-text">Jarvis</span> in Action
-                    </h2>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
-                        Watch how Jarvis transforms a simple prompt into a complete marketing campaign
-                    </p>
-                </div>
-                
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl">
-                    <div class="aspect-w-16 aspect-h-9">
-                        <div class="w-full h-96 bg-gray-700 flex items-center justify-center">
-                            <div class="text-center">
-                                <i class="fas fa-play-circle text-6xl text-purple-500 mb-4"></i>
-                                <p class="text-xl text-white">Campaign Creation Demo</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-6">
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <div class="bg-gray-700 rounded-lg p-4">
-                                <h3 class="text-lg font-medium text-white mb-2">Input</h3>
-                                <p class="text-gray-300 text-sm">"Promote organic skincare with pink Gen Z theme"</p>
-                            </div>
-                            <div class="bg-gray-700 rounded-lg p-4">
-                                <h3 class="text-lg font-medium text-white mb-2">Output</h3>
-                                <p class="text-gray-300 text-sm">5 ad variations, 10 visuals, 3 CTAs</p>
-                            </div>
-                            <div class="bg-gray-700 rounded-lg p-4">
-                                <h3 class="text-lg font-medium text-white mb-2">Time</h3>
-                                <p class="text-gray-300 text-sm">Generated in 2 minutes 37 seconds</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Pricing Section -->
-        <div id="pricing" class="py-16 bg-white px-4 sm:px-6 lg:px-8">
-            <div class="max-w-7xl mx-auto">
-                <div class="text-center mb-16">
-                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                        Simple, Transparent <span class="gradient-text">Pricing</span>
-                    </h2>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
-                        Choose the plan that fits your marketing needs
-                    </p>
-                </div>
+                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-cyan-100">
+                    The world's first fully autonomous AI marketing platform that creates, deploys, and optimizes campaigns in minutes
+                </p>
                 
-                <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
-                    <!-- Starter Plan -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
-                        <div class="p-6">
-                            <h3 class="text-lg font-medium text-gray-900 mb-1">Starter</h3>
-                            <p class="text-gray-600 text-sm mb-4">Perfect for small businesses</p>
-                            <div class="mb-6">
-                                <span class="text-4xl font-bold text-gray-900">$29</span>
-                                <span class="text-gray-600">/month</span>
-                            </div>
-                            <ul class="text-sm text-gray-600 space-y-3 mb-8">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>100 campaign executions/month</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Basic ad scraping</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Standard image generation</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Email support</span>
-                                </li>
-                            </ul>
-                            <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-3 rounded-lg text-base font-medium transition duration-300">
-                                Get Started
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- Pro Plan (Featured) -->
-                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-purple-500 transform scale-105 z-10 glow-card">
-                        <div class="bg-purple-500 text-white text-center py-2">
-                            <p class="text-sm font-medium">MOST POPULAR</p>
-                        </div>
-                        <div class="p-6">
-                            <h3 class="text-lg font-medium text-gray-900 mb-1">Pro</h3>
-                            <p class="text-gray-600 text-sm mb-4">For growing businesses</p>
-                            <div class="mb-6">
-                                <span class="text-4xl font-bold text-gray-900">$99</span>
-                                <span class="text-gray-600">/month</span>
-                            </div>
-                            <ul class="text-sm text-gray-600 space极3 mb-8">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>500 campaign executions/month</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Advanced ad scraping</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>High-quality image generation</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>A/B testing capabilities</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Priority support</span>
-                                </li>
-                            </ul>
-                            <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg text-base font-medium transition duration-300">
-                                Get Started
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- Enterprise Plan -->
-                    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
-                        <div class="p-6">
-                            <h3 class="text-lg font-medium text-gray-900 mb-1">Enterprise</h3>
-                            <p class="text-gray-600 text-sm mb-4">For large-scale operations</p>
-                            <div class="mb-6">
-                                <span class="text-4xl font-bold text-gray-900">$299</span>
-                                <span class="text-gray-600">/month</span>
-                            </div>
-                            <ul class="text-sm text-gray-600 space-y-3 mb-8">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Unlimited campaigns</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Premium ad scraping</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Ultra HD image generation</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Advanced A/B testing</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>API access</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
-                                    <span>Dedicated account manager</span>
-                                </li>
-                            </ul>
-                            <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-3 rounded-lg text-base font-medium transition duration-300">
-                                Get Started
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- CTA Section -->
-        <div class="gradient-bg">
-            <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-                <div class="text-center">
-                    <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-                        Ready to Transform Your Marketing?
-                    </h2>
-                    <p class="mt-4 max-w-2xl text-xl text-white mx-auto">
-                        Let Jarvis handle your campaigns while you focus on your business
-                    </p>
-                    <div class="mt-8 flex justify-center space-x-4">
-                        <button class="bg-white text-purple-600 px-8 py-3 rounded-full text-base font-medium hover:bg-gray-100 transition duration-300">
-                            Start Free Trial
-                        </button>
-                        <button class="demo-btn bg-purple-800 bg-opacity-70 text-white px-8 py-3 rounded-full text-base font-medium hover:bg-opacity-90 transition duration-300">
-                            Book a Demo
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Demo Page -->
-    <div id="demo-page" class="page-section">
-        <div class="gradient-bg py-12">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-                <h1 class="text-4xl font-bold text-white mb-4">Try Our AI Campaign Generator</h1>
-                <p class="text-xl text-white max-w-3xl mx-auto">Experience how Jarvis transforms your marketing ideas into complete campaigns in minutes</p>
-            </div>
-        </div>
-
-        <!-- Demo Content -->
-        <div class="container mx-auto px-4 py-8">
-            <!-- Campaign Input Section -->
-            <div class="bg-white rounded-xl p-6 mb-8 layer-card">
-                <h2 class="text-2xl font-semibold text-purple-700 mb-4">✨ Campaign Brief</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                        <label class="block text-gray-700 mb-2">Campaign Goal</label>
-                        <textarea id="campaignInput" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" rows="4" placeholder="Example: Promote organic skincare with pink Gen Z theme"></textarea>
-                    </div>
-                    <div>
-                        <label class="block text-gray-700 mb-2">Target Audience</label>
-                        <input type="text" id="targetAudience" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Example: Gen Z women, 18-25">
-                        
-                        <label class="block text-gray-700 mt-4 mb-2">Brand Tone</label>
-                        <select id="brandTone" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
-                            <option value="friendly">Friendly</option>
-                            <option value="professional">Professional</option>
-                            <option value="luxury">Luxury</option>
-                            <option value="youthful">Youthful</option>
-                            <option value="humorous">Humorous</option>
-                        </select>
-                    </div>
-                </div>
-                <button id="generateBtn" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 flex items-center">
-                    <i class="fas fa-magic mr-2"></i> Generate Campaign
-                </button>
-            </div>
-
-            <!-- Progress Indicator -->
-            <div id="progressSection" class="hidden bg-white rounded-xl p-6 mb-8 layer-card">
-                <h2 class="text-2xl font-semibold text-purple-700 mb-4">Generating Your Campaign...</h2>
-                <div class="flex flex-col items-center">
-                    <svg class="w-32 h-32 mb-4" id="progressRing">
-                        <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64"/>
-                        <circle class="text-purple-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64"/>
-                    </svg>
-                    <p id="progressText" class="text-gray-600">Initializing AI models...</p>
-                </div>
-            </div>
-
-            <!-- Layer Navigation -->
-            <div class="mb-8 bg-white rounded-xl p-6 layer-card">
-                <h2 class="text-2xl font-semibold text-purple-700 mb-4">Campaign Layers</h2>
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-purple-100 text-purple-700 font-medium" data-layer="1">1. User Input</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="2">2. Market Insight</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="3">3. Ad Script</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="4">4. Poster Gen</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="5">5. Taglines</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="6">6. Feedback</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="7">7. A/B Testing</button>
-                    <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="8">8. Deployment</button>
-                </div>
-            </div>
-
-            <!-- Layer Content Sections -->
-            <div id="layerContent">
-                <!-- Layer 1: User Input -->
-                <div id="layer1" class="layer-section bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">1</span>
-                        </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">User Input & Intent Understanding</h2>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Detected Intent</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <p id="detectedIntent" class="text-gray-700">Enter your campaign goal above to see analysis</p>
-                            </div>
-                            
-                            <h3 class="text-lg font-medium text-gray-800 mt-4 mb-2">Key Entities</h3>
-                            <div id="keyEntities" class="flex flex-wrap gap-2">
-                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">No entities detected yet</span>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-brain text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Intent Detection</p>
-                                        <p class="text-sm text-gray-600">DistilBERT / T5 / MiniLM</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-tags text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Named Entity Recognition</p>
-                                        <p class="text-sm text-gray-极">spaCy / BERT</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-green-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-project-diagram text-green-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Prompt-to-Plan</p>
-                                        <p class="text-sm text-gray-600">GPT-3.5 / Mistral</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Layer 2: Market Insight -->
-                <div id="layer2" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">2</span>
-                        </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">Market Insight & Ad Scraping</h2>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Top Performing Ads</h3>
-                            <div id="topAds" class="space-y-4">
-                                <div class="border-l-4 border-purple-400 pl-4 py-2 bg-gray-50">
-                                    <p class="font-medium">Loading competitor ad data...</p>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Trending Keywords</h3>
-                            <div id="trendingKeywords" class="flex flex-wrap gap-2">
-                                <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">organic</span>
-                                <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">skincare</span>
-                                <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">Gen Z</span>
-                            </div>
-                            
-                            <h3 class="text-lg font-medium text-gray-800 mt-4 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-spider text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Ad Scraping</p>
-                                        <p class="text-sm text-gray-600">Scrapy / Playwright</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-key text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Semantic Search</p>
-                                        <p class="text-sm text-gray-600">Sentence-BERT + ColBERT</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16">
+                    <button class="cyber-button">
+                        <i class="fas fa-play-circle mr-2"></i>Watch Demo
+                    </button>
+                    <button class="bg-transparent border-2 border-cyan-500 text-cyan-300 rounded-full px-8 py-3 text-lg font-semibold hover:bg-cyan-900 hover:bg-opacity-30 transition">
+                        <i class="fas fa-terminal mr-2"></i>Try Now
+                    </button>
                 </div>
-
-                <!-- Layer 3: Ad Script Generation -->
-                <div id="layer3" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">3</span>
-                        </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">Ad Script Generation</h2>
-                    </div>
-                    
-                    <div class="mb-6">
-                        <div class="flex space-x-4 mb-4">
-                            <button class="script-style-btn px-4 py-2 bg-purple-600 text-white rounded-lg" data-style="genz">Gen Z</button>
-                            <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="minimal">Minimal</button>
-                            <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="emotional">Emotional</button>
-                            <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="humorous">Humorous</button>
-                        </div>
-                        
-                        <div id="adScripts" class="space-y-4">
-                            <div class="border border-gray-200 rounded-lg p-4">
-                                <p class="text-gray-600">Select a style to generate ad scripts tailored to your campaign</p>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Tone Analysis</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <div class="space-y-3">
-                                    <div>
-                                        <p class="font-medium text-sm text-gray-700">Confidence</p>
-                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium text-sm text-gray-700">Positivity</p>
-                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                            <div class="bg-green-600 h-2.5 rounded-full" style="width: 0%"></div>
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium text-sm text-gray-700">Energy</p>
-                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                            <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 0%"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-robot text-blue-600"></i>
+                
+                <div class="glowing-border max-w-5xl mx-auto p-1 rounded-xl">
+                    <div class="futuristic-card p-6">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div class="flex flex-col justify-center">
+                                <div class="flex items-start mb-6">
+                                    <div class="bg-gray-800 rounded-full p-2 mr-4">
+                                        <i class="fas fa-user text-cyan-400 text-xl"></i>
                                     </div>
-                                    <div>
-                                        <p class="font-medium">LLM Generation</p>
-                                        <p class="text-sm text-gray-600">Mistral / GPT-3.5 / LLaMA-3</p>
+                                    <div class="user-bubble bg-gray-800 p-4 rounded-xl max-w-md">
+                                        <p class="matrix-text">@MarketingPro: Need campaign for new eco-friendly headphones. Target Gen Z. Budget $5k.</p>
                                     </div>
                                 </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-sliders-h text-purple-600"></i>
+                                
+                                <div class="flex items-start">
+                                    <div class="bg-gray-800 rounded-full p-2 mr-4">
+                                        <i class="fas fa-robot text-purple-400 text-xl"></i>
                                     </div>
-                                    <div>
-                                        <p class="font-medium">Tone Control</p>
-                                        <p class="text-sm text-gray-600">CTRL / Zest</p>
+                                    <div class="ai-response">
+                                        <p class="text-green-400">JARVIS: Analyzing market... Found 142 similar campaigns. Generating 3 ad concepts with visuals. Estimating CTR 4.2-5.8%. Deploying to FB/IG. Full report ready in 2:17 min.</p>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Layer 4: Poster Generation -->
-                <div id="layer4" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">4</span>
-                        </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">Poster Generation</h2>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div class="md:col-span-2">
-                            <div class="flex space-x-4 mb-4">
-                                <button class="poster-style-btn px-4 py-2 bg-purple-600 text-white rounded-lg" data-style="modern">Modern</button>
-                                <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="vintage">Vintage</button>
-                                <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="minimal">Minimal</button>
-                                <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="bold">Bold</button>
-                            </div>
-                            
-                            <div id="posterPreview" class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center bg-gray-50" style="height: 300px;">
-                                <p class="text-gray-500">Poster preview will appear here</p>
-                            </div>
-                            
-                            <div class="mt-4 flex space-x-3">
-                                <button class="px-4 py-2 bg-purple-600 text-white rounded-lg">
-                                    <i class="fas fa-download mr-2"></i> Download
-                                </button>
-                                <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg">
-                                    <i class="fas fa-random mr-2"></i> Regenerate
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Aesthetic Score</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="flex items-center justify-center mb-2">
-                                    <div class="text-4xl font-bold text-purple-600">-</div>
-                                    <span class="text-gray-500 ml-1">/100</span>
+                                
+                                <div class="terminal-input mt-8">
+                                    <span class="text-green-500">$</span> Enter campaign details...
                                 </div>
-                                <div class="text-center text-sm text-gray-600">Based on composition, color harmony, and visual appeal</div>
                             </div>
                             
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-image text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Image Generation</p>
-                                        <p class="text-sm text-gray-600">SDXL / DALLE-3</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-star text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Aesthetic Scoring</p>
-                                        <p class="text-sm text-gray-600">CLIP + LAION</p>
+                            <div class="flex items-center justify-center">
+                                <div class="relative">
+                                    <div class="hologram-effect rounded-xl overflow-hidden">
+                                        <img src="https://images.unsplash.com/photo-1677442135722-5f8ea49cec8a?q=80&w=1000" alt="AI Marketing" class="w-full h-64 object-cover rounded-xl">
                                     </div>
+                                    <div class="absolute -inset-2 bg-cyan-500 rounded-xl blur-xl opacity-30 z-[-1]"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-
-                <!-- Layer 5: Tagline & CTA -->
-                <div id="layer5" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">5</span>
+            </div>
+        </section>
+        
+        <!-- How It Works -->
+        <section class="py-16 px-6">
+            <div class="container mx-auto max-w-6xl">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">How <span class="neon-pink">JARVIS</span> Works</h2>
+                <p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Our 8-layer AI system transforms your ideas into results in minutes</p>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                    <div class="futuristic-card p-6">
+                        <div class="feature-icon mx-auto">
+                            <i class="fas fa-comment-alt"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-center mb-3 neon-text">1. Input</h3>
+                        <p class="text-center text-cyan-100">Describe your campaign goals in plain English</p>
+                    </div>
+                    
+                    <div class="futuristic-card p-6">
+                        <div class="feature-icon mx-auto">
+                            <i class="fas fa-brain"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-center mb-3 neon-text">2. Analysis</h3>
+                        <p class="text-center text-cyan-100">AI analyzes market data and competitors</p>
+                    </div>
+                    
+                    <div class="futuristic-card p-6">
+                        <div class="feature-icon mx-auto">
+                            <i class="fas fa-pen-fancy"></i>
                         </div>
-                        <h2 class="text-2xl font-semib极 text-purple-700">Tagline & CTA Creator</h2>
+                        <h3 class="text-xl font-bold text-center mb-3 neon-text">3. Creation</h3>
+                        <p class="text-center text-cyan-100">Generates ads, visuals, and copy</p>
                     </div>
                     
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="futuristic-card p-6">
+                        <div class="feature-icon mx-auto">
+                            <i class="fas fa-rocket"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-center mb-3 neon-text">4. Launch</h3>
+                        <p class="text-center text-cyan-100">Deploys campaigns across platforms</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Stats Section -->
+        <section class="py-16 px-6">
+            <div class="container mx-auto max-w-6xl">
+                <div class="futuristic-card p-8">
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                        <div>
+                            <div class="text-4xl font-bold neon-text mb-2">10x</div>
+                            <div class="text-cyan-200">Faster Campaign Creation</div>
+                        </div>
+                        <div>
+                            <div class="text-4xl font-bold neon-pink mb-2">47%</div>
+                            <div class="text-cyan-200">Higher Average CTR</div>
+                        </div>
+                        <div>
+                            <div class="text-4xl font-bold neon-purple mb-2">3.2M</div>
+                            <div class="text-cyan-200">Ads Analyzed Daily</div>
+                        </div>
                         <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Generated Taglines</h3>
-                            <div id="taglines" class="space-y-3">
-                                <div class="border-l-4 border-purple-400 pl-4 py-2 bg-gray-50">
-                                    <p class="text-gray-700">"Glow naturally, shine confidently with our organic skincare"</p>
-                                    <div class="mt-2 flex space-x-2">
-                                        <button class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded">Use</button>
-                                        <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">Regenerate</button>
-                                    </极>
+                            <div class="text-4xl font-bold neon-text mb-2">24/7</div>
+                            <div class="text-cyan-200">AI Optimization</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    
+    <!-- Features Page -->
+    <div id="features-page" class="page-section">
+        <section class="py-16 px-6">
+            <div class="container mx-auto max-w-6xl">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">The <span class="neon-pink">8-Layer</span> AI Marketing Stack</h2>
+                <p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Our proprietary technology stack handles every aspect of marketing automation</p>
+                
+                <div class="space-y-12">
+                    <!-- Layer 1 -->
+                    <div class="futuristic-card p-6">
+                        <div class="flex items-center mb-6">
+                            <div class="text-3xl font-bold bg-cyan-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">1</div>
+                            <h3 class="text-2xl font-bold neon-text">User Input & Intent Understanding</h3>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div>
+                                <p class="text-cyan-100 mb-4">JARVIS uses advanced NLP to understand your campaign goals, extract key entities, and create an execution plan.</p>
+                                <div class="flex flex-wrap gap-2">
+                                    <span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">DistilBERT</span>
+                                    <span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">spaCy NER</span>
+                                    <span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">GPT-4</span>
                                 </div>
                             </div>
-                            
-                            <h3 class="text-lg font-medium text-gray-800 mt-6 mb-2">Call-to-Action</h3>
-                            <div id="ctas" class="space-y-3">
-                                <div class="border-l-4 border-green-400 pl-4 py-2 bg-gray-50">
-                                    <p class="text-gray-700">"Shop now and get 20% off your first order!"</p>
-                                    <div class="mt-2 flex space-x-2">
-                                        <button class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">Use</button>
-                                        <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">Regenerate</button>
-                                    </div>
+                            <div>
+                                <div class="terminal-input p-4">
+                                    <span class="text-green-500">$</span> Campaign goal: Launch eco-friendly headphones for Gen Z with $5k budget<br>
+                                    <span class="text-cyan-500">>></span> Detected: Product: headphones, Audience: Gen Z, Budget: $5000<br>
+                                    <span class="text-cyan-500">>></span> Intent: Product launch, brand awareness, sales conversion
                                 </div>
                             </div>
                         </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Emotional Impact</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="grid grid-cols-3 gap-4 text-center">
-                                    <div>
-                                        <div class="text-purple-600 text-2xl font-bold">82%</div>
-                                        <div class="text-xs text-gray-500">Attention</div>
-                                    </div>
-                                    <div>
-                                        <div class="text-green-600 text-2xl font-bold">78%</div>
-                                        <div class="text-xs text-gray-500">Interest</div>
-                                    </div>
-                                    <div>
-                                        <div class="text-yellow-600 text-2xl font-bold">65%</div>
-                                        <div class="text-xs text-gray-500">Desire</div>
-                                    </div>
+                    </div>
+                    
+                    <!-- Layer 2 -->
+                    <div class="futuristic-card p-6">
+                        <div class="flex items-center mb-6">
+                            <div class="text-3xl font-bold bg-purple-900 w-16 h-16 rounded-full flex items-center justify-center neon-pink mr-6">2</div>
+                            <h3 class="text-2xl font-bold neon-pink">Market Insight & Ad Scraping</h3>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div>
+                                <p class="text-cyan-100 mb-4">Real-time analysis of competitor campaigns and market trends to inform your strategy.</p>
+                                <div class="flex flex-wrap gap-2">
+                                    <span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">Playwright</span>
+                                    <span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">Sentence-BERT</span>
+                                    <span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">ColBERT</span>
                                 </div>
                             </div>
-                            
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-quote-right text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Tagline Generator</p>
-                                        <p class="text-sm text-gray-600">GPT-2 fine-tuned</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-bullseye text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">AIDA Framework</p>
-                                        <p class="text-sm text-gray-600">Prompt Templates</p>
-                                    </div>
+                            <div>
+                                <div class="terminal-input p-4">
+                                    <span class="text-green-500">$</span> Analyzing 142 competitor campaigns...<br>
+                                    <span class="text-cyan-500">>></span> Top performing keywords: #sustainableaudio, #ecofriendlytech<br>
+                                    <span class="text-cyan-500">>></span> Trending visuals: nature backgrounds, recycled materials<br>
+                                    <span class="text-cyan-500">>></span> Avg. CTR in niche: 3.8-5.2%
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <!-- Layer 6: Feedback & Editor -->
-                <div id="layer6" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">6</span>
-                        </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">Feedback & Editor</h2>
-                    </div>
                     
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Edit Campaign Elements</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <div class="mb-4">
-                                    <label class="block text-gray-700 mb-1">Ad Script</label>
-                                    <textarea class="w-full p-2 border border-gray-300 rounded" rows="3"></textarea>
+                    <!-- Layer 3 -->
+                    <div class="futuristic-card p-6">
+                        <div class="flex items-center mb-6">
+                            <div class="text-3xl font-bold bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">3</div>
+                            <h3 class="text-2xl font-bold neon-text">Ad Script Generation</h3>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div>
+                                <p class="text-cyan-100 mb-4">AI generates compelling ad copy tailored to your audience and brand voice.</p>
+                                <div class="flex flex-wrap gap-2">
+                                    <span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">Mistral</span>
+                                    <span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">GPT-3.5</span>
+                                    <span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">CTRL</span>
                                 </div>
-                                <div class="mb-4">
-                                    <label class="block text-gray-700 mb-1">Visual Style</label>
-                                    <select class="w-full p-2 border border-gray-300 rounded">
-                                        <option>Modern</option>
-                                        <option>Vintage</option>
-                                        <option>Minimal</option>
-                                    </select>
+                            </div>
+                            <div>
+                                <div class="terminal-input p-4">
+                                    <span class="text-green-500">$</span> Generated ad concept #1:<br>
+                                    <span class="text-yellow-300">"Tune into nature. Our eco-headphones deliver crystal clear sound without costing the earth. Made from 100% recycled materials. #SustainableSound"</span>
                                 </div>
-                                <button class="px-4 py-2 bg-purple-600 text-white rounded-lg">
-                                    <i class="fas fa-save mr-2"></i> Save Changes
-                                </button>
                             </div>
                         </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Feedback</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="flex items-start">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-lightbulb text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium text-purple-700">Suggestion</p>
-                                        <p class="text-sm text-gray-600">Consider adding more emojis for Gen Z appeal</p>
-                                    </div>
+                    </div>
+                    
+                    <!-- Layer 4 -->
+                    <div class="futuristic-card p-6">
+                        <div class="flex items-center mb-6">
+                            <div class="text-3xl font-bold bg-green-900 w-16 h-16 rounded-full flex items-center justify-center matrix-text mr-6">4</div>
+                            <h3 class="text-2xl font-bold matrix-text">Visual Content Creation</h3>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div>
+                                <p class="text-cyan-100 mb-4">AI generates stunning visuals that match your brand and campaign goals.</p>
+                                <div class="flex flex-wrap gap-2">
+                                    <span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">SDXL</span>
+                                    <span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">DALLE-3</span>
+                                    <span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">CLIP</span>
                                 </div>
                             </div>
-                            
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-comment-alt text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Feedback Analysis</p>
-                                        <p class="text-sm text-gray-600">MiniLM / LLaMA2</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-edit text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Prompt Rewriting</p>
-                                        <p class="text-sm text-gray-600">LangChain</p>
-                                    </div>
+                            <div class="flex justify-center">
+                                <div class="h-40 w-40 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-image text-white text-4xl"></i>
                                 </div>
                             </div>
                         </div>
                     </div>
+                    
+                    <!-- Additional layers would follow the same pattern -->
+                    
+                    <div class="text-center mt-12">
+                        <button class="cyber-button">
+                            <i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers
+                        </button>
+                    </div>
                 </div>
-
-                <!-- Layer 7: A/B Testing -->
-                <div id="layer7" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">7</span>
+            </div>
+        </section>
+    </div>
+    
+    <!-- Demo Page -->
+    <div id="demo-page" class="page-section">
+        <section class="py-16 px-6">
+            <div class="container mx-auto max-w-4xl">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">Try <span class="neon-pink">JARVIS</span> Demo</h2>
+                <p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Experience our AI marketing assistant in action</p>
+                
+                <div class="glowing-border rounded-xl">
+                    <div class="futuristic-card p-6">
+                        <div class="mb-8">
+                            <h3 class="text-xl font-bold neon-text mb-4">Create Your Campaign</h3>
+                            <textarea class="terminal-input w-full h-32" placeholder="Describe your campaign... Example: Promote eco-friendly headphones to Gen Z audience with $5k budget"></textarea>
+                            <button class="cyber-button mt-4 w-full">
+                                <i class="fas fa-bolt mr-2"></i>Generate Campaign
+                            </button>
                         </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">A/B Testing & Performance</h2>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Campaign Variants</h3>
-                            <div class="space-y-4">
-                                <div class="border border-gray-200 rounded-lg p-4">
-                                    <div class="flex justify-between items-start">
-                                        <div>
-                                            <p class="font-medium">Variant A</p>
-                                            <p class="text-sm text-gray-600">Modern design with emotional appeal</p>
-                                        </div>
-                                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Best</span>
-                                    </div>
-                                    <div class="mt-2 flex justify-between text-xs text-gray-500">
-                                        <span>CTR: 4.2%</span>
-                                        <span>Conv: 2.8%</span>
-                                    </div>
-                                </div>
-                                <div class="border border-gray-200 rounded-lg p-4">
-                                    <div class="flex justify-between items-start">
-                                        <div>
-                                            <p class="font-medium">Variant B</p>
-                                            <p class="text-sm text-gray-600">Minimal design with Gen Z tone</p>
-                                        </div>
-                                    </div>
-                                    <div class="mt-2 flex justify-between text-xs text-gray-500">
-                                        <span>CTR: 3.7%</span>
-                                        <span>Conv: 2.1%</span>
-                                    </div>
-                                </div>
-                            </div>
+                        
+                        <div class="cyber-loader mb-8 hidden">
+                            <div></div>
+                            <div></div>
+                            <div></div>
                         </div>
                         
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Performance Prediction</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p class="text-sm text-gray-600">Estimated CTR</p>
-                                        <p class="font-bold text-purple-600">3.8% - 4.5%</p>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm text-gray-600">Conversion Rate</p>
-                                        <p class="font-bold text-green-600">2.2% - 3.1%</p>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm text-gray-600">Cost Per Click</p>
-                                        <p class="font-bold text-blue-600">$0.42 - $0.58</p>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm text-gray-600">ROAS</p>
-                                        <p class="font-bold text-purple-600">3.2x - 4.1x</p>
+                        <div class="demo-results hidden">
+                            <h3 class="text-xl font-bold neon-text mb-4">Generated Campaign</h3>
+                            
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                                <div class="futuristic-card p-4">
+                                    <h4 class="font-bold text-cyan-300 mb-2">Ad Copy</h4>
+                                    <p>"Sound that doesn't cost the earth. Our eco-headphones deliver premium audio from 100% recycled materials. #SustainableSound"</p>
+                                </div>
+                                <div class="futuristic-card p-4">
+                                    <h4 class="font-bold text-cyan-300 mb-2">Visual Concept</h4>
+                                    <div class="bg-gradient-to-br from-green-500 to-blue-600 h-32 rounded-lg flex items-center justify-center">
+                                        <i class="fas fa-headphones text-white text-4xl"></i>
                                     </div>
                                 </div>
                             </div>
                             
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-chart-line text-blue-600"></i>
-                                    </div>
+                            <div class="futuristic-card p-4 mb-6">
+                                <h4 class="font-bold text-cyan-300 mb-2">Performance Prediction</h4>
+                                <div class="grid grid-cols-2 gap-4">
                                     <div>
-                                        <p class="font-medium">CTR Predictor</p>
-                                        <p class="text-sm text-gray-600">LSTM / XGBoost</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-calculator text-purple-600"></i>
+                                        <div class="text-cyan-300">Estimated CTR</div>
+                                        <div class="text-xl font-bold neon-text">4.2-5.8%</div>
                                     </div>
                                     <div>
-                                        <p class="font-medium">Conversion Estimator</p>
-                                        <p class="text-sm text-gray-600">AutoGluon / LightGBM</p>
+                                        <div class="text-cyan-300">Cost Per Click</div>
+                                        <div class="text-xl font-bold neon-pink">$0.32-$0.48</div>
                                     </div>
                                 </div>
                             </div>
+                            
+                            <button class="cyber-button w-full">
+                                <i class="fas fa-paper-plane mr-2"></i>Deploy Campaign
+                            </button>
                         </div>
                     </div>
                 </div>
-
-                <!-- Layer 8: Deployment -->
-                <div id="layer8" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
-                            <span class="font-bold">8</span>
+            </div>
+        </section>
+    </div>
+    
+    <!-- Pricing Page -->
+    <div id="pricing-page" class="page-section">
+        <section class="py-16 px-6">
+            <div class="container mx-auto max-w-6xl">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">Simple, Transparent <span class="neon-pink">Pricing</span></h2>
+                <p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Choose the plan that fits your marketing needs</p>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- Starter Plan -->
+                    <div class="futuristic-card pricing-card p-8">
+                        <h3 class="text-2xl font-bold text-center mb-2 neon-text">Starter</h3>
+                        <p class="text-center text-cyan-200 mb-6">Perfect for small businesses</p>
+                        
+                        <div class="text-center mb-8">
+                            <span class="text-4xl font-bold neon-text">$29</span>
+                            <span class="text-cyan-200">/month</span>
                         </div>
-                        <h2 class="text-2xl font-semibold text-purple-700">Campaign Deployment</h2>
+                        
+                        <ul class="space-y-4 mb-8">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>100 campaign executions/month</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Basic ad scraping</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Standard image generation</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Email support</span>
+                            </li>
+                        </ul>
+                        
+                        <button class="cyber-button w-full">
+                            Get Started
+                        </button>
                     </div>
                     
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">Publish Campaign</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <div class="space-y-4">
-                                    <div class="flex items-center">
-                                        <input type="checkbox" id="facebook" class="mr-2">
-                                        <label for="facebook" class="flex items-center">
-                                            <i class="fab fa-facebook text-blue-600 mr-2"></i>
-                                            Facebook
-                                        </label>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <input type="checkbox" id="instagram" class="mr-2">
-                                        <label for="instagram" class="flex items-center">
-                                            <i class="fab fa-instagram text-pink-600 mr-2"></i>
-                                            Instagram
-                                        </label>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <input type="checkbox" id="google" class="mr-2">
-                                        <label for="google" class="flex items-center">
-                                            <i class="fab fa-google text-red-600 mr-2"></i>
-                                            Google Ads
-                                        </label>
-                                    </div>
-                                </div>
-                                
-                                <div class="mt-6">
-                                    <label class="block text-gray-700 mb-1">Campaign Schedule</label>
-                                    <select class="w-full p-2 border border-gray-300 rounded mb极">
-                                        <option>Run continuously</option>
-                                        <option>Specific dates</option>
-                                        <option>Time of day</option>
-                                    </select>
-                                    
-                                    <label class="block text-gray-700 mb-1">Daily Budget</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded" placeholder="$20">
-                                </div>
-                                
-                                <button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg w-full">
-                                    <i class="fas fa-paper-plane mr-2"></i> Publish Campaign
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">API Integration</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-green-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-check-circle text-green-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Connected Accounts</p>
-                                        <p class="text-sm text-gray-600">Facebook, Instagram</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-yellow-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-exclamation-circle text-yellow-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Google Ads</p>
-                                        <p class="text-sm text-gray-600">Requires re-authentication</p>
-                                    </div>
-                                </div>
+                    <!-- Pro Plan -->
+                    <div class="glowing-border p-1 rounded-xl pricing-card">
+                        <div class="futuristic-card p-8 h-full">
+                            <div class="text-center mb-4">
+                                <span class="px-3 py-1 bg-purple-900 rounded-full text-purple-300 text-sm">MOST POPULAR</span>
                             </div>
                             
-                            <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <div class="bg-blue-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-code text-blue-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">API Handlers</p>
-                                        <p class="text-sm text-gray-600">Meta Ad API</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center">
-                                    <div class="bg-purple-100 p-2 rounded-lg mr-3">
-                                        <i class="fas fa-calendar-alt text-purple-600"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-medium">Scheduling</p>
-                                        <p class="text-sm text-gray-600">Optimal timing algorithm</p>
-                                    </div>
-                                </div>
+                            <h3 class="text-2xl font-bold text-center mb-2 neon-pink">Pro</h3>
+                            <p class="text-center text-cyan-200 mb-6">For growing businesses</p>
+                            
+                            <div class="text-center mb-8">
+                                <span class="text-4xl font-bold neon-pink">$99</span>
+                                <span class="text-cyan-200">/month</span>
                             </div>
+                            
+                            <ul class="space-y-4 mb-8">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                    <span>500 campaign executions/month</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                    <span>Advanced ad scraping</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                    <span>Premium image generation</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                    <span>A/B testing capabilities</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                    <span>Priority support</span>
+                                </li>
+                            </ul>
+                            
+                            <button class="cyber-button w-full bg-gradient-to-r from-purple-600 to-pink-600">
+                                Get Started
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Enterprise Plan -->
+                    <div class="futuristic-card pricing-card p-8">
+                        <h3 class="text-2xl font-bold text-center mb-2 neon-text">Enterprise</h3>
+                        <p class="text-center text-cyan-200 mb-6">For large-scale operations</p>
+                        
+                        <div class="text-center mb-8">
+                            <span class="text-4xl font-bold neon-text">$299</span>
+                            <span class="text-cyan-200">/month</span>
                         </div>
+                        
+                        <ul class="space-y-4 mb-8">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Unlimited campaigns</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Premium ad scraping</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Ultra HD image generation</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Advanced A/B testing</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>API access</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
+                                <span>Dedicated account manager</span>
+                            </li>
+                        </ul>
+                        
+                        <button class="cyber-button w-full">
+                            Get Started
+                        </button>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <!-- Final CTA -->
-        <div class="bg-purple-700 rounded-xl p-8 text-center text-white mb-8">
-            <h2 class="text-2xl md:text-3xl font-bold mb-3">Ready to launch your campaign?</h2>
-            <p class="text-purple-100 mb-6 max-w-2xl mx-auto">Our AI-powered system has generated a complete marketing campaign tailored to your needs.</p>
-            <button class="px-6 py-3 bg-white text-purple-700 font-medium rounded-lg hover:bg-purple-100 transition duration-300">
-                <i class="fas fa-rocket mr-2"></i> Deploy Full Campaign
-            </button>
-        </div>
-    </div>
+        </section>
     </div>
-
+    
+    <!-- CTA Section -->
+    <section class="py-16 px-6">
+        <div class="container mx-auto max-w-4xl text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Ready to Transform Your Marketing?</h2>
+            <p class="text-xl text-cyan-200 mb-10">Join thousands of marketers using JARVIS to create high-performing campaigns</p>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <button class="cyber-button">
+                    <i class="fas fa-play-circle mr-2"></i>Watch Demo
+                </button>
+                <button class="cyber-button bg-gradient-to-r from-cyan-600 to-purple-600">
+                    <i class="fas fa-rocket mr-2"></i>Start Free Trial
+                </button>
+            </div>
+        </div>
+    </section>
+    
     <!-- Footer -->
-    <footer class="bg-gray-900">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+    <footer class="py-12 px-6 border-t border-gray-800">
+        <div class="container mx-auto max-w-6xl">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                 <div>
-                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Product</h3>
+                    <h3 class="text-lg font-bold neon-text mb-4">Product</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Features</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Pricing</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">API</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Integrations</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3>
+                    <h3 class="text-lg font-bold neon-text mb-4">Resources</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Guides</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Documentation</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Guides</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Blog</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Support</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3>
+                    <h3 class="text-lg font-bold neon-text mb-4">Company</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">About</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Careers</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Privacy</a></li>
+                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Terms</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Twitter</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">LinkedIn</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Facebook</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Instagram</a></li>
-                    </ul>
+                    <h3 class="text-lg font-bold neon-text mb-4">Connect</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-instagram"></i></a>
+                    </div>
                 </div>
             </div>
-            <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-400 text-sm">
-                    &copy; 2023 Rookus. All rights reserved.
-                </p>
-                <div class="mt-4 md:mt-0 flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-linkedin"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-facebook"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-instagram"></i>
-                    </a>
-                </div>
+            
+            <div class="border-t border-gray-800 pt-8 text-center text-cyan-200">
+                <p>&copy; 2023 Rookus AI. All rights reserved. The future of marketing is here.</p>
             </div>
         </div>
     </footer>
-
+    
     <script>
         // Page navigation
-        document.querySelectorAll('.nav-link, .demo-btn').forEach(link => {
+        document.querySelectorAll('.nav-link').forEach(link => {
             link.addEventListener('click', function(e) {
                 e.preventDefault();
-                const page = this.dataset.page || 'demo';
+                const page = this.dataset.page;
                 
                 // Hide all pages
                 document.querySelectorAll('.page-section').forEach(section => {
@@ -1519,259 +850,57 @@
                 
                 // Update active nav link
                 document.querySelectorAll('.nav-link').forEach(nav => {
-                    nav.classList.remove('text-purple-600', 'font-bold');
+                    nav.classList.remove('nav-active');
                 });
+                this.classList.add('nav-active');
                 
-                if (page !== 'demo') {
-                    this.classList.add('text-purple-600', 'font-bold');
-                }
+                // Scroll to top
+                window.scrollTo(0, 0);
             });
         });
-
-        // Progress ring animation
-        const progressRing = document.querySelector('#progressRing .progress-ring__circle');
-        if (progressRing) {
-            const radius = progressRing.r.baseVal.value;
-            const circumference = 2 * Math.PI * radius;
-            progressRing.style.strokeDasharray = circumference;
-            progressRing.style.strokeDashoffset = circumference;
-        }
-
-        // Layer navigation
-        const layerNavBtns = document.querySelectorAll('.layer-nav-btn');
-        const layerSections = document.querySelectorAll('.layer-section');
         
-        if (layerNavBtns.length > 0) {
-            layerNavBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    // Update active button
-                    layerNavBtns.forEach(b => {
-                        b.classList.remove('bg-purple-100', 'text-purple-700');
-                        b.classList.add('bg-gray-100', 'text-gray-700');
-                    });
-                    this.classList.remove('bg-gray-100', 'text-gray-700');
-                    this.classList.add('bg-purple-100', 'text-purple-700');
-                    
-                    // Show corresponding section
-                    const layerId = this.getAttribute('data-layer');
-                    layerSections.forEach(section => {
-                        section.classList.add('hidden');
-                    });
-                    document.getElementById(`layer${layerId}`).classList.remove('hidden');
-                });
-            });
-        }
-
-        // Generate campaign button
-        const generateBtn = document.getElementById('generateBtn');
-        const progressSection = document.getElementById('progressSection');
-        const progressText = document.getElementById('progressText');
+        // Demo functionality
+        const generateBtn = document.querySelector('#demo-page .cyber-button');
+        const loader = document.querySelector('.cyber-loader');
+        const demoResults = document.querySelector('.demo-results');
         
         if (generateBtn) {
             generateBtn.addEventListener('click', function() {
-                const campaignInput = document.getElementById('campaignInput').value;
-                if (!campaignInput) {
-                    alert('Please enter your campaign goal');
+                const textarea = document.querySelector('#demo-page textarea');
+                if (!textarea.value.trim()) {
+                    textarea.focus();
                     return;
                 }
                 
-                // Show progress section
-                progressSection.classList.remove('hidden');
-                generateBtn.disabled = true;
+                // Show loader
+                loader.classList.remove('hidden');
                 
-                // Simulate progress
-                let progress = 0;
-                const progressInterval = setInterval(() => {
-                    progress += 5;
-                    const offset = circumference - (progress / 100) * circumference;
-                    progressRing.style.strokeDashoffset = offset;
-                    
-                    // Update progress text
-                    if (progress < 20) {
-                        progressText.textContent = 'Initializing AI models...';
-                    } else if (progress < 40) {
-                        progressText.textContent = 'Analyzing market trends...';
-                    } else if (progress < 60) {
-                        progressText.textContent = 'Generating ad content...';
-                    } else if (progress < 80) {
-                        progressText.textContent = 'Creating visual assets...';
-                    } else {
-                        progressText.textContent = 'Finalizing campaign...';
-                    }
-                    
-                    if (progress >= 100) {
-                        clearInterval(progressInterval);
-                        setTimeout(() => {
-                            progressSection.classList.add('hidden');
-                            generateBtn.disabled = false;
-                            updateCampaignResults(campaignInput);
-                        }, 500);
-                    }
-                }, 200);
-            });
-        }
-
-        // Update campaign results
-        function updateCampaignResults(input) {
-            // Layer 1: Intent and Entities
-            document.getElementById('detectedIntent').textContent = `Promote ${input.toLowerCase()} with focus on visual appeal and Gen Z engagement`;
-            
-            const entitiesContainer = document.getElementById('keyEntities');
-            entitiesContainer.innerHTML = '';
-            const entities = ['organic', 'skincare', 'Gen Z', 'pink', 'promotion'];
-            entities.forEach(entity => {
-                const span = document.createElement('span');
-                span.className = 'bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm';
-                span.textContent = entity;
-                entitiesContainer.appendChild(span);
-            });
-            
-            // Layer 2: Market Insights
-            const topAdsContainer = document.getElementById('topAds');
-            topAdsContainer.innerHTML = '';
-            const ads = [
-                "Organic Glow: 3-step routine for radiant skin (4.2% CTR)",
-                "Pink Perfect: Vegan skincare for Gen Z (3.8% CTR)",
-                "Clean Beauty: Chemical-free formulas (3.5% CTR)"
-            ];
-            ads.forEach(ad => {
-                const div = document.createElement('div');
-                div.className = 'border-l-4 border-purple-400 pl-4 py-2 bg-gray-50';
-                div.innerHTML = `<p class="font-medium">${ad}</p>`;
-                topAdsContainer.appendChild(div);
-            });
-            
-            // Activate first layer nav button
-            document.querySelector('.layer-nav-btn[data-layer="1"]').click();
-        }
-
-        // Ad script style buttons
-        const scriptStyleBtns = document.querySelectorAll('.script-style-btn');
-        if (scriptStyleBtns.length > 0) {
-            scriptStyleBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    scriptStyleBtns.forEach(b => {
-                        b.classList.remove('bg-purple-600', 'text-white');
-                        b.classList.add('bg-gray-200', 'text-gray-700');
-                    });
-                    this.classList.remove('bg-gray-200', 'text-gray-700');
-                    this.classList.add('bg-purple-600', 'text-white');
-                    
-                    const style = this.getAttribute('data-style');
-                    generateAdScripts(style);
-                });
-            });
-        }
-
-        // Generate ad scripts based on style
-        function generateAdScripts(style) {
-            const adScriptsContainer = document.getElementById('adScripts');
-            adScriptsContainer.innerHTML = '';
-            
-            let scripts = [];
-            if (style === 'genz') {
-                scripts = [
-                    "🌸✨ Your skin deserves REAL ingredients! Our organic skincare is 100% natural, 100% effective, and 100% Gen Z approved. Swipe up to glow! #CleanSkin #OrganicGlow",
-                    "POV: You found the perfect skincare routine 💖 Our pink-powered organic products are TikTok famous for a reason! Drop a ❤️ if you want that glass skin effect!"
-                ];
-            } else if (style === 'minimal') {
-                scripts = [
-                    "Organic skincare, simplified. Three products. Visible results. Try our clinically-tested formulas today.",
-                    "Pure ingredients. Clear skin. Our organic skincare delivers what others promise."
-                ];
-            } else if (style === 'emotional') {
-                scripts = [
-                    "Your skin tells your story. Make it one of health and radiance with our organic skincare collection. Because you deserve to feel confident in your own skin.",
-                    "Remember when skincare was simple? We do. That's why we created pure, effective organic products free from harsh chemicals. Your skin will thank you."
-                ];
-            } else {
-                scripts = [
-                    "Warning: Our organic skincare may cause excessive compliments. Side effects include glowing skin and sudden confidence boosts. Use responsibly!",
-                    "We put the 'organic' in 'organization' (because our 3-step routine will organize your skincare life). Bad puns, great products!"
-                ];
-            }
-            
-            scripts.forEach(script => {
-                const div = document.createElement('div');
-                div.className = 'border border-gray-200 rounded-lg p-4';
-                div.innerHTML = `
-                    <p class="text-gray-700">${script}</p>
-                    <div class="mt-3 flex space-x-2">
-                        <button class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded">Use in Campaign</button>
-                        <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">
-                            <i class="fas fa-copy mr-1"></i> Copy
-                        </button>
-                    </div>
-                `;
-                adScriptsContainer.appendChild(div);
-            });
-        }
-
-        // Poster style buttons
-        const posterStyleBtns = document.querySelectorAll('.poster-style-btn');
-        if (posterStyleBtns.length > 0) {
-            posterStyleBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    posterStyleBtns.forEach(b => {
-                        b.classList.remove('bg-purple-600', 'text-white');
-                        b.classList.add('bg-gray-200', 'text-gray-700');
-                    });
-                    this.classList.remove('bg-gray-200', 'text-gray-700');
-                    this.classList.add('bg-purple-600', 'text-white');
-                    
-                    const style = this.getAttribute('data-style');
-                    generatePosterPreview(style);
-                });
+                // Hide button during processing
+                this.classList.add('hidden');
+                
+                // Simulate AI processing
+                setTimeout(() => {
+                    loader.classList.add('hidden');
+                    demoResults.classList.remove('hidden');
+                }, 2500);
             });
         }
-
-        // Generate poster preview
-        function generatePosterPreview(style) {
-            const posterPreview = document.getElementById('posterPreview');
-            posterPreview.innerHTML = '';
-            
-            // Create a mock poster based on style
-            const poster = document.createElement('div');
-            poster.className = 'w-full h-full flex flex-col justify-center items-center p-4';
+        
+        // Terminal input animation
+        const terminalInput = document.querySelector('.terminal-input');
+        if (terminalInput) {
+            let charIndex = 0;
+            const placeholderText = " Describe your campaign... Example: Promote eco-friendly headphones to Gen Z audience with $5k budget";
             
-            if (style === 'modern') {
-                poster.innerHTML = `
-                    <div class="bg-pink-50 w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border border-pink-200">
-                        <h3 class="text-2xl font-bold text-pink-700 mb-2">GLOW NATURALLY</h3>
-                        <p class="text-gray-700 text-center mb-4">Organic skincare for Gen Z</p>
-                        <div class="bg-white rounded-full w-24 h-24 mb-4 flex items-center justify-center text-pink-500 text-4xl">✨</div>
-                        <p class="text-xs text-gray-500">100% natural ingredients</p>
-                    </div>
-                `;
-            } else if (style === 'vintage') {
-                poster.innerHTML = `
-                    <div class="bg-rose-100 w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border-2 border-rose-300">
-                        <h3 class="text-3xl font-serif text-rose-800 mb-1">Organic</h3>
-                        <h3 class="text-3xl font-serif text-rose-800 mb-3">Skincare</h3>
-                        <div class="border-t-2 border-rose-300 w-16 my-2"></div>
-                        <p class="text-rose-700 italic">Since 2023</p>
-                    </div>
-                `;
-            } else if (style === 'bold') {
-                poster.innerHTML = `
-                    <div class="bg-pink-600 w-full h-full rounded-lg flex flex-col justify-center items-center p-6">
-                        <h3 class="text-3xl font-bold text-white mb-2">YOUR SKIN</h3>
-                        <h3 class="text-3xl font-bold text-white mb-4">DESERVES BETTER</h3>
-                        <p class="text-pink-100 text-center">Try our organic skincare collection today</p>
-                    </div>
-                `;
-            } else {
-                poster.innerHTML = `
-                    <div class="bg-white w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border border-gray-300">
-                        <h3 class="text-xl text-gray-800 mb-1">organic</h3>
-                        <h3 class="text-xl text-gray-800 mb-3">skincare</h3>
-                        <div class="border-t border-gray-300 w-12 my-2"></div>
-                        <p class="text-sm text-gray-500">pure. simple. effective.</p>
-                    </div>
-                `;
+            function typeWriter() {
+                if (charIndex < placeholderText.length) {
+                    terminalInput.placeholder = placeholderText.substring(0, charIndex + 1);
+                    charIndex++;
+                    setTimeout(typeWriter, 50);
+                }
             }
             
-            posterPreview.appendChild(poster);
+            setTimeout(typeWriter, 1000);
         }
     </script>
 </body>
