From 3c7de8a7d8f93e41c03583d00428d922dc47c9dd Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Fri, 13 Feb 2026 21:29:47 -0500
Subject: [PATCH] 53 landing pages generated from gold-standard template
 (waitlist + GHL + GitHub links)

---
 activecampaign/index.html    | 1058 +++++++++++++++++++------
 airtable/index.html          | 1058 +++++++++++++++++++------
 apollo/index.html            | 1058 +++++++++++++++++++------
 asana/index.html             | 1058 +++++++++++++++++++------
 basecamp/index.html          | 1317 +++++++++++++++++-------------
 bigcommerce/index.html       | 1343 ++++++++++++++++++-------------
 calendly/index.html          | 1288 ++++++++++++++++++------------
 chargebee/index.html         | 1058 +++++++++++++++++++------
 clickup/index.html           | 1341 ++++++++++++++++++-------------
 close/index.html             |  878 ++++++++++++++++++++
 closebot/index.html          | 1058 +++++++++++++++++++------
 clover/index.html            | 1337 ++++++++++++++++++-------------
 constant-contact/index.html  |  878 ++++++++++++++++++++
 docusign/index.html          | 1058 +++++++++++++++++++------
 freshbooks/index.html        | 1410 +++++++++++++++++++--------------
 freshdesk/index.html         | 1311 +++++++++++++++++-------------
 ghl/index.html               | 1058 +++++++++++++++++++------
 google-console/index.html    | 1058 +++++++++++++++++++------
 gusto/index.html             | 1293 ++++++++++++++++++------------
 helpscout/index.html         | 1323 ++++++++++++++++++-------------
 intercom/index.html          | 1058 +++++++++++++++++++------
 jira/index.html              | 1058 +++++++++++++++++++------
 keap/index.html              | 1339 ++++++++++++++++++-------------
 klaviyo/index.html           | 1058 +++++++++++++++++++------
 lever/index.html             | 1058 +++++++++++++++++++------
 lightspeed/index.html        | 1345 ++++++++++++++++++-------------
 loom/index.html              | 1058 +++++++++++++++++++------
 meta-ads/index.html          | 1058 +++++++++++++++++++------
 monday/index.html            | 1058 +++++++++++++++++++------
 n8n-apps/index.html          |  878 ++++++++++++++++++++
 notion/index.html            | 1058 +++++++++++++++++++------
 pandadoc/index.html          | 1058 +++++++++++++++++++------
 pipedrive/index.html         | 1323 ++++++++++++++++++-------------
 product-analytics/index.html |  878 ++++++++++++++++++++
 quickbooks/index.html        | 1058 +++++++++++++++++++------
 reonomy/index.html           |  878 ++++++++++++++++++++
 rippling/index.html          | 1449 ++++++++++++++++++----------------
 salesloft/index.html         | 1058 +++++++++++++++++++------
 shopify/index.html           | 1058 +++++++++++++++++++------
 square/index.html            | 1058 +++++++++++++++++++------
 squarespace/index.html       | 1366 +++++++++++++++++++-------------
 stripe/index.html            | 1058 +++++++++++++++++++------
 toast/index.html             | 1346 ++++++++++++++++++-------------
 touchbistro/index.html       | 1372 ++++++++++++++++++--------------
 trello/index.html            | 1302 ++++++++++++++++++------------
 twilio/index.html            | 1058 +++++++++++++++++++------
 wave/index.html              | 1443 +++++++++++++++++----------------
 webflow/index.html           | 1058 +++++++++++++++++++------
 wrike/index.html             | 1330 ++++++++++++++++++-------------
 xero/index.html              | 1058 +++++++++++++++++++------
 50 files changed, 40725 insertions(+), 16751 deletions(-)
 create mode 100644 close/index.html
 create mode 100644 constant-contact/index.html
 create mode 100644 n8n-apps/index.html
 create mode 100644 product-analytics/index.html
 create mode 100644 reonomy/index.html
diff --git a/activecampaign/index.html b/activecampaign/index.html
index 38297ab..087bcca 100644
--- a/activecampaign/index.html
+++ b/activecampaign/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ActiveCampaign Connect — AI-Power Your Email Automation in 2 Clicks</title>
+  <title>MCPEngage for ActiveCampaign — AI-Power Your ActiveCampaign in 2 Clicks</title>
+  <meta name="description" content="Connect ActiveCampaign to any AI model with MCPEngage. Automate workflows, manage contacts, build campaigns, and track customer journeys through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#356AE6',
-              600: '#356AE6dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #356AE6 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #356AE625, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #356AE620; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #356AE6">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">ActiveCampaign Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #356AE6; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #356AE6"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">ActiveCampaign</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete ActiveCampaign MCP server. Contacts, campaigns, and automations — AI-ready. <strong class="text-white">142 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #356AE6; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/activecampaign.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #356AE6; color: #fff">
-            142 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect ActiveCampaign + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up ActiveCampaign + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual campaign setup</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #356AE630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
-            </div>
-            <p class="text-white font-medium">AI builds sequences from briefs</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Guessing optimal send times</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #356AE630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
-            </div>
-            <p class="text-white font-medium">AI optimizes based on engagement</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Scattered contact data</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #356AE630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
-            </div>
-            <p class="text-white font-medium">Auto-enrichment and segmentation</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">ActiveCampaign</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full ActiveCampaign API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #356AE620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Contact Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, segment contacts automatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #356AE620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Campaign Automation</h3>
-          <p class="text-zinc-400 text-sm">Build sequences, trigger journeys, optimize timing.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #356AE620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">List Operations</h3>
-          <p class="text-zinc-400 text-sm">Manage lists, custom fields, and subscriber data.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #356AE620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics & Tracking</h3>
-          <p class="text-zinc-400 text-sm">Track opens, clicks, conversions, and attribution.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #356AE6; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects ActiveCampaign to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Automate journeys, segment contacts, and optimize campaigns — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/activecampaign" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/activecampaign
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="zap" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your ActiveCampaign automations..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="zap" class="w-4 h-4"></i>
+                      Automations
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Contacts
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Welcome Series</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 1,247 contacts enrolled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">68% open rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Onboarding</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Lead Scoring</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 847 contacts scored today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">142 hot leads</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Sales</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Abandoned Cart Recovery</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 23 carts recovered today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">$2,847 recovered</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">E-commerce</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">ActiveCampaign Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Automation</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/activecampaign" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Automation maze</p><p class="text-xs sm:text-sm text-zinc-500">Build complex workflows with drag-and-drop — one wrong connection breaks everything</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Contact chaos</p><p class="text-xs sm:text-sm text-zinc-500">"Which contacts opened the last email but didn't click?" — requires multiple filters and exports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual tagging</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours bulk-tagging contacts based on behavior you should have automated months ago</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Campaign guesswork</p><p class="text-xs sm:text-sm text-zinc-500">Send emails and hope they work — insights arrive days later when it's too late to optimize</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural language automation</p><p class="text-xs sm:text-sm text-zinc-500">"When a contact clicks the pricing link, tag them as 'high intent' and notify sales" — automation built instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant contact queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show me contacts with lead score > 50 who haven't been contacted this week" — results in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered tagging</p><p class="text-xs sm:text-sm text-zinc-500">AI auto-tags contacts based on behavior, engagement, and purchase history — no manual work</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time optimization</p><p class="text-xs sm:text-sm text-zinc-500">AI monitors campaign performance and suggests improvements while emails are still sending</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Marketing Automation Is<br><span class="text-red-400">Too Complicated</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          ActiveCampaign is powerful, but building automations and managing contacts shouldn't require a certification.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Automation Overwhelm</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 30+ automations. Half are paused because they broke. Nobody remembers what "Nurture 2.0 FINAL v3" does. Every change risks breaking the entire funnel.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Contact Data Mess</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">15,000 contacts with inconsistent tags, duplicate records, and outdated custom fields. Finding the right audience for a campaign requires SQL-level knowledge.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Slow Iteration</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Building a new automation takes 2 hours of clicking and testing. By the time it's live, the campaign window has closed and the opportunity is gone.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Marketing Automation</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your ActiveCampaign</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your ActiveCampaign API key and account URL. MCPEngage discovers all automations, contacts, campaigns, and deals, building 55+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me contacts with lead score above 50." "Create an automation that tags high-intent leads." "What's our welcome series conversion rate?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-score leads, clean duplicate contacts, optimize send times, pause underperforming automations, and sync CRM data — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge ActiveCampaign</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ ActiveCampaign tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Automation Builder</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create and modify automations using natural language. "Build an automation that sends a follow-up 3 days after signup."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search, update, tag, and segment contacts instantly. "Find all contacts tagged 'enterprise' who opened the last email."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Campaign Orchestration</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send campaigns, track performance, and optimize delivery. "Send the product launch email to the VIP segment tomorrow at 10am."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trophy" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Lead Scoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View and update lead scores based on behavior. "Which contacts have lead scores above 75?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Deal Pipeline</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Manage deals, update stages, and forecast revenue. "Show me all deals in the negotiation stage."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Analytics & Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track automation performance, engagement metrics, and revenue attribution. "What's our ROI on the welcome automation?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ActiveCampaign account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ActiveCampaign API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ActiveCampaign settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to ActiveCampaign.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to ActiveCampaign?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your ActiveCampaign API Key and Account URL (found in Settings → Developer). MCPEngage uses the ActiveCampaign API to create 55+ tools covering automations, contacts, campaigns, deals, tags, lists, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it build automations for me?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can describe an automation in plain English and the AI will create it in ActiveCampaign. For complex workflows, the AI will guide you through the logic and build each step. You review before activating.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including HubSpot, Mailchimp, Klaviyo, Salesforce, Pipedrive, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ActiveCampaign?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ActiveCampaign Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #356AE6; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating ActiveCampaign<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of marketers using MCPEngage to supercharge their automation.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for ActiveCampaign is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 ActiveCampaign Connect. Not affiliated with ActiveCampaign.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Hot Leads — No Recent Contact</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">23 contacts</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #ef4444, #dc2626);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">92</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Sarah Chen</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">sarah.chen@acmecorp.com</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Enterprise</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Pricing page</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #f59e0b, #d97706);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">78</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">James Park</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">james@techflow.io</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Mid-Market</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Demo request</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #ef4444, #dc2626);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">85</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Maria Lopez</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">maria.lopez@globalship.com</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Enterprise</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Trial active</span></div></div></div><div style="display:flex;align-items:center;justify-content:center;padding:10px 14px;border-top:1px solid rgba(255,255,255,0.04);"><span style="font-size:10px;color:rgba(255,255,255,0.4);">+ 20 more contacts</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Avg score: 72 · Last contact: 8+ days ago</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Export list →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Automation Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Live</span></div><div style="padding:14px;"><div style="font-size:14px;font-weight:600;color:#e4e4e7;margin-bottom:10px;">Pricing Page → Sales Alert</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:12px;"><div style="font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px;">Automation Flow:</div><div style="display:flex;flex-direction:column;gap:8px;"><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:6px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#3b82f6;">1</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Trigger</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Contact visits /pricing page</div></div></div><div style="margin-left:14px;width:2px;height:12px;background:rgba(255,255,255,0.1);"></div><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:6px;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#a78bfa;">2</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Action: Add Tag</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Tag contact as "high intent"</div></div></div><div style="margin-left:14px;width:2px;height:12px;background:rgba(255,255,255,0.1);"></div><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">3</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Action: Notify</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Send Slack notification to #sales channel</div></div></div></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Status</div><div style="font-size:12px;font-weight:700;color:#22c55e;">Active</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Enrolled</div><div style="font-size:12px;font-weight:700;color:#17c3b2;">0</div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Automation ID: auto_9k2x7</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in AC →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all contacts with lead score above 50 who haven\'t been contacted this week' },
+      { type:'ai', text:'Found 23 high-scoring contacts ready for outreach:', embed: embed_1 },
+      { type:'user', text:'Create an automation: when a contact visits the pricing page, tag them \'high intent\' and notify sales' },
+      { type:'ai', text:'Automation created and activated!', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: ActiveCampaign', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to ActiveCampaign API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to ActiveCampaign API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about ActiveCampaign', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'ActiveCampaign';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/airtable/index.html b/airtable/index.html
index f7e0d46..bf5dcb6 100644
--- a/airtable/index.html
+++ b/airtable/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Airtable Connect — AI-Power Your Databases in 2 Clicks</title>
+  <title>MCPEngage for Airtable — AI-Power Your Airtable in 2 Clicks</title>
+  <meta name="description" content="Connect Airtable to any AI model with MCPEngage. Query records, update tables, and automate workflows through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#18BFFF',
-              600: '#18BFFFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #18BFFF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #18BFFF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #18BFFF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #18BFFF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Airtable Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #18BFFF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #18BFFF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Airtable</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Airtable MCP server. Tables, records, and views — all automated. <strong class="text-white">98 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #18BFFF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/airtable.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #18BFFF; color: #fff">
-            98 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Airtable + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Airtable + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual data entry</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #18BFFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
-            </div>
-            <p class="text-white font-medium">AI populates from any source</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Copy-paste between tools</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #18BFFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
-            </div>
-            <p class="text-white font-medium">Auto-sync with other systems</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Stale project trackers</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #18BFFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
-            </div>
-            <p class="text-white font-medium">Real-time AI-powered updates</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Airtable</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Airtable API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #18BFFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Record Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, delete records across any base.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #18BFFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Field Operations</h3>
-          <p class="text-zinc-400 text-sm">Manage custom fields, formulas, and linked records.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #18BFFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">View Control</h3>
-          <p class="text-zinc-400 text-sm">Filter, sort, and access any table view programmatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #18BFFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Attachment Handling</h3>
-          <p class="text-zinc-400 text-sm">Upload, download, and manage file attachments.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #18BFFF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Airtable to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Query records, update tables, and automate views — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/airtable" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/airtable
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="table" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="database" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="grid-3x3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Airtable bases..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="table" class="w-4 h-4"></i>
+                      Records
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1,247</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="zap" class="w-4 h-4"></i>
+                      Automations
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Product Launch — Q1 2024</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">23 tasks • 18 completed</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">On Track</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">78% complete</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Marketing</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Customer Feedback Tracker</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">142 responses • 12 untagged</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Needs Review</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">High Priority</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Product</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Content Calendar</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">8 posts scheduled this week</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Ready</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Auto-publish</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Social</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="48">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Airtable Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Database</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/airtable" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual data entry</p><p class="text-xs sm:text-sm text-zinc-500">Team members copy-paste data between spreadsheets, losing hours to repetitive updates</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered information</p><p class="text-xs sm:text-sm text-zinc-500">Critical data spread across 15+ bases with no unified view or search</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Broken automations</p><p class="text-xs sm:text-sm text-zinc-500">Airtable automations hit limits, require constant tweaking, and fail silently</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Complex formulas</p><p class="text-xs sm:text-sm text-zinc-500">Building views and filters requires learning Airtable's formula syntax</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-database updates</p><p class="text-xs sm:text-sm text-zinc-500">"Add 5 new leads from today's conference" — records created instantly with proper formatting</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Cross-base intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Find all customers who haven't been contacted in 30 days" across all bases</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart automations</p><p class="text-xs sm:text-sm text-zinc-500">AI triggers actions based on context: "When a task is overdue, notify the owner and escalate"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural language queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show me high-priority items due this week" — no formulas, just ask</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Drowning in Spreadsheets</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Airtable has your data, but finding and updating it takes too long.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Finding the right record across multiple bases means endless scrolling, filtering, and tab-switching. Your team wastes 30+ minutes daily just hunting for information.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="edit-3" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Update Bottlenecks</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Bulk updates require CSV exports, spreadsheet edits, and re-imports. One mistake corrupts your data. Manual edits are slow and error-prone.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Automation Limits</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Airtable's built-in automations are rigid, hit run limits on Pro plans, and can't handle complex multi-step workflows or conditional logic.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Data</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Airtable</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Airtable personal access token. MCPEngage discovers all bases, tables, and fields — building 48+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all overdue tasks assigned to Sarah." "Add 10 rows to the Leads table." "What's the total revenue from Q4 deals?" Your AI understands and executes.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Complex Workflows</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring tasks: auto-tag records based on sentiment analysis, sync data to other platforms, generate weekly reports, and update fields based on external triggers.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Airtable</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          48+ Airtable tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="table" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Record Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, read, update, and delete records across all bases. "Add 50 new contacts from this CSV with proper field mapping."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Smart Queries</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Natural language search across tables and bases. "Find all customers in California who signed up last month."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="grid-3x3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">View Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate custom views and filters on the fly. "Show me a Kanban view of tasks grouped by priority and owner."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="link" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Linked Records</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Automatically create and manage linked records across tables. "Link this deal to the company record and all related contacts."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Bulk Operations</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update hundreds of records in one command. "Set status to Complete for all tasks marked Done before January 1st."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Cross-Platform Sync</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Connect Airtable to 66+ other platforms. "When a deal closes in HubSpot, add a record to the Revenue table."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Airtable account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Airtable API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Airtable settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Airtable.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Airtable?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide an Airtable personal access token (generated in your Airtable account settings). MCPEngage uses the Airtable API to create 48+ tools covering bases, tables, records, views, and automations. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Airtable data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Airtable's official API with the same permissions as any integration. You control which bases to grant access to. All changes are logged in Airtable's revision history, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it work with other database tools?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use Airtable alongside Google Sheets, Notion databases, PostgreSQL, or any other MCP-enabled data platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Notion, Google Sheets, HubSpot, Salesforce, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Airtable?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Airtable Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #18BFFF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Airtable<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Airtable workflows.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Airtable is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Airtable Connect. Not affiliated with Airtable.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,119,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ff7700;"></div><span style="font-size:11px;font-weight:700;color:#ff7700;text-transform:uppercase;letter-spacing:0.5px;">High-Priority Tasks</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">12 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">🔥</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Finalize Q1 product launch</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Marketing · Due Thu Jan 16</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">OVERDUE</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">⚡</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Review customer feedback</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Product · Due Fri Jan 17</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">TOMORROW</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">📝</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Draft blog post on AI trends</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Content · Due Sun Jan 19</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;">ON TRACK</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Records Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 leads</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">John Smith</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Acme Corp · Conference Lead · Jan 16, 2025</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Lee</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">TechFlow · Conference Lead · Jan 16, 2025</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Mike Chen</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">DataCo · Conference Lead · Jan 16, 2025</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all high-priority tasks due this week' },
+      { type:'ai', text:'Found 12 high-priority tasks:', embed: embed_1 },
+      { type:'user', text:'Add 3 new leads from today\'s conference: John Smith at Acme Corp, Sarah Lee at TechFlow, Mike Chen at DataCo' },
+      { type:'ai', text:'Created 3 new lead records:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Airtable', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Airtable API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Airtable API', color:'text-green-400', delay:3000 },
+      { text:'✓ 48 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Airtable', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Airtable';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/apollo/index.html b/apollo/index.html
index 72c6d46..5cef9ab 100644
--- a/apollo/index.html
+++ b/apollo/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Apollo.io Connect — AI-Power Your Sales Intelligence in 2 Clicks</title>
+  <title>MCPEngage for Apollo — AI-Power Your Apollo in 2 Clicks</title>
+  <meta name="description" content="Connect Apollo to any AI model with MCPEngage. Search prospects, manage sequences, and automate outreach — all through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#4B25D6',
-              600: '#4B25D6dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #4B25D6 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #4B25D625, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #4B25D620; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #4B25D6">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Apollo.io Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #4B25D6; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #4B25D6"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Apollo.io</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Apollo.io MCP server. Prospect search, engagement, and sequencing. <strong class="text-white">86 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #4B25D6; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/apollo.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #4B25D6; color: #fff">
-            86 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Apollo + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Apollo.io + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual prospect research</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4B25D630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
-            </div>
-            <p class="text-white font-medium">AI finds ideal buyers automatically</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Inconsistent follow-up</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4B25D630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
-            </div>
-            <p class="text-white font-medium">Smart sequences on autopilot</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">No lead prioritization</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4B25D630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
-            </div>
-            <p class="text-white font-medium">AI scores based on engagement</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Apollo</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Apollo.io API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4B25D620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Contact Search</h3>
-          <p class="text-zinc-400 text-sm">Find prospects by role, company, industry, and signals.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4B25D620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Sequence Management</h3>
-          <p class="text-zinc-400 text-sm">Build multi-channel outreach, track engagement.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4B25D620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Account Intelligence</h3>
-          <p class="text-zinc-400 text-sm">Access company data, technographics, and insights.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4B25D620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Activity Tracking</h3>
-          <p class="text-zinc-400 text-sm">Log calls, emails, meetings — all in one place.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #4B25D6; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Apollo to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Find leads, enrich contacts, and automate sequences — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/apollo" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/apollo
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="building" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="send" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Apollo prospects..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Prospects
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1,247</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="send" class="w-4 h-4"></i>
+                      Sequences
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen — VP Engineering</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • 2,500 employees</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Hot Lead</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Opened 3x</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">LinkedIn viewed</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">James Park — CTO</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Series B</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Engaged</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">Replied 2d ago</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Meeting booked</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Maria Lopez — Head of Sales</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">GlobalShip • $50M ARR</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Nurture</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">In sequence</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Step 3/7</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Apollo Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Outreach</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/apollo" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet prospecting</p><p class="text-xs sm:text-sm text-zinc-500">Exporting lists from Apollo, manually enriching in Google Sheets</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Sequence blindness</p><p class="text-xs sm:text-sm text-zinc-500">Which prospects are engaged? No idea without clicking through 20 sequences</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Data entry hell</p><p class="text-xs sm:text-sm text-zinc-500">Copy-pasting prospect info into your CRM, Slack, and meeting notes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Generic outreach</p><p class="text-xs sm:text-sm text-zinc-500">"Hi [First Name]" — blasting the same template to everyone</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered search</p><p class="text-xs sm:text-sm text-zinc-500">"Find CTOs at Series B SaaS companies with 100-500 employees" — instant results</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Engagement insights</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Which prospects opened my email 3+ times?" — hot leads surfaced automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-enrichment</p><p class="text-xs sm:text-sm text-zinc-500">AI pulls Apollo data into CRM, updates contact records, and syncs notes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Hyper-personalized outreach</p><p class="text-xs sm:text-sm text-zinc-500">AI drafts custom messages using company news, tech stack, and LinkedIn activity</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Outreach Is<br><span class="text-red-400">Broken</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Apollo gives you the data, but finding the right prospects and crafting personalized outreach still takes hours of manual work.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Search Overwhelm</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 270 million contacts at your fingertips. You still spend 2 hours building the perfect filter set, exporting to CSV, and re-uploading to sequences. The data's there, but it's locked behind clunky UIs.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Sequence Black Box</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 15 sequences running. Which ones are working? Who's engaged? You're digging through dashboards, checking open rates, manually tagging hot leads. The signal is buried in noise.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Robotic Personalization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You use merge tags. "Hi {{first_name}}, I saw {{company}} is hiring." It's still generic. Real personalization — researching each prospect, tailoring your pitch — is too slow to scale.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Prospecting</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Apollo</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Apollo API key. MCPEngage discovers all available endpoints and builds 55+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Find VPs of Engineering at companies using React and AWS." "Which prospects in my outbound sequence replied?" "Enrich this contact list." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-add hot leads to sequences, sync Apollo data to your CRM, generate weekly engagement reports, and draft personalized follow-ups — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Apollo</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Apollo tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Advanced Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search 270M+ contacts with natural language. "Find CMOs at fintech startups in NYC with recent funding."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Enrichment</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Enrich contacts with emails, phone numbers, job history, and tech stack. "Enrich all contacts in my 'Enterprise' list."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="send" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Sequence Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track sequence performance, identify engaged prospects, and optimize messaging. "Which prospects opened 3+ times but didn't reply?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="building-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Account Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get company data: size, revenue, tech stack, funding, news. "What tech does Acme Corp use?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Lead Scoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI analyzes engagement signals (opens, clicks, LinkedIn views) and surfaces your hottest prospects automatically.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="pen-tool" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Personalized Outreach</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate custom email drafts using prospect context, company news, and mutual connections. No more templates.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Apollo.io account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Apollo.io API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Apollo.io settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Apollo.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Apollo?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide an Apollo API key (generated in Settings → Integrations → API). MCPEngage uses the Apollo REST API to create 55+ tools covering people search, contact enrichment, sequences, accounts, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it use my Apollo credits?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes. When MCPEngage enriches contacts or exports data via Apollo's API, it consumes your Apollo credits just like using the Apollo web app. You control which tools can spend credits.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI send emails through Apollo sequences?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage can add/remove contacts from sequences and retrieve sequence analytics, but email sending happens through Apollo's platform (per their API design). You maintain full control over outbound messaging.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, LinkedIn, Outreach, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Apollo.io?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Apollo.io Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4B25D6; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Apollo<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join sales teams using MCPEngage to supercharge prospecting with AI.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Apollo is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Apollo.io Connect. Not affiliated with Apollo.io.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Prospect Search Results</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">47 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">SC</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Chen</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">CTO</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">DataFlow Inc • 280 employees</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Series B</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Hot</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">JM</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">James Miller</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">CTO & Co-Founder</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">CloudPipe • 150 employees</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Series B</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">AR</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Alex Rivera</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">VP Engineering / CTO</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">FinTech Labs • 420 employees</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Series B</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">All prospects use AWS tech stack</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all 47 →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">10 contacts enriched</span></div><div style="margin-left:28px;display:flex;flex-direction:column;gap:4px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;"><span style="font-size:10px;color:rgba(255,255,255,0.5);">Work emails found</span><span style="font-size:10px;font-weight:600;color:#4ade80;">10/10</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;"><span style="font-size:10px;color:rgba(255,255,255,0.5);">Direct dials found</span><span style="font-size:10px;font-weight:600;color:#60a5fa;">7/10</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;"><span style="font-size:10px;color:rgba(255,255,255,0.5);">Credits used</span><span style="font-size:10px;font-weight:600;color:#fbbf24;">10</span></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Added to Enterprise Outbound</span></div><div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">10 contacts</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Step 1: sending tmrw</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.1);color:#4ade80;">7-step sequence</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Find CTOs at Series B SaaS companies with 100-500 employees who use AWS' },
+      { type:'ai', text:'Found 47 matching prospects. Here are the top 5:', embed: embed_1 },
+      { type:'user', text:'Enrich the top 10 and add them to my \'Enterprise Outbound\' sequence' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Apollo', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Apollo API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Apollo API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Apollo', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Apollo';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/asana/index.html b/asana/index.html
index 4713d21..fdd2c85 100644
--- a/asana/index.html
+++ b/asana/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Asana Connect — AI-Power Your Project Management in 2 Clicks</title>
+  <title>MCPEngage for Asana — AI-Power Your Asana in 2 Clicks</title>
+  <meta name="description" content="Connect Asana to any AI model with MCPEngage. Manage tasks, automate workflows, and get instant project context through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#F06A6A',
-              600: '#F06A6Add',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #F06A6A 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F06A6A25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #F06A6A20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F06A6A">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Asana Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F06A6A; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #F06A6A"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Asana</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Asana MCP server. Tasks, projects, and workflows — fully automated. <strong class="text-white">124 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F06A6A; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/asana.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F06A6A; color: #fff">
-            124 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Asana + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Asana + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Status update meetings</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F06A6A30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></i>
-            </div>
-            <p class="text-white font-medium">AI generates project summaries</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Task overload paralysis</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F06A6A30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></i>
-            </div>
-            <p class="text-white font-medium">AI prioritizes your day</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Forgotten deadlines</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F06A6A30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></i>
-            </div>
-            <p class="text-white font-medium">Proactive AI reminders</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Asana</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Asana API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F06A6A20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Task Management</h3>
-          <p class="text-zinc-400 text-sm">Create, assign, track tasks with dependencies.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F06A6A20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Project Operations</h3>
-          <p class="text-zinc-400 text-sm">Manage timelines, milestones, and portfolio views.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F06A6A20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Custom Fields</h3>
-          <p class="text-zinc-400 text-sm">Access and update any custom field across projects.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F06A6A20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Team Collaboration</h3>
-          <p class="text-zinc-400 text-sm">Manage comments, attachments, and approvals.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F06A6A; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Asana to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage tasks, track projects, and automate workflows — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/asana" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/asana
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="check-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="folder" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="calendar" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Asana projects..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="check-square" class="w-4 h-4"></i>
+                      Tasks
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="folder" class="w-4 h-4"></i>
+                      Projects
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Redesign homepage</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marketing Site • Due today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">High</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">3 subtasks</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Design</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Planning Doc</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Strategy • Due in 2 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Medium</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">In Progress</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Planning</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Bug fix: checkout flow</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Engineering • Due tomorrow</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Urgent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Blocked</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Frontend</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Asana Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Access</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/asana" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual task updates</p><p class="text-xs sm:text-sm text-zinc-500">Spend 30+ minutes each morning updating task statuses across projects</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost context switching</p><p class="text-xs sm:text-sm text-zinc-500">Jump between Asana, Slack, email, and docs to piece together project status</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Forgotten dependencies</p><p class="text-xs sm:text-sm text-zinc-500">Tasks get blocked because nobody remembers what depends on what</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Outdated status reports</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours copy-pasting data into slides for stakeholder updates</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered updates</p><p class="text-xs sm:text-sm text-zinc-500">"Mark all completed tasks from last week as done" — finished in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant project insights</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's blocking the marketing site launch?" and get the full picture</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart dependencies</p><p class="text-xs sm:text-sm text-zinc-500">AI identifies and manages task dependencies automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-generated reports</p><p class="text-xs sm:text-sm text-zinc-500">"Summarize Q1 progress for the exec team" — done instantly</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Drowning in Tasks</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Asana keeps everything organized, but managing it all takes more time than the actual work.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clipboard-list" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Task Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your team has 200+ tasks across 15 projects. Nobody knows what to prioritize. Daily standups turn into hour-long status marathons.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Dependency Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Task A blocks Task B which blocks Task C. One delay cascades into chaos. Your timeline view is a red sea of overdue items.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="refresh-cw" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Update Fatigue</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Constantly updating assignees, due dates, and statuses. Your team spends 40% of their time managing Asana instead of shipping work.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Project Management</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Asana</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Asana API token. MCPEngage discovers all workspaces, projects, and tasks, building 45+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all high-priority tasks due this week." "Create a task to review the homepage redesign." "What's blocking the Q1 launch?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-assign tasks based on tags, update project timelines, generate weekly status reports, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Asana</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ Asana tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Task Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, assign, and complete tasks through conversation. "Assign the homepage redesign to Sarah."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Project Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor project progress, timelines, and milestones. "Show me all projects behind schedule."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Timeline Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-adjust due dates when dependencies shift. "Push back the launch date by 2 weeks."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Team Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Balance workload across team members. "Who has capacity to take on the new design task?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Progress Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate status updates and burndown charts on demand. "Summarize Marketing Site project for stakeholders."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Tagging</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-tag and categorize tasks based on content. "Tag all tasks mentioning 'SEO' with the Marketing label."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Asana account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Asana API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Asana settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Asana.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Asana?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Asana Personal Access Token (generated in Asana Developer Console). MCPEngage uses the Asana REST API to create 45+ tools covering tasks, projects, sections, tags, custom fields, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it handle custom fields?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage automatically detects all your custom fields (dropdowns, text, numbers, dates) and makes them queryable. You can filter, update, and report on custom fields through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Jira, Linear, ClickUp, Notion, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Asana?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Asana Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F06A6A; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Asana<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their project management.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Asana is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Asana Connect. Not affiliated with Asana.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">High Priority Tasks</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">5 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Redesign homepage</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Marketing Site · Due today</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">High</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(139,92,246,0.15);color:#a78bfa;">Design</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Bug fix: checkout flow</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering · Due tomorrow</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Blocked</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;">Frontend</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Write Q1 investor update</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Strategy · Due Friday</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(236,72,153,0.15);color:#f472b6;">Executive</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Finalize pricing model</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Product · Due Wed</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;">Pricing</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Security audit prep</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Compliance · Due Thu</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">Security</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">2 tasks are blocked</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Asana →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Task Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:14px;"><div style="display:flex;align-items:start;gap:12px;margin-bottom:12px;"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:14px;">✓</span></div><div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#e4e4e7;margin-bottom:4px;">Review homepage redesign</div><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:8px;">Marketing Site project</div><div style="display:flex;gap:8px;flex-wrap:wrap;"><span style="padding:3px 10px;border-radius:6px;font-size:10px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;display:flex;align-items:center;gap:4px;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>Sarah Chen</span><span style="padding:3px 10px;border-radius:6px;font-size:10px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Due: Next Monday</span><span style="padding:3px 10px;border-radius:6px;font-size:10px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Medium Priority</span></div></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;">Subtasks added:</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="display:flex;align-items:center;gap:6px;"><div style="width:12px;height:12px;border:1.5px solid rgba(255,255,255,0.2);border-radius:3px;"></div><span style="font-size:11px;color:rgba(255,255,255,0.6);">Check mobile responsiveness</span></div><div style="display:flex;align-items:center;gap:6px;"><div style="width:12px;height:12px;border:1.5px solid rgba(255,255,255,0.2);border-radius:3px;"></div><span style="font-size:11px;color:rgba(255,255,255,0.6);">Verify brand guidelines compliance</span></div><div style="display:flex;align-items:center;gap:6px;"><div style="width:12px;height:12px;border:1.5px solid rgba(255,255,255,0.2);border-radius:3px;"></div><span style="font-size:11px;color:rgba(255,255,255,0.6);">Get stakeholder sign-off</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Sarah will be notified</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Asana →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all high-priority tasks due this week' },
+      { type:'ai', text:'Found 5 high-priority tasks due this week:', embed: embed_1 },
+      { type:'user', text:'Create a task to review the homepage redesign and assign it to Sarah' },
+      { type:'ai', text:'Task created and assigned!', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Asana', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Asana API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Asana API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Asana', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Asana';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/basecamp/index.html b/basecamp/index.html
index e4b1403..277522c 100644
--- a/basecamp/index.html
+++ b/basecamp/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Basecamp Connect — AI-Power Your Projects in 2 Clicks</title>
+  <title>MCPEngage for Basecamp — AI-Power Your Basecamp in 2 Clicks</title>
+  <meta name="description" content="Connect Basecamp to any AI model with MCPEngage. Manage projects, todos, and messages through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f8fafc',
-              100: '#f1f5f9',
-              200: '#e2e8f0',
-              300: '#cbd5e1',
-              400: '#94a3b8',
-              500: '#1D2D35',
-              600: '#18252c',
-              700: '#131d23',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,598 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #64748b 0%, #22d3ee 50%, #a78bfa 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 211, 238, 0.15), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(34, 211, 238, 0.15);
-      transform: translateY(-4px);
-      border-color: rgba(34, 211, 238, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-pulse-glow {
-      animation: pulseGlow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulseGlow {
-      0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.5); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(34, 211, 238, 0.4), 0 0 40px 0 rgba(34, 211, 238, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(34, 211, 238, 0.6), 0 0 60px 10px rgba(34, 211, 238, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(34, 211, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(34, 211, 238, 0.5), rgba(167, 139, 250, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-    }
-    .accent-gradient {
-      background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
-          <i data-lucide="mountain" class="w-5 h-5 text-white"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Basecamp Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 accent-gradient rounded-lg font-medium transition transform hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
-    <!-- Floating background elements -->
-    <div class="absolute top-40 left-10 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute bottom-20 right-10 w-96 h-96 bg-violet-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="text-center relative z-10">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Basecamp + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Basecamp</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Basecamp</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
-          The complete Basecamp MCP server. <strong class="text-white">62 tools</strong> for projects, todos, and messages. 
-          No setup. No OAuth headaches. Just connect and ship.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <a href="#pricing" class="px-8 py-4 accent-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-cyan-500/25">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 accent-gradient flex items-center justify-center text-xs font-bold">+75</div>
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Basecamp to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage projects, track todos, and stay on top of messages — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/basecamp" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">250+</strong> project teams
-          </p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/basecamp
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="folder" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="check-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about project status..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="folder" class="w-4 h-4"></i>
+                      Projects
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="check-square" class="w-4 h-4"></i>
+                      Todos
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Website Redesign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">12 todos • 4 overdue</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Behind</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Launch: 8d</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">High Priority</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Mobile App v2.0</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">24 todos • 8 done today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">On Track</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Sprint 3</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Dev</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Marketing Campaign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">6 todos • Waiting on assets</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Blocked</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Design review</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Marketing</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/basecamp.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="52">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Basecamp Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="folder-kanban" class="w-4 h-4 text-cyan-400"></i>
-            <span class="text-sm text-zinc-300">Projects</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="check-square" class="w-4 h-4 text-cyan-400"></i>
-            <span class="text-sm text-zinc-300">To-dos</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="message-square" class="w-4 h-4 text-cyan-400"></i>
-            <span class="text-sm text-zinc-300">Messages</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI PM</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Basecamp + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Project status meetings</h3>
-            <p class="text-zinc-500 mb-6">Endless check-ins. Everyone's time wasted. Progress buried in threads.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
-                </div>
-                <p class="text-white font-medium">AI summarizes progress</p>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/basecamp" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Project status mystery</p><p class="text-xs sm:text-sm text-zinc-500">You don't know what's blocked, overdue, or at risk without manually clicking into every project</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Todo scatter</p><p class="text-xs sm:text-sm text-zinc-500">Tasks buried in comments, messages, and to-do lists across different projects</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Update fatigue</p><p class="text-xs sm:text-sm text-zinc-500">Team spends more time writing status updates than doing actual work</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Message overload</p><p class="text-xs sm:text-sm text-zinc-500">Important decisions lost in 50+ unread Basecamp messages per day</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant project health</p><p class="text-xs sm:text-sm text-zinc-500">"Which projects are behind schedule?" — AI scans all projects and surfaces risks instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified todo view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's assigned to me this week?" — see everything across all projects</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-generated standups</p><p class="text-xs sm:text-sm text-zinc-500">AI pulls completed work, blockers, and next tasks — no manual status typing</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart message triage</p><p class="text-xs sm:text-sm text-zinc-500">"Summarize today's important Basecamp messages" — skip the noise, get the signal</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Drowning in Basecamp</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Basecamp organizes everything, but by the time you find what matters, the deadline has passed.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <!-- Pain Point 2 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Lost in message threads</h3>
-            <p class="text-zinc-500 mb-6">Important decisions buried. Context scattered. Nobody can find anything.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
-                </div>
-                <p class="text-white font-medium">AI finds what you need</p>
-              </div>
-            </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="eye-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Project Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't see which projects are at risk, who's overloaded, or what's blocked until the weekly check-in. By then, you're already behind and scrambling to recover.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Message Black Hole</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Critical decisions and feedback get buried under chit-chat and FYI messages. You miss important context, make uninformed calls, and frustrate your team.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Status Update Theater</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your team wastes hours writing status updates that nobody reads. Meanwhile, actual work sits incomplete because everyone's busy performing productivity.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Project Management</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Basecamp</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Basecamp API token. MCPEngage discovers projects, todos, messages, and schedules — building 52+ tools automatically. No setup complexity.</p>
           </div>
         </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Forgotten deadlines</h3>
-            <p class="text-zinc-500 mb-6">Milestones slip. No one noticed until it's too late. Scramble mode.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
-                </div>
-                <p class="text-white font-medium">Proactive milestone alerts</p>
-              </div>
-            </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"What's overdue?" "Create a todo for Sarah to review the homepage." "Summarize the design feedback thread." Your AI understands Basecamp and responds instantly.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: generate daily project health reports, flag blocked todos, auto-summarize messages, and sync Basecamp data to Slack or email.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Basecamp API access through one simple connection</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Basecamp</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          52+ Basecamp tools accessible through one natural-language interface.
+        </p>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="folder-kanban" class="w-7 h-7 text-cyan-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Project Management</h3>
-          <p class="text-zinc-400">Create projects, manage access, organize work — all automated.</p>
-        </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="check-square" class="w-7 h-7 text-violet-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">To-dos</h3>
-          <p class="text-zinc-400">Create lists, assign tasks, track completion automatically.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Project Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track progress, deadlines, and team capacity across all projects. "Which projects have overdue todos?"</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="message-square" class="w-7 h-7 text-orange-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Message Boards</h3>
-          <p class="text-zinc-400">Post updates, discussions, and announcements with AI help.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Todo Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, assign, and complete tasks through conversation. "Show me all todos assigned to design team."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="calendar-days" class="w-7 h-7 text-pink-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Schedule</h3>
-          <p class="text-zinc-400">Manage milestones, events, and deadlines proactively.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Message Analysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Summarize threads, extract decisions, and surface action items. "What decisions were made in the homepage thread?"</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 55 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Campfires</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Documents</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">People</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Uploads</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Comments</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Questions</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Check-ins</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/20 text-cyan-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="relative">
-        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-violet-500/10 rounded-3xl blur-xl"></div>
-        <div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-cyan-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-cyan-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="Your phone number"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-cyan-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <!-- Success Message (hidden by default) -->
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Schedule Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor milestones, events, and deadlines. "What's on the schedule for next week?"</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const submitBtn = document.getElementById('submit-btn');
-      const successMsg = document.getElementById('success-message');
-      
-      submitBtn.disabled = true;
-      submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
-      
-      setTimeout(() => {
-        form.classList.add('hidden');
-        successMsg.classList.remove('hidden');
-      }, 1000);
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl"></div>
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/basecamp-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Basecamp MCP Server running</span>
-<span class="text-green-400">✓ 62 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Team Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See who's overloaded, who has capacity, and where bottlenecks are forming. "Who has the most open todos?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Progress Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-generate project status reports, sprint summaries, and team velocity metrics. "Send me a weekly project summary every Friday."</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Basecamp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Basecamp settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Basecamp?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 250+ project teams already automating with Basecamp Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-cyan-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
-            <i data-lucide="mountain" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to Basecamp.
           </div>
-          <span class="font-bold text-xl">Basecamp Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Basecamp?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Basecamp API access token (generated in Basecamp Settings > My Info > Apps & Integrations). MCPEngage uses the Basecamp API to create 52+ tools covering projects, todos, messages, and schedules. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Basecamp Connect. Not affiliated with Basecamp.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Basecamp data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Basecamp's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Basecamp's activity stream.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with other project tools?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Connect Basecamp + Jira, Asana, Linear, or any other MCP-enabled platform. Have AI sync todos, deadlines, and status across your entire stack automatically.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Team plans with multi-account access available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Slack, GitHub, Google Calendar, and more. Each platform gets its own MCP server. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Basecamp<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Basecamp workflows.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Basecamp is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 accent-gradient rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#f87171;text-transform:uppercase;letter-spacing:0.5px;">Overdue Projects</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 projects</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f87171;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Website Redesign</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">4 overdue todos · Launch in 8 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Behind</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q1 Marketing Campaign</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">2 overdue todos · Waiting on assets</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Blocked</span></div></div></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Todo Created</span></div></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">✓ Review homepage design</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Assigned to: Sarah · Project: Website Redesign</div><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-top:4px;">Due: Tomorrow · Notification sent</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Which projects have overdue todos?' },
+      { type:'ai', text:'2 projects have overdue todos:', embed: embed_1 },
+      { type:'user', text:'Create a todo for Sarah to review the homepage design' },
+      { type:'ai', text:'Done! Todo created in Website Redesign project:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Basecamp', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Basecamp API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Basecamp API', color:'text-green-400', delay:3000 },
+      { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Basecamp', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Basecamp';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/bigcommerce/index.html b/bigcommerce/index.html
index 38f57ba..b69a55f 100644
--- a/bigcommerce/index.html
+++ b/bigcommerce/index.html
@@ -3,31 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BigCommerce Connect — AI-Power Your Store in 2 Clicks</title>
+  <title>MCPEngage for BigCommerce — AI-Power Your BigCommerce in 2 Clicks</title>
+  <meta name="description" content="Connect BigCommerce to any AI model with MCPEngage. Manage products, orders, customers, and inventory through natural conversation. Real-time e-commerce automation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f5f3ff',
-              100: '#ede9fe',
-              200: '#ddd6fe',
-              300: '#c4b5fd',
-              400: '#a78bfa',
-              500: '#34313F',
-              600: '#2a2833',
-              700: '#201f28',
-              accent: '#6366f1',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -35,611 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 70%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(99, 102, 241, 0.4);
-    }
-    .video-glow {
-      box-shadow: 0 25px 80px rgba(99, 102, 241, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; }
-      50% { opacity: 1; }
-    }
-    .pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-      box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(99, 102, 241, 0.4), 0 0 40px 0 rgba(99, 102, 241, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.6), 0 0 60px 10px rgba(99, 102, 241, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #18181b;
-      border-radius: calc(1rem - 1px);
-    }
-    .text-glow {
-      text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
-    }
-    .stat-card {
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
-          <i data-lucide="store" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl tracking-tight">BigCommerce Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-lg font-semibold transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-4xl mx-auto text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="relative flex h-2 w-2">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
-            </span>
-            Open Source + Hosted Cloud
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text text-glow">BigCommerce</span><br>
-            to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
-            The complete BigCommerce MCP server. <strong class="text-white">112 tools</strong> for products, orders, and customers. 
-            No setup headaches. Just connect and scale.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-            <a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25 flex items-center justify-center gap-2">
-              Join the Waitlist
-              <i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
-            </a>
-            <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Social Proof -->
-          <div class="flex items-center justify-center gap-4">
-            <div class="flex -space-x-3">
-              <img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            </div>
-            <p class="text-zinc-400 text-sm">
-              Trusted by <strong class="text-white">500+</strong> e-commerce businesses
-            </p>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect BigCommerce + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">BigCommerce</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects BigCommerce to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage orders, update products, analyze sales — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/bigcommerce" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/bigcommerce
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="shopping-bag" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your BigCommerce store..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-bag" class="w-4 h-4"></i>
+                      Recent Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="package" class="w-4 h-4"></i>
+                      Products
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #10847</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • $284.97</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Processing</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">3 items</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Premium Ship</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #10846</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marcus Johnson • $127.50</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Shipped</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">2 items</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Standard</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #10845</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Emma Wilson • $512.88</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">5 items</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Payment hold</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your e-commerce operations</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/bigcommerce.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="75">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">BigCommerce Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="package-search" class="w-4 h-4 text-indigo-400"></i>
-            <span class="text-sm text-zinc-300">Products</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="shopping-cart" class="w-4 h-4 text-indigo-400"></i>
-            <span class="text-sm text-zinc-300">Orders</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-indigo-400"></i>
-            <span class="text-sm text-zinc-300">Analytics</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Commerce</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-16 items-center">
-        <div>
-          <span class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">The Problem</span>
-          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
-            Setting up BigCommerce + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-6">
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Manual product updates</p>
-                <p class="text-zinc-500 mt-1">Updating hundreds of products one by one is mind-numbing.</p>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Cart abandonment bleeds revenue</p>
-                <p class="text-zinc-500 mt-1">70% of carts are abandoned. Recovery emails are generic.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Generic promotions don't convert</p>
-                <p class="text-zinc-500 mt-1">Same discount for everyone means leaving money on the table.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="gradient-border">
-          <div class="gradient-border-inner p-8 md:p-10">
-            <div class="flex items-center gap-3 mb-8">
-              <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
-                <i data-lucide="check" class="w-6 h-6 text-white"></i>
-              </div>
-              <h3 class="text-2xl font-bold">With BigCommerce Connect</h3>
-            </div>
-            <div class="space-y-5">
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
-                <span>AI syncs catalog changes automatically</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
-                <span>Smart recovery that actually converts</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
-                <span>AI personalizes offers per customer</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
-                <span>Works with Claude, GPT, any MCP client</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
-                <span>2-click OAuth — no API key headaches</span>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
       </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/bigcommerce" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full BigCommerce API access through one simple connection</p>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="package-search" class="w-7 h-7 text-indigo-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Product Management</h3>
-          <p class="text-zinc-400">Create, update, and manage your entire catalog at scale with AI assistance.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="shopping-cart" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Order Processing</h3>
-          <p class="text-zinc-400">Track orders, manage fulfillment, and handle returns automatically.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Customer Data</h3>
-          <p class="text-zinc-400">Access profiles, order history, and preferences for personalization.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="percent" class="w-7 h-7 text-amber-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Promotions</h3>
-          <p class="text-zinc-400">Create coupons, discounts, and special offers intelligently.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 95 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Variants</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Brands</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Shipping</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Taxes</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Webhooks</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Scripts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Widgets</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/20 text-indigo-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-indigo-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
-              >
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
             
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-indigo-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone"
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
-              >
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual order processing</p><p class="text-xs sm:text-sm text-zinc-500">Check orders every hour, manually update shipping, send tracking emails one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Inventory chaos</p><p class="text-xs sm:text-sm text-zinc-500">Products go out of stock mid-sale, customers order items you don't have</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow product updates</p><p class="text-xs sm:text-sm text-zinc-500">Bulk edits require CSV exports, manual changes, re-imports that break things</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reactive customer service</p><p class="text-xs sm:text-sm text-zinc-500">Customers email asking "where's my order?" — you scramble to check BigCommerce</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email"
-                placeholder="you@company.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="shield-check" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-process everything</p><p class="text-xs sm:text-sm text-zinc-500">AI fulfills orders, updates shipping, sends notifications — zero manual work</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart inventory management</p><p class="text-xs sm:text-sm text-zinc-500">"Alert me when any product hits 10 units" — AI monitors stock 24/7</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant bulk updates</p><p class="text-xs sm:text-sm text-zinc-500">"Discount all winter jackets by 25%" — done in seconds, no CSV files</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Proactive support</p><p class="text-xs sm:text-sm text-zinc-500">AI tracks every order, answers customer questions before they ask</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl"></div>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Store Is<br><span class="text-red-400">Running You</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          BigCommerce powers your store, but you're buried in admin work instead of growing revenue.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 text-lg mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com" class="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 font-semibold transition-colors group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Stockouts = Lost Sales</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your best-selling product goes out of stock during a campaign. You don't find out until customers complain on social media. By the time you restock, the momentum is gone.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Admin Work Eats Your Day</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Processing orders, updating inventory, creating products, managing customers — you spend 4+ hours daily on tasks that AI could automate in seconds.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Slow Response = Bad Reviews</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">A customer's order is delayed. You don't know until they leave a 1-star review because you're not monitoring orders in real-time. Your rating tanks.</p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-green-400">✓ BigCommerce MCP Server running</span>
-<span class="text-green-400">✓ 112 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered E-Commerce</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your BigCommerce</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your BigCommerce API credentials. MCPEngage discovers all available endpoints and builds 75+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all pending orders over $500." "Update all t-shirt prices to $29.99." "What's my conversion rate this week?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-fulfill orders, monitor inventory, update product data, send customer notifications, and sync across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge BigCommerce</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          75+ BigCommerce tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-bag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Order Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Process, ship, refund, and track orders through conversation. "Ship all orders from today and send tracking emails."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Product Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and manage products with natural language. "Add a new product: 'Summer T-Shirt', $29.99, 100 units."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="boxes" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Inventory Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time stock monitoring with smart alerts and auto-reordering. "Alert me when any product drops below 15 units."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Access customer purchase history, lifetime value, and order patterns. "Show me VIP customers who haven't ordered in 60 days."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Sales Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track revenue, conversion rates, AOV, and product performance in real-time with natural language queries.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up triggered workflows: auto-tag orders, update product statuses, send abandoned cart emails — all hands-free.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about BigCommerce Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your BigCommerce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your BigCommerce settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What BigCommerce plans are supported?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            BigCommerce Connect works with all BigCommerce plans that have API access — Standard, Plus, Pro, and Enterprise. 
-            Some advanced features may require higher-tier plans.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-indigo-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-        Ready to AI-power your <span class="gradient-text">BigCommerce?</span>
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 500+ e-commerce businesses already automating with BigCommerce Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
-            <i data-lucide="store" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to BigCommerce.
           </div>
-          <span class="font-bold text-xl">BigCommerce Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
-          <a href="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
-          <a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to BigCommerce?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your BigCommerce store hash and API credentials (generated in Settings → API Accounts). MCPEngage uses the BigCommerce V3 API to create 75+ tools covering products, orders, customers, inventory, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 BigCommerce Connect. Not affiliated with BigCommerce.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually process orders safely?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! AI can fulfill orders, update shipping status, process refunds, and manage inventory — all with your oversight. You can set approval rules for high-value actions and review automation logs anytime.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Shopify, WooCommerce, Stripe, Klaviyo, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating BigCommerce<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of e-commerce brands using MCPEngage to supercharge their BigCommerce stores.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for BigCommerce is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full font-semibold transition-all"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">High-Value Orders</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$3,428 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#10852</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Emma Chen · $512.88</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">5 items · 2 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Shipped</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#10847</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sarah Martinez · $284.97</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">3 items · 5 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Processing</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#10841</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">David Park · $387.24</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">4 items · 1 day ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Delivered</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a855f7;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#10838</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">James Wilson · $623.15</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">7 items · 3 days ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Delivered</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Showing 4 of 12 · Avg order value: $285.67</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Alerts Configured</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">✓ Active</span></div><div style="padding:12px 14px;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><div style="flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:16px;">📦</span></div><div style="flex:1;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Low Stock Monitoring</div><div style="font-size:11px;color:rgba(255,255,255,0.4);">Watching 247 products</div></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.4);">Alert Threshold:</span><span style="color:#e4e4e7;font-weight:500;">≤ 15 units</span><span style="color:rgba(255,255,255,0.4);">Products Monitored:</span><span style="color:#e4e4e7;font-weight:500;">247 active SKUs</span><span style="color:rgba(255,255,255,0.4);">Currently Low:</span><span style="color:#ef4444;font-weight:600;">8 products need attention</span><span style="color:rgba(255,255,255,0.4);">Notification:</span><span style="color:#e4e4e7;font-weight:500;">Real-time via SMS, Email, Slack</span></div></div><div style="padding:8px 12px;background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.15);border-radius:8px;margin-bottom:10px;"><div style="font-size:10px;font-weight:600;color:#f87171;margin-bottom:6px;">⚠️ IMMEDIATE ATTENTION NEEDED:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">• Summer T-Shirt (Blue, M) — 4 units left<br>• Wireless Headphones — 7 units left<br>• Canvas Tote Bag — 9 units left</div></div><div style="padding:8px 12px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);border-radius:8px;"><div style="font-size:10px;font-weight:600;color:#60a5fa;margin-bottom:4px;">AI RECOMMENDATION:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">Based on sales velocity, Summer T-Shirt will sell out in 6 hours. Consider reordering 100 units or marking as "low stock" on product page.</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all orders over $200 from the past 7 days' },
+      { type:'ai', text:'Found 12 high-value orders this week:', embed: embed_1 },
+      { type:'user', text:'Set low stock alerts for all products under 15 units' },
+      { type:'ai', text:'Inventory monitoring activated:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: BigCommerce', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to BigCommerce API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to BigCommerce API', color:'text-green-400', delay:3000 },
+      { text:'✓ 75 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about BigCommerce', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'BigCommerce';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/calendly/index.html b/calendly/index.html
index 92a097c..3d4ebc9 100644
--- a/calendly/index.html
+++ b/calendly/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Calendly Connect — AI-Power Your Scheduling in 2 Clicks</title>
+  <title>MCPEngage for Calendly — AI-Power Your Calendly in 2 Clicks</title>
+  <meta name="description" content="Connect Calendly to any AI model with MCPEngage. Manage events, event types, and invitees through natural conversation. Automate scheduling workflows instantly.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#eff6ff',
-              100: '#dbeafe',
-              200: '#bfdbfe',
-              300: '#93c5fd',
-              400: '#60a5fa',
-              500: '#006BFF',
-              600: '#0055cc',
-              700: '#004299',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,577 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #006BFF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 107, 255, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 40px rgba(0, 107, 255, 0.15);
-      transform: translateY(-4px);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(0, 107, 255, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) rotate(0deg); }
-      50% { transform: translateY(-20px) rotate(2deg); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; transform: scale(1); }
-      50% { opacity: 0.8; transform: scale(1.05); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 107, 255, 0.4), 0 0 40px 0 rgba(0, 107, 255, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(0, 107, 255, 0.6), 0 0 60px 10px rgba(0, 107, 255, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, #006BFF, #8b5cf6, #ec4899);
-      padding: 2px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #09090b;
-      border-radius: calc(1rem - 2px);
-    }
-    .feature-icon {
-      background: linear-gradient(135deg, rgba(0, 107, 255, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
-    }
-    .bg-grid {
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
-  
-  <!-- Floating decorative elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="calendar" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Calendly Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20">
-      <div class="flex flex-col items-center text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Calendly + AI
         </div>
-        
-        <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Calendly</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Calendly</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
-          The complete Calendly MCP server. <strong class="text-white">47 tools</strong> covering events, availability, and bookings. 
-          No setup. No OAuth headaches. Just connect and automate.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-          <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </a>
-          <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Calendly to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage events, analyze bookings, and automate scheduling — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/calendly" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">2,500+</strong> scheduling pros
-          </p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/calendly
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="calendar" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="clock" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Calendly events..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="calendar" class="w-4 h-4"></i>
+                      Events
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">14</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="clock" class="w-4 h-4"></i>
+                      Event Types
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Discovery Call - Acme Corp</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • Today at 2:00 PM</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Upcoming</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">30 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Sales</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Strategy Session - TechFlow</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Michael Park • Today at 4:30 PM</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Upcoming</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">60 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Consulting</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Product Demo - StartupXYZ</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Emma Wilson • Tomorrow at 10:00 AM</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Scheduled</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">45 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Demo</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your scheduling workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/calendly.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="35">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Calendly Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="calendar-check" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Events</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Availability</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Bookings</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Calendly + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <p class="font-medium text-zinc-400">Manual calendar juggling</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
-            <p class="font-semibold text-white">AI books optimal slots for you</p>
           </div>
         </div>
-        
-        <!-- Pain Point 2 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/calendly" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
           <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <p class="font-medium text-zinc-400">Copy-pasting meeting details</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual event lookups</p><p class="text-xs sm:text-sm text-zinc-500">Log into Calendly, search for attendee name, check event details</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Copy-paste meeting prep</p><p class="text-xs sm:text-sm text-zinc-500">Pull attendee info from LinkedIn, CRM, email — paste into notes manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No-show tracking chaos</p><p class="text-xs sm:text-sm text-zinc-500">Export CSVs, count no-shows by hand, send follow-up emails individually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Event type clutter</p><p class="text-xs sm:text-sm text-zinc-500">Dozens of event types with no clear pattern of which ones get booked</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
-            <p class="font-semibold text-white">Auto-extract and act on booking data</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI instant lookup</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all events scheduled with Sarah Chen" — full history in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto meeting enrichment</p><p class="text-xs sm:text-sm text-zinc-500">AI pulls attendee context from CRM and adds notes before each call</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart no-show management</p><p class="text-xs sm:text-sm text-zinc-500">Auto-detect no-shows, send rebooking links, track patterns by event type</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Event type analytics</p><p class="text-xs sm:text-sm text-zinc-500">"Which event types have the highest show rate?" — instant insights</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Calendar Is<br><span class="text-red-400">A Black Box</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Calendly handles the booking, but you're blind to patterns, context, and opportunities hiding in your schedule.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">No-Show Nightmare</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">30% of bookings ghost you. No automatic tracking, no follow-up, no way to spot serial no-show offenders.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Black Hole</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Meeting with "John Smith" in 5 minutes. Who is he? What company? Why did he book? You scramble through emails to find out.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Analytics Desert</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Which event types convert? What times get the most bookings? You have no idea — Calendly's reports are too basic.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Scheduling</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Calendly</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Calendly API key (generated in Integrations settings). MCPEngage discovers all available endpoints and builds 35+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-            </div>
-            <p class="font-medium text-zinc-400">Missed follow-ups</p>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
           </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
-            </div>
-            <p class="font-semibold text-white">Instant post-meeting actions triggered</p>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all events scheduled this week." "Who are my top 5 most frequent bookers?" "What's my show rate for sales calls?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-enrich meeting notes with CRM data, send pre-meeting prep emails, track no-shows, and sync bookings across your stack — all running 24/7.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
-        </span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Calendly API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="calendar-check" class="w-7 h-7 text-brand-500"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Event Management</h3>
-          <p class="text-zinc-400">Create, update, cancel events. Full control over your calendar.</p>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Calendly</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          35+ Calendly tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Availability</h3>
-          <p class="text-zinc-400">Check slots, set buffers, manage scheduling rules automatically.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Event Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, cancel, and reschedule events through conversation. "Show me all events with TechFlow this month."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Invitee Data</h3>
-          <p class="text-zinc-400">Access booking details, custom questions, and attendee info.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Event Type Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Analyze which event types perform best. "Which event type has the highest show rate?"</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="webhook" class="w-7 h-7 text-orange-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Webhooks</h3>
-          <p class="text-zinc-400">React to bookings in real-time. Trigger automations instantly.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Invitee Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track attendee history, no-show patterns, and booking frequency. "Who has booked with me 3+ times?"</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ More endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Event Types</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Routing Forms</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Organizations</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">User Management</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Scheduling Links</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">One-off Meetings</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Smart Reminders</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-send custom reminders based on event type, attendee history, or time of day.</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
-        
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/calendly-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Calendly MCP Server running</span>
-<span class="text-green-400">✓ 47 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate booking trends, show rate analysis, and revenue attribution reports on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Meeting Prep</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-enrich meeting notes with attendee LinkedIn, CRM data, and past conversation history before each call.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Calendly account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Calendly settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Calendly?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join thousands of scheduling pros already automating with Calendly Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center">
-            <i data-lucide="calendar" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Calendly.
           </div>
-          <span class="font-bold text-xl">Calendly Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Calendly?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Calendly API key (generated in Integrations > API & Webhooks). MCPEngage uses the Calendly REST API to create 35+ tools covering events, event types, invitees, and webhooks. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Calendly Connect. Not affiliated with Calendly.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my scheduling data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Cal.com, Acuity, Chili Piper, Salesforce, HubSpot, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Calendly<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Calendly.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Calendly is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Today's Events</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Mar 12, 2024</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">📞</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Discovery Call</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">2:00 PM</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · Acme Corp</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">30 min</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Confirmed</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a78bfa;">💼</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Strategy Session</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">4:30 PM</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Michael Park · TechFlow</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">60 min</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Confirmed</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">🎯</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Quick Chat</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">6:00 PM</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Lisa Martinez · Freelancer</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">15 min</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Confirmed</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Total: 1h 45m booked</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Calendly →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(139,92,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#a78bfa;"></div><span style="font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:0.5px;">Meeting Prep — Sarah Chen</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2:00 PM</span></div><div style="padding:12px 14px;"><div style="margin-bottom:12px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:4px;">🏢 Acme Corp</div><div style="font-size:10px;color:rgba(255,255,255,0.4);line-height:1.4;">Enterprise SaaS · Series B · 150 employees<br>Recent news: Raised $25M Series B (Jan 2024)</div></div><div style="margin-bottom:12px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:4px;">👤 Sarah Chen — VP of Marketing</div><div style="font-size:10px;color:rgba(255,255,255,0.4);line-height:1.4;">Previously: Senior Marketing Manager at TechCorp<br>LinkedIn: 2.8K connections · Active poster</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px;margin-bottom:10px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">🎯 Meeting Intent</div><div style="font-size:10px;color:rgba(255,255,255,0.4);line-height:1.4;">Booking form: "Looking to improve our content marketing ROI. Interested in AI-powered analytics."</div></div><div style="display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">High Intent</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Enterprise</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">First Call</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Data enriched from LinkedIn, Clearbit, and CRM</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all events scheduled today with attendee details' },
+      { type:'ai', text:'You have 3 events today:', embed: embed_1 },
+      { type:'user', text:'Pull Sarah Chen\'s LinkedIn and company info for meeting prep' },
+      { type:'ai', text:'Here\'s Sarah\'s context for your 2pm call:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Calendly', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Calendly API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Calendly API', color:'text-green-400', delay:3000 },
+      { text:'✓ 35 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Calendly', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Calendly';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/chargebee/index.html b/chargebee/index.html
index b69992d..e8bc196 100644
--- a/chargebee/index.html
+++ b/chargebee/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Chargebee Connect — AI-Power Your Subscriptions in 2 Clicks</title>
+  <title>MCPEngage for Chargebee — AI-Power Your Chargebee in 2 Clicks</title>
+  <meta name="description" content="Connect Chargebee to any AI model with MCPEngage. Manage subscriptions, automate billing workflows, and get instant revenue insights through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#FF6633',
-              600: '#FF6633dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #FF6633 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF663325, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #FF663320; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF6633">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Chargebee Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF6633; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF6633"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Chargebee</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Chargebee MCP server. Billing, subscriptions, and revenue ops. <strong class="text-white">114 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF6633; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/chargebee.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF6633; color: #fff">
-            114 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Chargebee + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Chargebee + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Churn blindness</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF663330">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
-            </div>
-            <p class="text-white font-medium">AI predicts and prevents cancellations</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual payment retries</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF663330">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
-            </div>
-            <p class="text-white font-medium">Smart dunning workflows</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Revenue reporting delays</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF663330">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
-            </div>
-            <p class="text-white font-medium">Real-time MRR dashboards</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Chargebee</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Chargebee API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF663320">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Subscription Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, pause, resume subscriptions.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF663320">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Portal</h3>
-          <p class="text-zinc-400 text-sm">Manage accounts, payment methods, and billing history.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF663320">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Invoice Operations</h3>
-          <p class="text-zinc-400 text-sm">Generate, send, track invoices and payments.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF663320">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Metrics & Analytics</h3>
-          <p class="text-zinc-400 text-sm">MRR, churn, LTV — all accessible via AI.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF6633; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Chargebee to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage subscriptions, track revenue, and automate billing — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/chargebee" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/chargebee
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="repeat" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="receipt" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Chargebee subscriptions..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="repeat" class="w-4 h-4"></i>
+                      Subscriptions
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">847</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="receipt" class="w-4 h-4"></i>
+                      Invoices
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Acme Corp — Enterprise Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Renews in 12 days • $2,499/mo</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">MRR: $2,499</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">3 years</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">TechFlow — Pro Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Payment failed • $499/mo</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Dunning</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Retry: 2d</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">8 months</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">StartupXYZ — Growth Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Trial ends in 3 days • $199/mo</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Trial</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">High intent</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">14d trial</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Chargebee Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Billing</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/chargebee" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual dunning follow-ups</p><p class="text-xs sm:text-sm text-zinc-500">Chasing failed payments by hand, losing revenue to churn</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet MRR tracking</p><p class="text-xs sm:text-sm text-zinc-500">Export data weekly to Excel just to see revenue trends</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Plan change chaos</p><p class="text-xs sm:text-sm text-zinc-500">Upgrades, downgrades, prorations calculated manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Revenue leak</p><p class="text-xs sm:text-sm text-zinc-500">Missed expansion opportunities, uncaught billing errors</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered dunning</p><p class="text-xs sm:text-sm text-zinc-500">Automatic payment retry strategies and customer outreach</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time MRR insights</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's our MRR growth this month?" — instant answer</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-click plan changes</p><p class="text-xs sm:text-sm text-zinc-500">"Upgrade Acme Corp to Enterprise" — AI handles proration</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Revenue intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Proactive upsell alerts and billing anomaly detection</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Revenue Is<br><span class="text-red-400">Leaking</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Chargebee holds your revenue data hostage behind a complex dashboard and API. Your team wastes hours on manual billing tasks.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Dunning Nightmares</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Failed payments slip through the cracks. You're manually chasing customers for renewals, watching MRR evaporate because nobody caught the retry failure.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Invoicing Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Custom invoices, prorations, credits, refunds — every edge case requires manual intervention. Your finance team spends days reconciling Chargebee exports.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Expansion Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">High-usage customers hidden in usage reports. You're leaving 30% of expansion revenue on the table because you can't spot upsell signals in time.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Billing</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Chargebee</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Chargebee API key and site name. MCPEngage discovers all available endpoints and builds 45+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which subscriptions are in dunning?" "Upgrade TechFlow to the Pro plan." "What's our net MRR churn this quarter?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: flag at-risk subscriptions, send dunning alerts to Slack, generate revenue reports, and sync billing data to your CRM — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Chargebee</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ Chargebee tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Subscription Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, pause, cancel, and reactivate subscriptions through conversation. "Pause all subscriptions for startup_tier customers."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Dunning Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time failed payment tracking with AI-suggested retry strategies. "Which high-value subscriptions failed payment this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Revenue Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant MRR, ARR, churn, and LTV metrics on demand. "Show me MRR growth by plan tier this quarter."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Invoice Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate, send, and reconcile invoices with natural commands. "Send all pending invoices from last week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Plan & Addon Control</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update pricing, create new plans, and manage addons without touching the dashboard. AI handles proration logic.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Customer Lifecycle</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track trial conversions, expansion opportunities, and churn risk. "Which trial users are highest intent based on usage?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Chargebee account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Chargebee API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Chargebee settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Chargebee.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Chargebee?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Chargebee site name and an API key (generated in Chargebee Settings). MCPEngage uses the Chargebee REST API to create 45+ tools covering subscriptions, invoices, customers, plans, addons, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI modify my subscriptions?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Only if you grant permission. MCPEngage operates on an allow-list model — you control exactly which tools (read-only vs. write) your AI can access. You can enable read-only mode for safe exploration.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with Chargebee's Product Catalog 2.0?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports both Product Catalog 1.0 and 2.0. The tools auto-detect your catalog version and expose the appropriate endpoints for items, item prices, and subscriptions.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Stripe, Salesforce, HubSpot, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Chargebee?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Chargebee Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF6633; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Chargebee<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of SaaS teams using MCPEngage to supercharge their billing.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Chargebee is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Chargebee Connect. Not affiliated with Chargebee.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Dunning Alert</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$8,997 at risk</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">TechFlow Inc</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Enterprise Plan</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Failed 3 times</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Retry in 2d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$2,499/mo</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">GlobalShip Ltd</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Pro Plan + Add-ons</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Card expired</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Retry in 5d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$1,299/mo</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">DataCorp</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Enterprise + Premium Support</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Failed 2 times</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Retry tmrw</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$5,199/mo</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Total MRR at risk: $8,997</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View dunning settings →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Dunning alerts sent to Slack</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:10px;color:rgba(255,255,255,0.3);margin-bottom:6px;"><span style="font-weight:600;color:#17c3b2;">#billing-alerts</span></div><div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;">🚨 <strong>Dunning Alert:</strong> 3 high-value subscriptions ($8,997 MRR) in payment retry. TechFlow (retry in 2d), GlobalShip (retry in 5d), DataCorp (retry tmrw).</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">StartupXYZ upgraded to Pro</span></div><div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Growth → Pro</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.1);color:#4ade80;">$199 → $499</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Prorated $247</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Which subscriptions are in dunning and high-value?' },
+      { type:'ai', text:'Found 3 high-value subscriptions in dunning:', embed: embed_1 },
+      { type:'user', text:'Send dunning alerts to #billing-alerts Slack and upgrade StartupXYZ to Pro' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Chargebee', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Chargebee API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Chargebee API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Chargebee', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Chargebee';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/clickup/index.html b/clickup/index.html
index bbb0aec..b698ea0 100644
--- a/clickup/index.html
+++ b/clickup/index.html
@@ -3,28 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ClickUp Connect — AI-Power Your Projects in 2 Clicks</title>
+  <title>MCPEngage for ClickUp — AI-Power Your ClickUp in 2 Clicks</title>
+  <meta name="description" content="Connect ClickUp to any AI model with MCPEngage. Manage tasks, spaces, and projects through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f5f3ff',
-              100: '#ede9fe',
-              200: '#ddd6fe',
-              300: '#c4b5fd',
-              400: '#a78bfa',
-              500: '#7B68EE',
-              600: '#7c3aed',
-              700: '#6d28d9',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -32,620 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #7B68EE 0%, #a855f7 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(123, 104, 238, 0.2), transparent);
-    }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(123, 104, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-      border-color: rgba(123, 104, 238, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    .animate-spin-slow {
-      animation: spin 20s linear infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(123, 104, 238, 0.4), 0 0 40px 0 rgba(123, 104, 238, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(123, 104, 238, 0.6), 0 0 60px 10px rgba(123, 104, 238, 0.3); }
-    }
-    @keyframes gradient-shift {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.05);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(123, 104, 238, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .nav-blur {
-      backdrop-filter: blur(20px) saturate(180%);
-    }
-    .gradient-border {
-      position: relative;
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
     .gradient-border::before {
-      content: '';
-      position: absolute;
-      inset: 0;
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
       border-radius: inherit;
-      padding: 1px;
-      background: linear-gradient(135deg, rgba(123, 104, 238, 0.5), transparent, rgba(168, 85, 247, 0.3));
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      pointer-events: none;
-    }
-    .animated-gradient {
-      background: linear-gradient(135deg, #7B68EE, #a855f7, #ec4899, #7B68EE);
-      background-size: 300% 300%;
-      animation: gradient-shift 5s ease infinite;
-    }
-    .glow-ring {
-      position: absolute;
-      inset: -2px;
-      border-radius: inherit;
-      background: conic-gradient(from 0deg, transparent, #7B68EE, transparent, #a855f7, transparent);
-      animation: spin 4s linear infinite;
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-    .card-glow:hover .glow-ring {
-      opacity: 0.5;
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
-    <!-- Decorative spinning gradient ring -->
-    <div class="absolute top-1/3 right-10 w-32 h-32 rounded-full animate-spin-slow opacity-10" style="background: conic-gradient(from 0deg, #7B68EE, #a855f7, #ec4899, #7B68EE);"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl tracking-tight">ClickUp Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20">
-      <div class="text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text">ClickUp</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
-            The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
-            <a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
-              Join the Waitlist
-            </a>
-            <a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Social Proof -->
-          <div class="flex items-center gap-4 justify-center">
-            <div class="flex -space-x-3">
-              <img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-            </div>
-            <div>
-              <p class="text-zinc-400 text-sm">
-                Trusted by <strong class="text-white">450+</strong> teams
-              </p>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect ClickUp + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">ClickUp</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects ClickUp to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create tasks, track goals, and manage docs — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/clickup" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/clickup
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="check-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your ClickUp tasks..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="check-circle" class="w-4 h-4"></i>
+                      Tasks
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">47</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="target" class="w-4 h-4"></i>
+                      Goals
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Ship Q1 feature release</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Engineering • Due in 5 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Critical</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Sprint 12</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Complete security audit</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DevOps • Blocked</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Blocked</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">High Priority</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Compliance</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Update marketing website</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marketing • Completed today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Done</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">Published</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Content</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your project management workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="bg-zinc-900 rounded-2xl p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/clickup.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="72">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">ClickUp Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Tasks</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="folder-tree" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Projects</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="timer" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Time</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Workspace</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Pain Points -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
-        <p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="flex items-center gap-4 mb-6">
-              <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-                <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-              </div>
-              <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-              <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
-            <p class="text-zinc-500 mb-2 line-through">Task overload paralysis</p>
-            <p class="text-white font-semibold text-lg">AI prioritizes your day</p>
           </div>
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="flex items-center gap-4 mb-6">
-              <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-                <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-              </div>
-              <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-              <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
-              </div>
-            </div>
-            <p class="text-zinc-500 mb-2 line-through">Status update meetings</p>
-            <p class="text-white font-semibold text-lg">AI generates progress reports</p>
-          </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/clickup" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="flex items-center gap-4 mb-6">
-              <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-                <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-              </div>
-              <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-              <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
-              </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <p class="text-zinc-500 mb-2 line-through">Scattered project info</p>
-            <p class="text-white font-semibold text-lg">AI finds anything instantly</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Task creation overhead</p><p class="text-xs sm:text-sm text-zinc-500">Creating tasks means navigating spaces, lists, statuses, priorities, and custom fields — 3 minutes each</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Goal tracking is manual</p><p class="text-xs sm:text-sm text-zinc-500">Updating goal progress, checking targets, and syncing OKRs requires constant clicking</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Context switching hell</p><p class="text-xs sm:text-sm text-zinc-500">Jumping between tasks, docs, dashboards, and spaces just to understand project status</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Notification overload</p><p class="text-xs sm:text-sm text-zinc-500">Critical updates buried in noise, tasks slip through cracks, deadlines missed</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant task creation</p><p class="text-xs sm:text-sm text-zinc-500">"Create a task: Fix API bug, assign to Jake, due Friday, high priority" — done in 5 seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto goal tracking</p><p class="text-xs sm:text-sm text-zinc-500">AI reads completed tasks, updates goal progress, and surfaces blockers automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified workspace view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me all high-priority tasks" — instant view across all spaces and lists</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart alerts</p><p class="text-xs sm:text-sm text-zinc-500">AI surfaces critical updates, at-risk deadlines, and blockers — signal, not noise</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-zinc-400 text-lg">Full ClickUp API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
-              <i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Task Management</h3>
-            <p class="text-zinc-400 leading-relaxed">Create, update, assign tasks. Full project control.</p>
-          </div>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
-              <i data-lucide="folder-tree" class="w-7 h-7 text-pink-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Space & Folder Ops</h3>
-            <p class="text-zinc-400 leading-relaxed">Organize workspaces, manage hierarchies automatically.</p>
-          </div>
-        </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
-              <i data-lucide="timer" class="w-7 h-7 text-green-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Time Tracking</h3>
-            <p class="text-zinc-400 leading-relaxed">Log time, generate reports, track productivity.</p>
-          </div>
-        </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
-          <div class="glow-ring rounded-2xl"></div>
-          <div class="relative z-10">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
-              <i data-lucide="settings-2" class="w-7 h-7 text-blue-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Custom Fields</h3>
-            <p class="text-zinc-400 leading-relaxed">Access and update any custom data on tasks.</p>
-          </div>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 120 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Goals</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Docs</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Comments</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Checklists</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Views</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Webhooks</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@company.com"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="lock" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Lost in ClickUp</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          ClickUp has all your work, but finding and updating tasks takes longer than doing them.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layers" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Feature Overload Paralysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">ClickUp has 100 features. Your team uses 10. Finding the right task in the right space with the right filter is a daily treasure hunt.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Silent Deadline Slip</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Tasks go overdue in hidden lists. By the time you notice, the sprint is blown and the customer is asking where their feature is.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Status Tax</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every task needs status updates, time estimates, priority changes. Your team spends 2 hours daily on admin instead of shipping.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Workspace</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/clickup-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ ClickUp MCP Server running</span>
-<span class="text-green-400">✓ 134 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your ClickUp</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your ClickUp API token. MCPEngage discovers all workspaces, spaces, tasks, goals, and docs — building 72+ tools automatically. No code, no configuration.</p>
           </div>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me blocked tasks." "Update Q1 goal progress to 75%." "Create a task for the new feature." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-update goal progress, flag at-risk deadlines, sync tasks from email, and generate sprint reports.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge ClickUp</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          72+ ClickUp tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Task Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and complete tasks through conversation. "Move all in-review tasks to done."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Goal Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track OKRs, update progress, and monitor targets. "Show me all goals below 50% completion."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Doc Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create docs, search content, and link to tasks automatically. AI surfaces relevant docs by context.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Space Navigation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to all workspaces, spaces, folders, and lists. Search everywhere with natural language.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Custom Field Magic</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update custom fields, filter by values, and automate field-based workflows without clicking.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Sprint Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See task velocity, completion rates, and team capacity trends on demand.</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your ClickUp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your ClickUp settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your ClickUp?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join hundreds of teams already automating with ClickUp Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
-          Join the Waitlist
-        </a>
-        <a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center">
-            <i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to ClickUp.
           </div>
-          <span class="font-bold text-xl">ClickUp Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to ClickUp?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a ClickUp API token (generated in Settings > Apps). MCPEngage uses the ClickUp API to create 72+ tools covering tasks, spaces, goals, docs, and custom fields. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 ClickUp Connect. Not affiliated with ClickUp.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my ClickUp data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses ClickUp's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in ClickUp's activity feed, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with Jira or Asana?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use ClickUp as your source of truth and have AI sync tasks to Jira, Asana, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Jira, Asana, Trello, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating ClickUp<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their workspace.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for ClickUp is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Critical Tasks</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 tasks</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Ship Q1 feature release</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering · Due in 5 days</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">In Progress</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Complete security audit</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">DevOps · Blocked</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Blocked</span></div></div></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Task Created</span></div></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">Deploy hotfix</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">👥 Assigned: DevOps Team</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">🚨 Priority: Critical</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">📅 Due: Tomorrow</div></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all critical tasks due this week' },
+      { type:'ai', text:'Found 2 critical tasks:', embed: embed_1 },
+      { type:'user', text:'Create a task: Deploy hotfix, assign to DevOps team, critical priority, due tomorrow' },
+      { type:'ai', text:'Task created successfully:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: ClickUp', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to ClickUp API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to ClickUp API', color:'text-green-400', delay:3000 },
+      { text:'✓ 72 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about ClickUp', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'ClickUp';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/close/index.html b/close/index.html
new file mode 100644
index 0000000..3e3d859
--- /dev/null
+++ b/close/index.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCPEngage for Close CRM — AI-Power Your Close CRM in 2 Clicks</title>
+  <meta name="description" content="Connect Close CRM to any AI model with MCPEngage. Manage leads, track opportunities, automate activities, and close deals faster through natural conversation.">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+          colors: {
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
+  </style>
+</head>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+      </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Close CRM + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Close CRM</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Close CRM to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage leads, track opportunities, automate follow-ups — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/close" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/close
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="activity" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Close CRM pipeline..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="target" class="w-4 h-4"></i>
+                      Pipeline
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">23</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="activity" class="w-4 h-4"></i>
+                      Activities
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Acme Corp — Enterprise Deal</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$45,000 MRR • Demo Stage</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Hot</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close date: 7 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">95% confidence</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">TechFlow Inc — Mid-Market</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$12,000 MRR • Negotiation</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Warm</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close date: 14 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">80% confidence</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">StartupXYZ — SMB</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$3,500 MRR • Proposal Sent</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Qualified</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close date: 21 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">60% confidence</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Close CRM Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Sales</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/close" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual pipeline reviews</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours each week reviewing every deal, hunting for stalled opportunities</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Missed follow-ups</p><p class="text-xs sm:text-sm text-zinc-500">Tasks slip through the cracks, leads go cold, and deals die from neglect</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Context switching hell</p><p class="text-xs sm:text-sm text-zinc-500">Jump between Close, email, calendar, and Slack to piece together deal status</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow reporting</p><p class="text-xs sm:text-sm text-zinc-500">Wait for sales ops to pull reports, by then the insights are outdated</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI monitors your pipeline</p><p class="text-xs sm:text-sm text-zinc-500">Get instant alerts on stalled deals, overdue tasks, and opportunities at risk</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Never miss a follow-up</p><p class="text-xs sm:text-sm text-zinc-500">AI schedules calls, sends emails, and creates tasks automatically based on deal stage</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One conversation interface</p><p class="text-xs sm:text-sm text-zinc-500">Ask your AI about any lead, opportunity, or activity — it knows everything</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me deals closing this month" — get real-time reports in seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Pipeline Is<br><span class="text-red-400">Leaking Revenue</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Close CRM tracks every detail, but your team is drowning in manual work and missing deals.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Deals Stall Silently</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Opportunities sit in your pipeline for weeks with no activity. By the time you notice, the prospect has gone with a competitor who stayed engaged.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Admin Kills Selling Time</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your reps spend 3+ hours daily logging calls, updating fields, and managing tasks. That's 60% of their day NOT selling.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Forecast Guesswork</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your pipeline report says $500K closing this quarter, but which deals are real? Manual reviews can't keep up with deal velocity.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sales</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Close CRM</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Close API key. MCPEngage discovers all available endpoints and builds 55+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all deals closing this month." "Schedule a follow-up call with Acme Corp." "What's my win rate for enterprise deals?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-update deal stages, send follow-up sequences, flag at-risk opportunities, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Close CRM</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Close CRM tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Lead Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and qualify leads through conversation. "Add Sarah from Acme Corp as a new enterprise lead."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Opportunity Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor deal progress, update stages, and forecast revenue. "Show me all deals in negotiation stage over $10K."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="phone" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Activity Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Schedule calls, log emails, create tasks automatically. "Set up a discovery call with TechFlow next Tuesday."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Email Sequences</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send personalized email sequences and track engagement. "Start the enterprise nurture sequence for Acme Corp."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Pipeline Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate win rate reports, revenue forecasts, and activity metrics on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI monitors your pipeline 24/7 and alerts you to stalled deals, overdue tasks, and at-risk opportunities.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Close CRM.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Close CRM?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Close API key (generated in Settings → API Keys). MCPEngage uses the Close API to create 55+ tools covering leads, opportunities, activities, emails, calls, tasks, and reporting. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually update my CRM?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Your AI can create leads, update deal stages, log activities, send emails, and schedule tasks — all through natural language commands. You maintain full oversight and can review actions before they execute.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Zendesk, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Close CRM<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of sales teams using MCPEngage to supercharge their Close CRM.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Close CRM is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Closing This Month</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$127K total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Acme Corp</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">$45,000 MRR</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Demo Stage · Closes in 7 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">95%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Hot</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">DataFlow Corp</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">$28,500 MRR</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Contract Sent · Closes in 10 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">90%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Won</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">TechFlow Inc</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">$12,000 MRR</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Negotiation · Closes in 14 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">80%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Warm</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">CloudScale</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">$18,200 MRR</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Proposal · Closes in 18 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;">70%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#93c5fd;text-transform:uppercase;">Qualified</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a855f7;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">GrowthLabs</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">$23,500 MRR</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Discovery · Closes in 25 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(168,85,247,0.15);color:#c084fc;">65%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(168,85,247,0.15);color:#c084fc;text-transform:uppercase;">Active</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Weighted forecast: $101,250</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View pipeline →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Call Scheduled</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">✓ Saved</span></div><div style="padding:12px 14px;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><div style="flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:16px;">📞</span></div><div style="flex:1;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Discovery Call — Acme Corp</div><div style="font-size:11px;color:rgba(255,255,255,0.4);">Sarah Martinez (VP of Sales)</div></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.4);">When:</span><span style="color:#e4e4e7;font-weight:500;">Tuesday, Jan 14 at 2:00 PM EST</span><span style="color:rgba(255,255,255,0.4);">Duration:</span><span style="color:#e4e4e7;font-weight:500;">30 minutes</span><span style="color:rgba(255,255,255,0.4);">Deal:</span><span style="color:#e4e4e7;font-weight:500;">$45,000 MRR · Demo Stage</span></div></div><div style="padding:8px 12px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);border-radius:8px;"><div style="font-size:10px;font-weight:600;color:#60a5fa;margin-bottom:4px;">AI-GENERATED AGENDA:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">• Review demo feedback from last week<br>• Address security/compliance questions<br>• Discuss implementation timeline<br>• Present pricing options for 50-seat deployment</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Calendar invite sent to Sarah</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in Close →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me deals closing this month over $10K' },
+      { type:'ai', text:'Found 5 opportunities closing in the next 30 days:', embed: embed_1 },
+      { type:'user', text:'Schedule a follow-up call with Acme Corp for next Tuesday' },
+      { type:'ai', text:'Call scheduled! Here are the details:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Close CRM', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Close API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Close API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Close CRM', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Close CRM';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/closebot/index.html b/closebot/index.html
index fc585c0..1ef84d7 100644
--- a/closebot/index.html
+++ b/closebot/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CloseBot Connect — AI-Power Your AI Sales Closer in 2 Clicks</title>
+  <title>MCPEngage for CloseBot — AI-Power Your CloseBot in 2 Clicks</title>
+  <meta name="description" content="Connect CloseBot to any AI model with MCPEngage. Automate conversations, manage campaigns, and close more deals through natural language.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#7C3AED',
-              600: '#7C3AEDdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #7C3AED 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #7C3AED25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #7C3AED20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7C3AED">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">CloseBot Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #7C3AED; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #7C3AED"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">CloseBot</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete CloseBot MCP server. AI-powered qualification and booking. <strong class="text-white">64 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #7C3AED; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/closebot.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #7C3AED; color: #fff">
-            64 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect CloseBot + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up CloseBot + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Leads going cold</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7C3AED30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
-            </div>
-            <p class="text-white font-medium">AI responds within 60 seconds</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Low SDR capacity</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7C3AED30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
-            </div>
-            <p class="text-white font-medium">AI handles 10x volume</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Missed qualification questions</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7C3AED30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
-            </div>
-            <p class="text-white font-medium">AI never forgets to ask</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">CloseBot</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full CloseBot API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7C3AED20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Lead Qualification</h3>
-          <p class="text-zinc-400 text-sm">AI asks the right questions and scores leads.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7C3AED20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Call Booking</h3>
-          <p class="text-zinc-400 text-sm">Schedule demos, consultations, and follow-ups.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7C3AED20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Conversation History</h3>
-          <p class="text-zinc-400 text-sm">Access full transcripts and engagement data.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7C3AED20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">CRM Sync</h3>
-          <p class="text-zinc-400 text-sm">Auto-update your CRM with qualified leads and notes.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #7C3AED; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects CloseBot to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage sales conversations, trigger campaigns, and analyze leads — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/closebot" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/closebot
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="bot" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="megaphone" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your CloseBot conversations..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="bot" class="w-4 h-4"></i>
+                      Active Chats
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="megaphone" class="w-4 h-4"></i>
+                      Campaigns
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Demo Request Follow-up</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Martinez • 5m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Hot Lead</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Engaged</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Pricing Question Chain</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">David Kim • 23m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Qualified</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">6 msgs</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Mid-Market</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Feature Discovery</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Emma Chen • 1h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Nurture</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">4 msgs</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">SMB</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">CloseBot Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Sales</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/closebot" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual conversation monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Check CloseBot dashboard every hour to see which leads are responding</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Copy-paste responses</p><p class="text-xs sm:text-sm text-zinc-500">Jump between CloseBot and your CRM to understand lead context</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Delayed campaign launches</p><p class="text-xs sm:text-sm text-zinc-500">Wait for dev team to set up new conversation flows and triggers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost hot leads</p><p class="text-xs sm:text-sm text-zinc-500">Miss high-intent responses buried in notification overload</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI monitors all conversations</p><p class="text-xs sm:text-sm text-zinc-500">Get instant alerts when hot leads respond or show buying signals</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Full context in one chat</p><p class="text-xs sm:text-sm text-zinc-500">Ask your AI about any lead — it pulls conversation history, campaign data, and engagement scores</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Launch campaigns instantly</p><p class="text-xs sm:text-sm text-zinc-500">"Start a follow-up campaign for demo requests" — AI creates and deploys it</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Never miss a hot lead</p><p class="text-xs sm:text-sm text-zinc-500">AI flags high-intent conversations and suggests next actions automatically</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Sales Bots Are<br><span class="text-red-400">Running Blind</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          CloseBot automates conversations, but you still manually monitor, analyze, and optimize everything.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="eye-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">No Real-Time Visibility</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Leads are engaging with your bots right now, but you won't know until you check the dashboard. By the time you see a hot lead, they've gone cold.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Campaign Setup Takes Days</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every new campaign requires manual configuration, testing, and deployment. Your team can't iterate fast enough to keep up with changing buyer behavior.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shuffle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Scattered Everywhere</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Lead scores in your CRM, conversation history in CloseBot, engagement data in analytics — you waste hours piecing together the full picture.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sales Automation</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your CloseBot</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your CloseBot API key. MCPEngage discovers all available endpoints and builds 45+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all hot leads from this week's campaign." "Start a follow-up sequence for non-responders." "What's our average response time?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: monitor all active conversations, flag high-intent leads, launch campaigns based on behavior triggers, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge CloseBot</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ CloseBot tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Conversation Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor all active conversations, analyze sentiment, and flag high-intent leads. "Show me conversations mentioning pricing in the last hour."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="megaphone" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Campaign Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, launch, and optimize campaigns through conversation. "Start a re-engagement campaign for dormant enterprise leads."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Lead Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to lead scores, conversation history, engagement patterns, and buying signals in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Trigger Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up behavioral triggers and auto-responses with natural language. "Send a demo link when leads ask about features."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate conversion reports, response time metrics, and campaign performance analysis on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI monitors all conversations and alerts you when hot leads appear, urgent questions arise, or campaigns need attention.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your CloseBot account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your CloseBot API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your CloseBot settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to CloseBot.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to CloseBot?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your CloseBot API key (generated in your account settings). MCPEngage uses the CloseBot API to create 45+ tools covering conversations, campaigns, leads, triggers, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually launch campaigns?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Your AI can create new campaigns, modify conversation flows, set triggers, and deploy sequences — all through natural language commands. You maintain full oversight and can review actions before they execute.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Zendesk, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your CloseBot?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with CloseBot Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7C3AED; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating CloseBot<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of sales teams using MCPEngage to supercharge their AI sales automation.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for CloseBot is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 CloseBot Connect. Not affiliated with CloseBot.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Hot Leads</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">🔥</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Martinez</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">TechVentures Inc</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Last msg: 5m ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Score: 95</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Enterprise</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">⚡</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">David Kim</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Growth Labs</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Last msg: 23m ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Score: 88</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Mid-Market</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">🔥</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Jennifer Lopez</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">DataFlow Corp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Last msg: 38m ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Score: 92</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Enterprise</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">⚡</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Marcus Johnson</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">CloudScale</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Last msg: 1h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Score: 85</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Mid-Market</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Sarah mentioned 'budget approved' in her last message</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Campaigns Launched</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 active</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Martinez — Enterprise Demo Path</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;margin-bottom:6px;">3-step sequence based on budget approval signal:</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#22c55e;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Day 1: Executive demo invite (sent now)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#9ca3af;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Day 3: ROI calculator + case study</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#9ca3af;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Day 5: Custom proposal offer</span></div></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">David Kim — Mid-Market Nurture</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;margin-bottom:6px;">4-step sequence based on pricing inquiry:</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#22c55e;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Day 1: Pricing tiers breakdown (sent now)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#9ca3af;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Day 2: Customer testimonials video</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#9ca3af;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Day 4: Limited-time discount offer</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:#9ca3af;">→</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Day 7: Final call + urgency nudge</span></div></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me hot leads from the demo request campaign' },
+      { type:'ai', text:'Found 4 high-intent leads from your demo campaign:', embed: embed_1 },
+      { type:'user', text:'Start a follow-up sequence for Sarah and David' },
+      { type:'ai', text:'Launched personalized follow-up campaigns:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: CloseBot', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to CloseBot API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to CloseBot API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about CloseBot', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'CloseBot';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/clover/index.html b/clover/index.html
index b6d229e..f18d0f9 100644
--- a/clover/index.html
+++ b/clover/index.html
@@ -3,28 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Clover Connect — AI-Power Your POS in 2 Clicks</title>
+  <title>MCPEngage for Clover — AI-Power Your Clover in 2 Clicks</title>
+  <meta name="description" content="Connect Clover to any AI model with MCPEngage. Manage orders, inventory, customers, and payments through natural conversation. Real-time POS insights.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f0fdf4',
-              100: '#dcfce7',
-              200: '#bbf7d0',
-              300: '#86efac',
-              400: '#4ade80',
-              500: '#43B02A',
-              600: '#3a9d25',
-              700: '#2d7a1c',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -32,618 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #43B02A 0%, #22c55e 50%, #10b981 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(67, 176, 42, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(67, 176, 42, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-      border-color: rgba(67, 176, 42, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite 2s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite 1s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4); }
-      50% { box-shadow: 0 0 40px 10px rgba(67, 176, 42, 0.6); }
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(67, 176, 42, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
-    }
-    .btn-glow {
-      box-shadow: 0 0 30px rgba(67, 176, 42, 0.4);
-      transition: all 0.3s ease;
-    }
-    .btn-glow:hover {
-      box-shadow: 0 0 50px rgba(67, 176, 42, 0.6);
-      transform: scale(1.05);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(67, 176, 42, 0.2), rgba(34, 197, 94, 0.1));
-      border: 1px solid rgba(67, 176, 42, 0.2);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4), 0 0 40px 0 rgba(67, 176, 42, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(67, 176, 42, 0.6), 0 0 60px 10px rgba(67, 176, 42, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Ambient Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 -right-32 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Clover Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-3xl mx-auto text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-          <span>Open Source + Hosted</span>
-          <span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Clover + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Clover</span><br>to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Clover</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
-          The complete Clover MCP server. <strong class="text-white">78 tools</strong> for orders, inventory, and payments. 
-          No OAuth headaches. Just connect and automate your POS.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
-          <a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
-            <i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
-              +50
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Clover to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage orders, track inventory, analyze sales — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/clover" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/clover
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="shopping-cart" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Clover POS..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-cart" class="w-4 h-4"></i>
+                      Today's Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">47</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="package" class="w-4 h-4"></i>
+                      Inventory
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #8421 — Table 12</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">2 Burgers, 1 Fries • $32.47</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Open</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Dine-in</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">12m ago</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #8420 — Online</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Pickup • $58.92</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Ready</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">28m ago</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #8419 — Counter</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">3 Coffees, 2 Pastries • $21.50</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Complete</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Card</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">45m ago</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="text-left">
-            <div class="flex items-center gap-1 text-amber-400 text-sm">
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-            </div>
-            <p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">200+</strong> retail businesses</p>
-          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your POS operations</p>
-      </div>
-      <div class="gradient-border rounded-2xl p-2">
-        <div class="rounded-xl overflow-hidden video-glow">
-          <video autoplay loop muted playsinline class="w-full">
-            <source src="../output/clover.mp4" type="video/mp4">
-          </video>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="60">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Clover Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Orders</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Inventory</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Payments</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI POS</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Pain Points / Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Clover + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="x" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">End-of-day reconciliation</h3>
-          <p class="text-zinc-500 mb-6">Hours spent balancing registers, matching transactions, fixing discrepancies.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
-              <p class="text-white font-medium">AI balances automatically</p>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/clover" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
 
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="alert-triangle" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Stockout surprises</h3>
-          <p class="text-zinc-500 mb-6">Bestsellers run out. Customers leave. Revenue lost. Every. Single. Time.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <p class="text-white font-medium">Proactive inventory alerts</p>
-            </div>
-          </div>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="users" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">No customer insights</h3>
-          <p class="text-zinc-500 mb-6">Your best customers are anonymous. No way to reward loyalty or spot trends.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <p class="text-white font-medium">AI identifies your VIPs</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual inventory checks</p><p class="text-xs sm:text-sm text-zinc-500">Walk the stockroom with a clipboard counting items, updating spreadsheets</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">End-of-day reporting hell</p><p class="text-xs sm:text-sm text-zinc-500">Spend 45 minutes closing out, reconciling cash, and printing reports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Blind to sales trends</p><p class="text-xs sm:text-sm text-zinc-500">No idea which items are hot today until you manually tally receipts</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Customer data trapped</p><p class="text-xs sm:text-sm text-zinc-500">Loyalty info lives in Clover, but you can't act on it quickly</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time inventory alerts</p><p class="text-xs sm:text-sm text-zinc-500">"Low stock on ribeye steaks" — AI monitors levels and reorders automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant sales insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me today's top sellers" — get live reports in seconds, no manual math</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart trend analysis</p><p class="text-xs sm:text-sm text-zinc-500">AI spots patterns: "Lunch rush peaked at 12:30, prep 20% more tomorrow"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Customer intelligence on demand</p><p class="text-xs sm:text-sm text-zinc-500">"Show me VIP customers who haven't visited in 30 days" — trigger win-back campaigns</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Clover API access through one simple connection. 78 tools at your AI's fingertips.</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Order Management</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Access transactions, process refunds, view complete order history with AI.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="package" class="w-7 h-7 text-blue-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Track stock levels, set reorder alerts, manage items automatically.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="user-circle" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Data</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Build customer profiles, track purchases, manage loyalty programs.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-amber-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Reporting</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Sales trends, peak hours analysis, product performance insights.</p>
-        </div>
-      </div>
-
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Payments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Employees</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Discounts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tax Rates</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Modifiers</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Shifts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Cash Drawers</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@business.com"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="shield-check" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your POS Is<br><span class="text-red-400">Just Recording History</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Clover captures every transaction, but you're stuck reacting to problems after they happen.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Stockouts Kill Revenue</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your best-selling item runs out at lunch rush. Clover knows it's gone, but you don't find out until customers complain. Lost sales pile up while you scramble to restock.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock-alert" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Lag = Missed Opportunities</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">By the time you review yesterday's sales report, trends have shifted. You're always making decisions on old data while competitors adapt in real-time.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-spreadsheet" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Reporting Steals Labor Hours</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your managers spend hours pulling reports, reconciling numbers, and building spreadsheets. That's labor you're paying for analysis, not customer service.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle of OAuth and token management.
-            </p>
-            <a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered POS</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/clover-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-brand-400">✓ Clover MCP Server running</span>
-<span class="text-brand-400">✓ 78 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Clover</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Clover API token. MCPEngage discovers all available endpoints and builds 60+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me today's top 5 selling items." "Which items are low stock?" "What's our average ticket size this week?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: monitor inventory levels, send low-stock alerts, generate daily sales reports, flag unusual transactions, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Clover</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          60+ Clover tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-cart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Order Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View live orders, track status, and analyze order patterns. "Show me all open dine-in orders right now."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Inventory Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time stock levels, low inventory alerts, and automatic reorder triggers. "Alert me when ribeye drops below 10 units."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Access customer purchase history, loyalty points, and visit frequency. "Show me top 10 customers by lifetime value."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Payment Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track payment methods, refunds, tips, and transaction trends. "What's our cash vs card split this month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Sales Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate hourly, daily, weekly sales reports with category breakdowns and trend analysis on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Predictive Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI analyzes sales patterns and predicts inventory needs, staffing requirements, and revenue forecasts.</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Clover Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Clover account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Clover settings.
-          </p>
-        </details>
-
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Which Clover devices are supported?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Clover Connect works with all Clover devices — Station, Mini, Flex, and Go. The API is device-agnostic, 
-            so your AI automations work across your entire setup.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- Final CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Clover?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
-        Join 200+ retail businesses already automating with Clover Connect. Be first in line when we launch.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
-          Join the Waitlist
-        </a>
-        <a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
-          <i data-lucide="calendar" class="w-5 h-5"></i>
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
-            <i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Clover.
           </div>
-          <span class="font-bold text-xl">Clover Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
-          <a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="twitter" class="w-4 h-4"></i>
-            Twitter
-          </a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Clover?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Clover API token (generated in your Clover dashboard under Account & Setup → API Tokens). MCPEngage uses the Clover REST API to create 60+ tools covering orders, inventory, customers, payments, and reporting. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually manage my inventory?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Your AI can check stock levels, set reorder points, create purchase orders, and alert you to low inventory — all through natural language. You maintain full control and can review actions before they execute.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Square, Shopify, Toast, Lightspeed, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
         </div>
       </div>
-      <div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
-        <p class="text-zinc-500 text-sm">© 2026 Clover Connect. Not affiliated with Clover Network, Inc.</p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Clover<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of restaurants and retailers using MCPEngage to supercharge their Clover POS.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Clover is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Top Sellers Today</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$2,847 revenue</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">1</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Classic Burger</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">32 sold · $12.99</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Revenue: $415.68</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Stock: 8</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Hot</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">2</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">French Fries</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">28 sold · $4.99</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Revenue: $139.72</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Stock: 42</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Good</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">3</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">House Salad</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">24 sold · $9.99</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Revenue: $239.76</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Stock: 18</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Good</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a855f7;">4</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Iced Coffee</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">22 sold · $3.99</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Revenue: $87.78</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">Stock: 65</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Good</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(236,72,153,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ec4899;">5</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Chicken Sandwich</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">18 sold · $11.99</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Revenue: $215.82</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Stock: 12</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color=#86efac;text-transform:uppercase;">Good</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">⚠️ Classic Burger stock critically low</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Reorder now →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Alert Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">✓ Active</span></div><div style="padding:12px 14px;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><div style="flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:16px;">📦</span></div><div style="flex:1;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Low Stock Alert — Classic Burger</div><div style="font-size:11px;color:rgba(255,255,255,0.4);">Trigger when inventory ≤ 5 units</div></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.4);">Item:</span><span style="color:#e4e4e7;font-weight:500;">Classic Burger (SKU: BURG-001)</span><span style="color:rgba(255,255,255,0.4);">Current Stock:</span><span style="color:#ef4444;font-weight:600;">8 units (critically low)</span><span style="color:rgba(255,255,255,0.4);">Alert Threshold:</span><span style="color:#e4e4e7;font-weight:500;">≤ 5 units</span><span style="color:rgba(255,255,255,0.4);">Notification:</span><span style="color:#e4e4e7;font-weight:500;">SMS + Email + Push</span></div></div><div style="padding:8px 12px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);border-radius:8px;"><div style="font-size:10px;font-weight:600;color:#60a5fa;margin-bottom:4px;">AI RECOMMENDATION:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">Based on sales velocity (32 sold today), you'll hit the threshold in ~2 hours during dinner rush. Consider reordering 50 units now to avoid stockout.</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me today\'s top selling items and current inventory levels' },
+      { type:'ai', text:'Here\'s your top sellers with live inventory:', embed: embed_1 },
+      { type:'user', text:'Alert me when Classic Burger stock drops below 5 units' },
+      { type:'ai', text:'Inventory alert configured:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Clover', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Clover API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Clover API', color:'text-green-400', delay:3000 },
+      { text:'✓ 60 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Clover', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Clover';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/constant-contact/index.html b/constant-contact/index.html
new file mode 100644
index 0000000..85a2f30
--- /dev/null
+++ b/constant-contact/index.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCPEngage for Constant Contact — AI-Power Your Constant Contact in 2 Clicks</title>
+  <meta name="description" content="Connect Constant Contact to any AI model with MCPEngage. Manage campaigns, automate email sequences, segment contacts through natural conversation.">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+          colors: {
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
+  </style>
+</head>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+      </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Constant Contact + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Constant Contact</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Constant Contact to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create campaigns, manage contacts, analyze performance — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/constant-contact" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/constant-contact
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="list" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Constant Contact campaigns..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="mail" class="w-4 h-4"></i>
+                      Campaigns
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="list" class="w-4 h-4"></i>
+                      Lists
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">June Newsletter</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sent to 12,458 contacts</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">42% open rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">8.5% CTR</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Summer Sale Announcement</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Scheduled for 9:00 AM tomorrow</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Scheduled</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">8,234 recipients</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">VIP List</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Re-engagement Campaign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Draft • 3,521 inactive contacts</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Draft</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">A/B test ready</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">3 variants</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="50">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Constant Contact Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Marketing</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/constant-contact" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual campaign building</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours designing emails, writing copy, and setting up segments</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Guessing at send times</p><p class="text-xs sm:text-sm text-zinc-500">No idea when your audience actually opens emails, so you just send at 9am</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet list management</p><p class="text-xs sm:text-sm text-zinc-500">Export contacts to Excel, clean data manually, re-import, hope nothing breaks</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Week-old analytics</p><p class="text-xs sm:text-sm text-zinc-500">By the time you review campaign performance, it's too late to optimize</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI builds campaigns instantly</p><p class="text-xs sm:text-sm text-zinc-500">"Create a summer sale email for VIP customers" — AI writes copy, selects template, builds segment</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart send optimization</p><p class="text-xs sm:text-sm text-zinc-500">AI analyzes open patterns and schedules campaigns when YOUR audience is most engaged</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-command list management</p><p class="text-xs sm:text-sm text-zinc-500">"Remove bounced emails and add tags to engaged contacts" — done in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time insights</p><p class="text-xs sm:text-sm text-zinc-500">"How's the newsletter performing?" — get live open rates, clicks, and engagement scores</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Email Marketing Is<br><span class="text-red-400">Stuck in Manual Mode</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Constant Contact has the features, but you're still clicking through dashboards and building campaigns by hand.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Campaign Creation Takes Hours</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every email campaign requires manual design, copy writing, list selection, scheduling, and testing. Your team can't move fast enough to stay relevant.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">List Decay Kills Deliverability</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Bounced emails, unengaged contacts, and duplicate entries pile up. You know you should clean your lists, but who has time? Your sender score suffers.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Generic Campaigns = Low Engagement</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You send the same email to everyone because segmentation is too complex. Open rates drop, unsubscribes rise, and your campaigns get ignored.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Email Marketing</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Constant Contact</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Constant Contact API key. MCPEngage discovers all available endpoints and builds 50+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Create a re-engagement campaign for inactive VIP contacts." "What's our average open rate this month?" "Add all webinar attendees to the nurture list." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: clean lists weekly, send triggered campaigns based on behavior, A/B test subject lines, and sync data across your marketing stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Constant Contact</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          50+ Constant Contact tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Campaign Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, schedule, and send campaigns through conversation. "Send a summer sale email to all VIP customers tomorrow at 10am."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Smart Contact Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Segment, tag, and manage contacts with natural language. "Show me all contacts who opened last month but didn't click."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="list" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">List Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Build dynamic lists based on behavior, engagement, and custom criteria. "Create a list of engaged contacts from California."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">AI Copy Generation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate email subject lines, body copy, and CTAs optimized for your audience. "Write a promotional email about our new product launch."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Performance Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track open rates, click rates, bounces, and conversions in real-time with natural language queries.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Triggered Campaigns</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up behavior-based email sequences that send automatically. "Welcome series for new subscribers, 3 emails over 7 days."</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Constant Contact.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Constant Contact?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Constant Contact API key (generated in your account under Settings → API Keys). MCPEngage uses the Constant Contact V3 API to create 50+ tools covering campaigns, contacts, lists, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually write good email copy?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! AI analyzes your past campaigns, brand voice, and audience engagement patterns to generate on-brand copy. You maintain full control — review, edit, and approve before sending.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Mailchimp, HubSpot, ActiveCampaign, Salesforce, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Constant Contact<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of marketers using MCPEngage to supercharge their email campaigns.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Constant Contact is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(59,130,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#3b82f6;"></div><span style="font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:0.5px;">Recent Campaigns</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 30 days</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">✓</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">June Newsletter</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 2 days ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12,458 sent</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">42% open</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;">8.5% CTR</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Great</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">✓</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Flash Sale Alert</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 1 week ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">8,234 sent</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">35% open</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;">12.2% CTR</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Good</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Product Update</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 2 weeks ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">15,892 sent</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">18% open</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">2.1% CTR</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Low</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Avg open rate: 31.7% (↑ 12% vs last month)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View details →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Campaign Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Draft</span></div><div style="padding:12px 14px;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><div style="flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:16px;">💌</span></div><div style="flex:1;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">We Miss You! Special Offer Inside</div><div style="font-size:11px;color:rgba(255,255,255,0.4);">Re-engagement campaign</div></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.4);">Audience:</span><span style="color:#e4e4e7;font-weight:500;">3,521 inactive contacts (90+ days)</span><span style="color:rgba(255,255,255,0.4);">Subject A:</span><span style="color:#e4e4e7;font-weight:500;">"We Miss You! 20% Off Your Next Order"</span><span style="color:rgba(255,255,255,0.4);">Subject B:</span><span style="color:#e4e4e7;font-weight:500;">"Still Interested? Here's What You've Missed"</span><span style="color:rgba(255,255,255,0.4);">Send Time:</span><span style="color:#e4e4e7;font-weight:500;">Tuesday 10:30 AM (optimal for this segment)</span></div></div><div style="padding:8px 12px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);border-radius:8px;margin-bottom:10px;"><div style="font-size:10px;font-weight:600;color:#60a5fa;margin-bottom:4px;">AI-GENERATED PREVIEW:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hey [FirstName], we noticed you haven't visited in a while. We've missed you! As a thank you for being part of our community, here's an exclusive 20% discount code..."</div></div><div style="display:flex;gap:6px;"><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;border:none;cursor:pointer;">Send Test</button><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;border:none;cursor:pointer;">Schedule Send</button></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me the performance of my last 3 campaigns' },
+      { type:'ai', text:'Here\'s your recent campaign performance:', embed: embed_1 },
+      { type:'user', text:'Create a re-engagement campaign for contacts who haven\'t opened in 90 days' },
+      { type:'ai', text:'Campaign created! Here\'s what I built:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Constant Contact', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Constant Contact API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Constant Contact API', color:'text-green-400', delay:3000 },
+      { text:'✓ 50 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Constant Contact', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Constant Contact';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/docusign/index.html b/docusign/index.html
index a2fe3de..02778ba 100644
--- a/docusign/index.html
+++ b/docusign/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>DocuSign Connect — AI-Power Your E-Signatures in 2 Clicks</title>
+  <title>MCPEngage for DocuSign — AI-Power Your DocuSign in 2 Clicks</title>
+  <meta name="description" content="Connect DocuSign to any AI model with MCPEngage. Send envelopes, track signatures, and automate document workflows through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#FFCE00',
-              600: '#FFCE00dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #FFCE00 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FFCE0025, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #FFCE0020; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FFCE00">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">DocuSign Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FFCE00; color: #000">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #FFCE00"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">DocuSign</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete DocuSign MCP server. Envelopes, templates, and workflows. <strong class="text-white">92 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FFCE00; color: #000">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/docusign.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FFCE00; color: #000">
-            92 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect DocuSign + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up DocuSign + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Contract follow-up chaos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFCE0030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
-            </div>
-            <p class="text-white font-medium">AI sends smart reminders</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual document prep</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFCE0030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
-            </div>
-            <p class="text-white font-medium">Auto-fill from your CRM</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Lost in pending signatures</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFCE0030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
-            </div>
-            <p class="text-white font-medium">AI prioritizes by value</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">DocuSign</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full DocuSign API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFCE0020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Envelope Management</h3>
-          <p class="text-zinc-400 text-sm">Send, track, void, and resend signature requests.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFCE0020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Template Operations</h3>
-          <p class="text-zinc-400 text-sm">Create and use templates for common documents.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFCE0020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Signer Management</h3>
-          <p class="text-zinc-400 text-sm">Manage recipients, routing, and signing order.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFCE0020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Status Tracking</h3>
-          <p class="text-zinc-400 text-sm">Real-time updates on signatures, views, and completion.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FFCE00; color: #000">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects DocuSign to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Send contracts, track signatures, and automate signing workflows — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/docusign" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/docusign
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="file-signature" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="pen-tool" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="clock" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your DocuSign envelopes..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-signature" class="w-4 h-4"></i>
+                      Envelopes
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">7</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Templates
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">NDA - Acme Corp</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sent 2h ago • 1/2 signed</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Expires in 5 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Legal</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Employment Agreement</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sent 1d ago • 0/1 signed</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Waiting</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Expires in 13 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">HR</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Service Agreement - Q1</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Completed 3h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Signed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">All parties signed</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Sales</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="38">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">DocuSign Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Access</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/docusign" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual envelope creation</p><p class="text-xs sm:text-sm text-zinc-500">Upload PDF, add signers, place signature fields — 15 minutes per contract</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost in email threads</p><p class="text-xs sm:text-sm text-zinc-500">"Did they sign yet?" Check email, check DocuSign, send follow-up... repeat</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Template chaos</p><p class="text-xs sm:text-sm text-zinc-500">50+ templates scattered across folders, nobody knows which version is current</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Missed expirations</p><p class="text-xs sm:text-sm text-zinc-500">Contracts expire unsigned, deals stall, legal gets angry</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered sending</p><p class="text-xs sm:text-sm text-zinc-500">"Send the NDA template to john@acme.com" — envelope created and sent in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant status checks</p><p class="text-xs sm:text-sm text-zinc-500">"Which contracts are waiting for signatures?" Get the full list immediately</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart template library</p><p class="text-xs sm:text-sm text-zinc-500">AI knows which template to use based on context and recipient type</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Proactive reminders</p><p class="text-xs sm:text-sm text-zinc-500">Auto-send reminders to unsigned parties, escalate expiring envelopes</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Deals Are<br><span class="text-red-400">Stuck in Limbo</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          DocuSign handles signatures, but chasing down signers and managing templates is killing your velocity.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Signature Delays</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Envelopes sit unsigned for days. You send manual reminders. Signers claim they "never got it." Deals slip to next quarter because of a signature bottleneck.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="files" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Template Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 60+ templates. Half are outdated. Nobody knows which NDA version is correct. Sales uses the wrong contract and legal has to re-send everything.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Chase-Downs</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Spend hours each week checking envelope status, sending follow-up emails, and pinging Slack to ask "did they sign yet?" It's 2025, this should be automated.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Signatures</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your DocuSign</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your DocuSign OAuth credentials. MCPEngage discovers all envelopes, templates, and recipients, building 38+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Send the NDA template to john@acme.com." "Which contracts are pending signature?" "Remind all signers who haven't responded in 3+ days." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-send contracts when deals close in your CRM, send reminders every 2 days, archive completed envelopes, and generate compliance reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge DocuSign</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          38+ DocuSign tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="send" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Envelope Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, void, and delete envelopes through conversation. "Send the employment agreement to sarah@company.com."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Template Library</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Access and send from your template library. "Use the standard NDA template for this client."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Status Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time envelope status and signer progress. "Which contracts are waiting for signatures?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Auto-Reminders</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send automated reminders to unsigned parties. "Remind everyone who hasn't signed in 3+ days."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="download" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Document Retrieval</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Download signed PDFs and certificates. "Get me the signed version of the Acme NDA."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Signing Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track completion rates, average signing time, and expiration trends. "Show me our contract velocity this quarter."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your DocuSign account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your DocuSign API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your DocuSign settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to DocuSign.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to DocuSign?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your DocuSign OAuth credentials (generated in DocuSign Settings → Integrations). MCPEngage uses the DocuSign eSignature REST API to create 38+ tools covering envelopes, templates, recipients, documents, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it send envelopes from templates?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage automatically discovers all your templates and makes them accessible. You can send envelopes from templates using natural language like "Send the standard NDA to john@acme.com" without touching the DocuSign UI.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including HelloSign, PandaDoc, Adobe Sign, Salesforce, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your DocuSign?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with DocuSign Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FFCE00; color: #000">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating DocuSign<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their signature workflows.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for DocuSign is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 DocuSign Connect. Not affiliated with DocuSign.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Pending Envelopes</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">NDA - Acme Corp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 2h ago · 1/2 signed</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Expires in 5d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">Pending</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Employment Agreement</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 1d ago · 0/1 signed</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Expires in 13d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;">Waiting</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Vendor Contract - TechCo</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 5d ago · 0/3 signed</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Expires in 2d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">Urgent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Consulting Agreement - Q1</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 3d ago · 1/2 signed</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Expires in 11d</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">Pending</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">1 envelope expires in 2 days</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in DocuSign →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Reminders Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:14px;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:10px;">Vendor Contract - TechCo</div><div style="display:flex;flex-direction:column;gap:8px;"><div style="display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"><div style="width:24px;height:24px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">David Chen · Legal</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">david.chen@techco.com</div></div><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Sent</span></div><div style="display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"><div style="width:24px;height:24px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Lisa Park · Finance</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">lisa.park@techco.com</div></div><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Sent</span></div><div style="display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,0.02);border-radius:6px;"><div style="width:24px;height:24px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Robert Kim · CEO</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">robert.kim@techco.com</div></div><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Sent</span></div></div><div style="margin-top:10px;padding:8px 10px;background:rgba(23,195,178,0.1);border:1px solid rgba(23,195,178,0.2);border-radius:6px;"><div style="font-size:10px;color:rgba(255,255,255,0.6);line-height:1.4;">💡 Tip: All 3 signers will receive an email reminder. Envelope expires in 2 days.</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">3 reminders sent</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View envelope →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all pending envelopes waiting for signatures' },
+      { type:'ai', text:'Found 4 envelopes waiting for signatures:', embed: embed_1 },
+      { type:'user', text:'Send a reminder to all unsigned parties on the TechCo contract' },
+      { type:'ai', text:'Reminders sent successfully!', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: DocuSign', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to DocuSign API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to DocuSign API', color:'text-green-400', delay:3000 },
+      { text:'✓ 38 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about DocuSign', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'DocuSign';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/freshbooks/index.html b/freshbooks/index.html
index a41ead1..8658d8a 100644
--- a/freshbooks/index.html
+++ b/freshbooks/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>FreshBooks Connect — AI-Power Your Invoicing in 2 Clicks</title>
+  <title>MCPEngage for FreshBooks — AI-Power Your FreshBooks in 2 Clicks</title>
+  <meta name="description" content="Connect FreshBooks to any AI model with MCPEngage. Manage invoices, expenses, and accounting through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#eff6ff',
-              100: '#dbeafe',
-              200: '#bfdbfe',
-              300: '#93c5fd',
-              400: '#60a5fa',
-              500: '#0075DD',
-              600: '#2563eb',
-              700: '#1d4ed8',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,659 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #0075DD 0%, #3b82f6 50%, #6366f1 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 117, 221, 0.25), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow:hover {
-      box-shadow: 0 0 60px rgba(0, 117, 221, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(0, 117, 221, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite 2s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite 1s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 117, 221, 0.4), 0 0 40px 0 rgba(0, 117, 221, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(0, 117, 221, 0.6), 0 0 60px 10px rgba(0, 117, 221, 0.3); }
-    }
-    @keyframes money-float {
-      0%, 100% { transform: translateY(0) rotate(0deg); }
-      25% { transform: translateY(-10px) rotate(5deg); }
-      75% { transform: translateY(-5px) rotate(-5deg); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .feature-card:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(0, 117, 221, 0.5), rgba(99, 102, 241, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    .text-shadow {
-      text-shadow: 0 0 40px rgba(0, 117, 221, 0.5);
-    }
-    .bg-grid {
-      background-image: 
-        linear-gradient(rgba(0, 117, 221, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0, 117, 221, 0.03) 1px, transparent 1px);
-      background-size: 50px 50px;
-    }
-    .money-icon {
-      animation: money-float 4s ease-in-out infinite;
-    }
-    .invoice-preview {
-      background: linear-gradient(135deg, rgba(0, 117, 221, 0.1) 0%, rgba(0, 117, 221, 0.02) 100%);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-indigo-400/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="receipt" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">FreshBooks Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
-    <div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-        Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect FreshBooks + AI
+        </div>
       </div>
-      
-      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
-        Connect <span class="gradient-text text-shadow">FreshBooks</span><br>
-        to AI in 2 Clicks
-      </h1>
-      
-      <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
-        The most comprehensive FreshBooks MCP server. <strong class="text-white">64 tools</strong> for invoices, expenses, and clients. 
-        No setup. No OAuth headaches. Just connect and automate.
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">FreshBooks</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects FreshBooks to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create invoices, track expenses, and manage clients — all through conversation.</span>
       </p>
-      
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
-          Join the Waitlist
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
         </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
-          <i data-lucide="play" class="w-5 h-5"></i>
-          Watch Demo
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/freshbooks" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
         </a>
       </div>
 
-      <!-- Social Proof -->
-      <div class="flex flex-col items-center gap-4">
-        <div class="flex -space-x-3">
-          <img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/freshbooks
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="dollar-sign" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your FreshBooks invoices..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Invoices
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="dollar-sign" class="w-4 h-4"></i>
+                      Expenses
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">January Retainer — $8,500</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Due in 3 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Overdue risk</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Recurring</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Website Redesign — $12,000</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Paid yesterday</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">100% paid</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Project</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Consulting Hours — $3,200</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • Draft</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Draft</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-700 text-zinc-400 text-[10px] xl:text-xs font-medium">Pending</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Hourly</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <p class="text-zinc-400">
-          Trusted by <strong class="text-white">400+</strong> small businesses
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="52">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">FreshBooks Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Accounting</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/freshbooks" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Invoice creation takes forever</p><p class="text-xs sm:text-sm text-zinc-500">Manually filling out client details, line items, tax rates — 15 minutes per invoice</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Expense tracking nightmare</p><p class="text-xs sm:text-sm text-zinc-500">Receipts piling up in email, forgotten billable expenses, manual categorization hell</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Cash flow blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly see who owes what, which invoices are overdue, or monthly revenue trends</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Client data chaos</p><p class="text-xs sm:text-sm text-zinc-500">Constantly switching between FreshBooks, email, and spreadsheets to find client info</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-invoice</p><p class="text-xs sm:text-sm text-zinc-500">"Create an invoice for Acme Corp: $8,500 for January retainer" — done in 5 seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto expense logging</p><p class="text-xs sm:text-sm text-zinc-500">Forward receipt emails to AI. It categorizes, extracts amounts, and logs everything automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time cash flow insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all overdue invoices" or "What's my revenue this quarter?" — instant answers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified client view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me Acme's payment history" — full financials, past invoices, and balances in one query</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          You're Losing Money to<br><span class="text-red-400">Manual Bookkeeping</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          FreshBooks has the data, but you spend hours on admin instead of growing your business.
         </p>
       </div>
-    </div>
-  </section>
-
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your invoicing workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/freshbooks.mp4" type="video/mp4">
-            </video>
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Invoices</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Expenses</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Reports</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Problem/Solution -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-12 items-center">
-        <div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Invoicing + AI shouldn't<br>
-            <span class="text-zinc-500">mean hiring a dev</span>
-          </h2>
-          <div class="space-y-5">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Chasing late payments</p>
-                <p class="text-zinc-500 text-sm mt-1">Manual follow-ups. Awkward emails. Cash flow chaos.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Manual expense entry</p>
-                <p class="text-zinc-500 text-sm mt-1">Receipts pile up. Categories forgotten. Tax time nightmare.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Tax season panic</p>
-                <p class="text-zinc-500 text-sm mt-1">Scrambling for reports. Missing deductions. Accountant stress.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
-              <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
-            </div>
-            <h3 class="text-2xl font-semibold">With FreshBooks Connect</h3>
-          </div>
-          <div class="space-y-4">
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>AI sends perfect follow-ups</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Auto-categorize expenses</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Reports ready year-round</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Works with Claude, GPT, any MCP client</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Automatic token refresh forever</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full FreshBooks API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
-            <i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Invoice Management</h3>
-          <p class="text-zinc-400">Create, send, track invoices automatically. Recurring billing built-in.</p>
-        </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
-            <i data-lucide="wallet" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Expense Tracking</h3>
-          <p class="text-zinc-400">Log expenses, attach receipts, categorize spending. Tax-ready.</p>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time Sink Tax</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You lose 10+ hours per month creating invoices, logging expenses, and chasing payments. That's billable time you'll never recover.</p>
         </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Forgotten Expenses</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Unbilled expenses slip through the cracks. By the time you remember that $500 receipt, the project is closed and you eat the cost.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cash Flow Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You don't know who's paid, who's late, or what's coming in next month. Late invoices cost you 30 days of working capital.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Accounting</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
         
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
-            <i data-lucide="users-round" class="w-7 h-7 text-cyan-400"></i>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your FreshBooks</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your FreshBooks API token. MCPEngage discovers all invoices, clients, expenses, and time entries — building 52+ tools automatically. No code, no configuration.</p>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Client Portal</h3>
-          <p class="text-zinc-400">Manage client info, payment methods, and history. Complete CRM.</p>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Create an invoice for $5K." "Show me unpaid invoices." "What expenses did I log last month?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-send invoice reminders, flag overdue payments, categorize expenses from receipts, and sync financial data across your stack.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge FreshBooks</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          52+ FreshBooks tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
-            <i data-lucide="pie-chart" class="w-7 h-7 text-amber-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Reports</h3>
-          <p class="text-zinc-400">Generate P&L, tax summaries, and cash flow reports on demand.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Smart Invoicing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, and track invoices through conversation. "Send monthly invoices to all retainer clients."</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Estimates</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Payments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Time Tracking</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Projects</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Taxes</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Retainers</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Credits</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Use Cases -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
-        <p class="text-xl text-zinc-400">Real invoicing workflows, powered by AI</p>
-      </div>
-      <div class="grid md:grid-cols-3 gap-6">
-        <div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20 hover:border-brand-500/40 transition">
-          <div class="text-4xl mb-4">📧</div>
-          <h3 class="text-lg font-semibold mb-2">Payment Reminders</h3>
-          <p class="text-zinc-400 text-sm">"Send friendly reminders to all clients with invoices overdue by 7+ days."</p>
-        </div>
-        <div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 hover:border-purple-500/40 transition">
-          <div class="text-4xl mb-4">🧾</div>
-          <h3 class="text-lg font-semibold mb-2">Expense Bot</h3>
-          <p class="text-zinc-400 text-sm">"Log this Uber receipt as a business travel expense for Project Alpha."</p>
-        </div>
-        <div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 hover:border-cyan-500/40 transition">
-          <div class="text-4xl mb-4">📊</div>
-          <h3 class="text-lg font-semibold mb-2">Financial Reports</h3>
-          <p class="text-zinc-400 text-sm">"Generate a P&L report for Q4 and highlight my biggest expense categories."</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Pricing Comparison -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Time is money</h2>
-        <p class="text-xl text-zinc-400">See how much you'll save with AI-powered invoicing</p>
-      </div>
-      <div class="grid md:grid-cols-2 gap-6">
-        <div class="p-6 rounded-2xl bg-red-500/5 border border-red-500/20">
-          <h3 class="text-lg font-semibold mb-4 text-red-400">❌ Manual Process</h3>
-          <ul class="space-y-3 text-zinc-400 text-sm">
-            <li class="flex items-center gap-2"><span class="text-red-400">•</span> 2 hours/week chasing payments</li>
-            <li class="flex items-center gap-2"><span class="text-red-400">•</span> 30 min/day on expense entry</li>
-            <li class="flex items-center gap-2"><span class="text-red-400">•</span> 8+ hours quarterly on reports</li>
-            <li class="flex items-center gap-2"><span class="text-red-400">•</span> Missed deductions & errors</li>
-          </ul>
-          <div class="mt-6 pt-4 border-t border-red-500/20">
-            <div class="text-2xl font-bold text-red-400">~15 hrs/month</div>
-            <div class="text-zinc-500 text-sm">wasted on admin</div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Expense Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log expenses from receipts, categorize automatically, and track billable vs. non-billable in one query.</p>
         </div>
-        <div class="p-6 rounded-2xl bg-brand-500/5 border border-brand-500/20">
-          <h3 class="text-lg font-semibold mb-4 text-brand-400">✅ With FreshBooks Connect</h3>
-          <ul class="space-y-3 text-zinc-400 text-sm">
-            <li class="flex items-center gap-2"><span class="text-brand-400">•</span> Auto payment reminders</li>
-            <li class="flex items-center gap-2"><span class="text-brand-400">•</span> AI categorizes expenses</li>
-            <li class="flex items-center gap-2"><span class="text-brand-400">•</span> Instant report generation</li>
-            <li class="flex items-center gap-2"><span class="text-brand-400">•</span> Smart tax optimization</li>
-          </ul>
-          <div class="mt-6 pt-4 border-t border-brand-500/20">
-            <div class="text-2xl font-bold text-brand-400">~1 hr/month</div>
-            <div class="text-zinc-500 text-sm">just oversight</div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Client Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to client payment history, outstanding balances, and project financials.</p>
         </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Time Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log billable hours, generate timesheets, and convert time entries to invoices automatically.</p>
         </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="Your phone number"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email"
-                placeholder="you@business.com"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6">
-            <i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Revenue Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time cash flow, revenue trends, and payment forecasting. "What's my projected revenue this quarter?"</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
-            </a>
-          </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/freshbooks-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-brand-400">✓ FreshBooks MCP Server running</span>
-<span class="text-brand-400">✓ 64 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Payment Reminders</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI automatically flags overdue invoices and drafts professional follow-up emails for client payment.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Is my financial data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Absolutely. We use OAuth 2.0 and never store your FreshBooks API keys. All financial data is encrypted at rest and in transit. 
-            You can revoke access anytime from your FreshBooks settings.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Can AI send invoices on my behalf?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes! With the right permissions, AI can create, customize, and send invoices. You can set up approval workflows 
-            or let AI handle routine invoices automatically while you review larger ones.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Will this work with my accountant?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Definitely. AI can generate accountant-ready reports, export data in standard formats, and ensure your 
-            books are clean year-round. Your accountant will love you.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your invoicing?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 400+ small businesses already automating with FreshBooks Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
-            <i data-lucide="receipt" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to FreshBooks.
           </div>
-          <span class="font-bold text-xl">FreshBooks Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-1">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
-          <a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to FreshBooks?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a FreshBooks OAuth token (generated in Settings > API Access). MCPEngage uses the FreshBooks API to create 52+ tools covering invoices, expenses, clients, time tracking, and payments. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 FreshBooks Connect. Not affiliated with FreshBooks.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my FreshBooks data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses FreshBooks' official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in FreshBooks' activity feed, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with QuickBooks or Xero?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use FreshBooks as your source of truth and have AI sync data to QuickBooks, Xero, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including QuickBooks, Stripe, PayPal, Slack, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating FreshBooks<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of businesses using MCPEngage to supercharge their accounting.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for FreshBooks is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-blue-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Unpaid Invoices</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$20,500 outstanding</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$12,000</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Website Redesign</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · Due in 3 days</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Sent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$8,500</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">January Retainer</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · Due in 5 days</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Sent</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Invoice Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">#INV-0047</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Acme Corp</div><div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Consulting Services</span><span style="font-size:12px;font-weight:600;color:#22c55e;">$5,000.00</span></div><div style="font-size:10px;color:rgba(255,255,255,0.3);margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.05);">Due: Feb 18, 2025 (30 days)</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all unpaid invoices over $5,000' },
+      { type:'ai', text:'Found 2 unpaid invoices totaling $20,500:', embed: embed_1 },
+      { type:'user', text:'Create an invoice for Acme Corp: $5,000 for consulting, due in 30 days' },
+      { type:'ai', text:'Invoice created and ready to send:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: FreshBooks', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to FreshBooks API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to FreshBooks API', color:'text-green-400', delay:3000 },
+      { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about FreshBooks', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'FreshBooks';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/freshdesk/index.html b/freshdesk/index.html
index a33a7b9..1b75186 100644
--- a/freshdesk/index.html
+++ b/freshdesk/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Freshdesk Connect — AI-Power Your Helpdesk in 2 Clicks</title>
+  <title>MCPEngage for Freshdesk — AI-Power Your Freshdesk in 2 Clicks</title>
+  <meta name="description" content="Connect Freshdesk to any AI model with MCPEngage. Manage tickets, contacts, and support operations through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f0fdf4',
-              100: '#dcfce7',
-              200: '#bbf7d0',
-              300: '#86efac',
-              400: '#4ade80',
-              500: '#25C16F',
-              600: '#16a34a',
-              700: '#15803d',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,594 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #25C16F 0%, #06b6d4 50%, #8b5cf6 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 193, 111, 0.15), transparent);
-    }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 40px rgba(37, 193, 111, 0.15);
-      transform: translateY(-4px);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(37, 193, 111, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(37, 193, 111, 0.5); }
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(37, 193, 111, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .video-gradient-border {
-      background: linear-gradient(135deg, rgba(37, 193, 111, 0.5), rgba(139, 92, 246, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .video-gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(37, 193, 111, 0.4), 0 0 40px 0 rgba(37, 193, 111, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(37, 193, 111, 0.6), 0 0 60px 10px rgba(37, 193, 111, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .gradient-border {
-      position: relative;
-      background: linear-gradient(135deg, rgba(37, 193, 111, 0.1), rgba(139, 92, 246, 0.1));
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
     .gradient-border::before {
-      content: '';
-      position: absolute;
-      inset: 0;
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
       border-radius: inherit;
-      padding: 1px;
-      background: linear-gradient(135deg, #25C16F, #8b5cf6);
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="headphones" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Freshdesk Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20 text-center">
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-        Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Freshdesk + AI
+        </div>
       </div>
-      
-      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
-        Connect <span class="gradient-text">Freshdesk</span><br>
-        to AI in 2 Clicks
-      </h1>
-      
-      <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
-        The most comprehensive Freshdesk MCP server. <strong class="text-white">92 tools</strong> covering 
-        tickets, agents, knowledge base & automations. No setup. Just connect.
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Freshdesk</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Freshdesk to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage tickets, update contacts, and resolve issues — all through conversation.</span>
       </p>
-      
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join the Waitlist
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
         </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
-          <i data-lucide="play" class="w-5 h-5"></i>
-          Watch Demo
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/freshdesk" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
         </a>
       </div>
 
-      <!-- Social Proof -->
-      <div class="flex flex-col items-center gap-4">
-        <div class="flex -space-x-3">
-          <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-        </div>
-        <p class="text-zinc-400">
-          Trusted by <strong class="text-white">300+</strong> support teams
-        </p>
-      </div>
-    </div>
-  </section>
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/freshdesk
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch AI resolve tickets, update knowledge base, and automate support</p>
-      </div>
-      <div class="video-gradient-border">
-        <div class="video-gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/freshdesk.mp4" type="video/mp4">
-            </video>
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="ticket" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Freshdesk tickets..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="ticket" class="w-4 h-4"></i>
+                      Tickets
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user" class="w-4 h-4"></i>
+                      Contacts
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Email integration broken</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Escalated 2 hours ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Urgent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Priority 1</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Account access issue</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Pending 4 hours</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">High</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Priority 2</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Security</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Feature request: API docs</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • Open 1 day</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Medium</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-blue-500/15 text-blue-400 text-[10px] xl:text-xs font-medium">Priority 3</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Feedback</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="ticket" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Tickets</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Agents</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Knowledge Base</span>
-          </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-12 items-center">
-        <div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Setting up Freshdesk + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-4">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">Repetitive ticket responses</p>
-                <p class="text-zinc-500">Copy-pasting the same answers 50 times a day.</p>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="48">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Freshdesk Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">SLA breaches piling up</p>
-                <p class="text-zinc-500">No proactive alerts. Tickets slip through the cracks.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">Knowledge silos everywhere</p>
-                <p class="text-zinc-500">Agents can't find the right articles fast enough.</p>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
-        <div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/freshdesk" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
           <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <h3 class="text-xl font-semibold">With Freshdesk Connect</h3>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
-          <div class="space-y-4 text-zinc-300">
-            <div class="flex items-center gap-3">
-              <i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
-              <p>AI drafts perfect replies instantly</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
-              <p>Proactive escalation alerts before SLA breach</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="book-open" class="w-5 h-5 text-brand-400"></i>
-              <p>AI surfaces relevant articles automatically</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
-              <p>Works with Claude, GPT, any MCP client</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="users" class="w-5 h-5 text-brand-400"></i>
-              <p>Multi-agent workspace support built-in</p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Ticket overload chaos</p><p class="text-xs sm:text-sm text-zinc-500">Support agents drowning in queues, urgent tickets lost in noise, SLA breaches mounting</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered customer context</p><p class="text-xs sm:text-sm text-zinc-500">Agent switches between Freshdesk, Slack, CRM, and docs just to answer one ticket</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Response time lag</p><p class="text-xs sm:text-sm text-zinc-500">By the time agent finds the answer and updates ticket, customer is already frustrated</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual triage hell</p><p class="text-xs sm:text-sm text-zinc-500">Every ticket needs manual assignment, priority, and tag updates — agents spend hours on admin</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered triage</p><p class="text-xs sm:text-sm text-zinc-500">"Route all urgent enterprise tickets to Sarah" — AI assigns, tags, and prioritizes instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified context view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me all Acme Corp tickets" — full history, past issues, and account details in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant resolutions</p><p class="text-xs sm:text-sm text-zinc-500">AI drafts responses, pulls knowledge base articles, and updates tickets automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-sentence commands</p><p class="text-xs sm:text-sm text-zinc-500">Bulk-update tickets, escalate issues, and generate reports through natural language</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Freshdesk API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="ticket" class="w-6 h-6 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Ticket Management</h3>
-          <p class="text-zinc-400">Create, update, resolve tickets with AI assistance. Full CRUD on your queue.</p>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="users" class="w-6 h-6 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Agent Workspace</h3>
-          <p class="text-zinc-400">Manage assignments, workload, and performance metrics automatically.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="book-open" class="w-6 h-6 text-cyan-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Knowledge Base</h3>
-          <p class="text-zinc-400">Search articles, suggest solutions, update docs programmatically.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="workflow" class="w-6 h-6 text-orange-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Automations</h3>
-          <p class="text-zinc-400">Trigger scenarios, dispatch rules, SLA management — all AI-controlled.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Canned Responses</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Management</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Groups</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Companies</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Time Entries</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Satisfaction Ratings</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Forums</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="Your phone number"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email"
-              placeholder="you@company.com"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6">
-          <i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Support Team Is<br><span class="text-red-400">Drowning in Tickets</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Freshdesk has the data, but your agents spend more time clicking than helping customers.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">SLA Breach Spiral</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Critical tickets slip through cracks. By the time you notice, the customer is already churned and leaving a 1-star review.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layers" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Switching Tax</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Agents need 5+ tabs open to resolve one ticket. Every lookup kills momentum and slows first-response time by 40%.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Triage Nightmare</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every ticket needs manual review, assignment, and categorization. Your team spends 3 hours daily on admin instead of solving problems.</p>
+        </div>
+      </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Support</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/freshdesk-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd freshdesk && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Freshdesk</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Freshdesk API key. MCPEngage discovers all tickets, contacts, companies, and forums — building 48+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all urgent enterprise tickets." "Escalate ticket #4521 to engineering." "What's my team's average response time today?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-assign tickets by keyword, flag SLA breaches, generate daily triage reports, and sync support data across your stack.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-brand-400">✓ Freshdesk MCP Server running</span>
-<span class="text-brand-400">✓ 92 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Freshdesk</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          48+ Freshdesk tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="ticket" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Smart Ticket Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and close tickets through conversation. "Bulk-close all resolved tickets from last week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to full customer history, all tickets, satisfaction scores, and interaction timeline in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">SLA Monitoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time SLA compliance, breach alerts, and response time analytics. "Which tickets are about to breach SLA?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Auto-Triage</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI reads ticket content, assigns priority, routes to correct agent, and suggests canned responses automatically.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="book-open" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Knowledge Base Sync</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull relevant KB articles based on ticket content. "Find solutions for password reset issues."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Support Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate CSAT reports, ticket volume trends, and agent performance dashboards on demand.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Freshdesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Freshdesk settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your support?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 300+ support teams already automating with Freshdesk Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
-            <i data-lucide="headphones" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Freshdesk.
           </div>
-          <span class="font-bold text-xl">Freshdesk Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Freshdesk?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Freshdesk API key (generated in Profile Settings > API). MCPEngage uses the Freshdesk API to create 48+ tools covering tickets, contacts, companies, forums, and satisfaction surveys. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Freshdesk Connect. Not affiliated with Freshdesk.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Freshdesk data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Freshdesk's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Freshdesk's activity timeline, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with Zendesk or other helpdesks?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use Freshdesk as your source of truth and have AI sync data to Zendesk, Intercom, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Zendesk, Jira, Slack, HubSpot, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Freshdesk<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of support teams using MCPEngage to supercharge their helpdesk.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Freshdesk is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Urgent Tickets</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 open</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Email integration broken</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · 2 hours ago</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA: 1h left</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Priority 1</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Account access issue</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · 4 hours ago</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">SLA: 4h left</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Priority 2</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Ticket Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">#4521</span></div><div style="padding:10px 14px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:8px;">Email integration broken — Acme Corp</div><div style="display:flex;flex-direction:column;gap:6px;"><div style="display:flex;align-items:center;gap:8px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Group:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:#71717a;text-decoration:line-through;">Support</span><span>→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Engineering</span></div><div style="display:flex;align-items:center;gap:8px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Priority:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:#71717a;text-decoration:line-through;">Medium</span><span>→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Urgent</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all urgent tickets assigned to me' },
+      { type:'ai', text:'Found 3 urgent tickets:', embed: embed_1 },
+      { type:'user', text:'Escalate ticket #4521 to engineering and set priority to urgent' },
+      { type:'ai', text:'Done! Ticket escalated:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Freshdesk', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Freshdesk API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Freshdesk API', color:'text-green-400', delay:3000 },
+      { text:'✓ 48 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Freshdesk', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Freshdesk';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/ghl/index.html b/ghl/index.html
index 8008a9e..f21ca67 100644
--- a/ghl/index.html
+++ b/ghl/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>GoHighLevel Connect — AI-Power Your Marketing Platform in 2 Clicks</title>
+  <title>MCPEngage for GoHighLevel — AI-Power Your GoHighLevel in 2 Clicks</title>
+  <meta name="description" content="Connect GoHighLevel to any AI model with MCPEngage. Manage contacts, automate funnels, and track campaigns through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#007BFF',
-              600: '#007BFFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #007BFF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #007BFF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #007BFF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #007BFF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">GoHighLevel Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #007BFF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #007BFF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">GoHighLevel</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete GoHighLevel MCP server. Funnels, pipelines, and automation. <strong class="text-white">156 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #007BFF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/ghl.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #007BFF; color: #fff">
-            156 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect GoHighLevel + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up GoHighLevel + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Platform overwhelm</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #007BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
-            </div>
-            <p class="text-white font-medium">AI navigates 12+ tools for you</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual follow-up sequences</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #007BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
-            </div>
-            <p class="text-white font-medium">AI-optimized multi-channel campaigns</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Client onboarding delays</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #007BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
-            </div>
-            <p class="text-white font-medium">Instant automation setup</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">GoHighLevel</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full GoHighLevel API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #007BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Contact & Pipeline</h3>
-          <p class="text-zinc-400 text-sm">Manage leads, opportunities, and deal stages.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #007BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Funnel & Website</h3>
-          <p class="text-zinc-400 text-sm">Update pages, forms, and conversion tracking.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #007BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Automation Workflows</h3>
-          <p class="text-zinc-400 text-sm">Trigger campaigns, SMS, emails, and tasks.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #007BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Calendar & Booking</h3>
-          <p class="text-zinc-400 text-sm">Manage appointments, availability, and scheduling.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #007BFF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects GoHighLevel to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage leads, automate workflows, and optimize campaigns — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/ghl" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/ghl
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="git-branch" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="megaphone" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="layout-template" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your GoHighLevel contacts..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Contacts
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">3,842</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="git-branch" class="w-4 h-4"></i>
+                      Pipeline
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Enterprise Lead • $45K</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Hot</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Demo Booked</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">Last contact 2h</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">James Miller</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">SMB Lead • $8K</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Warm</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Proposal Sent</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Last contact 1d</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Priya Patel</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Startup Lead • $3K</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Cold</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Nurturing</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Last contact 5d</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="68">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">GHL Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Lead Nurture</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/ghl" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual lead scoring</p><p class="text-xs sm:text-sm text-zinc-500">Sort through hundreds of contacts trying to figure out who's ready to buy</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Workflow debugging hell</p><p class="text-xs sm:text-sm text-zinc-500">Campaign not firing? Click through 15 steps to find the broken trigger</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Context switching chaos</p><p class="text-xs sm:text-sm text-zinc-500">Check GHL for leads, Gmail for emails, Slack for team updates, CRM for notes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No pipeline visibility</p><p class="text-xs sm:text-sm text-zinc-500">Which deals are stuck? Who needs follow-up? Log in and manually scan</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI lead scoring</p><p class="text-xs sm:text-sm text-zinc-500">"Show hot leads who opened 3+ emails this week" — instant prioritization</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural-language workflows</p><p class="text-xs sm:text-sm text-zinc-500">"Send SMS to contacts who didn't open yesterday's email" — done in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified command center</p><p class="text-xs sm:text-sm text-zinc-500">One AI interface for contacts, campaigns, funnels, and follow-ups</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Proactive pipeline alerts</p><p class="text-xs sm:text-sm text-zinc-500">Get notified when deals go cold, leads spike, or campaigns underperform</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Pipeline Is<br><span class="text-red-400">Leaking Revenue</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          GoHighLevel has all the tools, but leads slip through the cracks while you're clicking through dashboards.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-2" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Lead Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">3,000 contacts in your database. 200 opened emails this week. 15 booked calls. Which 10 should you focus on today? You waste an hour every morning just figuring out priorities.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="workflow" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Workflow Complexity</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Email sequences, SMS campaigns, pipeline automations, funnel triggers — one broken condition and 500 leads don't get nurtured. You discover this 3 days later when revenue tanks.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Follow-Up Failures</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Hot lead goes cold because your reminder got buried in notifications. Deal stuck in 'Proposal Sent' for 2 weeks. You only notice when the monthly report shows lost opportunities.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Marketing</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your GoHighLevel</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your GHL API key and location ID. MCPEngage discovers all contacts, pipelines, campaigns, and funnels — building 68+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show enterprise leads who engaged in the last 48 hours." "Move Sarah Chen to 'Closed Won'." "How many contacts entered the nurture funnel this week?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up smart alerts for hot leads, auto-follow-ups for stalled deals, daily pipeline reports, lead scoring updates — all running 24/7 while you focus on closing.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge GoHighLevel</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          68+ GoHighLevel tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="contact" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Contact Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search, filter, and enrich contacts with natural language. "Show contacts who opened 3+ emails but haven't booked a call."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-merge" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Pipeline Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Move deals, update stages, and track revenue through conversation. "Move all 'Demo Booked' deals to 'Proposal Sent'."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Campaign Orchestration</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Launch, pause, and analyze email/SMS campaigns instantly. "How many people clicked the CTA in yesterday's campaign?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout-list" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Funnel Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track conversion rates, identify drop-offs, and optimize performance. "Which funnel step has the lowest conversion rate?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Smart Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Build and modify workflows with natural language. "Send SMS to contacts who didn't show up for their call."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell-ring" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Revenue Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get notified when deals progress, leads go cold, or campaigns hit targets. Stay on top of your pipeline without logging in.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your GoHighLevel account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your GoHighLevel API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your GoHighLevel settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to GoHighLevel.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to GoHighLevel?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your GHL API key and location ID (found in GHL Settings → Integrations). MCPEngage uses the GoHighLevel API to create 68+ tools covering contacts, pipelines, campaigns, funnels, calendars, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually move deals and send campaigns?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your GHL account (with your permission). You can update contact stages, move pipeline deals, trigger campaigns, book appointments, and more — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including HubSpot, Salesforce, ActiveCampaign, Stripe, Shopify, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your GoHighLevel?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with GoHighLevel Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #007BFF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating GoHighLevel<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of agencies using MCPEngage to scale their marketing operations.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for GoHighLevel is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 GoHighLevel Connect. Not affiliated with GoHighLevel.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Hot Leads</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 48h</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">🔥</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Chen</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">• $45K</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Demo Booked</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Last contact 2h</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">🔥</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Michael Torres</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">• $28K</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Pricing Requested</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Last contact 8h</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">🔥</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Lisa Park</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">• $62K</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Call Scheduled</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Last contact 12h</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Total pipeline value: $135K</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Contact Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:4px;">Contact:</div><div style="font-size:13px;font-weight:600;color:#e4e4e7;">Sarah Chen</div></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Pipeline stage updated</span></div><div style="margin-left:28px;margin-bottom:10px;display:flex;gap:6px;align-items:center;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Demo Booked</span><span style="font-size:12px;color:rgba(255,255,255,0.3);">→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Proposal Sent</span></div><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Follow-up task created</span></div><div style="margin-left:28px;margin-top:4px;font-size:10px;color:rgba(255,255,255,0.4);">Scheduled for Thursday, 2:00 PM EST</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me hot leads who engaged in the last 48 hours' },
+      { type:'ai', text:'Found 4 hot leads:', embed: embed_1 },
+      { type:'user', text:'Move Sarah Chen to Proposal Sent and schedule follow-up in 2 days' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: GoHighLevel', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to GoHighLevel API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to GoHighLevel API', color:'text-green-400', delay:3000 },
+      { text:'✓ 68 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about GoHighLevel', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'GoHighLevel';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/google-console/index.html b/google-console/index.html
index 82ae95a..ba4d498 100644
--- a/google-console/index.html
+++ b/google-console/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Google Search Console Connect — AI-Power Your SEO in 2 Clicks</title>
+  <title>MCPEngage for Google Search Console — AI-Power Your Google Search Console in 2 Clicks</title>
+  <meta name="description" content="Connect Google Search Console to any AI model with MCPEngage. Monitor search performance, inspect URLs, and fix SEO issues through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#4285F4',
-              600: '#4285F4dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #4285F4 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #4285F425, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #4285F420; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #4285F4">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Google Search Console Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #4285F4; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #4285F4"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Google Search Console</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Google Search Console MCP server. Keywords, indexing, and performance. <strong class="text-white">58 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #4285F4; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/google-console.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #4285F4; color: #fff">
-            58 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Google Search Console + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Google Search Console + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">SEO data in silos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
-            </div>
-            <p class="text-white font-medium">AI connects rankings to revenue</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual keyword tracking</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
-            </div>
-            <p class="text-white font-medium">AI alerts on trending queries</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Indexing issues ignored</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
-            </div>
-            <p class="text-white font-medium">Proactive error notifications</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Google Search Console</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Google Search Console API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Search Performance</h3>
-          <p class="text-zinc-400 text-sm">Track clicks, impressions, CTR, and position by query.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Index Management</h3>
-          <p class="text-zinc-400 text-sm">Submit URLs, check indexing status, manage sitemaps.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Coverage Reports</h3>
-          <p class="text-zinc-400 text-sm">Identify errors, warnings, and excluded pages.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Core Web Vitals</h3>
-          <p class="text-zinc-400 text-sm">Monitor page experience, performance, and usability.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #4285F4; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Google Search Console to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Track rankings, analyze queries, and optimize SEO — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/google-console" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/google-console
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="search" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="link" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your search performance..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="search" class="w-4 h-4"></i>
+                      Top Queries
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">248</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Pages
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">best project management software</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">1.2K clicks • 45K impressions</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Rising</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Pos 3.2</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">CTR 2.7%</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">saas analytics tools comparison</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">840 clicks • 28K impressions</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Stable</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Pos 5.8</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">CTR 3.0%</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">customer retention strategies</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">620 clicks • 52K impressions</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Falling</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Pos 8.4</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">CTR 1.2%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="32">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">GSC Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">SEO Monitor</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/google-console" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual rank tracking</p><p class="text-xs sm:text-sm text-zinc-500">Log in daily to check if your top pages moved up or down</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet exports</p><p class="text-xs sm:text-sm text-zinc-500">Download CSVs, pivot tables, manual calculations for trends</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reactive SEO fixes</p><p class="text-xs sm:text-sm text-zinc-500">Discover indexing issues weeks after they tank your traffic</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Query guesswork</p><p class="text-xs sm:text-sm text-zinc-500">Which keywords actually drive conversions? No idea.</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Get instant alerts when rankings drop or new queries trend</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural-language insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show top 10 queries by CTR this month" — instant answers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Proactive issue detection</p><p class="text-xs sm:text-sm text-zinc-500">Catch crawl errors, mobile issues, and index problems immediately</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Conversion-linked queries</p><p class="text-xs sm:text-sm text-zinc-500">Cross-reference search data with GA4 and CRM to find money keywords</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your SEO Strategy Is<br><span class="text-red-400">Reactive</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Google Search Console shows you what happened yesterday. You need to know what's happening right now.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">48-Hour Data Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Traffic dropped Tuesday. You find out Thursday. By Friday, you've lost 3 days of organic revenue. GSC's delay makes you always one step behind.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="pie-chart" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Thousands of queries, hundreds of pages, dozens of metrics. Which number matters? What changed? You spend hours analyzing and still miss the insight.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Silent Index Issues</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Google stopped indexing your new pages 2 weeks ago. You only notice when traffic doesn't grow. Coverage errors hide in obscure dashboards.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered SEO</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Search Console</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Authorize MCPEngage with your Google account. We discover all properties, sitemaps, and performance data — building 32+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which pages dropped in rankings this week?" "Show queries with high impressions but low CTR." "Inspect URL /blog/new-post." Your AI understands and delivers insights.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate SEO Monitoring</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up daily rank checks, get Slack alerts for coverage errors, generate weekly performance reports, cross-reference with GA4 and CRM — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Search Console</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          32+ Google Search Console tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Query Analysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Find top queries by clicks, impressions, CTR, or position. "Show queries with position 5-10 and CTR below 2%."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Performance Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor clicks, impressions, and rankings over time. "Compare this week's traffic to last month."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="link-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">URL Inspection</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Check indexing status, crawl errors, and mobile usability for any page. "Inspect /product/new-launch and request indexing."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="map" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Sitemap Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Submit, update, and monitor sitemaps through conversation. "Submit sitemap at /sitemap.xml."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-alert" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Issue Detection</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time alerts for coverage errors, mobile issues, and security problems. "Show all pages with crawl errors."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">CTR Optimization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Identify high-impression, low-CTR queries to optimize titles and meta descriptions. Find quick SEO wins.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Google Search Console account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Google Search Console API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Google Search Console settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Google Search Console.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Search Console?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You authorize MCPEngage with your Google account (OAuth 2.0). We use the Search Console API to create 32+ tools covering performance data, URL inspection, sitemaps, and coverage reports. Your credentials are never stored — we use refresh tokens for secure access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually submit sitemaps and request indexing?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your Search Console properties (with your permission). You can submit sitemaps, request URL indexing, and manage property settings — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Google Analytics, SEMrush, Ahrefs, WordPress, Shopify, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Google Search Console?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Google Search Console Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4285F4; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Google Search Console<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of SEO teams using MCPEngage to dominate search rankings.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Google Search Console is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Google Search Console Connect. Not affiliated with Google Search Console.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Low CTR Queries</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 28 days</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">customer retention strategies</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">52K impr</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">CTR 1.2%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Pos 8.4</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">b2b marketing automation</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">38K impr</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">CTR 1.5%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Pos 6.8</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">sales funnel optimization</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">29K impr</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">CTR 1.8%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Pos 7.2</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Optimize titles/metas → gain ~900 clicks/month</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">URL Inspection</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">URL:</div><div style="font-size:12px;font-weight:600;color:#17c3b2;margin-bottom:10px;font-family:monospace;">/blog/saas-metrics-guide</div><div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">✓ Indexed</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">✓ Mobile OK</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Sitemap: Yes</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px 10px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:4px;">Last crawled:</div><div style="font-size:11px;color:rgba(255,255,255,0.7);">2 days ago</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Indexing requested</span></div><div style="margin-left:28px;font-size:10px;color:rgba(255,255,255,0.4);">Google will re-crawl this page soon. Check back in 24-48 hours.</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me queries with high impressions but low CTR in the last 28 days' },
+      { type:'ai', text:'Found 5 optimization opportunities:', embed: embed_1 },
+      { type:'user', text:'Inspect URL /blog/saas-metrics-guide and request indexing' },
+      { type:'ai', text:'URL inspected and indexing requested!', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Google Search Console', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Search Console API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Google Search Console API', color:'text-green-400', delay:3000 },
+      { text:'✓ 32 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Google Search Console', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Google Search Console';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/gusto/index.html b/gusto/index.html
index 0cf7f8c..c0ba83a 100644
--- a/gusto/index.html
+++ b/gusto/index.html
@@ -3,28 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Gusto Connect — AI-Power Your Payroll in 2 Clicks</title>
+  <title>MCPEngage for Gusto — AI-Power Your Gusto in 2 Clicks</title>
+  <meta name="description" content="Connect Gusto to any AI model with MCPEngage. Manage employees, payroll, benefits, and time off through natural conversation. HR automation made simple.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fef2f2',
-              100: '#fee2e2',
-              200: '#fecaca',
-              300: '#fca5a5',
-              400: '#F45D48',
-              500: '#F45D48',
-              600: '#dc2626',
-              700: '#b91c1c',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -32,572 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #F45D48 0%, #ff8a65 50%, #ffab91 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(244, 93, 72, 0.2), transparent);
-    }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(244, 93, 72, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-      border-color: rgba(244, 93, 72, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(244, 93, 72, 0.4); }
-      50% { box-shadow: 0 0 40px rgba(244, 93, 72, 0.6); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(244, 93, 72, 0.4), 0 0 40px 0 rgba(244, 93, 72, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(244, 93, 72, 0.6), 0 0 60px 10px rgba(244, 93, 72, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.05);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(244, 93, 72, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .nav-blur {
-      backdrop-filter: blur(20px) saturate(180%);
-    }
-    .gradient-border {
-      position: relative;
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
     .gradient-border::before {
-      content: '';
-      position: absolute;
-      inset: 0;
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
       border-radius: inherit;
-      padding: 1px;
-      background: linear-gradient(135deg, rgba(244, 93, 72, 0.5), transparent, rgba(244, 93, 72, 0.3));
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      pointer-events: none;
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-orange-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-orange-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="wallet" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl tracking-tight">Gusto Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20">
-      <div class="text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text">Gusto</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
-            The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
-            <a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
-              Join the Waitlist
-            </a>
-            <a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Social Proof -->
-          <div class="flex items-center gap-4 justify-center">
-            <div class="flex -space-x-3">
-              <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-              <img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
-            </div>
-            <div>
-              <p class="text-zinc-400 text-sm">
-                Trusted by <strong class="text-white">200+</strong> HR teams
-              </p>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Gusto + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Gusto</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Gusto to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage employees, run payroll, and automate HR workflows — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/gusto" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/gusto
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="dollar-sign" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shield" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="calendar-days" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Gusto employees..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="users-2" class="w-4 h-4"></i>
+                      Employees
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">47</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="dollar-sign" class="w-4 h-4"></i>
+                      Payroll
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Engineering • Full-time</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$125K/year</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">5 PTO days</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Michael Park</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marketing • Full-time</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$95K/year</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">12 PTO days</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Emma Wilson</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sales • Full-time</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">PTO</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$85K + comm</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Out until Mar 15</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your payroll workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="bg-zinc-900 rounded-2xl p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/gusto.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Gusto Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="banknote" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Payroll</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Employees</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="heart-pulse" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Benefits</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Pain Points -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
-        <p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="flex items-center gap-4 mb-6">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-            <div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
-          <p class="text-zinc-500 mb-2 line-through">Payroll deadline stress</p>
-          <p class="text-white font-semibold text-lg">AI reminds and preps everything</p>
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="flex items-center gap-4 mb-6">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-            <div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
-            </div>
-          </div>
-          <p class="text-zinc-500 mb-2 line-through">Manual onboarding tasks</p>
-          <p class="text-white font-semibold text-lg">Automated new hire workflows</p>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/gusto" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="flex items-center gap-4 mb-6">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
-            <div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
-          <p class="text-zinc-500 mb-2 line-through">Scattered employee requests</p>
-          <p class="text-white font-semibold text-lg">AI handles common HR queries</p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual payroll prep</p><p class="text-xs sm:text-sm text-zinc-500">Log into Gusto, verify hours, check PTO, approve one by one before each run</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Benefits enrollment chaos</p><p class="text-xs sm:text-sm text-zinc-500">Email PDFs back and forth, chase employees for missing forms</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered employee data</p><p class="text-xs sm:text-sm text-zinc-500">Jump between Gusto, HRIS, and spreadsheets to answer simple questions</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Time-off request email tennis</p><p class="text-xs sm:text-sm text-zinc-500">"Can I take Friday off?" — check calendar, check balance, reply manually</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI payroll review</p><p class="text-xs sm:text-sm text-zinc-500">"Show me payroll summary for next run" — AI flags anomalies instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto enrollment tracking</p><p class="text-xs sm:text-sm text-zinc-500">AI reminds employees of missing forms and auto-routes to HR for approval</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified employee intelligence</p><p class="text-xs sm:text-sm text-zinc-500">"How many PTO days does Sarah have left?" — instant answer from Gusto</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural time-off management</p><p class="text-xs sm:text-sm text-zinc-500">"Approve Emma's PTO request for Mar 18-20" — done in one command</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-zinc-400 text-lg">Full Gusto API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-orange-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="banknote" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3">Payroll Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Run payroll, check statuses, manage pay schedules.</p>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3">Employee Data</h3>
-          <p class="text-zinc-400 leading-relaxed">Access profiles, compensation, and employment details.</p>
-        </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="heart-pulse" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3">Benefits Admin</h3>
-          <p class="text-zinc-400 leading-relaxed">Manage enrollments, deductions, and plan information.</p>
-        </div>
-        
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="shield-check" class="w-7 h-7 text-blue-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3">Compliance</h3>
-          <p class="text-zinc-400 leading-relaxed">Track tax filings, W-2s, and regulatory requirements.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Time Tracking</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">PTO Management</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Tax Forms</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Direct Deposit</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Contractors</span>
-          <span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@company.com"
-              class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            class="w-full py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="lock" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your HR Admin Is<br><span class="text-red-400">Drowning in Busywork</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Gusto handles payroll and benefits, but your HR team still spends hours on manual tasks that could be automated.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calculator" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Payroll Prep Overhead</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every pay period: verify hours, approve time off, check bonuses, flag errors. What should take 10 minutes takes 2 hours.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-question" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Benefits Black Hole</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Open enrollment means chasing 47 employees for forms. Who enrolled? Who's still pending? You have no idea without manual checking.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">PTO Request Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Requests come via Slack, email, and in-person. You manually check balances, update spreadsheets, and hope you didn't double-book coverage.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered HR</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/gusto-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Gusto MCP Server running</span>
-<span class="text-green-400">✓ 72 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Gusto</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Gusto API token (generated in Account Settings). MCPEngage discovers all available endpoints and builds 55+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all employees with less than 5 PTO days left." "Approve Michael's time-off request." "What's the total payroll cost this month?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-remind employees of missing forms, flag payroll anomalies, generate headcount reports, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Gusto</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Gusto tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Employee Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, update, and onboard employees through conversation. "Show me all employees hired in Q1."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Payroll Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Review payroll runs, track costs, and flag errors. "What's the gross payroll for this pay period?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Benefits Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track enrollments, send reminders, and manage plan changes. "Who hasn't enrolled in health insurance yet?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-days" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Time-Off Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Approve requests, check balances, and track usage. "How many people are out next week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate headcount reports, payroll summaries, and turnover analysis on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Compliance Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-detect missing I-9s, expired work visas, and other compliance issues before they become problems.</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Gusto account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Gusto settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Gusto?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join hundreds of HR teams already automating with Gusto Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
-          Join the Waitlist
-        </a>
-        <a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-orange-400 flex items-center justify-center">
-            <i data-lucide="wallet" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Gusto.
           </div>
-          <span class="font-bold text-xl">Gusto Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Gusto?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Gusto API token (generated in Account Settings > Developer). MCPEngage uses the Gusto REST API to create 55+ tools covering employees, payroll, benefits, time off, and compliance. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Gusto Connect. Not affiliated with Gusto.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my employee data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Rippling, BambooHR, Namely, ADP, Paychex, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Gusto<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Gusto.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Gusto is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-orange-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Low PTO Balance</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">6 employees</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Chen</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering · Full-time</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">2.5 days</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">David Kim</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Product · Full-time</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">4 days</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">James Miller</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sales · Full-time</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">1 day</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Lisa Martinez</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Design · Full-time</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">3.5 days</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Company avg: 8.2 days remaining</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Gusto →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Email Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">6 recipients</span></div><div style="padding:12px 14px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">📧 PTO Reminder — Use Your Days!</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:10px;color:rgba(255,255,255,0.4);line-height:1.5;margin-bottom:10px;">Hi [Name],<br><br>You currently have [X] PTO days remaining for this year. Remember, unused PTO expires on December 31st.<br><br>We encourage you to take time off to rest and recharge! Check your Gusto account to request time off.</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Sent to:</div><div style="margin-top:6px;display:grid;grid-template-columns:auto 1fr;gap:6px;font-size:10px;"><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Sarah Chen (2.5 days)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">David Kim (4 days)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">James Miller (1 day)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Lisa Martinez (3.5 days)</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Emails delivered via Gusto notification system</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all employees with less than 5 PTO days remaining' },
+      { type:'ai', text:'Found 6 employees running low on PTO:', embed: embed_1 },
+      { type:'user', text:'Send them all a reminder to use their PTO before year end' },
+      { type:'ai', text:'Reminders sent successfully:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Gusto', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Gusto API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Gusto API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Gusto', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Gusto';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/helpscout/index.html b/helpscout/index.html
index 084c019..0dfcbb2 100644
--- a/helpscout/index.html
+++ b/helpscout/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Help Scout Connect — AI-Power Your Support in 2 Clicks</title>
+  <title>MCPEngage for Help Scout — AI-Power Your Help Scout in 2 Clicks</title>
+  <meta name="description" content="Connect Help Scout to any AI model with MCPEngage. Manage conversations, automate workflows, and get instant customer context through natural language.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#eff6ff',
-              100: '#dbeafe',
-              200: '#bfdbfe',
-              300: '#93c5fd',
-              400: '#60a5fa',
-              500: '#1292EE',
-              600: '#0f7cd6',
-              700: '#0c66be',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,604 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #1292EE 0%, #60a5fa 50%, #a78bfa 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(18, 146, 238, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(18, 146, 238, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(18, 146, 238, 0.4);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-pulse-glow {
-      animation: pulseGlow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulseGlow {
-      0%, 100% { box-shadow: 0 0 20px rgba(18, 146, 238, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(18, 146, 238, 0.5); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(18, 146, 238, 0.4), 0 0 40px 0 rgba(18, 146, 238, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(18, 146, 238, 0.6), 0 0 60px 10px rgba(18, 146, 238, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(18, 146, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(18, 146, 238, 0.5), rgba(167, 139, 250, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-    }
-    @keyframes typing {
-      from { width: 0 }
-      to { width: 100% }
-    }
-    .typing-effect {
-      overflow: hidden;
-      white-space: nowrap;
-      animation: typing 2s steps(30, end);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
-          <i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Help Scout Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
-    <!-- Floating background elements -->
-    <div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="text-center relative z-10">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Help Scout + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Help Scout</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Help Scout</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
-          The complete Help Scout MCP server. <strong class="text-white">54 tools</strong> for conversations, docs, and workflows. 
-          No setup. No OAuth headaches. Just connect and support.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+50</div>
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Help Scout to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage conversations, pull customer data, and automate mailbox workflows — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/helpscout" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">200+</strong> support teams
-          </p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/helpscout
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="inbox" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Help Scout conversations..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="message-circle" class="w-4 h-4"></i>
+                      Conversations
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user" class="w-4 h-4"></i>
+                      Customer
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#8421 — Password Reset Help</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Emma Wilson • 8m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Response: 5m</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Support</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#8419 — Billing Inquiry</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Michael Chen • 45m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Response: 42m</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Billing</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#8415 — Feature Question</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Lisa Park • 2h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Response: 1h</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Product</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/helpscout.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Help Scout Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="message-circle" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Conversations</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Docs</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="git-merge" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Workflows</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Help Scout + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Repetitive support queries</h3>
-            <p class="text-zinc-500 mb-6">Same questions, every day. Copy-paste answers get stale fast.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">AI drafts from your docs</p>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/helpscout" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual conversation sorting</p><p class="text-xs sm:text-sm text-zinc-500">Dig through mailboxes to find urgent customer messages</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Context switching chaos</p><p class="text-xs sm:text-sm text-zinc-500">Jump between Help Scout, CRM, and billing to get full picture</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Copy-paste replies</p><p class="text-xs sm:text-sm text-zinc-500">Search saved replies library, copy, paste, customize for each customer</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reporting requires exports</p><p class="text-xs sm:text-sm text-zinc-500">Download CSVs, import to spreadsheets, build reports manually</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI auto-prioritization</p><p class="text-xs sm:text-sm text-zinc-500">Conversations sorted by urgency, customer value, and topic</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant customer 360</p><p class="text-xs sm:text-sm text-zinc-500">Full history, subscription status, and past interactions in one query</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Contextual draft replies</p><p class="text-xs sm:text-sm text-zinc-500">AI generates personalized responses using conversation history</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">On-demand analytics</p><p class="text-xs sm:text-sm text-zinc-500">"Show me response times by mailbox this week" — instant answers</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Support Inbox Is<br><span class="text-red-400">Overwhelming</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Help Scout keeps conversations organized, but your team still drowns in manual triage and repetitive tasks.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <!-- Pain Point 2 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">No customer context</h3>
-            <p class="text-zinc-500 mb-6">Who is this person? What happened before? Time wasted searching.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">Full history at a glance</p>
-              </div>
-            </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Mailbox Overwhelm</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">200+ conversations per day across multiple mailboxes. Agents miss urgent messages from VIP customers buried in the noise.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-2" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Scattered Customer Data</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customer info lives in Help Scout, payment data in Stripe, usage in your product DB. Agents waste minutes piecing together context.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Slow First Response</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Typing personalized replies from scratch for every customer takes time. First response times creep up, satisfaction scores drop.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Support</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Help Scout</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Help Scout API key and mailbox ID. MCPEngage discovers all available endpoints and builds 45+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Manual ticket routing</h3>
-            <p class="text-zinc-500 mb-6">Tickets land in the wrong queue. Customers wait. CSAT drops.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">AI assigns intelligently</p>
-              </div>
-            </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all active conversations from the billing mailbox." "Draft a reply for conversation #8421." "What's our average response time today?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-tag conversations, escalate urgent messages, generate daily reports, and sync customer data across your stack — all running 24/7.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Help Scout API access through one simple connection</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Help Scout</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ Help Scout tools accessible through one natural-language interface.
+        </p>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="message-circle" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Conversation Management</h3>
-          <p class="text-zinc-400">Handle emails, chats, and messages — all unified in one place.</p>
-        </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="book-open" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Docs</h3>
-          <p class="text-zinc-400">Search and surface knowledge base articles automatically.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Conversation Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Read, reply, assign, and close conversations through natural language. "Reply to all pending billing conversations."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="user-circle" class="w-7 h-7 text-orange-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="inbox" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Customer Profiles</h3>
-          <p class="text-zinc-400">Access history, properties, and context for every customer.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Mailbox Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query across all mailboxes instantly. "Show me unassigned conversations older than 2 hours."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="git-merge" class="w-7 h-7 text-cyan-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Workflows</h3>
-          <p class="text-zinc-400">Automate tagging, assignment, and responses effortlessly.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Customer Context</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull full customer profiles, conversation history, and satisfaction ratings in one query.</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Mailboxes</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Saved Replies</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Teams</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Users</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Reports</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Beacons</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="relative">
-        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-purple-500/10 rounded-3xl blur-xl"></div>
-        <div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="Your phone number"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <!-- Success Message (hidden by default) -->
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tags" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Smart Tagging</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-tag conversations based on content, customer tier, or sentiment. "Tag all refund requests as 'billing-urgent'."</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const submitBtn = document.getElementById('submit-btn');
-      const successMsg = document.getElementById('success-message');
-      
-      submitBtn.disabled = true;
-      submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
-      
-      setTimeout(() => {
-        form.classList.add('hidden');
-        successMsg.classList.remove('hidden');
-      }, 1000);
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/help-scout-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Help Scout MCP Server running</span>
-<span class="text-green-400">✓ 54 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate response time reports, conversation volume by tag, and agent performance metrics on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Draft Replies</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate contextual reply drafts using conversation history and knowledge base. Review and send with one click.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Help Scout account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Help Scout settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Help Scout?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 200+ support teams already automating with Help Scout Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
-            <i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Help Scout.
           </div>
-          <span class="font-bold text-xl">Help Scout Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Help Scout?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Help Scout API key (generated in Settings > API Keys). MCPEngage uses the Help Scout REST API to create 45+ tools covering conversations, customers, mailboxes, tags, and workflows. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Help Scout Connect. Not affiliated with Help Scout.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my customer data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Zendesk, Salesforce, HubSpot, Jira, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Help Scout<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Help Scout.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Help Scout is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Billing Mailbox — Active</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">5 conversations</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#8419</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Invoice Payment Failed</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Michael Chen · Pro Plan</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">42m ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Active</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">?</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#8417</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Upgrade to Enterprise</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Park · Team Plan</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">1h 15m ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Active</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#8412</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Refund Request — Double Charge</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">James Miller · Enterprise</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">3h ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Pending</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Avg response time: 38 minutes</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Help Scout →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Reply drafted for #8419</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hi Michael, I see your payment for invoice #INV-4821 failed due to an expired card. I've paused your billing cycle temporarily. Could you update your payment method at [secure link]? Once updated, I'll manually retry the charge..."</div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Tagged as urgent</span></div><div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">urgent</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">billing</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">payment-failed</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all active conversations from the billing mailbox' },
+      { type:'ai', text:'Found 5 active billing conversations:', embed: embed_1 },
+      { type:'user', text:'Draft a reply for #8419 and tag it as urgent' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Help Scout', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Help Scout API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Help Scout API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Help Scout', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Help Scout';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/intercom/index.html b/intercom/index.html
index 5c1f14c..e1c6a0f 100644
--- a/intercom/index.html
+++ b/intercom/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Intercom Connect — AI-Power Your Customer Messaging in 2 Clicks</title>
+  <title>MCPEngage for Intercom — AI-Power Your Intercom in 2 Clicks</title>
+  <meta name="description" content="Connect Intercom to any AI model with MCPEngage. Manage conversations, contacts, and articles through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#286EFA',
-              600: '#286EFAdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #286EFA 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #286EFA25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #286EFA20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #286EFA">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Intercom Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #286EFA; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #286EFA"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Intercom</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Intercom MCP server. Conversations, customers, and automations. <strong class="text-white">94 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #286EFA; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/intercom.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #286EFA; color: #fff">
-            94 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Intercom + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Intercom + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Slow response times</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #286EFA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
-            </div>
-            <p class="text-white font-medium">AI drafts instant, contextual replies</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Repetitive support questions</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #286EFA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
-            </div>
-            <p class="text-white font-medium">Auto-suggest help articles</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">VIP customers waiting</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #286EFA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
-            </div>
-            <p class="text-white font-medium">Smart routing to priority queues</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Intercom</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Intercom API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #286EFA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Conversation Management</h3>
-          <p class="text-zinc-400 text-sm">Handle live chat, email, and in-app messages from one interface.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #286EFA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Data</h3>
-          <p class="text-zinc-400 text-sm">Access profiles, events, tags, and full conversation history.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #286EFA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Automation & Bots</h3>
-          <p class="text-zinc-400 text-sm">Trigger workflows, route conversations, and deploy AI responses.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #286EFA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Help Center</h3>
-          <p class="text-zinc-400 text-sm">Search articles, suggest solutions, and update documentation.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #286EFA; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Intercom to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Reply to messages, update contacts, and search help docs — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/intercom" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/intercom
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="message-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="book-open" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Intercom conversations..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="message-circle" class="w-4 h-4"></i>
+                      Conversations
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">47</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user" class="w-4 h-4"></i>
+                      Contacts
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Enterprise upgrade question</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Johnson • Acme Corp</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Open</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">High Value</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Sales</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Login issue with SSO</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Mike Chen • TechFlow Inc</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Waiting</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Urgent</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Support</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Feature request: API docs</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Alex Martinez • DevStudio</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Snoozed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Product</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Feedback</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="52">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Intercom Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/intercom" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Inbox overload</p><p class="text-xs sm:text-sm text-zinc-500">Support team drowning in 200+ conversations daily, can't prioritize high-value leads</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow response times</p><p class="text-xs sm:text-sm text-zinc-500">Switching between Intercom, CRM, and help docs means 5+ minute response delays</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost context</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly see customer history, past conversations, or deal status mid-chat</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual tagging</p><p class="text-xs sm:text-sm text-zinc-500">Reps spend hours tagging conversations and updating contact attributes</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart inbox triage</p><p class="text-xs sm:text-sm text-zinc-500">AI auto-prioritizes high-value conversations and surfaces urgent issues instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant context</p><p class="text-xs sm:text-sm text-zinc-500">"Show me everything about this customer" — full history, deals, and docs in one query</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-touch replies</p><p class="text-xs sm:text-sm text-zinc-500">"Reply with shipping policy" — AI pulls help article and drafts personalized response</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-enrichment</p><p class="text-xs sm:text-sm text-zinc-500">Conversations auto-tagged, contacts auto-updated, and sentiment tracked in real-time</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Support Team Is<br><span class="text-red-400">Overwhelmed</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Intercom has all the conversations, but your team can't keep up.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="inbox" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Inbox Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">200+ daily conversations, no way to prioritize. High-value leads wait hours while reps answer low-priority questions. Revenue slips through the cracks.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Switching</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every conversation requires opening 5+ tabs: CRM for deal data, help docs for answers, Slack for team input. Average response time: 6+ minutes.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Busywork</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Tagging conversations, updating contact attributes, and logging follow-ups takes 30% of your team's time. They hate it, so data quality suffers.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Support</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Intercom</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Intercom access token. MCPEngage discovers all conversations, contacts, articles, and tags — building 52+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all open sales conversations." "What's the contact info for Acme Corp?" "Reply with our refund policy." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring tasks: auto-tag conversations by sentiment, route high-value leads to sales, generate daily inbox reports, and sync contact data to your CRM.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Intercom</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          52+ Intercom tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Conversation Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search, filter, and reply to conversations. "Show me all open sales conversations from this week with response pending."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to full contact profiles, company data, and conversation history. "Who are our top 10 customers by MRR?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="book-open" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Help Center Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Natural language search across all help articles. "Find our shipping policy for international orders."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Smart Tagging</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-tag conversations based on content, sentiment, and urgency. "Tag all refund requests from the past week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Automated Routing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Route conversations to the right team based on context. "Send all enterprise questions to the sales team."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate inbox performance reports on demand. "What's our average first response time this month?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Intercom account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Intercom API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Intercom settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Intercom.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Intercom?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide an Intercom access token (generated in your Intercom settings under Developer Hub > Access Tokens). MCPEngage uses the Intercom API to create 52+ tools covering conversations, contacts, articles, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it send messages on my behalf?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Only if you explicitly instruct it to. MCPEngage can draft replies for review or auto-send based on your rules. All messages are logged in Intercom's activity feed, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it integrate with our CRM?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Sync Intercom conversations to HubSpot, Salesforce, or any other MCP-enabled CRM in your stack. "When a sales conversation closes, create a deal in HubSpot."
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Zendesk, Front, Slack, HubSpot, Salesforce, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Intercom?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Intercom Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #286EFA; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Intercom<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their customer support.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Intercom is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Intercom Connect. Not affiliated with Intercom.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,119,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ff7700;"></div><span style="font-size:11px;font-weight:700;color:#ff7700;text-transform:uppercase;letter-spacing:0.5px;">Open Sales Conversations</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">8 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">💼</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Enterprise upgrade pricing</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Johnson · Acme Corp · 23 min ago</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;">HOT LEAD</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">🤝</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Demo request for team plan</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Mike Chen · TechFlow · 1 hour ago</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;">QUALIFIED</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">📊</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Custom contract question</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Alex Martinez · DevStudio · 3 hours ago</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">FOLLOW UP</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Reply Ready</span></div></div><div style="padding:12px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);line-height:1.6;">Hi Sarah,<br><br>Thanks for your interest in our Enterprise plan! Our pricing starts at $499/month for up to 50 users with annual billing.<br><br>I'd love to walk you through the features and discuss your specific needs. I have availability on Tuesday, January 21st at 2:00 PM EST. Does that work for you?<br><br>Looking forward to connecting!</div></div><div style="margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.06);"><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:6px;">✓ Calendar invite scheduled for Tue Jan 21, 2:00 PM EST</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all open sales conversations from today' },
+      { type:'ai', text:'Found 8 open sales conversations:', embed: embed_1 },
+      { type:'user', text:'Reply to Sarah Johnson with our enterprise pricing and schedule a call for next Tuesday' },
+      { type:'ai', text:'Draft reply ready for your review:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Intercom', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Intercom API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Intercom API', color:'text-green-400', delay:3000 },
+      { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Intercom', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Intercom';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/jira/index.html b/jira/index.html
index 557b020..b2afcad 100644
--- a/jira/index.html
+++ b/jira/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Jira Connect — AI-Power Your Issue Tracking in 2 Clicks</title>
+  <title>MCPEngage for Jira — AI-Power Your Jira in 2 Clicks</title>
+  <meta name="description" content="Connect Jira to any AI model with MCPEngage. Manage issues, sprints, and projects through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#0052CC',
-              600: '#0052CCdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #0052CC 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0052CC25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #0052CC20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0052CC">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Jira Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0052CC; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #0052CC"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Jira</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Jira MCP server. Issues, sprints, boards, and workflows. <strong class="text-white">128 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0052CC; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/jira.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0052CC; color: #fff">
-            128 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Jira + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Jira + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Sprint planning takes hours</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0052CC30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
-            </div>
-            <p class="text-white font-medium">AI recommends story points and assignments</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Blockers go unnoticed</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0052CC30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
-            </div>
-            <p class="text-white font-medium">Instant alerts on dependencies</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual status updates</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0052CC30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
-            </div>
-            <p class="text-white font-medium">Automated issue transitions</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Jira</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Jira API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0052CC20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Issue Management</h3>
-          <p class="text-zinc-400 text-sm">Create, assign, transition issues across projects and boards.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0052CC20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Sprint Planning</h3>
-          <p class="text-zinc-400 text-sm">Manage backlogs, plan sprints, track velocity and burndown.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0052CC20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Workflows & Automation</h3>
-          <p class="text-zinc-400 text-sm">Trigger state changes, update fields, route assignments.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0052CC20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Reporting</h3>
-          <p class="text-zinc-400 text-sm">Pull sprint reports, time tracking, and custom JQL queries.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0052CC; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Jira to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create issues, update sprints, and track progress — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/jira" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/jira
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="alert-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="layout" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="zap" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Jira issues..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                      Issues
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="zap" class="w-4 h-4"></i>
+                      Sprints
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">API rate limit bug</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">BACKEND-342 • Critical</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">P0</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Backend</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Add dark mode toggle</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">FE-128 • Enhancement</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">To Do</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">P2</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Frontend</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Fix login redirect</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">AUTH-91 • Bug</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Done</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">P1</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Auth</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="68">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Jira Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Dev Ops</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/jira" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual issue creation</p><p class="text-xs sm:text-sm text-zinc-500">Developers interrupt flow to click through Jira forms, losing context and momentum</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Sprint planning chaos</p><p class="text-xs sm:text-sm text-zinc-500">3-hour meetings to decide what goes in the sprint, half the team multitasking</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Status update theater</p><p class="text-xs sm:text-sm text-zinc-500">Daily standups turn into manual Jira board updates instead of actual conversation</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost context</p><p class="text-xs sm:text-sm text-zinc-500">Can't remember which issue blocked which PR or why that bug is P0</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-issue</p><p class="text-xs sm:text-sm text-zinc-500">"Create a P1 bug: API timeout in checkout flow" — ticket created with proper fields instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart sprint planning</p><p class="text-xs sm:text-sm text-zinc-500">"What unfinished work from last sprint should roll over?" — AI analyzes and suggests</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto status sync</p><p class="text-xs sm:text-sm text-zinc-500">Link GitHub PRs to Jira issues, status updates automatically when code merges</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Project intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Why is the mobile release blocked?" — AI traces dependencies and surfaces blockers</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Shipping Slower</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Jira has all the issues, but managing them interrupts actual development work.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="cpu" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Switching</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Developers lose 20+ minutes daily switching between code, Jira, Slack, and docs. Every ticket update breaks their flow, killing productivity.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Sprint Overhead</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Planning meetings take 3+ hours. Estimating stories, assigning points, and prioritizing work feels like busywork instead of actual progress.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Sync Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Jira shows stale status. Issues marked In Progress are actually done. PRs merged but tickets still open. Your source of truth isn't trustworthy.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Development</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Jira</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Provide your Jira API token and site URL. MCPEngage discovers all projects, boards, issues, and sprints — building 68+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all P0 bugs in the current sprint." "Move BACKEND-342 to In Review." "What's blocking the Q1 release?" Your AI understands and executes.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-create issues from Slack threads, sync status from GitHub PRs, generate sprint reports, and flag blockers based on dependencies.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Jira</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          68+ Jira tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Issue Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and close issues without leaving your workflow. "Create 5 bugs from this test report with proper priority."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Board Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query across projects and boards. "Show me all In Progress issues assigned to the backend team."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Sprint Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-populate sprints based on priority and capacity. "Add all P0 and P1 issues to the next sprint."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Dependency Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Identify blockers and dependencies automatically. "What issues are blocked by the API migration?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Velocity Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time sprint metrics and team velocity. "What's our average story point completion rate this quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Team Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See who's overloaded and who has capacity. "Which developers have the lightest workload this sprint?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Jira account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Jira API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Jira settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Jira.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Jira?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Jira API token (generated in your Atlassian account settings) and your Jira site URL. MCPEngage uses the Jira REST API to create 68+ tools covering issues, projects, sprints, boards, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my issues?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Jira's official API with the same permissions as any integration. All changes are logged in Jira's activity history, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with GitHub or GitLab?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Auto-link Jira issues to GitHub PRs, sync status when code is merged, or create issues from repository events — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Linear, GitHub, Slack, Monday.com, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Jira?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Jira Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0052CC; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Jira<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of dev teams using MCPEngage to supercharge their Jira workflow.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Jira is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Jira Connect. Not affiliated with Jira.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Critical Bugs</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">6 issues</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">P0</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">API rate limit causing 503s</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">BACKEND-342 · Sarah · In Progress</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;">IN PROGRESS</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">P0</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Payment gateway timeout</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">PAY-89 · Mike · To Do</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">TO DO</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">P1</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Mobile app crashes on iOS 17</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">MOBILE-203 · Alex · In Review</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(147,51,234,0.15);color:#a78bfa;">IN REVIEW</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Issue Updated</span></div></div><div style="padding:12px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:8px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">BACKEND-342: API rate limit causing 503s</div><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Status:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;text-decoration:line-through;opacity:0.5;">In Progress</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(147,51,234,0.15);color:#a78bfa;">In Review</span></div><div style="display:flex;align-items:center;gap:8px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Assignee:</span><span style="font-size:10px;color:#e4e4e7;">Mike Chen (for code review)</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all P0 and P1 bugs in the current sprint' },
+      { type:'ai', text:'Found 6 high-priority bugs:', embed: embed_1 },
+      { type:'user', text:'Move BACKEND-342 to In Review and assign to Mike for code review' },
+      { type:'ai', text:'Issue updated:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Jira', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Jira API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Jira API', color:'text-green-400', delay:3000 },
+      { text:'✓ 68 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Jira', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Jira';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/keap/index.html b/keap/index.html
index fdee284..39b2994 100644
--- a/keap/index.html
+++ b/keap/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Keap Connect — AI-Power Your CRM in 2 Clicks</title>
+  <title>MCPEngage for Keap — AI-Power Your Keap in 2 Clicks</title>
+  <meta name="description" content="Connect Keap to any AI model with MCPEngage. Manage contacts, deals, emails, and automations through natural conversation. CRM intelligence at your fingertips.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f0fdf4',
-              100: '#dcfce7',
-              200: '#bbf7d0',
-              300: '#86efac',
-              400: '#4ade80',
-              500: '#2D9F2D',
-              600: '#16a34a',
-              700: '#15803d',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,628 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #2D9F2D 0%, #10b981 50%, #06b6d4 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(45, 159, 45, 0.15), transparent);
-    }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 40px rgba(45, 159, 45, 0.15);
-      transform: translateY(-4px);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(45, 159, 45, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(45, 159, 45, 0.5); }
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(45, 159, 45, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .video-gradient-border {
-      background: linear-gradient(135deg, rgba(45, 159, 45, 0.5), rgba(6, 182, 212, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .video-gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(45, 159, 45, 0.4), 0 0 40px 0 rgba(45, 159, 45, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(45, 159, 45, 0.6), 0 0 60px 10px rgba(45, 159, 45, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .gradient-border {
-      position: relative;
-      background: linear-gradient(135deg, rgba(45, 159, 45, 0.1), rgba(6, 182, 212, 0.1));
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
     .gradient-border::before {
-      content: '';
-      position: absolute;
-      inset: 0;
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
       border-radius: inherit;
-      padding: 1px;
-      background: linear-gradient(135deg, #2D9F2D, #06b6d4);
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-    }
-    .stat-card {
-      background: linear-gradient(135deg, rgba(45, 159, 45, 0.05), rgba(6, 182, 212, 0.05));
-      border: 1px solid rgba(45, 159, 45, 0.2);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="target" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Keap Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20 text-center">
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-        Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Keap + AI
+        </div>
       </div>
-      
-      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
-        Connect <span class="gradient-text">Keap</span><br>
-        to AI in 2 Clicks
-      </h1>
-      
-      <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
-        The most comprehensive Keap MCP server. <strong class="text-white">76 tools</strong> covering 
-        contacts, campaigns, pipeline & commerce. No setup. Just connect.
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Keap</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Keap to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage contacts, automate campaigns, and close deals — all through conversation.</span>
       </p>
-      
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join the Waitlist
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
         </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
-          <i data-lucide="play" class="w-5 h-5"></i>
-          Watch Demo
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/keap" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
         </a>
       </div>
 
-      <!-- Stats -->
-      <div class="grid grid-cols-3 gap-4 max-w-xl mx-auto">
-        <div class="stat-card rounded-xl p-4 text-center">
-          <div class="text-2xl font-bold text-white">76</div>
-          <div class="text-sm text-zinc-400">API Tools</div>
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/keap
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="briefcase" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="zap" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Keap contacts..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="briefcase" class="w-4 h-4"></i>
+                      Deals
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Contacts
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Acme Corp - Enterprise Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • $45,000</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Proposal</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">85% likely</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Closes Mar 20</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">TechFlow - Pro Upgrade</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Michael Park • $18,500</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Negotiation</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">70% likely</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Closes Mar 25</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">StartupXYZ - Growth Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Emma Wilson • $12,000</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Discovery</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">40% likely</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Closes Apr 5</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="stat-card rounded-xl p-4 text-center">
-          <div class="text-2xl font-bold text-white">2 min</div>
-          <div class="text-sm text-zinc-400">Setup Time</div>
-        </div>
-        <div class="stat-card rounded-xl p-4 text-center">
-          <div class="text-2xl font-bold text-white">24/7</div>
-          <div class="text-sm text-zinc-400">AI Automation</div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch AI nurture leads, update pipelines, and automate your sales</p>
-      </div>
-      <div class="video-gradient-border">
-        <div class="video-gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/keap.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="70">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Keap Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Contacts</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="trending-up" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Pipeline</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Campaigns</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-12 items-center">
-        <div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Setting up Keap + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-4">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">Cold leads going stale</p>
-                <p class="text-zinc-500">No time to follow up with everyone in your pipeline.</p>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">Manual pipeline updates</p>
-                <p class="text-zinc-500">Dragging deals around when you should be closing them.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
-                <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium">Missed sales opportunities</p>
-                <p class="text-zinc-500">Hot leads slip through because nobody noticed the signal.</p>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
-        <div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/keap" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
           <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <h3 class="text-xl font-semibold">With Keap Connect</h3>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
-          <div class="space-y-4 text-zinc-300">
-            <div class="flex items-center gap-3">
-              <i data-lucide="mail" class="w-5 h-5 text-brand-400"></i>
-              <p>AI nurtures leads automatically with smart sequences</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="git-branch" class="w-5 h-5 text-brand-400"></i>
-              <p>AI moves deals through stages on buying signals</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
-              <p>Instant alerts when leads are ready to buy</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
-              <p>Works with Claude, GPT, any MCP client</p>
-            </div>
-            <div class="flex items-center gap-3">
-              <i data-lucide="store" class="w-5 h-5 text-brand-400"></i>
-              <p>E-commerce and subscription management included</p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual contact tagging</p><p class="text-xs sm:text-sm text-zinc-500">Sort through hundreds of contacts to apply tags one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Campaign performance guesswork</p><p class="text-xs sm:text-sm text-zinc-500">Export reports, build spreadsheets, calculate ROI manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered deal context</p><p class="text-xs sm:text-sm text-zinc-500">Jump between contact record, emails, notes, and tasks to prep for calls</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Automation debugging nightmare</p><p class="text-xs sm:text-sm text-zinc-500">Campaign not working? Click through 15 steps to find the broken link</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI bulk tagging</p><p class="text-xs sm:text-sm text-zinc-500">"Tag all contacts from webinar as 'warm-lead'" — instant batch updates</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">On-demand analytics</p><p class="text-xs sm:text-sm text-zinc-500">"What's the ROI of my nurture campaign?" — AI calculates instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant deal intelligence</p><p class="text-xs sm:text-sm text-zinc-500">"Give me the full context on the Acme Corp deal" — history in one query</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural automation control</p><p class="text-xs sm:text-sm text-zinc-500">"Pause the welcome series for enterprise contacts" — no clicking required</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Keap API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="users" class="w-6 h-6 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Contact Management</h3>
-          <p class="text-zinc-400">Create, tag, segment contacts automatically. Full CRM control.</p>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="trending-up" class="w-6 h-6 text-emerald-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Sales Pipeline</h3>
-          <p class="text-zinc-400">Track deals, move stages, forecast revenue with AI assistance.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Campaign Automation</h3>
-          <p class="text-zinc-400">Trigger sequences, send emails, track engagement automatically.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
-            <i data-lucide="shopping-cart" class="w-6 h-6 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">E-commerce</h3>
-          <p class="text-zinc-400">Manage products, orders, and subscriptions programmatically.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tasks</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Appointments</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Opportunities</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Invoices</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Payments</span>
-          <span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Affiliates</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Social Proof -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold mb-4">Trusted by small businesses everywhere</h2>
-        <p class="text-zinc-400">Join hundreds of entrepreneurs automating their sales with AI</p>
-      </div>
-      <div class="flex flex-col items-center gap-6">
-        <div class="flex -space-x-3">
-          <img src="https://i.pravatar.cc/100?img=21" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=22" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=23" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=24" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=25" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=26" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
-        </div>
-        <div class="flex items-center gap-1">
-          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
-          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
-          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
-          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
-          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
-          <span class="ml-2 text-zinc-400">from 200+ businesses</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="Your phone number"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email"
-              placeholder="you@company.com"
-              class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6">
-          <i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your CRM Is<br><span class="text-red-400">Overwhelming</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Keap has the power, but your team spends more time clicking through menus than closing deals.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Entry Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reps spend 2 hours/day updating contact records, logging calls, and tagging leads. CRM becomes a second job.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Automation Complexity</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Campaign builder has 47 steps across 8 branches. One broken link kills the whole sequence — and you won't know until leads go cold.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Lost Context</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Contact record shows 127 notes, 43 emails, and 19 tasks. Good luck finding the one detail you need before the sales call starts.</p>
+        </div>
+      </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered CRM</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/keap-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd keap && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Keap</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Keap API key (generated in Settings > API). MCPEngage discovers all available endpoints and builds 70+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all deals closing this month." "Add all webinar attendees to the nurture campaign." "What's Sarah Chen's engagement score?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-tag leads, score contacts, trigger campaigns, sync data across your stack, and generate pipeline reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-brand-400">✓ Keap MCP Server running</span>
-<span class="text-brand-400">✓ 76 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Keap</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          70+ Keap tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Contact Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, tag, and segment contacts through conversation. "Show me all contacts tagged 'enterprise' who haven't opened an email in 30 days."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Deal Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track pipeline, update stages, and forecast revenue. "What deals are stuck in proposal stage longer than 2 weeks?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Email Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send campaigns, track opens/clicks, and analyze performance. "What's the open rate of my last 5 campaigns?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Campaign Control</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Start, pause, and optimize automations with natural language. "Pause the webinar follow-up for anyone who booked a call."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate pipeline reports, campaign ROI, and lead source attribution on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Lead Scoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-score contacts based on engagement, profile fit, and behavior. "Show me all A-grade leads from the last webinar."</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Keap account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Keap settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Will this work with Keap Pro and Max?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes! Keap Connect works with all Keap plans that have API access — Pro, Max, and Max Classic. 
-            The same 76 tools work across all versions.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your CRM?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 200+ small businesses already automating with Keap Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
-            <i data-lucide="target" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Keap.
           </div>
-          <span class="font-bold text-xl">Keap Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Keap?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Keap API key (generated in Settings > Application > API). MCPEngage uses the Keap REST API to create 70+ tools covering contacts, deals, emails, campaigns, tags, and automations. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Keap Connect. Not affiliated with Keap.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my CRM data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including HubSpot, Salesforce, Pipedrive, ActiveCampaign, Mailchimp, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Keap<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Keap.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Keap is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">High-Value Deals — March</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$142.5K total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Acme Corp — Enterprise</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · Closes Mar 20</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">85% likely</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">$45,000</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">GlobalShip — Pro Upgrade</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">David Kim · Closes Mar 18</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">75% likely</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">$32,500</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a78bfa;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">TechFlow — Annual Contract</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Michael Park · Closes Mar 25</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">65% likely</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">$42,000</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">DataVault — Growth Plan</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Lisa Chen · Closes Mar 28</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">80% likely</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">$23,000</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Weighted forecast: $107.8K</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Keap →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Campaign Enrollment</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 contacts</span></div><div style="padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">⚡ Enterprise Nurture Campaign</div><div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:10px;"><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Sarah Chen (Acme Corp)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">David Kim (GlobalShip)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Michael Park (TechFlow)</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Lisa Chen (DataVault)</span></div></div><div style="padding:10px 14px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">📧 Next Actions</div><div style="font-size:10px;color:rgba(255,255,255,0.4);line-height:1.5;">• Welcome email sends in 2 minutes<br>• Case study follow-up in 2 days<br>• Demo invitation in 5 days</div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Campaign will run for 14 days</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all deals closing this month worth over $20k' },
+      { type:'ai', text:'Found 4 high-value deals closing in March:', embed: embed_1 },
+      { type:'user', text:'Add all 4 contacts to the enterprise nurture campaign' },
+      { type:'ai', text:'Done! All 4 contacts added to campaign:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Keap', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Keap API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Keap API', color:'text-green-400', delay:3000 },
+      { text:'✓ 70 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Keap', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Keap';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/klaviyo/index.html b/klaviyo/index.html
index 24b63bd..4dc1eef 100644
--- a/klaviyo/index.html
+++ b/klaviyo/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Klaviyo Connect — AI-Power Your Ecommerce Marketing in 2 Clicks</title>
+  <title>MCPEngage for Klaviyo — AI-Power Your Klaviyo in 2 Clicks</title>
+  <meta name="description" content="Connect Klaviyo to any AI model with MCPEngage. Build campaigns, manage segments, automate flows, and analyze email performance through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#000000',
-              600: '#000000dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #000000 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #00000025, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #00000020; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Klaviyo Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #000000; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #000000"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Klaviyo</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Klaviyo MCP server. Email, SMS, flows, and customer data. <strong class="text-white">112 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #000000; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/klaviyo.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #000000; color: #fff">
-            112 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Klaviyo + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Klaviyo + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Abandoned carts go cold</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">AI-optimized recovery sequences</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Generic blast emails</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">Hyper-personalized campaigns</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Guessing send times</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">AI predicts optimal timing</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Klaviyo</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Klaviyo API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
-          <p class="text-zinc-400 text-sm">Create and send email and SMS campaigns at scale.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Flow Automation</h3>
-          <p class="text-zinc-400 text-sm">Build abandoned cart, welcome, and post-purchase sequences.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Segmentation</h3>
-          <p class="text-zinc-400 text-sm">Target customers by behavior, purchase history, and engagement.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics</h3>
-          <p class="text-zinc-400 text-sm">Track revenue attribution, flow performance, and customer LTV.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #000000; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Klaviyo to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Build campaigns, segment audiences, and automate email flows — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/klaviyo" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/klaviyo
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="git-branch" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Klaviyo campaigns..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="mail" class="w-4 h-4"></i>
+                      Campaigns
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">5</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Segments
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Black Friday Preview</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Scheduled for Nov 24 • 12,458 recipients</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Draft</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">48% open rate (est)</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">VIP</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Welcome Series — Day 3</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sent 2h ago • 842 recipients</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">52% open rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Automation</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Cart Recovery</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active flow • 127 sent today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">18% conversion</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Flow</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="48">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Klaviyo Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Access</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/klaviyo" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Segment guesswork</p><p class="text-xs sm:text-sm text-zinc-500">"Let's target engaged users" — spend 30 minutes clicking filters, hoping you got it right</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Campaign copy hell</p><p class="text-xs sm:text-sm text-zinc-500">Write subject lines, preview text, body copy across 5 variants — takes hours</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual A/B tests</p><p class="text-xs sm:text-sm text-zinc-500">Set up tests by hand, wait days for results, forget what you were testing</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reporting black hole</p><p class="text-xs sm:text-sm text-zinc-500">Export CSVs, build pivot tables, squint at charts — insights arrive too late</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered segments</p><p class="text-xs sm:text-sm text-zinc-500">"Create a segment of customers who bought in the last 30 days but haven't opened recent emails"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant campaign drafts</p><p class="text-xs sm:text-sm text-zinc-500">"Write a Black Friday email for our VIP segment" — AI generates 3 variants in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart A/B automation</p><p class="text-xs sm:text-sm text-zinc-500">AI sets up tests, monitors results, and auto-scales the winner — no manual work</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time insights</p><p class="text-xs sm:text-sm text-zinc-500">"How's the cart recovery flow performing?" Get conversion rates and revenue instantly</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Email Marketing Is<br><span class="text-red-400">Falling Behind</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Klaviyo has the power, but building segments, writing campaigns, and analyzing results takes too long.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Segment Fatigue</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 50+ segments. Half are outdated. Nobody remembers what "Engaged 2023" means. Creating a new segment requires a PhD in boolean logic.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Campaign Bottleneck</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your team can only ship 2-3 campaigns per week. Writing copy, designing templates, and A/B testing takes forever. Competitors are sending daily and winning.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Performance Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">"Is our welcome series working?" requires digging through dashboards, exporting data, and building reports. By the time you know, it's too late to fix.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Email Marketing</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Klaviyo</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Klaviyo API key. MCPEngage discovers all campaigns, flows, segments, and lists, building 48+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Create a segment of VIP customers who haven't purchased in 60 days." "Draft a re-engagement campaign." "What's our average open rate this month?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-create segments, generate campaign copy, optimize send times, pause underperforming flows, and sync subscriber data — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Klaviyo</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          48+ Klaviyo tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Campaign Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, schedule, send, and analyze campaigns through conversation. "Send the Black Friday email to VIP segment on Nov 24."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Flow Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Build and optimize email flows with AI. "Show me which flows have the highest conversion rates."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Smart Segmentation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create complex segments using natural language. "Find customers who opened 3+ emails but never purchased."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">AI Copywriting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate subject lines, preview text, and body copy. "Write 3 subject line variants for our holiday sale."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">List Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Add subscribers, update profiles, and manage suppressions. "Add these 500 emails to the newsletter list."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Performance Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track opens, clicks, conversions, and revenue. "Compare this month's campaign performance to last month."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Klaviyo account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Klaviyo API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Klaviyo settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Klaviyo.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Klaviyo?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Klaviyo Private API Key (generated in Account → Settings → API Keys). MCPEngage uses the Klaviyo API to create 48+ tools covering campaigns, flows, segments, lists, metrics, and profiles. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it write campaign copy?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! The AI can generate subject lines, preview text, and email body copy based on your brand voice, audience, and campaign goals. You review and edit before sending — AI accelerates, you control.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Mailchimp, Brevo, ConvertKit, ActiveCampaign, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Klaviyo?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Klaviyo Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #000000; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Klaviyo<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of marketers using MCPEngage to supercharge their email campaigns.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Klaviyo is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Klaviyo Connect. Not affiliated with Klaviyo.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">New Segment Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:14px;"><div style="font-size:14px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">Recent Buyers — Low Engagement</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:12px;"><div style="font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;">Segment Criteria:</div><div style="display:flex;flex-direction:column;gap:6px;"><div style="display:flex;align-items:start;gap:8px;"><div style="flex-shrink:0;width:16px;height:16px;border-radius:4px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;margin-top:1px;"><span style="font-size:9px;color:#22c55e;">✓</span></div><div style="flex:1;"><div style="font-size:11px;color:rgba(255,255,255,0.7);">Purchased in last 30 days</div><div style="font-size:9px;color:rgba(255,255,255,0.35);margin-top:1px;">Has placed order since Dec 5, 2024</div></div></div><div style="display:flex;align-items:start;gap:8px;"><div style="flex-shrink:0;width:16px;height:16px;border-radius:4px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;margin-top:1px;"><span style="font-size:9px;color:#ef4444;">×</span></div><div style="flex:1;"><div style="font-size:11px;color:rgba(255,255,255,0.7);">Has NOT opened email in last 14 days</div><div style="font-size:9px;color:rgba(255,255,255,0.35);margin-top:1px;">Open rate = 0% since Dec 21, 2024</div></div></div></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Total Profiles</div><div style="font-size:18px;font-weight:700;color:#17c3b2;">1,247</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Avg Order Value</div><div style="font-size:18px;font-weight:700;color:#22c55e;">$127</div></div></div><div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);border-radius:6px;padding:8px 10px;"><div style="font-size:10px;color:rgba(255,255,255,0.6);line-height:1.4;">💡 Recommendation: Send a "We miss you" re-engagement campaign with a 15% discount to win back these customers.</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Segment ID: seg_8x2k9p</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in Klaviyo →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(139,92,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#a78bfa;"></div><span style="font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:0.5px;">Campaign Draft</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Ready to review</span></div><div style="padding:14px;"><div style="margin-bottom:12px;"><div style="font-size:9px;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;">Subject Line (3 variants)</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="padding:6px 10px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:6px;font-size:11px;color:#e4e4e7;">We miss you! Here's 15% off your next order 💜</div><div style="padding:6px 10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:11px;color:rgba(255,255,255,0.7);">{{ first_name }}, come back for 15% off</div><div style="padding:6px 10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:11px;color:rgba(255,255,255,0.7);">Your exclusive 15% discount is waiting</div></div></div><div style="margin-bottom:12px;"><div style="font-size:9px;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;">Preview Text</div><div style="padding:6px 10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:10px;color:rgba(255,255,255,0.6);font-style:italic;">Thanks for being a valued customer. Here's a special offer just for you.</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.6;">Hi {{ first_name }},<br><br>We noticed you haven't opened our recent emails. We'd love to have you back!<br><br>As a thank you for being a valued customer, here's <strong style="color:#a78bfa;">15% off</strong> your next purchase.<br><br>Use code: <strong style="color:#17c3b2;">WELCOME15</strong><br><br>[CTA Button: Shop Now]</div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 10px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);">Recipients</div><div style="font-size:14px;font-weight:700;color:#e4e4e7;margin-top:2px;">1,247</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 10px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);">Est. Open Rate</div><div style="font-size:14px;font-weight:700;color:#22c55e;margin-top:2px;">38%</div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Draft saved · Ready to send</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Edit in Klaviyo →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Create a segment of customers who bought in the last 30 days but haven\'t opened recent emails' },
+      { type:'ai', text:'Segment created! Here\'s what I found:', embed: embed_1 },
+      { type:'user', text:'Draft a re-engagement email for this segment with a 15% discount' },
+      { type:'ai', text:'Here\'s your re-engagement campaign draft:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Klaviyo', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Klaviyo API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Klaviyo API', color:'text-green-400', delay:3000 },
+      { text:'✓ 48 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Klaviyo', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Klaviyo';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lever/index.html b/lever/index.html
index 72d58d2..352c8eb 100644
--- a/lever/index.html
+++ b/lever/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Lever Connect — AI-Power Your Recruiting in 2 Clicks</title>
+  <title>MCPEngage for Lever — AI-Power Your Lever in 2 Clicks</title>
+  <meta name="description" content="Connect Lever to any AI model with MCPEngage. Manage candidates, automate interviews, and streamline hiring — all through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#3CB2A4',
-              600: '#3CB2A4dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #3CB2A4 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #3CB2A425, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #3CB2A420; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #3CB2A4">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Lever Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #3CB2A4; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #3CB2A4"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Lever</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Lever MCP server. Candidates, postings, interviews, and pipelines. <strong class="text-white">74 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #3CB2A4; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/lever.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #3CB2A4; color: #fff">
-            74 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Lever + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Lever + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Top candidates ghosting</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3CB2A430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
-            </div>
-            <p class="text-white font-medium">AI sends timely follow-ups</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Scheduling interview chaos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3CB2A430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
-            </div>
-            <p class="text-white font-medium">Auto-coordinate calendars</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Slow hiring decisions</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3CB2A430">
-              <i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
-            </div>
-            <p class="text-white font-medium">Instant feedback summaries</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Lever</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Lever API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3CB2A420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Candidate Management</h3>
-          <p class="text-zinc-400 text-sm">Track applicants, manage stages, and schedule interviews.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3CB2A420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Job Postings</h3>
-          <p class="text-zinc-400 text-sm">Create and publish roles across multiple job boards.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3CB2A420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Interview Scheduling</h3>
-          <p class="text-zinc-400 text-sm">Coordinate availability, send invites, collect feedback.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3CB2A420">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Pipeline Analytics</h3>
-          <p class="text-zinc-400 text-sm">Track time-to-hire, source performance, and conversion rates.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #3CB2A4; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Lever to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Source candidates, schedule interviews, and track pipelines — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/lever" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/lever
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="briefcase" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="calendar" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Lever candidates..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="users" class="w-4 h-4"></i>
+                      Candidates
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">342</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="calendar" class="w-4 h-4"></i>
+                      Interviews
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen — Senior Engineer</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Applied 2d ago • 8 yrs exp</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Top Pick</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Tech screen</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">React, AWS</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">James Park — Product Manager</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Interview tmrw • 6 yrs exp</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Scheduled</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-blue-500/15 text-blue-400 text-[10px] xl:text-xs font-medium">Onsite</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">PM role</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Maria Lopez — Designer</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Waiting on feedback • 5 yrs exp</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Portfolio review</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Figma expert</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="50">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Lever Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Hiring</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/lever" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Resume black hole</p><p class="text-xs sm:text-sm text-zinc-500">342 candidates across 12 postings, no way to surface the best fits quickly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scheduling nightmares</p><p class="text-xs sm:text-sm text-zinc-500">Email ping-pong with candidates and interviewers just to book one call</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Pipeline blindness</p><p class="text-xs sm:text-sm text-zinc-500">Which roles are stalled? Who's waiting on feedback? You're clicking through stages manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Feedback delays</p><p class="text-xs sm:text-sm text-zinc-500">Waiting days for interview scorecards, candidates ghosting because you're too slow</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI candidate matching</p><p class="text-xs sm:text-sm text-zinc-500">"Find senior engineers with React and AWS experience" — top picks surfaced instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-scheduling</p><p class="text-xs sm:text-sm text-zinc-500">AI finds open slots, sends calendar invites, and syncs with candidate availability</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time pipeline</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Which engineering candidates are stuck in tech screen?" — instant answer</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Feedback automation</p><p class="text-xs sm:text-sm text-zinc-500">AI drafts scorecards, flags blockers, and nudges interviewers for timely reviews</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Hiring Pipeline Is<br><span class="text-red-400">Broken</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Lever organizes your candidates, but finding top talent and moving them through the pipeline still requires endless manual work.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Resume Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 300+ applications for one engineering role. Lever shows you a list. You're manually skimming resumes, one by one, looking for React + AWS. The perfect candidate is in there — buried on page 7.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Scheduling Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Interview coordination is a full-time job. Candidate available Tuesday, interviewer 1 available Wednesday, interviewer 2 out of office. You're playing calendar Tetris in your email, losing top candidates to faster companies.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Pipeline Stagnation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Candidates stuck in 'Pending Feedback' for 2 weeks. You have no idea who's blocking what. By the time you follow up, they've accepted another offer. Your hiring velocity is glacial.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Hiring</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Lever</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Lever API key. MCPEngage discovers all available endpoints and builds 50+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Find senior engineers with React experience." "Schedule a tech screen for Sarah Chen." "Which candidates are waiting on feedback?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-triage new applications, send interview reminders, flag stalled candidates, and generate weekly pipeline reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Lever</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          50+ Lever tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Smart Candidate Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search candidates by skills, experience, stage, or tags. "Find all product managers in final round interviews."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Interview Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Schedule interviews, send calendar invites, and manage interview panels. "Schedule a tech screen for Sarah with Alex on Thursday."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Pipeline Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track time-to-hire, stage conversion rates, and bottlenecks. "Which roles have the slowest pipeline?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Candidate Communication</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send updates, rejection emails, and offer letters with AI-generated personalized content.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Feedback Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Analyze interview scorecards, flag concerns, and surface consensus. "Summarize feedback for James Park."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-round" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Recruiter Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track who's interviewing who, balance panel assignments, and optimize recruiter bandwidth across roles.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Lever account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Lever API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Lever settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Lever.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Lever?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Lever API key (generated in Settings → Integrations → API Credentials). MCPEngage uses the Lever REST API to create 50+ tools covering candidates, postings, interviews, feedback, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI read candidate resumes?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage accesses candidate profile data (name, email, experience, tags, stage) available through the Lever API. Full resume document parsing depends on how you've configured Lever's data structure. AI can search and filter based on structured fields.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it integrate with Calendly or Google Calendar?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage works with Lever's interview scheduling features. For deeper calendar integrations (Calendly, Google Calendar sync), you can connect those platforms separately via MCPEngage and build cross-platform workflows.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Greenhouse, Ashby, LinkedIn, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Lever?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Lever Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #3CB2A4; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Lever<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join recruiting teams using MCPEngage to hire faster with AI.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Lever is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Lever Connect. Not affiliated with Lever.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Senior Engineers — React + AWS</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">8 active</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">SC</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Chen</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">8 years exp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Tech Screen stage • Applied 2d ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Top Pick</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">AR</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Alex Rivera</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">10 years exp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Onsite stage • Interviewed 3d ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Strong</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;">KP</div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Kevin Patel</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">7 years exp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Phone Screen stage • Applied 5d ago</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Sarah Chen has highest interview score</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all 8 →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Interview scheduled</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Tech Screen — Sarah Chen</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Confirmed</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);line-height:1.5;">📅 Tomorrow, 2:00 PM - 3:00 PM<br/>👤 Interviewer: Alex Rivera<br/>🔗 Zoom link sent to both parties</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Confirmation email sent</span></div><div style="margin-top:6px;margin-left:28px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:8px 10px;"><div style="font-size:10px;color:rgba(255,255,255,0.3);margin-bottom:4px;">To: <span style="font-weight:600;color:#17c3b2;">sarah.chen@email.com</span></div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hi Sarah, Excited to chat tomorrow! Your tech screen with Alex is confirmed for 2 PM. Zoom link and prep materials attached. Looking forward to it!"</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all senior engineers with React and AWS experience in active pipeline' },
+      { type:'ai', text:'Found 8 matching candidates. Here are the top picks:', embed: embed_1 },
+      { type:'user', text:'Schedule a tech screen for Sarah Chen with Alex tomorrow at 2pm and send her a confirmation email' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Lever', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Lever API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Lever API', color:'text-green-400', delay:3000 },
+      { text:'✓ 50 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Lever', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Lever';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lightspeed/index.html b/lightspeed/index.html
index 5b288f0..1fa43a0 100644
--- a/lightspeed/index.html
+++ b/lightspeed/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Lightspeed Connect — AI-Power Your Retail in 2 Clicks</title>
+  <title>MCPEngage for Lightspeed — AI-Power Your Lightspeed in 2 Clicks</title>
+  <meta name="description" content="Connect Lightspeed to any AI model with MCPEngage. Manage sales, inventory, and products through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fef2f2',
-              100: '#fee2e2',
-              200: '#fecaca',
-              300: '#fca5a5',
-              400: '#f87171',
-              500: '#E4002B',
-              600: '#cc0026',
-              700: '#b30021',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,614 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #E4002B 0%, #ff6b6b 30%, #8b5cf6 70%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(228, 0, 43, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(228, 0, 43, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(228, 0, 43, 0.4);
-    }
-    .video-glow {
-      box-shadow: 0 25px 80px rgba(228, 0, 43, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; }
-      50% { opacity: 1; }
-    }
-    .pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .shimmer {
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 3s infinite;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-      box-shadow: 0 0 30px rgba(228, 0, 43, 0.4);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(228, 0, 43, 0.4), 0 0 40px 0 rgba(228, 0, 43, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(228, 0, 43, 0.6), 0 0 60px 10px rgba(228, 0, 43, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(228, 0, 43, 0.5), rgba(139, 92, 246, 0.5));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #18181b;
-      border-radius: calc(1rem - 1px);
-    }
-    .text-glow {
-      text-shadow: 0 0 40px rgba(228, 0, 43, 0.5);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl tracking-tight">Lightspeed Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-4xl mx-auto text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="relative flex h-2 w-2">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
-            </span>
-            Open Source + Hosted Cloud
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text text-glow">Lightspeed</span><br>
-            to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
-            The complete Lightspeed MCP server. <strong class="text-white">86 tools</strong> for sales, inventory, and analytics. 
-            No setup headaches. Just connect and automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-            <a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2">
-              Join the Waitlist
-              <i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
-            </a>
-            <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Social Proof -->
-          <div class="flex items-center justify-center gap-4">
-            <div class="flex -space-x-3">
-              <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-zinc-800 flex items-center justify-center text-xs font-semibold shadow-lg">+99</div>
-            </div>
-            <p class="text-zinc-400 text-sm">
-              Trusted by <strong class="text-white">500+</strong> retail businesses
-            </p>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Lightspeed + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Lightspeed</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Lightspeed to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage sales, track inventory, and optimize products — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/lightspeed" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/lightspeed
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-bag" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="tag" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about today's sales..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-bag" class="w-4 h-4"></i>
+                      Sales
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">87</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="package" class="w-4 h-4"></i>
+                      Inventory
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sale #8471 — $342.75</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Register 1 • Cashier: Alex</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Completed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">4 items</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Credit</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sale #8472 — $127.50</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Register 2 • Cashier: Maria</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">2 items</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Partial pay</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Return #8465 — $89.99</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Register 1 • Original sale 3 days ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Refund</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">1 item</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Store credit</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your retail operations</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/lightspeed.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="61">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Lightspeed Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="shopping-bag" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Sales</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Inventory</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Analytics</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Retail</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-16 items-center">
-        <div>
-          <span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
-          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
-            Setting up Lightspeed + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-6">
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Stockouts on bestsellers</p>
-                <p class="text-zinc-500 mt-1">You find out something sold out when a customer complains.</p>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">No cross-location visibility</p>
-                <p class="text-zinc-500 mt-1">Your stores are islands. Inventory data is scattered.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Generic customer service</p>
-                <p class="text-zinc-500 mt-1">Staff can't see purchase history. Every customer is a stranger.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="gradient-border">
-          <div class="gradient-border-inner p-8 md:p-10">
-            <div class="flex items-center gap-3 mb-8">
-              <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-                <i data-lucide="check" class="w-6 h-6 text-white"></i>
-              </div>
-              <h3 class="text-2xl font-bold">With Lightspeed Connect</h3>
-            </div>
-            <div class="space-y-5">
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>AI predicts demand and auto-reorders</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>Unified inventory across all locations</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>AI personalizes every interaction</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>Works with Claude, GPT, any MCP client</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>2-click OAuth — no API key headaches</span>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
       </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/lightspeed" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Lightspeed API access through one simple connection</p>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Sales Management</h3>
-          <p class="text-zinc-400">Access transactions, refunds, and real-time sales data across all registers.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="package" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Inventory Control</h3>
-          <p class="text-zinc-400">Track stock levels, manage vendors, and automate reorders intelligently.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Customer Profiles</h3>
-          <p class="text-zinc-400">Build loyalty programs and track complete purchase history.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="building-2" class="w-7 h-7 text-orange-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Multi-Location</h3>
-          <p class="text-zinc-400">Manage inventory and sales across all stores from one AI.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Purchase Orders</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Vendors</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Discounts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Gift Cards</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Reports</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Employees</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Registers</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
             
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone"
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Inventory blindness</p><p class="text-xs sm:text-sm text-zinc-500">You don't know what's low, what's dead stock, or what to reorder until you're already out</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual sales tracking</p><p class="text-xs sm:text-sm text-zinc-500">Pulling hourly sales reports means logging into Lightspeed and clicking through reports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Product data chaos</p><p class="text-xs sm:text-sm text-zinc-500">SKUs, pricing, and descriptions need updates but touching hundreds of products takes hours</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost revenue insights</p><p class="text-xs sm:text-sm text-zinc-500">Can't see which products drive profit, which are duds, or what's trending</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email"
-                placeholder="you@company.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="shield-check" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time inventory alerts</p><p class="text-xs sm:text-sm text-zinc-500">"What's running low?" — instant list with reorder suggestions, no manual checking</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice sales tracking</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's today's revenue by hour?" — get the breakdown without logging in</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Bulk product updates</p><p class="text-xs sm:text-sm text-zinc-500">"Increase all winter jacket prices by 15%" — done across catalog in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart product intel</p><p class="text-xs sm:text-sm text-zinc-500">AI surfaces bestsellers, slow movers, and margin opportunities automatically</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Store Is<br><span class="text-red-400">Bleeding Profit</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Lightspeed has the data, but by the time you see it, the bestseller is out of stock and the dead stock is piling up.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 text-lg mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/lightspeed-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Inventory Nightmare</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your bestsellers go out of stock because you didn't see the trend. Dead inventory sits on shelves eating margin. You're reordering blind and guessing what customers want.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Margin Erosion</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Low-margin items sell fast, high-margin products collect dust, and you can't tell which SKUs actually make money until month-end when it's too late to fix it.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Pricing Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Sales and promotions require hours of manual price changes. You miss competitive pricing opportunities, leave money on the table, and frustrate customers with inconsistent pricing.</p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-green-400">✓ Lightspeed MCP Server running</span>
-<span class="text-green-400">✓ 86 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Retail</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Lightspeed</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Lightspeed API credentials. MCPEngage discovers sales, inventory, products, and customers — building 61+ tools automatically. No technical expertise required.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"What's my inventory turnover on shoes?" "Show top 10 products this week." "Update winter sale pricing." Your AI understands Lightspeed and acts instantly.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Store</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: flag low inventory, generate daily sales summaries, alert on high-margin product trends, and sync Lightspeed data to your accounting software.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Lightspeed</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          61+ Lightspeed tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-bag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Sales Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time sales, returns, and payment breakdowns. "What's my average transaction value today?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Inventory Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track stock levels, turnover, and reorder points. "Which products are below reorder threshold?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Product Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update pricing, descriptions, and SKUs in bulk. "Show me all products with margin below 30%."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track purchase history, loyalty points, and lifetime value. "Who are my top 10 customers this month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Profit Optimization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Identify bestsellers, slow movers, and margin opportunities. "Which categories have the highest sell-through rate?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Retail Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-generate EOD reports, inventory alerts, and product performance dashboards. "Send me daily sales summary at 9pm."</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Lightspeed Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Lightspeed account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Lightspeed settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-        Ready to AI-power your <span class="gradient-text">Lightspeed?</span>
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 500+ retail businesses already automating with Lightspeed Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center">
-            <i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to Lightspeed Retail.
           </div>
-          <span class="font-bold text-xl">Lightspeed Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
-          <a href="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
-          <a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Lightspeed?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Lightspeed API access token (generated in Lightspeed Settings > API Credentials). MCPEngage uses the Lightspeed API to create 61+ tools covering sales, inventory, products, and customers. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Lightspeed Connect. Not affiliated with Lightspeed.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Lightspeed data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Lightspeed's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Lightspeed's activity history.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my accounting software?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Connect Lightspeed + QuickBooks, Xero, or any other MCP-enabled platform. Have AI sync daily sales, inventory costs, and tax data automatically — no more manual exports.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Multi-location retail plans available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Shopify, Stripe, Mailchimp, and more. Each platform gets its own MCP server. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Lightspeed<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of retailers using MCPEngage to supercharge their Lightspeed POS.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Lightspeed is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-brand-600 rounded-full font-semibold transition-all"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#f87171;text-transform:uppercase;letter-spacing:0.5px;">Low Inventory Alert</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">7 products</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f87171;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Winter Jacket - Black (M)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Stock: 2 units · Reorder: 10 units</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Critical</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Running Shoes - Blue (9)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Stock: 4 units · Reorder: 12 units</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Low</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Create purchase orders?</span><span style="font-size:10px;color:#ff7700;cursor:pointer;">Generate POs →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Pricing Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">12 SKUs</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ Winter Jacket - Black (all sizes)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">$89.99 → $103.49 (+15%)</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ Winter Jacket - Navy (all sizes)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">$94.99 → $109.24 (+15%)</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Which products are below reorder threshold?' },
+      { type:'ai', text:'7 products need reordering:', embed: embed_1 },
+      { type:'user', text:'Increase all winter jacket prices by 15%' },
+      { type:'ai', text:'Done! Updated 12 winter jacket SKUs:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Lightspeed', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Lightspeed API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Lightspeed API', color:'text-green-400', delay:3000 },
+      { text:'✓ 61 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Lightspeed', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Lightspeed';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loom/index.html b/loom/index.html
index 5397d85..b6a758a 100644
--- a/loom/index.html
+++ b/loom/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Loom Connect — AI-Power Your Video Messaging in 2 Clicks</title>
+  <title>MCPEngage for Loom — AI-Power Your Loom in 2 Clicks</title>
+  <meta name="description" content="Connect Loom to any AI model with MCPEngage. Search videos, transcribe content, and automate video workflows — all through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#625DF5',
-              600: '#625DF5dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #625DF5 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #625DF525, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #625DF520; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #625DF5">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Loom Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #625DF5; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #625DF5"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Loom</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Loom MCP server. Videos, analytics, and sharing. <strong class="text-white">48 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #625DF5; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/loom.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #625DF5; color: #fff">
-            48 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Loom + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Loom + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">No idea who watches</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #625DF530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
-            </div>
-            <p class="text-white font-medium">Real-time viewer analytics</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Videos buried in folders</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #625DF530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
-            </div>
-            <p class="text-white font-medium">AI-powered search and discovery</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Follow-ups forgotten</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #625DF530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
-            </div>
-            <p class="text-white font-medium">Auto-alert on high engagement</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Loom</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Loom API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #625DF520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Video Management</h3>
-          <p class="text-zinc-400 text-sm">Upload, organize, and manage your video library.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #625DF520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Sharing & Permissions</h3>
-          <p class="text-zinc-400 text-sm">Control access, generate links, and track viewers.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #625DF520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics</h3>
-          <p class="text-zinc-400 text-sm">See who watched, completion rates, and engagement metrics.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #625DF520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Transcripts & Captions</h3>
-          <p class="text-zinc-400 text-sm">Auto-generate transcripts and make videos searchable.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #625DF5; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Loom to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Search videos, extract insights, and automate sharing — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/loom" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/loom
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="video" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="folder" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="message-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="share-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Loom videos..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="video" class="w-4 h-4"></i>
+                      Videos
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="clock" class="w-4 h-4"></i>
+                      Recent
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q4 Product Demo</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • 2h ago • 8:42</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Trending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">247 views</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">12 comments</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Onboarding: New Hire Guide</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">James Park • 1d ago • 15:23</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Internal</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">38 views</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">HR folder</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Bug Fix Walkthrough</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Alex Rivera • 3d ago • 4:15</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Private</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">5 views</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Engineering</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="25">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Loom Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Video</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/loom" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost video knowledge</p><p class="text-xs sm:text-sm text-zinc-500">Hundreds of Looms scattered across folders, no way to find that bug fix demo from 3 months ago</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual transcription</p><p class="text-xs sm:text-sm text-zinc-500">Watching entire 20-minute videos to find one key point someone mentioned</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Sharing hell</p><p class="text-xs sm:text-sm text-zinc-500">Copy-pasting Loom links into Slack, email, Notion — no context, no organization</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Insight blindness</p><p class="text-xs sm:text-sm text-zinc-500">No idea which videos are actually being watched or what topics resonate</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI video search</p><p class="text-xs sm:text-sm text-zinc-500">"Find all product demos mentioning SSO" — AI searches titles, transcripts, comments</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant summaries</p><p class="text-xs sm:text-sm text-zinc-500">"Summarize the Q4 demo video" — get key points in 10 seconds, not 10 minutes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart sharing</p><p class="text-xs sm:text-sm text-zinc-500">Auto-post videos to the right channels with AI-generated descriptions</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Content intelligence</p><p class="text-xs sm:text-sm text-zinc-500">"Which onboarding videos have low engagement?" — optimize your library</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Video Library Is<br><span class="text-red-400">Chaos</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Loom makes recording easy, but finding, summarizing, and organizing videos is still manual torture.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Unsearchable Archives</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 500+ Looms. Someone asks "where's that demo Sarah did?" You spend 20 minutes scrolling through folders, opening videos, watching intros. The knowledge is there, but it's buried.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time Sink Reviews</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your team records everything — great for async. Terrible when you need to review 10 videos to prep for a meeting. No summaries, no timestamps, just raw video.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Folder Graveyard</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Videos dumped into folders by project, by quarter, by person. No tagging, no search, no metadata. Your Loom library is a black hole where good content goes to die.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Video</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Loom</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Loom API key. MCPEngage discovers all available endpoints and builds 25+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Find all videos about the new dashboard." "Summarize the Q4 demo." "Which onboarding videos have the most comments?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-tag new videos, post summaries to Slack, archive old content, and generate weekly engagement reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Loom</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          25+ Loom tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Transcript Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search across video titles, descriptions, and full transcripts. "Find all videos where we mention the API integration."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">AI Summaries</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate instant summaries of any video. Get key points, action items, and timestamps without watching the full video.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder-tree" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Smart Organization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-tag videos by topic, project, or team. AI suggests folder structures and finds duplicates or outdated content.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Engagement Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track views, completion rates, and comments. "Which product videos have the highest drop-off rates?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="share-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Auto-Sharing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Automatically post new videos to Slack channels, Notion pages, or email lists with AI-generated context.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Comment Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Analyze video comments for questions, feedback, and action items. "What are people confused about in the onboarding series?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Loom account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Loom API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Loom settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Loom.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Loom?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Loom API key (generated in Loom Settings → Advanced). MCPEngage uses the Loom REST API to create 25+ tools covering videos, folders, comments, transcripts, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI search video transcripts?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full access to Loom's auto-generated transcripts. You can search across all video content, get timestamped results, and even generate summaries highlighting specific topics mentioned in the transcript.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with Loom Spaces?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage supports Loom Spaces (formerly Workspaces), allowing you to organize, search, and manage videos across multiple spaces. Perfect for agencies or companies with separated team libraries.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Slack, Notion, Google Drive, Asana, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Loom?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Loom Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #625DF5; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Loom<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join teams using MCPEngage to unlock their video knowledge with AI.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Loom is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Loom Connect. Not affiliated with Loom.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Product Demos — Last 30 Days</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">5 videos</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">▶</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q4 Product Demo</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">8:42</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen • 2h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">247 views</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Trending</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">▶</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Dashboard Redesign Walkthrough</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">12:15</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Alex Rivera • 5d ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">89 views</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#a78bfa;">▶</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Mobile App Beta Demo</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">6:33</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Maria Lopez • 12d ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">124 views</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Total: 1,248 views across 5 videos</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q4 Demo Summary Generated</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);line-height:1.6;margin-bottom:8px;"><strong>Key Points:</strong></div><ul style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.6;margin:0;padding-left:16px;"><li>New SSO integration (2:15)</li><li>Dashboard redesign with dark mode (4:30)</li><li>Mobile app beta launch timeline (6:45)</li><li>Q&A: enterprise features roadmap (7:20)</li></ul></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Shared to #product-updates</span></div><div style="margin-top:6px;margin-left:28px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:8px 10px;"><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">🎥 <strong>Q4 Product Demo</strong> (8:42)<br/>Sarah just dropped our Q4 demo covering SSO, dark mode, and mobile beta. Key highlights + timestamps in thread 👇</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Find all videos about product demos from the last 30 days' },
+      { type:'ai', text:'Found 5 product demo videos from the last month:', embed: embed_1 },
+      { type:'user', text:'Summarize the Q4 demo and share it to #product-updates on Slack' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Loom', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Loom API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Loom API', color:'text-green-400', delay:3000 },
+      { text:'✓ 25 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Loom', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Loom';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/meta-ads/index.html b/meta-ads/index.html
index d0002a3..ef076bb 100644
--- a/meta-ads/index.html
+++ b/meta-ads/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Meta Ads Connect — AI-Power Your Facebook & Instagram Ads in 2 Clicks</title>
+  <title>MCPEngage for Meta Ads — AI-Power Your Meta Ads in 2 Clicks</title>
+  <meta name="description" content="Connect Meta Ads to any AI model with MCPEngage. Manage campaigns, analyze performance, and optimize ad spend through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#1877F2',
-              600: '#1877F2dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #1877F2 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1877F225, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #1877F220; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1877F2">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Meta Ads Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1877F2; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #1877F2"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Meta Ads</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Meta Ads MCP server. Campaigns, ad sets, creatives, and analytics. <strong class="text-white">98 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1877F2; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/meta-ads.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1877F2; color: #fff">
-            98 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Meta Ads + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Meta Ads + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Budget waste on bad ads</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
-            </div>
-            <p class="text-white font-medium">AI pauses underperformers instantly</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual A/B test analysis</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
-            </div>
-            <p class="text-white font-medium">Auto-declare winners and scale</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Audience fatigue</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
-            </div>
-            <p class="text-white font-medium">Smart creative rotation</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Meta Ads</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Meta Ads API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
-          <p class="text-zinc-400 text-sm">Create, launch, and optimize ad campaigns programmatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Audience Targeting</h3>
-          <p class="text-zinc-400 text-sm">Build custom and lookalike audiences, manage exclusions.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Creative Testing</h3>
-          <p class="text-zinc-400 text-sm">A/B test ads, manage assets, and rotate creatives.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Performance Analytics</h3>
-          <p class="text-zinc-400 text-sm">Track ROAS, CPA, conversions, and attribution data.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1877F2; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Meta Ads to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage campaigns, optimize audiences, and track ROI — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/meta-ads" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/meta-ads
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="megaphone" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Meta Ads campaigns..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="megaphone" class="w-4 h-4"></i>
+                      Campaigns
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
+                      Insights
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Product Launch</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 3 ad sets</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$248/day</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">ROAS 4.2x</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Retargeting Q4</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 5 ad sets</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$156/day</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">ROAS 6.8x</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Brand Awareness</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Paused • 2 ad sets</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Paused</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$0/day</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">CPM $8.20</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Meta Ads Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Optimization</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/meta-ads" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual campaign monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Check Ads Manager every hour to spot underperforming campaigns</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet reporting</p><p class="text-xs sm:text-sm text-zinc-500">Export CSVs, copy-paste into Excel, manually calculate ROAS</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Delayed optimizations</p><p class="text-xs sm:text-sm text-zinc-500">Budget reallocations take hours — bleeding money on bad ads</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Siloed data</p><p class="text-xs sm:text-sm text-zinc-500">Campaign metrics in Meta, conversions in GA4, CRM data elsewhere</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI auto-monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Get instant alerts when CPA spikes or ROAS drops below target</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-query insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show top 5 campaigns by ROAS this week" — instant answers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time optimization</p><p class="text-xs sm:text-sm text-zinc-500">Pause underperformers, scale winners, adjust bids — all in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Cross-reference ad data with CRM, analytics, and revenue in one view</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Ad Budget Is<br><span class="text-red-400">Bleeding</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Meta Ads Manager is powerful, but by the time you spot a problem, you've already wasted thousands.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="gauge" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Dashboard Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Campaigns, ad sets, ads, audiences, placements — dozens of views, hundreds of metrics. You need a data science degree just to find what matters.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="timer" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Reaction Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Check dashboard at 9 AM, see a problem from yesterday, fix it by noon. Meanwhile, Meta spent $500 on ads that don't convert.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="puzzle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Fragmented Truth</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Meta says 100 conversions. Google Analytics says 72. Shopify says 65. Which number do you trust? Where's the real ROI?</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Advertising</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Meta Ads</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Meta access token and ad account ID. MCPEngage discovers all campaigns, ad sets, ads, and audiences — building 45+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which campaigns have ROAS below 3x?" "Pause all ads with CPA over $50." "Show me audience overlap for my top 3 ad sets." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Optimization</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up rules: auto-pause low performers, scale high-ROAS campaigns, get Slack alerts when spend exceeds budget, generate weekly performance reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Meta Ads</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ Meta Ads tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="megaphone" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Campaign Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, pause, duplicate, and archive campaigns through conversation. "Launch a new campaign targeting homeowners aged 35-50."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Audience Builder</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Build custom audiences, lookalikes, and saved audiences with natural language. "Create a lookalike of my top 10% purchasers."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Performance Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time insights on ROAS, CPA, CTR, conversions, and spend. "Which ad creative has the highest conversion rate?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="sliders" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Budget Optimization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Adjust budgets, bids, and campaign settings instantly. "Increase budget on Product Launch campaign by 20%."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout-grid" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Creative Testing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Compare ad variations, A/B test creatives, and identify winning combinations. "Which headline performs better: A or B?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Proactive notifications when CPA spikes, ROAS drops, or campaigns exceed daily budget. Stop wasting money before it happens.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Meta Ads account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Meta Ads API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Meta Ads settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Meta Ads.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Meta Ads?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Meta access token (generated in Meta Business Suite) and your ad account ID. MCPEngage uses the Meta Marketing API to create 45+ tools covering campaigns, ad sets, ads, audiences, insights, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually pause campaigns or change budgets?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your Meta Ads account (with your permission). You can pause/activate campaigns, adjust budgets, create audiences, duplicate ad sets, and more — all through natural language. Safeguards prevent accidental deletions.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Google Ads, TikTok Ads, LinkedIn Ads, Shopify, Stripe, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Meta Ads?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Meta Ads Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1877F2; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Meta Ads<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of marketers using MCPEngage to maximize their ad spend.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Meta Ads is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Meta Ads Connect. Not affiliated with Meta Ads.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Low ROAS Campaigns</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 7 days</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">⚠</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Brand Awareness</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Spend: $1,284</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">ROAS 1.8x</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">CPA $42.80</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Cold Traffic Test</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Spend: $892</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">ROAS 2.4x</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">CPA $38.50</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Total wasted: $2,176 last 7 days</span><span style="font-size:10px;color:#ef4444;cursor:pointer;">Pause both →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Campaign Updates</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 changes</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Brand Awareness → Paused</span></div><div style="display:flex;gap:6px;margin-left:28px;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Saved $183/day</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">ROAS 1.8x</span></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Retargeting Q4 Budget Increased</span></div><div style="display:flex;gap:6px;margin-left:28px;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">$156 → $203/day</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">+30%</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">ROAS 6.8x</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me campaigns with ROAS below 3x in the last 7 days' },
+      { type:'ai', text:'Found 2 underperforming campaigns:', embed: embed_1 },
+      { type:'user', text:'Pause Brand Awareness and increase budget on Retargeting Q4 by 30%' },
+      { type:'ai', text:'Done! Here\'s what changed:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Meta Ads', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Meta Marketing API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Meta Ads API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Meta Ads', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Meta Ads';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/monday/index.html b/monday/index.html
index ec82933..5e36473 100644
--- a/monday/index.html
+++ b/monday/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Monday.com Connect — AI-Power Your Work Management in 2 Clicks</title>
+  <title>MCPEngage for Monday.com — AI-Power Your Monday.com in 2 Clicks</title>
+  <meta name="description" content="Connect Monday.com to any AI model with MCPEngage. Manage boards, items, and updates through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#6161FF',
-              600: '#6161FFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #6161FF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #6161FF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #6161FF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #6161FF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Monday.com Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #6161FF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #6161FF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Monday.com</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Monday.com MCP server. Boards, items, updates, and automations. <strong class="text-white">134 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #6161FF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/monday.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #6161FF; color: #fff">
-            134 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Monday.com + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Monday.com + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Status update meetings</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #6161FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
-            </div>
-            <p class="text-white font-medium">AI auto-generates progress reports</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual task assignments</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #6161FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
-            </div>
-            <p class="text-white font-medium">Smart workload balancing</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Deadline surprises</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #6161FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
-            </div>
-            <p class="text-white font-medium">Proactive at-risk alerts</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Monday.com</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Monday.com API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #6161FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Board Management</h3>
-          <p class="text-zinc-400 text-sm">Create and manage boards, groups, and columns dynamically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #6161FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Item Tracking</h3>
-          <p class="text-zinc-400 text-sm">Add, update, and assign tasks with custom fields and statuses.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #6161FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Automations</h3>
-          <p class="text-zinc-400 text-sm">Trigger workflows, notifications, and status changes.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #6161FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Reporting</h3>
-          <p class="text-zinc-400 text-sm">Generate dashboards, charts, and custom views on the fly.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #6161FF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Monday.com to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Update tasks, manage boards, and track projects — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/monday" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/monday
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="layout" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="check-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="activity" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Monday.com boards..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="check-square" class="w-4 h-4"></i>
+                      Tasks
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">89</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="layout" class="w-4 h-4"></i>
+                      Projects
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Website Redesign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">12 tasks • 8 completed</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">67% done</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Design</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Product Launch</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">24 tasks • 3 overdue</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">At Risk</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Behind schedule</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Product</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Customer Onboarding</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">15 tasks • All on track</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">On Track</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">93% done</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Success</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Monday Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI PM</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/monday" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual status updates</p><p class="text-xs sm:text-sm text-zinc-500">Team members forget to update task status, leaving project managers blind to progress</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Context switching</p><p class="text-xs sm:text-sm text-zinc-500">Jumping between boards, filters, and views to find the right task takes 10+ clicks</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Siloed project data</p><p class="text-xs sm:text-sm text-zinc-500">Can't see cross-board dependencies or how one delay impacts other projects</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Meeting prep chaos</p><p class="text-xs sm:text-sm text-zinc-500">15 minutes before standup, frantically clicking through boards to gather status updates</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-task updates</p><p class="text-xs sm:text-sm text-zinc-500">"Mark homepage design as complete and move to review" — done instantly while walking to a meeting</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural language queries</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me all overdue tasks assigned to Sarah" — instant results across all boards</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Project intelligence</p><p class="text-xs sm:text-sm text-zinc-500">AI surfaces blockers, dependencies, and at-risk projects without manual digging</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-sentence standups</p><p class="text-xs sm:text-sm text-zinc-500">"Generate my standup report" — AI pulls your tasks, updates, and blockers in seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Projects Are<br><span class="text-red-400">Falling Behind</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Monday.com has all the tasks, but your team can't keep up with updates.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Status Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't quickly see which projects are at risk, which tasks are blocked, or where to focus effort. By the time you know there's a problem, deadlines have already slipped.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mouse-pointer" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Click Fatigue</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Finding a single task requires 5+ clicks through boards, groups, and filters. Your team spends more time navigating Monday.com than actually working.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Update Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Team members forget to update task status, so your boards show stale data. You can't trust the information when making decisions or reporting to stakeholders.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Project Management</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Monday.com</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Monday.com API token. MCPEngage discovers all boards, items, columns, and updates — building 55+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all high-priority tasks due this week." "Update the homepage task to Done." "What's blocking the Q1 launch?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-update task status from Slack messages, generate daily standup reports, flag at-risk projects, and sync updates across boards.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Monday.com</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Monday.com tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Task Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and complete tasks across all boards. "Move all design tasks to In Progress and assign to Alex."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Board Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query across boards and workspaces. "Show me all projects with overdue tasks assigned to the marketing team."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Team Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See who's overloaded and who has capacity. "Who on the dev team has the lightest workload this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Dependency Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Identify blockers and dependencies automatically. "What tasks are blocked by the API integration?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Project Health</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time project status and risk alerts. "Which projects are at risk of missing deadlines this quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Timeline Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Adjust dates and dependencies in one command. "Push all Q1 launch tasks back by one week."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Monday.com account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Monday.com API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Monday.com settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Monday.com.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Monday.com?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Monday.com API token (generated in your Monday.com account settings under Developers > My Access Tokens). MCPEngage uses the Monday.com API to create 55+ tools covering boards, items, updates, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my boards?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Monday.com's official API with the same permissions as any integration. All changes are logged in Monday.com's activity log, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with other project tools?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Sync Monday.com tasks to Jira, Linear, Asana, or any other MCP-enabled project management tool in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Jira, Asana, Linear, Slack, HubSpot, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Monday.com?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Monday.com Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #6161FF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Monday.com<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their project management.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Monday.com is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Monday.com Connect. Not affiliated with Monday.com.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Overdue Tasks</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">7 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">🔥</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Finalize homepage mockups</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Website Redesign · Sarah · 3 days overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">WORKING ON IT</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">⚠️</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">API integration testing</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Q1 Launch · Mike · 1 day overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">STUCK</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:12px;">📋</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Update help docs</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Customer Onboarding · Alex · 2 days overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;">TODO</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Task Updated</span></div></div><div style="padding:12px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:10px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Finalize homepage mockups</span></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Status:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;text-decoration:line-through;opacity:0.5;">Working On It</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Done</span></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);">✉️ Notification sent to Sarah:<br>"Homepage mockups are complete and ready for your review!"</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all overdue tasks across all boards' },
+      { type:'ai', text:'Found 7 overdue tasks:', embed: embed_1 },
+      { type:'user', text:'Move the homepage task to Done and notify Sarah that it\'s ready for review' },
+      { type:'ai', text:'Task updated and notification sent:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Monday.com', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Monday.com API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Monday.com API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Monday.com', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Monday.com';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/n8n-apps/index.html b/n8n-apps/index.html
new file mode 100644
index 0000000..4346ed9
--- /dev/null
+++ b/n8n-apps/index.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCPEngage for n8n — AI-Power Your n8n in 2 Clicks</title>
+  <meta name="description" content="Connect n8n to any AI model with MCPEngage. Manage workflows, monitor executions, and automate integrations through natural conversation.">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+          colors: {
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
+  </style>
+</head>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+      </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect n8n + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">n8n</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects n8n to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Build workflows, debug executions, and manage credentials — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/n8n-apps" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/n8n-apps
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="workflow" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="zap" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="key" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="activity" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your n8n workflows..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="workflow" class="w-4 h-4"></i>
+                      Workflows
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="clock" class="w-4 h-4"></i>
+                      Recent
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Slack to Notion Sync</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • Runs every 15m</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Running</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">324 runs</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">98.2% success</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Customer Onboarding</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • Webhook trigger</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Running</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">1.2K runs</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">94.8% success</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Daily Sales Report</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Inactive • 2 errors</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Error</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Last run 6h</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Auth failed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="42">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">n8n Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Workflow Monitor</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/n8n-apps" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual workflow debugging</p><p class="text-xs sm:text-sm text-zinc-500">Click through 20+ nodes trying to find where the execution failed</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Credential chaos</p><p class="text-xs sm:text-sm text-zinc-500">Which API key expired? Check every integration manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No execution visibility</p><p class="text-xs sm:text-sm text-zinc-500">Did the workflow run? Did it succeed? Log into n8n to check</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Complex workflow edits</p><p class="text-xs sm:text-sm text-zinc-500">Need to change one filter? Open the UI, find the node, edit JSON</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered debugging</p><p class="text-xs sm:text-sm text-zinc-500">"Why did Customer Onboarding fail?" — instant error analysis</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart credential management</p><p class="text-xs sm:text-sm text-zinc-500">Get alerts before credentials expire, update through conversation</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Slack alerts when workflows fail, success rate tracking, instant logs</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural-language edits</p><p class="text-xs sm:text-sm text-zinc-500">"Add a 5-second delay after the Slack node" — done in seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Workflows Are<br><span class="text-red-400">Breaking Silently</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          n8n is powerful, but by the time you notice a workflow failed, you've already lost hours of data.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="circle-slash" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Silent Failures</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Workflows fail at 3 AM. You find out at 10 AM when a customer asks why they didn't get onboarded. No alerts, no visibility, just broken automation.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="puzzle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Debugging Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">20 nodes, 5 branches, nested if/else logic. Which node failed? What was the input? You click through execution logs for 30 minutes trying to understand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="key-round" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Credential Rot</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">API keys expire, OAuth tokens become invalid, service passwords change. Your workflows stop working and you have no idea why until you manually test every connection.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Automation</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your n8n Instance</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your n8n instance URL and API key. MCPEngage discovers all workflows, executions, and credentials — building 42+ tools automatically. Works with self-hosted and cloud n8n.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show failed executions from the last 24 hours." "Activate the Daily Sales Report workflow." "Which credentials expire this month?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Management</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for workflow failures, monitor execution success rates, get notified before credentials expire, generate weekly automation reports — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge n8n</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          42+ n8n tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="workflow" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Workflow Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, activate, deactivate, and duplicate workflows through conversation. "Duplicate Slack to Notion Sync and change the trigger to hourly."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="play-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Execution Monitoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track workflow runs, analyze failures, and debug errors in real-time. "Show me the input data from the last failed Customer Onboarding run."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Credential Manager</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, update, and validate credentials before they break your workflows. "Test all Slack credentials and notify me if any fail."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Smart Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Find workflows by name, tag, or the services they use. "Show all workflows that use the HubSpot API."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-4" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Success Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track workflow performance, success rates, and execution times. "Which workflow has the lowest success rate this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Proactive Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get notified immediately when workflows fail, credentials expire, or execution times spike. Stop issues before they impact users.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to n8n.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to n8n?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your n8n instance URL (self-hosted or cloud) and an API key (generated in n8n Settings). MCPEngage uses the n8n REST API to create 42+ tools covering workflows, executions, credentials, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually activate workflows and update credentials?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your n8n instance (with your permission). You can activate/deactivate workflows, update credentials, duplicate workflows, and trigger executions — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Zapier, Make, Slack, HubSpot, Salesforce, Stripe, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating n8n<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of automation teams using MCPEngage to bulletproof their workflows.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for n8n is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Failed Executions</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 24h</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Daily Sales Report</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">6h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Auth failed</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: Salesforce</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Customer Onboarding</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">14h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Timeout</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: HTTP Request</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Lead Enrichment</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">22h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Invalid JSON</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: Code</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">3 of 142 executions failed (2.1%)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in n8n →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Workflow Fixed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">Problem found:</div><div style="background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.15);border-radius:8px;padding:8px 10px;margin-bottom:10px;"><div style="font-size:11px;font-weight:600;color:#ef4444;margin-bottom:4px;">Salesforce OAuth token expired</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.4;">Error 401: Unauthorized — credential "Salesforce Production" last refreshed 92 days ago</div></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Credential refreshed</span></div><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Workflow reactivated</span></div></div><div style="padding:10px 14px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">Next scheduled run:</div><div style="font-size:12px;color:rgba(255,255,255,0.7);font-weight:600;">Today at 6:00 PM EST</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all failed workflow executions from the last 24 hours' },
+      { type:'ai', text:'Found 3 failed executions:', embed: embed_1 },
+      { type:'user', text:'What\'s wrong with Daily Sales Report? Fix it and reactivate' },
+      { type:'ai', text:'Diagnosed and fixed! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: n8n', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to n8n API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to n8n API', color:'text-green-400', delay:3000 },
+      { text:'✓ 42 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about n8n', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'n8n';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/notion/index.html b/notion/index.html
index 03233ca..06d0434 100644
--- a/notion/index.html
+++ b/notion/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Notion Connect — AI-Power Your Workspace in 2 Clicks</title>
+  <title>MCPEngage for Notion — AI-Power Your Notion in 2 Clicks</title>
+  <meta name="description" content="Connect Notion to any AI model with MCPEngage. Manage pages, databases, and blocks through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#000000',
-              600: '#000000dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #000000 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #00000025, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #00000020; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Notion Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #000000; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #000000"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Notion</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Notion MCP server. Pages, databases, and blocks. <strong class="text-white">86 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #000000; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/notion.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #000000; color: #fff">
-            86 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Notion + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Notion + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Lost docs and context</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">AI finds anything instantly</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual meeting notes</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">Auto-create and populate pages</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Stale documentation</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
-              <i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
-            </div>
-            <p class="text-white font-medium">Scheduled content updates</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Notion</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Notion API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Page Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, and organize pages and subpages.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Database Operations</h3>
-          <p class="text-zinc-400 text-sm">Query, filter, and manage database entries programmatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Block Editing</h3>
-          <p class="text-zinc-400 text-sm">Add text, headings, lists, and rich content blocks.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Search & Discovery</h3>
-          <p class="text-zinc-400 text-sm">Find content across your entire workspace instantly.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #000000; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Notion to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage pages, query databases, and update content — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/notion" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/notion
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="database" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="layout" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Notion workspace..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Pages
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">127</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="database" class="w-4 h-4"></i>
+                      Databases
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 2025 Planning</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Updated 12 min ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Strategy</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">5 contributors</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Product Roadmap</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Updated 2 hours ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Engineering</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">12 contributors</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Meeting Notes — Jan 16</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Created 4 hours ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Draft</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Leadership</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">3 contributors</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Notion Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Workspace</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/notion" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Search frustration</p><p class="text-xs sm:text-sm text-zinc-500">Spend 5 minutes hunting for "that one doc someone shared last month"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual updates</p><p class="text-xs sm:text-sm text-zinc-500">Copy-paste the same status update across 4 different pages every week</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Database blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly answer "How many tasks are assigned to me?" without opening Notion</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Content sprawl</p><p class="text-xs sm:text-sm text-zinc-500">Pages scattered across workspaces, duplicates everywhere, no single source of truth</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant retrieval</p><p class="text-xs sm:text-sm text-zinc-500">"Find the Q1 planning doc" — AI searches and opens it in 2 seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-sync updates</p><p class="text-xs sm:text-sm text-zinc-500">"Update all project status pages to 'On Track'" — done in one command</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all my tasks due this week" — instant answer without opening Notion</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI organization</p><p class="text-xs sm:text-sm text-zinc-500">Automatically categorize pages, tag content, and maintain structure</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Lost in Notion</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Notion is flexible, but that flexibility creates chaos. Information is everywhere and nowhere.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Search Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You know the information exists in Notion. You saw it last week. But finding it now? Good luck. Search returns 47 results and none of them are what you need.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="copy" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Duplication</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Same meeting notes template, copy-pasted 52 times a year. Same status update, repeated across 6 dashboards. Your team wastes hours on redundant data entry.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Database Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 14 databases tracking different things. They're all related but not connected. Querying across them requires opening multiple tabs and doing mental joins.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Knowledge</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Notion</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Authenticate via Notion's OAuth flow and select which pages to share. MCPEngage discovers all accessible pages, databases, and content — building 45+ tools automatically.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Find all pages tagged 'roadmap'." "Add a new row to the tasks database." "Show me recent updates to the Q1 planning doc." Your AI navigates Notion like you do.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workspace</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: create meeting notes templates automatically, sync status across dashboards, generate weekly summaries, and tag content intelligently — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Notion</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          45+ Notion tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Page Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, search, and archive pages through conversation. "Create a new meeting notes page for Jan 16."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Database Queries</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query any database with natural language filters. "Show me all tasks assigned to Sarah that are due this week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Block Manipulation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Add, update, and delete content blocks. "Add a to-do list block with 3 items to the roadmap page."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Smart Search</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Full-text search across all pages and databases. "Find documents mentioning 'pricing strategy' from last quarter."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="link" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Relation Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Link pages, create relations, and manage properties. "Link this meeting note to the Q1 planning database."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Template Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-create pages from templates with dynamic content. "Create next week's sprint planning doc using the template."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Notion account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Notion API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Notion settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Notion.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Notion?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You create an integration in your Notion workspace and grant MCPEngage access to specific pages or databases. MCPEngage uses the Notion API to create 45+ tools covering pages, databases, blocks, and search. You control exactly what the AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it read private pages?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Only if you explicitly share them with the integration. Notion's permission model is granular — you can share individual pages, databases, or entire workspaces. MCPEngage respects all Notion permissions.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with Notion databases?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely! MCPEngage can query, filter, create, and update database entries. You can ask questions like "Show me all tasks due next week" or "Add a new project to the roadmap database."
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Airtable, Jira, Slack, GitHub, Salesforce, Stripe, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Notion?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Notion Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #000000; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Notion<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Notion workspace.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Notion is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Notion Connect. Not affiliated with Notion.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#fff;"></div><span style="font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;">Recent Updates — Last 24h</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">12 pages</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;"><span style="font-size:14px;">📋</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q1 2025 Planning</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Edited by Sarah Chen · 12 min ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">In Progress</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);text-transform:uppercase;">Strategy</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;"><span style="font-size:14px;">🚀</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Product Roadmap</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Edited by Alex Kim · 2 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Active</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);text-transform:uppercase;">Engineering</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;"><span style="font-size:14px;">📝</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Meeting Notes — Jan 16</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Created by Maria Lopez · 4 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Draft</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);text-transform:uppercase;">Leadership</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Showing 3 of 12 updated pages</span><span style="font-size:10px;color:#fff;cursor:pointer;">View all in Notion →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Page Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">New page created</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><span style="font-size:18px;">🚀</span><span style="font-size:13px;font-weight:600;color:#e4e4e7;">Product Launch Plan</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Created in: Workspace Home</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Tasks database added</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Database: Launch Tasks</div><div style="display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);">📝 Task Name</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);">👤 Assigned</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);">📅 Due Date</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);">✅ Status</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all pages updated in the last 24 hours' },
+      { type:'ai', text:'Found 12 recently updated pages:', embed: embed_1 },
+      { type:'user', text:'Create a new page called \'Product Launch Plan\' and add a tasks database' },
+      { type:'ai', text:'Created! Here\'s your new page:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Notion', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Notion API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Notion API', color:'text-green-400', delay:3000 },
+      { text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Notion', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Notion';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pandadoc/index.html b/pandadoc/index.html
index 1fefa6f..43ab0d4 100644
--- a/pandadoc/index.html
+++ b/pandadoc/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PandaDoc Connect — AI-Power Your Document Workflows in 2 Clicks</title>
+  <title>MCPEngage for PandaDoc — AI-Power Your PandaDoc in 2 Clicks</title>
+  <meta name="description" content="Connect PandaDoc to any AI model with MCPEngage. Automate document creation, track signatures, and manage contracts — all through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#65BE4B',
-              600: '#65BE4Bdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #65BE4B 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #65BE4B25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #65BE4B20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #65BE4B">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">PandaDoc Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #65BE4B; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #65BE4B"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">PandaDoc</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete PandaDoc MCP server. Proposals, contracts, and e-signatures. <strong class="text-white">78 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #65BE4B; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/pandadoc.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #65BE4B; color: #fff">
-            78 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect PandaDoc + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up PandaDoc + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Proposal creation bottleneck</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #65BE4B30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #65BE4B"></i>
-            </div>
-            <p class="text-white font-medium">AI auto-fills from CRM data</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Chasing signatures</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #65BE4B30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #65BE4B"></i>
-            </div>
-            <p class="text-white font-medium">Smart reminder sequences</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">No visibility on views</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #65BE4B30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #65BE4B"></i>
-            </div>
-            <p class="text-white font-medium">Real-time engagement alerts</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">PandaDoc</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full PandaDoc API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #65BE4B20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #65BE4B"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Document Creation</h3>
-          <p class="text-zinc-400 text-sm">Generate proposals, quotes, and contracts from templates.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #65BE4B20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #65BE4B"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">E-Signature</h3>
-          <p class="text-zinc-400 text-sm">Send for signature, track status, and collect signed copies.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #65BE4B20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #65BE4B"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Recipient Tracking</h3>
-          <p class="text-zinc-400 text-sm">See who viewed, when, and for how long.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #65BE4B20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #65BE4B"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Template Management</h3>
-          <p class="text-zinc-400 text-sm">Create and update reusable document templates.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #65BE4B; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects PandaDoc to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Generate documents, track signatures, and automate workflows — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/pandadoc" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/pandadoc
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="pen-tool" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="layout-template" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your PandaDoc documents..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Documents
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">28</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="clock" class="w-4 h-4"></i>
+                      Awaiting
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 2025 SOW — Acme Corp</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sent 2h ago • $125,000 deal</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Viewed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Hot lead</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">3 views</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">MSA — TechFlow Inc</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Waiting 5 days • $85,000 annual</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Follow up</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Legal review</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">NDA — StartupXYZ</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Signed 1h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Completed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">eSign</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Stored</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="35">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">PandaDoc Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Docs</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/pandadoc" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual document creation</p><p class="text-xs sm:text-sm text-zinc-500">Copy-pasting deal details into templates for every contract</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost in email threads</p><p class="text-xs sm:text-sm text-zinc-500">"Did they sign?" "Who needs to sign next?" — endless inbox hunting</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Template chaos</p><p class="text-xs sm:text-sm text-zinc-500">50 versions of the same SOW, nobody knows which is current</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow deal cycles</p><p class="text-xs sm:text-sm text-zinc-500">Documents stuck in limbo, no visibility into what's blocking signatures</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-generated docs</p><p class="text-xs sm:text-sm text-zinc-500">"Create an SOW for Acme Corp based on the Slack thread" — done in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time tracking</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's blocking the TechFlow MSA?" — instant answer with next steps</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart templates</p><p class="text-xs sm:text-sm text-zinc-500">AI finds the right template, auto-fills variables, and updates versions</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">2× faster close</p><p class="text-xs sm:text-sm text-zinc-500">Proactive reminders, bottleneck alerts, and automated follow-ups</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Deals Are<br><span class="text-red-400">Stalling</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          PandaDoc speeds up signatures, but your team still wastes hours creating, tracking, and chasing documents manually.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="copy" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Template Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every proposal needs custom tweaks. You're copy-pasting client names, pricing, and scope into templates. One typo and the deal looks unprofessional.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="eye-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Black Hole Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Documents sent into the void. "Did they view it?" "Who's blocking?" You're refreshing the PandaDoc dashboard 20 times a day hoping for status updates.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Signature Delays</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Deals die in the signing phase. You have no idea which signer is stalling, and by the time you follow up manually, the deal's gone cold.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Documents</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your PandaDoc</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your PandaDoc API key. MCPEngage discovers all available endpoints and builds 35+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Create an MSA for TechFlow using the enterprise template." "Which documents are waiting on signatures?" "Send a reminder for the Acme SOW." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-generate contracts from CRM deals, send signing reminders, alert sales when deals stall, and archive completed docs — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge PandaDoc</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          35+ PandaDoc tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-plus" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Document Generation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create proposals, contracts, and NDAs from templates with AI-filled variables. "Generate a Q1 SOW for Acme Corp with $125k pricing."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="send" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Smart Sending</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send documents to recipients with custom messages and signing order. AI suggests signers based on contact roles and deal context.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="eye" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Real-Time Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor document views, time spent, and signer progress. "Which high-value deals have been viewed but not signed?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Automated Reminders</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up follow-up sequences for pending signatures. "Remind all unsigned docs from last week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout-template" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Template Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI finds the right template for your use case, suggests variable mappings, and keeps templates versioned and up-to-date.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="archive" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Document Lifecycle</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-archive completed docs, sync status to CRM, and generate completion reports. Full audit trail for compliance.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your PandaDoc account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your PandaDoc API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your PandaDoc settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to PandaDoc.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to PandaDoc?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a PandaDoc API key (generated in Settings → API). MCPEngage uses the PandaDoc REST API to create 35+ tools covering documents, templates, contacts, and workflows. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI create documents from scratch?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            AI can generate documents from your existing PandaDoc templates by auto-filling variables based on context (CRM data, Slack threads, etc.). You review before sending. Fully custom documents require a template as a starting point.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with PandaDoc's eSignature features?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports sending documents for signature, tracking signer status, sending reminders, and downloading completed signed PDFs. Full signature workflow automation.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, DocuSign, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your PandaDoc?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with PandaDoc Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #65BE4B; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating PandaDoc<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join sales teams using MCPEngage to close deals faster with AI-powered documents.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for PandaDoc is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 PandaDoc Connect. Not affiliated with PandaDoc.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Awaiting Signature</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$335k pipeline</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">👁</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q1 2025 SOW — Acme Corp</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 2h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Viewed 3x</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$125k</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">⏱</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">MSA — TechFlow Inc</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Waiting 5 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Legal review</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$85k</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">👁</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Enterprise License — GlobalShip</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sent 1d ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Viewed 1x</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(34,197,94,0.1);color:#4ade80;">$125k</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Acme SOW has highest engagement</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Send reminders →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Reminder sent for Acme SOW</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:10px;color:rgba(255,255,255,0.3);margin-bottom:4px;">To: <span style="font-weight:600;color:#17c3b2;">sarah.chen@acmecorp.com</span></div><div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hi Sarah, Just following up on the Q1 SOW we sent over. I see you've reviewed it — happy to jump on a quick call if you have any questions!"</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">MSA created for StartupXYZ</span></div><div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Enterprise Template</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Ready to send</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.1);color:#4ade80;">Auto-filled</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Which high-value documents are waiting on signatures?' },
+      { type:'ai', text:'Found 3 high-value documents pending signatures:', embed: embed_1 },
+      { type:'user', text:'Send a reminder for Acme SOW and create an MSA for StartupXYZ using enterprise template' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: PandaDoc', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to PandaDoc API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to PandaDoc API', color:'text-green-400', delay:3000 },
+      { text:'✓ 35 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about PandaDoc', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'PandaDoc';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pipedrive/index.html b/pipedrive/index.html
index 3086117..de8872e 100644
--- a/pipedrive/index.html
+++ b/pipedrive/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Pipedrive Connect — AI-Power Your Pipeline in 2 Clicks</title>
+  <title>MCPEngage for Pipedrive — AI-Power Your Pipedrive in 2 Clicks</title>
+  <meta name="description" content="Connect Pipedrive to any AI model with MCPEngage. Manage deals, contacts, and sales pipelines through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f0fdf4',
-              100: '#dcfce7',
-              200: '#bbf7d0',
-              300: '#86efac',
-              400: '#4ade80',
-              500: '#017737',
-              600: '#015f2d',
-              700: '#014724',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,604 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #017737 0%, #4ade80 50%, #22d3ee 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(1, 119, 55, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(1, 119, 55, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(1, 119, 55, 0.4);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-pulse-glow {
-      animation: pulseGlow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulseGlow {
-      0%, 100% { box-shadow: 0 0 20px rgba(1, 119, 55, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(1, 119, 55, 0.5); }
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .shimmer {
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 3s infinite;
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(1, 119, 55, 0.4), 0 0 40px 0 rgba(1, 119, 55, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(1, 119, 55, 0.6), 0 0 60px 10px rgba(1, 119, 55, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(1, 119, 55, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(1, 119, 55, 0.5), rgba(74, 222, 128, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
-          <i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Pipedrive Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
-    <!-- Floating background elements -->
-    <div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute bottom-20 right-10 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="text-center relative z-10">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Pipedrive + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Pipedrive</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Pipedrive</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
-          The complete Pipedrive MCP server. <strong class="text-white">76 tools</strong> for deals, contacts, and activities. 
-          No setup. No OAuth headaches. Just connect and sell.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+99</div>
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Pipedrive to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage deals, track activities, and close more sales — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/pipedrive" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">300+</strong> sales teams
-          </p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/pipedrive
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="briefcase" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="building" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Pipedrive deals..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="briefcase" class="w-4 h-4"></i>
+                      Deals
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">31</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="calendar" class="w-4 h-4"></i>
+                      Activities
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Enterprise SaaS — $95K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Proposal sent</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Hot</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">85% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">SMB Annual — $24K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Negotiating</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Warm</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">60% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Renewal</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Starter Plan — $6K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • Demo scheduled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Cold</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-blue-500/15 text-blue-400 text-[10px] xl:text-xs font-medium">30% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">New</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your sales pipeline</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/pipedrive.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="58">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Pipedrive Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="target" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Deals</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Contacts</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="activity" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Activities</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Sales</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Pipedrive + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Stale deals in pipeline</h3>
-            <p class="text-zinc-500 mb-6">Deals sit untouched. You forget to follow up. Revenue slips away.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">AI nudges on inactivity</p>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/pipedrive" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Deal updates lag behind reality</p><p class="text-xs sm:text-sm text-zinc-500">Reps forget to move deals, stages go stale, pipeline reports are always outdated</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Activity tracking is a chore</p><p class="text-xs sm:text-sm text-zinc-500">Logging calls, emails, and meetings manually — reps skip it and follow-ups get lost</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Can't see the full picture</p><p class="text-xs sm:text-sm text-zinc-500">Switching between deals, people, orgs, and activities just to understand one account</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Sales forecasting guesswork</p><p class="text-xs sm:text-sm text-zinc-500">No quick way to see weighted pipeline, win rates, or which deals need attention</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time deal updates</p><p class="text-xs sm:text-sm text-zinc-500">"Move Acme to proposal sent" — AI updates deal stage, logs activity, and sets reminders instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto activity logging</p><p class="text-xs sm:text-sm text-zinc-500">AI pulls from email and calendar, logs calls and meetings automatically, nothing falls through cracks</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">360° account view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me everything about Acme Corp" — all deals, contacts, activities, and notes in one query</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant sales insights</p><p class="text-xs sm:text-sm text-zinc-500">"What's my weighted pipeline?" or "Show me at-risk deals" — real-time forecasts and alerts</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Sales Pipeline Is<br><span class="text-red-400">Full of Leaks</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Pipedrive has the data, but deals slip through because your team can't keep up with manual updates.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <!-- Pain Point 2 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Missed follow-up tasks</h3>
-            <p class="text-zinc-500 mb-6">Tasks pile up. You're always playing catch-up with your CRM.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">Automated activity reminders</p>
-              </div>
-            </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Pipeline Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't see which deals are stalling, which contacts are ghosting, or where to focus — until the quarter ends short.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Entry Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reps spend 90 minutes daily updating Pipedrive instead of selling. They resent it, so data quality tanks and forecasts become fiction.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Lost Follow-Ups</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Without automated reminders, hot leads go cold. By the time a rep remembers to follow up, the prospect chose a competitor.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sales</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Pipedrive</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Pipedrive API key. MCPEngage discovers all deals, people, organizations, and activities — building 58+ tools automatically. No code, no configuration.</p>
           </div>
         </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="relative group">
-          <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
-          <div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
-            <div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
-              <i data-lucide="x" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <h3 class="text-lg font-semibold text-zinc-300 mb-3">Inaccurate forecasts</h3>
-            <p class="text-zinc-500 mb-6">Pipeline value means nothing when you can't trust the numbers.</p>
-            <div class="pt-6 border-t border-zinc-800">
-              <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <p class="text-white font-medium">AI-powered predictions</p>
-              </div>
-            </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me deals closing this month." "Move Acme to negotiation." "What's my team's win rate?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-log activities from email, flag stalled deals, generate weekly pipeline reports, and sync sales data across your stack.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Pipedrive API access through one simple connection</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Pipedrive</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          58+ Pipedrive tools accessible through one natural-language interface.
+        </p>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="target" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Deal Management</h3>
-          <p class="text-zinc-400">Create, move, track deals through your pipeline automatically.</p>
-        </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Contact Sync</h3>
-          <p class="text-zinc-400">Manage people, organizations, and relationships effortlessly.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Deal Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and win deals through conversation. "Move all qualified deals to proposal sent."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="activity" class="w-7 h-7 text-orange-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Activity Tracking</h3>
-          <p class="text-zinc-400">Log calls, meetings, tasks — stay organized automatically.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to person and org history, linked deals, email threads, and engagement scores in one query.</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-cyan-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="activity" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Insights</h3>
-          <p class="text-zinc-400">Win rates, velocity, forecast accuracy — all AI-analyzed.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Activity Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log calls, meetings, and emails automatically. "Log a 30-min demo with Acme about enterprise features."</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 70 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Files</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Goals</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Filters</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Stages</span>
-          <span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Email Sync</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="relative">
-        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-emerald-500/10 rounded-3xl blur-xl"></div>
-        <div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="Your phone number"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <!-- Success Message (hidden by default) -->
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Pipeline Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time weighted pipeline, win rates, and deal velocity. "Which deals are at risk this quarter?"</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const submitBtn = document.getElementById('submit-btn');
-      const successMsg = document.getElementById('success-message');
-      
-      submitBtn.disabled = true;
-      submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
-      
-      setTimeout(() => {
-        form.classList.add('hidden');
-        successMsg.classList.remove('hidden');
-      }, 1000);
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/pipedrive-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/pipedrive-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Pipedrive MCP Server running</span>
-<span class="text-green-400">✓ 76 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Smart Reminders</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI surfaces overdue activities, stalled deals, and next actions without being asked.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Sales Forecasting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate weighted forecasts, pipeline snapshots, and rep performance dashboards on demand.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Pipedrive account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Pipedrive settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Pipedrive?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 300+ sales teams already automating with Pipedrive Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
-            <i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Pipedrive.
           </div>
-          <span class="font-bold text-xl">Pipedrive Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/pipedrive-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/pipedrive-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/pipedrive-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/pipedrive-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Pipedrive?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Pipedrive API token (generated in Settings > Personal Preferences > API). MCPEngage uses the Pipedrive API to create 58+ tools covering deals, people, organizations, activities, and pipelines. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Pipedrive Connect. Not affiliated with Pipedrive.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Pipedrive data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Pipedrive's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Pipedrive's activity timeline, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with HubSpot or Salesforce?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use Pipedrive as your source of truth and have AI sync data to HubSpot, Salesforce, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Zendesk, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Pipedrive<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of sales teams using MCPEngage to supercharge their CRM.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Pipedrive is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,119,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ff7700;"></div><span style="font-size:11px;font-weight:700;color:#ff7700;text-transform:uppercase;letter-spacing:0.5px;">High-Value Pipeline</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$268K total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$95K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Enterprise SaaS</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · Closes Mar 15</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">85%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Hot</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$72K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Platform Expansion</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalTech · Closes Feb 28</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">90%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Negotiation</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Updates Complete</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 actions</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Enterprise SaaS — $95K (Acme Corp)</div><div style="display:flex;align-items:center;gap:8px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Stage:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:#71717a;text-decoration:line-through;">Proposal Sent</span><span>→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Negotiation</span></div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">📞 Follow-up call scheduled</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Tomorrow at 2:00 PM</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all deals over $50K closing this quarter' },
+      { type:'ai', text:'Found 4 deals totaling $268K:', embed: embed_1 },
+      { type:'user', text:'Move Acme deal to negotiation and create a follow-up call for tomorrow at 2pm' },
+      { type:'ai', text:'Done! Deal updated and activity scheduled:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Pipedrive', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Pipedrive API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Pipedrive API', color:'text-green-400', delay:3000 },
+      { text:'✓ 58 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Pipedrive', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Pipedrive';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/product-analytics/index.html b/product-analytics/index.html
new file mode 100644
index 0000000..093fe59
--- /dev/null
+++ b/product-analytics/index.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCPEngage for Product Analytics — AI-Power Your Product Analytics in 2 Clicks</title>
+  <meta name="description" content="Connect Product Analytics to any AI model with MCPEngage. Track events, analyze funnels, and understand user behavior through natural conversation.">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+          colors: {
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
+  </style>
+</head>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+      </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Product Analytics + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Product Analytics</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Product Analytics to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Query events, build cohorts, and optimize funnels — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/product-analytics" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/product-analytics
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="activity" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="filter" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your product analytics..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="activity" class="w-4 h-4"></i>
+                      Events
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1.2M</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="lightbulb" class="w-4 h-4"></i>
+                      Insights
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">User Signup</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">842 events • Last hour</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Rising</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">+24% vs avg</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Conversion 8.2%</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Feature Adoption</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">1.2K events • Last hour</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Stable</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">+2% vs avg</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Retention 68%</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Checkout Drop-off</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">238 events • Last hour</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Alert</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">+42% vs avg</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Step 2</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="58">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Analytics Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">User Insights</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/product-analytics" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">SQL for every question</p><p class="text-xs sm:text-sm text-zinc-500">Want to know signup conversion? Write a query, wait 5 minutes, debug syntax errors</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Dashboard overload</p><p class="text-xs sm:text-sm text-zinc-500">Create 20 dashboards for different metrics, still can't find the answer you need</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Delayed insights</p><p class="text-xs sm:text-sm text-zinc-500">Funnel drop-off happened yesterday, discover it today, fix it tomorrow — revenue lost</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Siloed data</p><p class="text-xs sm:text-sm text-zinc-500">Events in Mixpanel, revenue in Stripe, support tickets in Zendesk — no unified view</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural-language queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show signup conversion rate by traffic source last 30 days" — instant answer</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered insights</p><p class="text-xs sm:text-sm text-zinc-500">Your AI proactively surfaces anomalies, trends, and opportunities</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time alerts</p><p class="text-xs sm:text-sm text-zinc-500">Get notified the moment funnel conversion drops or feature adoption spikes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Cross-reference analytics with CRM, revenue, and support data in one query</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Product Decisions Are<br><span class="text-red-400">Data-Blind</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          You have analytics tools, but by the time you find the insight, the opportunity is gone.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="code-2" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">SQL Dependency</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every product question requires SQL. Analyst backlog is 2 weeks. You ship features blind because waiting for data is slower than guessing.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Historical Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your dashboard shows what happened last week. You need to know what's happening right now. Drop-offs, spikes, anomalies — you see them after it's too late to act.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="puzzle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Insight Fragmentation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Event data in analytics. Revenue in Stripe. User feedback in Zendesk. NPS in Delighted. The full story is scattered across 6 tools. You spend hours stitching context.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Product Intelligence</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Analytics Platform</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your API key for Mixpanel, Amplitude, PostHog, or any analytics platform. MCPEngage discovers all events, properties, and user data — building 58+ tools automatically.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which features have the highest 7-day retention?" "Show funnel drop-off by device type." "Create a cohort of users who signed up this month." Your AI understands and delivers insights.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Intelligence</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for conversion drops, feature adoption spikes, or cohort behavior changes. Generate weekly retention reports, track north star metrics — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Product Analytics</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          58+ analytics tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Event Analysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query any event, filter by properties, and analyze trends. "Show button_click events where plan='enterprise' last 7 days."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Funnel Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Build, analyze, and optimize conversion funnels through conversation. "Where do users drop off in the checkout funnel?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-round" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Cohort Builder</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create user cohorts with natural language criteria. "Create cohort of users who completed onboarding but haven't used feature X."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="line-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Retention Analysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track user retention, churn, and engagement over time. "Show 30-day retention for users who signed up in January."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout-dashboard" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Dashboard Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate custom dashboards and reports on demand. "Create dashboard showing DAU, WAU, and top 5 features by usage."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell-ring" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Anomaly Detection</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI proactively alerts you to unusual patterns, spikes, or drops in key metrics. Catch issues before they impact revenue.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Product Analytics.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Which analytics platforms are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage supports all major product analytics platforms including Mixpanel, Amplitude, PostHog, Heap, Segment, Google Analytics 4, and more. You can also connect to custom analytics databases via SQL.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually create cohorts and build funnels?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your analytics platform (with your permission). You can create cohorts, define funnels, build dashboards, and export data — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Stripe, Salesforce, Zendesk, HubSpot, Google Ads, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Product Analytics<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of product teams using MCPEngage to build data-driven products.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Product Analytics is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Signup Conversion</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 30 days</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">1</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Organic Search</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12.4K visitors</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">CVR 12.8%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">1,587 signups</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">2</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Paid Ads</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">8.2K visitors</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">CVR 9.6%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">787 signups</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">3</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Social Media</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">6.8K visitors</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">CVR 4.2%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">286 signups</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Overall CVR: 9.8% (2,660 signups)</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Checkout Funnel</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 7 days</span></div><div style="padding:0;"><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 1: Add to Cart</span><span style="font-size:11px;font-weight:600;color:#22c55e;">100%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:100%;height:100%;background:#22c55e;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">4,280 users</div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 2: Enter Payment</span><span style="font-size:11px;font-weight:600;color:#f59e0b;">68%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:68%;height:100%;background:#f59e0b;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">2,910 users • <span style="color:#ef4444;">32% drop-off</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(239,68,68,0.03);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 3: Review Order</span><span style="font-size:11px;font-weight:600;color:#ef4444;">38%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:38%;height:100%;background:#ef4444;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">1,626 users • <span style="color:#ef4444;">44% drop-off ⚠️</span></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 4: Complete Purchase</span><span style="font-size:11px;font-weight:600;color:#22c55e;">34%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:34%;height:100%;background:#22c55e;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">1,455 users</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="font-size:10px;font-weight:600;color:#ef4444;margin-bottom:2px;">⚠️ Biggest drop: Step 2 → Step 3 (44%)</div><div style="font-size:9px;color:rgba(255,255,255,0.4);">1,284 users abandoned at payment review</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show signup conversion rate by traffic source in the last 30 days' },
+      { type:'ai', text:'Here\'s the breakdown by source:', embed: embed_1 },
+      { type:'user', text:'Where do users drop off in the checkout funnel?' },
+      { type:'ai', text:'Identified the drop-off point:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Product Analytics', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Product Analytics API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Product Analytics API', color:'text-green-400', delay:3000 },
+      { text:'✓ 58 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Product Analytics', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Product Analytics';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/quickbooks/index.html b/quickbooks/index.html
index a28ff38..9736c3e 100644
--- a/quickbooks/index.html
+++ b/quickbooks/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>QuickBooks Connect — AI-Power Your Accounting in 2 Clicks</title>
+  <title>MCPEngage for QuickBooks — AI-Power Your QuickBooks in 2 Clicks</title>
+  <meta name="description" content="Connect QuickBooks to any AI model with MCPEngage. Manage invoices, expenses, and reports through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#2CA01C',
-              600: '#2CA01Cdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #2CA01C 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #2CA01C25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #2CA01C20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #2CA01C">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">QuickBooks Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #2CA01C; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #2CA01C"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">QuickBooks</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete QuickBooks MCP server. Invoices, expenses, reports, and cash flow. <strong class="text-white">124 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #2CA01C; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/quickbooks.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #2CA01C; color: #fff">
-            124 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect QuickBooks + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up QuickBooks + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Late payment chaos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2CA01C30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #2CA01C"></i>
-            </div>
-            <p class="text-white font-medium">AI sends perfect follow-ups</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual expense entry</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2CA01C30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #2CA01C"></i>
-            </div>
-            <p class="text-white font-medium">Auto-categorize from receipts</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Tax time panic</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2CA01C30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #2CA01C"></i>
-            </div>
-            <p class="text-white font-medium">Year-round compliant books</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">QuickBooks</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full QuickBooks API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2CA01C20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #2CA01C"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Invoice Management</h3>
-          <p class="text-zinc-400 text-sm">Create, send, and track invoices and payments automatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2CA01C20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #2CA01C"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Expense Tracking</h3>
-          <p class="text-zinc-400 text-sm">Log expenses, categorize transactions, attach receipts.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2CA01C20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #2CA01C"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Financial Reports</h3>
-          <p class="text-zinc-400 text-sm">Generate P&L, balance sheet, cash flow, and tax summaries.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2CA01C20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #2CA01C"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Bank Reconciliation</h3>
-          <p class="text-zinc-400 text-sm">Match transactions, categorize, and reconcile accounts.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #2CA01C; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects QuickBooks to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage invoices, track expenses, and generate reports — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/quickbooks" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/quickbooks
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="receipt" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your QuickBooks finances..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Invoices
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="receipt" class="w-4 h-4"></i>
+                      Expenses
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #2847 — $4,250.00</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Due in 5 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Net 30</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Consulting</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #2846 — $1,850.00</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Overdue 3 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Overdue</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Net 15</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Services</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #2845 — $725.00</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignHub • Paid today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Net 30</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Design</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="70">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">QuickBooks Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Accounting</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/quickbooks" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual data entry</p><p class="text-xs sm:text-sm text-zinc-500">Type every expense, invoice, and receipt into QuickBooks one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Report purgatory</p><p class="text-xs sm:text-sm text-zinc-500">Export P&L to Excel, format it, email to accountant, wait for questions</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reconciliation nightmares</p><p class="text-xs sm:text-sm text-zinc-500">Match transactions manually, hunt down missing receipts, chase approval</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Invoice follow-ups</p><p class="text-xs sm:text-sm text-zinc-500">Track overdue invoices in a spreadsheet and send payment reminders by hand</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-ledger</p><p class="text-xs sm:text-sm text-zinc-500">"Log $47 Uber receipt for client meeting" — expense recorded instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant insights</p><p class="text-xs sm:text-sm text-zinc-500">"What's my profit margin this quarter?" — answer in 2 seconds with breakdown</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-reconciliation</p><p class="text-xs sm:text-sm text-zinc-500">AI matches bank transactions to invoices and flags anomalies for review</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart collections</p><p class="text-xs sm:text-sm text-zinc-500">Overdue invoice? AI drafts reminder email and schedules follow-up</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Accounting Team Is<br><span class="text-red-400">Buried in Books</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          QuickBooks has your data, but your team drowns in manual entry and spreadsheet exports.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calculator" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Entry Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every receipt, invoice, and bank transaction needs manual entry. Your bookkeeper spends 15+ hours a week just typing data that already exists elsewhere.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-question" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Report Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Finance needs a P&L breakdown by client. You export to Excel, pivot, format, and by the time it's ready, the month has closed.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cash Flow Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Which invoices are overdue? How much is outstanding? What's your runway? You can't answer without digging through reports and doing mental math.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Accounting</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your QuickBooks</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Authenticate via Intuit OAuth. MCPEngage discovers all your chart of accounts, customers, vendors, and settings — building 70+ tools automatically. No code, no manual setup.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all unpaid invoices over 30 days." "Log this $200 expense as office supplies." "What's my AR aging summary?" Your AI understands accounting like a veteran bookkeeper.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Books</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: auto-categorize expenses from receipts, send overdue invoice reminders, generate monthly close reports, sync data to your ERP — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge QuickBooks</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          70+ QuickBooks tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Invoice Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, and track invoices through conversation. "Send invoice to Acme for $4,250 with Net 30 terms."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="receipt" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Expense Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log expenses, attach receipts, and categorize spend instantly. "Add $47 Uber expense under Travel category."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Financial Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate P&L, balance sheets, cash flow statements, and custom reports on demand. "Show me profit by client this quarter."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">AR/AP Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track receivables, payables, aging reports, and payment status. "Which invoices are overdue and by how much?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Bank Reconciliation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-match transactions, flag duplicates, and identify discrepancies. "Reconcile last week's bank transactions."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Customer & Vendor Data</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull payment history, outstanding balances, and contact details in one query. "Show me all vendors I owe money to."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your QuickBooks account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your QuickBooks API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your QuickBooks settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to QuickBooks.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to QuickBooks?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You authenticate via Intuit's secure OAuth flow. MCPEngage uses the QuickBooks Online API to create 70+ tools covering invoices, expenses, customers, vendors, reports, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with QuickBooks Desktop?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Currently, MCPEngage supports QuickBooks Online. QuickBooks Desktop support is in development. If you need Desktop support, join our waitlist and we'll notify you when it's ready.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will my accountant be able to use this?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely! Your accountant can connect their own QuickBooks login and use MCPEngage to pull reports, review transactions, and answer client questions instantly. It's especially useful during tax season.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Stripe, Shopify, Salesforce, Zendesk, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your QuickBooks?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with QuickBooks Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #2CA01C; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating QuickBooks<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of accounting teams using MCPEngage to supercharge QuickBooks.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for QuickBooks is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 QuickBooks Connect. Not affiliated with QuickBooks.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Overdue Invoices — Action Needed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$8,340 AR</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$1,850.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Invoice #2846</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · Net 15</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">3 days overdue</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Overdue</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$2,450.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Invoice #2840</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalShip · Net 30</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">8 days overdue</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Sent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$1,200.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Invoice #2835</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">BuildCo · Net 15</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">12 days overdue</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Sent</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Oldest overdue: 12 days · Average: 7 days</span><span style="font-size:10px;color:#ef4444;cursor:pointer;">Send reminders →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Payment Reminders Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">5 customers</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Emails sent to all customers</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;font-weight:600;color:rgba(255,255,255,0.7);">Reminder template used: "Professional Payment Reminder"</div><div>✉️ TechFlow Inc — Invoice #2846 ($1,850)<br>✉️ GlobalShip — Invoice #2840 ($2,450)<br>✉️ BuildCo — Invoice #2835 ($1,200)<br><span style="opacity:0.6;">+ 2 more customers</span></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Activity logged in QuickBooks</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">Note added to all 5 invoices</div><div style="font-size:10px;color:rgba(255,255,255,0.5);">"Payment reminder email sent on Jan 16, 2025 via MCPEngage. Follow-up scheduled for 7 days."</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all unpaid invoices that are overdue' },
+      { type:'ai', text:'Found 5 overdue invoices totaling $8,340:', embed: embed_1 },
+      { type:'user', text:'Send payment reminder emails to all overdue invoices and log the activity' },
+      { type:'ai', text:'Sent! Here\'s the summary:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: QuickBooks', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to QuickBooks API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to QuickBooks API', color:'text-green-400', delay:3000 },
+      { text:'✓ 70 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about QuickBooks', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'QuickBooks';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/reonomy/index.html b/reonomy/index.html
new file mode 100644
index 0000000..e5827da
--- /dev/null
+++ b/reonomy/index.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCPEngage for Reonomy — AI-Power Your Reonomy in 2 Clicks</title>
+  <meta name="description" content="Connect Reonomy to any AI model with MCPEngage. Research properties, track owners, and analyze transactions through natural conversation.">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+          colors: {
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
+  </style>
+</head>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+      </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Reonomy + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Reonomy</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Reonomy to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Search properties, analyze ownership, and track deals — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/reonomy" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/reonomy
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="building-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="map-pin" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about commercial real estate..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="building-2" class="w-4 h-4"></i>
+                      Properties
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1,248</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="trending-up" class="w-4 h-4"></i>
+                      Deals
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Hudson Yards Tower A</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">30 Hudson Yards, NYC</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">For Sale</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$450M</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Office</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">SoHo Retail Plaza</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">285 Lafayette St, NYC</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Leased</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$18M/yr</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Retail</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Brooklyn Industrial Park</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">1200 Bedford Ave, BK</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Off Market</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Est. $125M</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Industrial</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="52">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Reonomy Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Market Intel</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/reonomy" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual property research</p><p class="text-xs sm:text-sm text-zinc-500">Click through dozens of listings, copy-paste addresses into spreadsheets</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Fragmented data sources</p><p class="text-xs sm:text-sm text-zinc-500">CoStar for comps, LoopNet for listings, county records for ownership</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Stale deal flow</p><p class="text-xs sm:text-sm text-zinc-500">Find properties that sold 3 months ago, miss opportunities</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No ownership insights</p><p class="text-xs sm:text-sm text-zinc-500">Who owns the building? What else do they own? Manual detective work</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered search</p><p class="text-xs sm:text-sm text-zinc-500">"Find office buildings in Manhattan over $50M with cap rate under 5%"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Property details, ownership, transaction history, comps — all in one query</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time deal alerts</p><p class="text-xs sm:text-sm text-zinc-500">Get notified the moment properties hit market or change ownership</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant owner profiles</p><p class="text-xs sm:text-sm text-zinc-500">Full portfolio analysis, acquisition patterns, contact info — seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Deal Flow Is<br><span class="text-red-400">Too Slow</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Reonomy has the data, but by the time you research a property, the best deals are already gone.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="timer" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Research Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">See a listing, research ownership, pull comps, analyze financials — 2 hours later, three other brokers already called the seller. Speed kills deals.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Search Limitations</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reonomy's UI makes you filter by checkboxes and dropdowns. You want "office buildings owned by REITs near transit with recent financing" — can't search that.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Silos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Property data in Reonomy. Deal pipeline in your CRM. Comps in Excel. Market research in Google Docs. You waste hours connecting dots across systems.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered CRE</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Reonomy</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Reonomy API key. MCPEngage discovers all properties, owners, transactions, and market data — building 52+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show office properties in Austin sold in the last 6 months over $20M." "Who owns 30 Hudson Yards and what else is in their portfolio?" Your AI understands and delivers instant insights.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Deal Flow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for new listings, ownership changes, or distressed properties. Generate weekly market reports, track target owners, sync to your CRM — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Reonomy</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          52+ Reonomy tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="building" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Property Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search by address, price, cap rate, class, or custom criteria. "Find Class A industrial properties in Dallas under $100M."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Owner Research</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Discover who owns what, analyze portfolios, and track acquisition patterns. "Show all properties owned by Blackstone in NYC."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="receipt" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Transaction History</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull sales history, price trends, and comparable transactions. "Show recent office sales in San Francisco over $50M."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="map" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Market Analysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Analyze submarkets, cap rate trends, and vacancy rates. "What's the average cap rate for multifamily in Miami?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="contact" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Contact Discovery</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get owner contact info, decision-maker names, and outreach intelligence. "Find contact info for the owner of 285 Lafayette St."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell-ring" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Deal Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time notifications when properties match your criteria, ownership changes, or new transactions close. Never miss an opportunity.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Reonomy.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Reonomy?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Reonomy API key (available in your Reonomy account settings). MCPEngage uses the Reonomy API to create 52+ tools covering properties, owners, transactions, market data, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it search properties with complex filters?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Unlike Reonomy's UI, MCPEngage understands natural language queries with multiple criteria. "Office buildings in Manhattan over $50M with cap rate under 5% owned by REITs" — it parses and executes complex searches instantly.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including CoStar, LoopNet, Salesforce, HubSpot, Google Sheets, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Reonomy<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of CRE pros using MCPEngage to close deals faster.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Reonomy is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Manhattan Office Properties</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">7 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">30 Hudson Yards</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown West</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Cap 4.2%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$450M</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">425 Park Avenue</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Cap 3.8%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$625M</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">520 Madison Avenue</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Cap 4.5%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$280M</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">+4 more properties</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Owner Portfolio</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Related Companies</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:4px;">Owner:</div><div style="font-size:13px;font-weight:600;color:#e4e4e7;">Related Companies</div></div><div style="display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(23,195,178,0.15);color:#17c3b2;">42 properties</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">$12.8B total value</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Office, Retail</span></div></div><div style="padding:0;"><div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">30 Hudson Yards</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $450M • Office</div></div><div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">55 Hudson Yards</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $780M • Office</div></div><div style="padding:8px 14px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">The Shops at Columbus Circle</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $1.2B • Retail</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">+39 more properties</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Full portfolio →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Find office buildings in Manhattan over $50M with cap rate under 5%' },
+      { type:'ai', text:'Found 7 matching properties:', embed: embed_1 },
+      { type:'user', text:'Who owns 30 Hudson Yards? Show me their full portfolio' },
+      { type:'ai', text:'Owner found. Here\'s their portfolio:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Reonomy', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Reonomy API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Reonomy API', color:'text-green-400', delay:3000 },
+      { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Reonomy', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Reonomy';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/rippling/index.html b/rippling/index.html
index 184dd51..7205e27 100644
--- a/rippling/index.html
+++ b/rippling/index.html
@@ -3,28 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Rippling Connect — AI-Power Your Workforce in 2 Clicks</title>
+  <title>MCPEngage for Rippling — AI-Power Your Rippling in 2 Clicks</title>
+  <meta name="description" content="Connect Rippling to any AI model with MCPEngage. Manage employees, devices, apps, and payroll through natural conversation. Unified HR+IT automation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fefce8',
-              100: '#fef9c3',
-              200: '#fef08a',
-              300: '#fde047',
-              400: '#FEC400',
-              500: '#FEC400',
-              600: '#d4a500',
-              700: '#a16207',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -32,732 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #FEC400 0%, #fbbf24 50%, #f59e0b 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(254, 196, 0, 0.15), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(254, 196, 0, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-      border-color: rgba(254, 196, 0, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite 2s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite 1s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(254, 196, 0, 0.15), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
-    }
-    .btn-glow {
-      box-shadow: 0 0 30px rgba(254, 196, 0, 0.3);
-      transition: all 0.3s ease;
-    }
-    .btn-glow:hover {
-      box-shadow: 0 0 50px rgba(254, 196, 0, 0.5);
-      transform: scale(1.05);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(254, 196, 0, 0.15), rgba(251, 191, 36, 0.08));
-      border: 1px solid rgba(254, 196, 0, 0.2);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(254, 196, 0, 0.4), 0 0 40px 0 rgba(254, 196, 0, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(254, 196, 0, 0.5), 0 0 60px 10px rgba(254, 196, 0, 0.25); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .pillar-card {
-      background: linear-gradient(180deg, rgba(254, 196, 0, 0.08) 0%, transparent 100%);
-    }
-    .pillar-card:hover {
-      background: linear-gradient(180deg, rgba(254, 196, 0, 0.12) 0%, transparent 100%);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Ambient Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Rippling Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 text-zinc-900">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-3xl mx-auto text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-          <span>Open Source + Hosted</span>
-          <span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Rippling + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Rippling</span><br>to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Rippling</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
-          The complete Rippling MCP server. <strong class="text-white">89 tools</strong> for HR, IT, and Finance — unified. 
-          No OAuth headaches. Just connect and automate your workforce management.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
-          <a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center text-zinc-900">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
-            <i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg text-zinc-900">
-              +65
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Rippling to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage employees, devices, apps, and payroll — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/rippling" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/rippling
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="users-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="laptop" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="app-window" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="dollar-sign" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Rippling employees..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="users-2" class="w-4 h-4"></i>
+                      Employees
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">64</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="laptop" class="w-4 h-4"></i>
+                      Devices
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Engineering • MacBook Pro M3</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">12 apps</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$128K/year</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Michael Park</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marketing • MacBook Air</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">8 apps</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$98K/year</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Emma Wilson (Onboarding)</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sales • Laptop pending</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Start: Mar 18</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$92K + comm</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="text-left">
-            <div class="flex items-center gap-1 text-brand-400 text-sm">
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-            </div>
-            <p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">280+</strong> growing companies</p>
-          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your workforce management</p>
-      </div>
-      <div class="gradient-border rounded-2xl p-2">
-        <div class="rounded-xl overflow-hidden video-glow">
-          <video autoplay loop muted playsinline class="w-full">
-            <source src="../output/rippling.mp4" type="video/mp4">
-          </video>
-        </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">HR</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="laptop" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">IT</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="wallet" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Finance</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Three Pillars -->
-  <section class="py-16 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <p class="text-brand-400 font-medium mb-2">One Platform. Three Pillars.</p>
-        <h2 class="text-3xl md:text-4xl font-bold">HR + IT + Finance, Unified</h2>
-      </div>
-      
-      <div class="grid md:grid-cols-3 gap-6">
-        <div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
-          <div class="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="users" class="w-8 h-8 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">HR</h3>
-          <p class="text-zinc-400 text-sm">Onboarding, offboarding, PTO, performance — all automated with AI.</p>
-        </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
         
-        <div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
-          <div class="w-16 h-16 rounded-2xl bg-blue-500/20 flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="laptop" class="w-8 h-8 text-blue-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">IT</h3>
-          <p class="text-zinc-400 text-sm">Device provisioning, app access, security policies — zero-touch setup.</p>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="80">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Rippling Tools</div>
         </div>
-        
-        <div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
-          <div class="w-16 h-16 rounded-2xl bg-green-500/20 flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="wallet" class="w-8 h-8 text-green-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Finance</h3>
-          <p class="text-zinc-400 text-sm">Payroll, benefits, expenses, compliance — handled automatically.</p>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Pain Points / Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Rippling + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="clock" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Onboarding takes days</h3>
-          <p class="text-zinc-500 mb-6">New hire starts Monday. Laptop arrives Thursday. Apps access by next week.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
-              <p class="text-white font-medium">AI sets up in minutes</p>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/rippling" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
 
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="shield-alert" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Offboarding security gaps</h3>
-          <p class="text-zinc-500 mb-6">Employee leaves. Still has Slack access. GitHub? Who knows.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <p class="text-white font-medium">Instant access revocation</p>
-            </div>
-          </div>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="settings" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Manual app provisioning</h3>
-          <p class="text-zinc-500 mb-6">IT tickets for every new app. Each role needs different access. It's endless.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <p class="text-white font-medium">Role-based auto-setup</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual onboarding checklists</p><p class="text-xs sm:text-sm text-zinc-500">Provision laptop, set up accounts, enroll in benefits — 20 steps per new hire</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Device tracking spreadsheets</p><p class="text-xs sm:text-sm text-zinc-500">Who has which laptop? When was it assigned? Excel chaos</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">App license guesswork</p><p class="text-xs sm:text-sm text-zinc-500">"Do we have an extra Figma seat?" — log in, count licenses, do math</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Offboarding takes days</p><p class="text-xs sm:text-sm text-zinc-500">Revoke access to 15 apps one by one, hope you didn't miss any</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered onboarding</p><p class="text-xs sm:text-sm text-zinc-500">"Onboard Emma Wilson on Mar 18" — AI provisions everything automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time device intel</p><p class="text-xs sm:text-sm text-zinc-500">"Which employees don't have a laptop assigned?" — instant answers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart license management</p><p class="text-xs sm:text-sm text-zinc-500">"Do we have unused Figma licenses?" — AI checks and reallocates</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-command offboarding</p><p class="text-xs sm:text-sm text-zinc-500">"Offboard John Smith" — all access revoked, laptop return scheduled</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Rippling API access through one simple connection. 89 tools at your AI's fingertips.</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="user-plus" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Employee Management</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Onboard, offboard, manage the full employee lifecycle with AI.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="monitor" class="w-7 h-7 text-blue-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Device Management</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Provision laptops, manage software, track assets automatically.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="banknote" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Run payroll, manage benefits, handle compliance seamlessly.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="key" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Auto-provision SaaS access based on role and department.</p>
-        </div>
-      </div>
-
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Time & Attendance</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Org Chart</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Compensation</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Custom Fields</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Documents</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Groups</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Workflows</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Automation Examples -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">AI-Powered Workflows</h2>
-        <p class="text-zinc-400 text-lg">Real automations you can build in minutes</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 gap-6">
-        <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center flex-shrink-0">
-              <i data-lucide="user-check" class="w-6 h-6 text-brand-400"></i>
-            </div>
-            <div>
-              <h3 class="font-semibold text-lg mb-2">Zero-Touch Onboarding</h3>
-              <p class="text-zinc-400 text-sm mb-3">"When new hire added → order laptop, provision apps, send welcome email, schedule orientation"</p>
-              <div class="flex gap-2">
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">IT</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center flex-shrink-0">
-              <i data-lucide="user-minus" class="w-6 h-6 text-red-400"></i>
-            </div>
-            <div>
-              <h3 class="font-semibold text-lg mb-2">Secure Offboarding</h3>
-              <p class="text-zinc-400 text-sm mb-3">"When employee terminated → revoke all apps, wipe device, transfer files, update payroll"</p>
-              <div class="flex gap-2">
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Security</span>
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Compliance</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center flex-shrink-0">
-              <i data-lucide="arrow-up-circle" class="w-6 h-6 text-purple-400"></i>
-            </div>
-            <div>
-              <h3 class="font-semibold text-lg mb-2">Role Change Automation</h3>
-              <p class="text-zinc-400 text-sm mb-3">"When promoted to manager → add to Slack channels, grant HR access, update comp band"</p>
-              <div class="flex gap-2">
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Finance</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
-              <i data-lucide="calendar-check" class="w-6 h-6 text-green-400"></i>
-            </div>
-            <div>
-              <h3 class="font-semibold text-lg mb-2">PTO Intelligence</h3>
-              <p class="text-zinc-400 text-sm mb-3">"When PTO requested → check team coverage, auto-approve if ok, notify manager if conflict"</p>
-              <div class="flex gap-2">
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Scheduling</span>
-                <span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">AI</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@company.com"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 text-zinc-900"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="shield-check" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your HR+IT Stack Is<br><span class="text-red-400">A Manual Nightmare</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Rippling unifies HR and IT, but your team still drowns in manual provisioning, tracking, and reporting.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-plus" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Onboarding Takes Forever</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">New hire starts Monday. You spend 3 hours provisioning laptop, granting app access, enrolling in benefits. They sit idle until lunch.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="laptop" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Device Blind Spots</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Laptop inventory scattered across Rippling, IT ticketing, and spreadsheets. You can't answer "Who has device #4821?" without 10 minutes of searching.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-alert" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Offboarding Risk</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Employee leaves. Did you revoke Slack? GitHub? AWS? One missed app = security breach. You lose sleep over it.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle of OAuth and token management.
-            </p>
-            <a href="https://github.com/BusyBee3333/rippling-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered HR+IT</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/rippling-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-brand-400">✓ Rippling MCP Server running</span>
-<span class="text-brand-400">✓ 89 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Rippling</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Rippling API token (generated in Settings > API). MCPEngage discovers all available endpoints and builds 80+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Onboard Sarah Chen on March 15th." "Which employees have unassigned devices?" "Revoke all access for John Smith." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-provision new hires, track license usage, flag offboarding tasks, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Rippling</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          80+ Rippling tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Employee Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, update, onboard, and offboard employees through conversation. "Show me all employees starting this month."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="laptop" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Device Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track laptops, phones, and hardware inventory. "Which devices are unassigned?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="app-window" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">App Provisioning</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Grant and revoke app access instantly. "Give Sarah access to Figma and Linear."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Payroll Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Review payroll runs, track costs, and manage compensation. "What's our total payroll this month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate headcount reports, license usage, and IT inventory summaries on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Onboarding Assistant</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-provision laptop, apps, and benefits for new hires. "Onboard 3 engineers on March 20th" — done.</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Rippling Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Rippling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my employee data secure?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Absolutely. We use OAuth 2.0 and never store your Rippling API keys. All tokens are encrypted at rest and in transit. 
-            We're SOC 2 compliant and you can revoke access anytime from your Rippling admin console.
-          </p>
-        </details>
-
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Which Rippling modules are supported?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Rippling Connect supports all core modules — HR Cloud, IT Cloud, and Finance Cloud. 
-            The available API endpoints depend on which modules you have enabled in your Rippling subscription.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- Final CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Rippling?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
-        Join 280+ growing companies already automating with Rippling Connect. Be first in line when we launch.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-zinc-900">
-          Join the Waitlist
-        </a>
-        <a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
-          <i data-lucide="calendar" class="w-5 h-5"></i>
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center">
-            <i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Rippling.
           </div>
-          <span class="font-bold text-xl">Rippling Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/rippling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/rippling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/rippling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
-          <a href="https://github.com/BusyBee3333/rippling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="twitter" class="w-4 h-4"></i>
-            Twitter
-          </a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Rippling?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Rippling API token (generated in Settings > Integrations > API). MCPEngage uses the Rippling REST API to create 80+ tools covering employees, devices, apps, payroll, and workflows. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my HR and IT data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Gusto, BambooHR, Okta, Jamf, Google Workspace, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
         </div>
       </div>
-      <div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
-        <p class="text-zinc-500 text-sm">© 2026 Rippling Connect. Not affiliated with Rippling.</p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Rippling<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Rippling.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Rippling is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl text-zinc-900"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Pending Laptop Setup</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">March 2024</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Emma Wilson</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Mar 18</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sales · Full-time</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">6 days away</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Carlos Rodriguez</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Mar 22</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering · Full-time</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">10 days away</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Pending</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">○</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Priya Patel</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Mar 28</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Design · Full-time</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">16 days away</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Scheduled</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Recommended: MacBook Pro M3 (standard issue)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Rippling →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Provisioning Complete</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 employees</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">💻 Devices Assigned</div><div style="display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;font-size:10px;"><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Emma Wilson</span><span style="color:rgba(255,255,255,0.3);font-family:monospace;">MBP-4821</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Carlos Rodriguez</span><span style="color:rgba(255,255,255,0.3);font-family:monospace;">MBP-4822</span><span style="color:rgba(255,255,255,0.3);">✓</span><span style="color:#e4e4e7;">Priya Patel</span><span style="color:rgba(255,255,255,0.3);font-family:monospace;">MBP-4823</span></div></div><div style="padding:10px 14px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:8px;">🔐 App Access Granted (per employee)</div><div style="display:flex;gap:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Slack</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Google Workspace</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Notion</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Linear</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Figma</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">GitHub</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">1Password</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Devices ship tomorrow · Accounts provisioned instantly</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all employees starting this month who need laptop provisioning' },
+      { type:'ai', text:'Found 3 new hires needing laptop setup:', embed: embed_1 },
+      { type:'user', text:'Provision MacBook Pro M3 for all 3 and grant them standard app access' },
+      { type:'ai', text:'Provisioning complete! Here\'s what I set up:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Rippling', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Rippling API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Rippling API', color:'text-green-400', delay:3000 },
+      { text:'✓ 80 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Rippling', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Rippling';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/salesloft/index.html b/salesloft/index.html
index 5f20f4f..588c0e7 100644
--- a/salesloft/index.html
+++ b/salesloft/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Salesloft Connect — AI-Power Your Sales Engagement in 2 Clicks</title>
+  <title>MCPEngage for Salesloft — AI-Power Your Salesloft in 2 Clicks</title>
+  <meta name="description" content="Connect Salesloft to any AI model with MCPEngage. Manage cadences, track calls, automate outreach, and analyze sales engagement through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#1E88E5',
-              600: '#1E88E5dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #1E88E5 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1E88E525, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #1E88E520; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1E88E5">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Salesloft Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1E88E5; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #1E88E5"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Salesloft</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Salesloft MCP server. Cadences, calls, emails, and meetings — AI-driven outreach at scale. <strong class="text-white">94 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1E88E5; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/salesloft.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1E88E5; color: #fff">
-            94 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Salesloft + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Salesloft + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual follow-up tracking</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1E88E530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1E88E5"></i>
-            </div>
-            <p class="text-white font-medium">AI sequences never miss</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Generic outreach messages</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1E88E530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1E88E5"></i>
-            </div>
-            <p class="text-white font-medium">Personalized at scale</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Lost context between calls</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1E88E530">
-              <i data-lucide="check" class="w-4 h-4" style="color: #1E88E5"></i>
-            </div>
-            <p class="text-white font-medium">AI preps every conversation</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Salesloft</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Salesloft API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1E88E520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1E88E5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Cadence Management</h3>
-          <p class="text-zinc-400 text-sm">Create sequences, automate outreach, track engagement across channels.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1E88E520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1E88E5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Call & Email Tracking</h3>
-          <p class="text-zinc-400 text-sm">Log communications, analyze sentiment, measure response rates.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1E88E520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1E88E5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Meeting Intelligence</h3>
-          <p class="text-zinc-400 text-sm">Schedule, prep, and analyze sales conversations automatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1E88E520">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #1E88E5"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Performance Analytics</h3>
-          <p class="text-zinc-400 text-sm">Rep activity, conversion rates, pipeline contribution insights.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1E88E5; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Salesloft to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage cadences, track calls, and optimize outreach — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/salesloft" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/salesloft
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="repeat" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="phone" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="mail" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Salesloft cadences..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="repeat" class="w-4 h-4"></i>
+                      Cadences
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="phone" class="w-4 h-4"></i>
+                      Calls
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Enterprise Outbound</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 127 people enrolled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">42% reply rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">12 days</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Warm Intro Follow-up</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Active • 34 people enrolled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">68% reply rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">7 days</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Re-engagement</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Paused • 89 people enrolled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Paused</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">18% reply rate</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">14 days</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="42">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Salesloft Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Access</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/salesloft" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual cadence management</p><p class="text-xs sm:text-sm text-zinc-500">Add prospects one by one, adjust sequences by hand, pray you didn't mess up the timing</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Call prep nightmare</p><p class="text-xs sm:text-sm text-zinc-500">Scramble to research prospects 30 seconds before the call, wing it with generic talking points</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Email template chaos</p><p class="text-xs sm:text-sm text-zinc-500">Copy-paste from old emails, forget to personalize, cringe when you see "Hi [First Name]" in sent items</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost activity data</p><p class="text-xs sm:text-sm text-zinc-500">"Did I already call this prospect?" requires digging through logs and Salesforce notes</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI-powered enrollment</p><p class="text-xs sm:text-sm text-zinc-500">"Add all prospects from the Acme Corp account to the enterprise cadence" — done in 2 seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant call briefs</p><p class="text-xs sm:text-sm text-zinc-500">Before every call, AI pulls recent activity, company news, and personalized talking points</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart email generation</p><p class="text-xs sm:text-sm text-zinc-500">AI writes personalized emails using prospect data, recent interactions, and your winning templates</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Complete activity tracking</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all calls and emails to Acme Corp this month" — full timeline instantly</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Sales Team Is<br><span class="text-red-400">Wasting Time</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Salesloft has the tools, but your reps spend more time managing the platform than selling.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Admin Overhead</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your reps spend 40% of their day logging activities, updating cadences, and moving prospects between sequences. They're CRM admins, not closers.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Generic Outreach</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">"Hi [First Name], I noticed your company..." — your emails scream template. Reply rates are tanking. Prospects ignore you because you sound like every other SDR.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="phone-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Unprepared Calls</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reps go into calls blind. No context on recent activity, no company intel, no personalized pitch. Calls feel transactional. Deals stall.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sales Engagement</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Salesloft</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Salesloft API key. MCPEngage discovers all cadences, people, calls, emails, and activities, building 42+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Add these 20 prospects to the enterprise cadence." "Show me all calls scheduled for today." "What's the reply rate on the warm intro sequence?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-enroll prospects, generate personalized emails, send call prep briefs, sync activity to Salesforce, and analyze cadence performance — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Salesloft</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          42+ Salesloft tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Cadence Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Enroll prospects, adjust sequences, and monitor progress. "Add Sarah Chen to the enterprise outbound cadence."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="phone" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Call Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Schedule calls, log outcomes, and get AI-generated prep briefs. "What calls do I have today?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Email Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send personalized emails at scale. "Draft a follow-up email for prospects who opened but didn't reply."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">People & Accounts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search prospects, update contact info, and track engagement. "Show me all decision-makers at Acme Corp."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="activity" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Activity Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log and analyze all sales activities in one place. "What's my team's call volume this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Performance Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track reply rates, conversion metrics, and cadence ROI. "Which cadence has the highest meeting-booked rate?"</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Salesloft account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Salesloft API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Salesloft settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Salesloft.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Salesloft?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Salesloft API Key (generated in Settings → API). MCPEngage uses the Salesloft API to create 42+ tools covering cadences, people, calls, emails, activities, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it personalize emails automatically?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! The AI can generate personalized email copy using prospect data (company, role, recent activity) and your best-performing templates. You review and approve before sending — AI accelerates, you control quality.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Outreach, Apollo, HubSpot Sales, Salesforce, Gong, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Salesloft?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Salesloft Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1E88E5; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Salesloft<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of sales teams using MCPEngage to supercharge their outreach.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Salesloft is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Salesloft Connect. Not affiliated with Salesloft.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Low Reply Rate Cadences</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 cadences</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:44px;height:44px;border-radius:8px;background:rgba(239,68,68,0.1);border:2px solid rgba(239,68,68,0.3);display:flex;align-items:center;justify-content:center;flex-direction:column;"><div style="font-size:16px;font-weight:800;color:#ef4444;">18%</div><div style="font-size:7px;color:rgba(239,68,68,0.6);text-transform:uppercase;letter-spacing:0.5px;">Reply</div></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Re-engagement</div><div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">89 people · 14 day cadence</span></div><div style="display:flex;gap:4px;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Paused</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Needs work</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:44px;height:44px;border-radius:8px;background:rgba(245,158,11,0.1);border:2px solid rgba(245,158,11,0.3);display:flex;align-items:center;justify-content:center;flex-direction:column;"><div style="font-size:16px;font-weight:800;color:#f59e0b;">24%</div><div style="font-size:7px;color:rgba(245,158,11,0.6);text-transform:uppercase;letter-spacing:0.5px;">Reply</div></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Cold Outbound — SMB</div><div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">156 people · 10 day cadence</span></div><div style="display:flex;gap:4px;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Active</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Below avg</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:44px;height:44px;border-radius:8px;background:rgba(245,158,11,0.1);border:2px solid rgba(245,158,11,0.3);display:flex;align-items:center;justify-content:center;flex-direction:column;"><div style="font-size:16px;font-weight:800;color:#f59e0b;">28%</div><div style="font-size:7px;color:rgba(245,158,11,0.6);text-transform:uppercase;letter-spacing:0.5px;">Reply</div></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Event Follow-up</div><div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">42 people · 5 day cadence</span></div><div style="display:flex;gap:4px;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Active</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Below avg</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Team avg reply rate: 42%</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Analyze →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(139,92,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#a78bfa;"></div><span style="font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:0.5px;">Email Template Draft</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Ready to review</span></div><div style="padding:14px;"><div style="margin-bottom:10px;"><div style="font-size:9px;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;">Subject Line</div><div style="padding:6px 10px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:6px;font-size:11px;color:#e4e4e7;">{{ first_name }}, 3 ways we're helping {{ company_industry }} teams close faster</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);line-height:1.6;">Hi {{ first_name }},<br><br>I know you're busy, so I'll keep this short.<br><br>We're seeing {{ company_industry }} teams like yours struggling with:<br><br>• Long sales cycles (avg 87 days)<br>• Low email reply rates (<30%)<br>• Manual admin work eating 40% of rep time<br><br>Our platform is helping companies like {{ similar_customer }} cut sales cycles by 34% and double reply rates.<br><br>Worth a 15-min conversation?<br><br>Best,<br>{{ sender_name }}</div></div><div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);">Cadence</div><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-top:2px;">Re-engage</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);">Day</div><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-top:2px;">1</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);">Type</div><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-top:2px;">Email</div></div></div><div style="background:rgba(23,195,178,0.1);border:1px solid rgba(23,195,178,0.2);border-radius:6px;padding:8px 10px;"><div style="font-size:10px;color:rgba(255,255,255,0.6);line-height:1.4;">💡 This template uses specific pain points and social proof. Test against your current template for 50+ sends.</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">4 merge fields · 127 words</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Save to Salesloft →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all cadences with reply rates below 30%' },
+      { type:'ai', text:'Found 3 underperforming cadences:', embed: embed_1 },
+      { type:'user', text:'Draft a new email template for the re-engagement cadence focused on value' },
+      { type:'ai', text:'Here\'s a value-focused re-engagement email:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Salesloft', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Salesloft API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Salesloft API', color:'text-green-400', delay:3000 },
+      { text:'✓ 42 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Salesloft', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Salesloft';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/shopify/index.html b/shopify/index.html
index 1493d97..1d926ed 100644
--- a/shopify/index.html
+++ b/shopify/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shopify Connect — AI-Power Your Store in 2 Clicks</title>
+  <title>MCPEngage for Shopify — AI-Power Your Shopify in 2 Clicks</title>
+  <meta name="description" content="Connect Shopify to any AI model with MCPEngage. Manage orders, products, and inventory through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#96BF48',
-              600: '#96BF48dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #96BF48 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #96BF4825, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #96BF4820; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #96BF48">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Shopify Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #96BF48; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #96BF48"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Shopify</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Shopify MCP server. Products, orders, customers, and inventory — AI-managed ecommerce. <strong class="text-white">142 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #96BF48; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/shopify.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #96BF48; color: #fff">
-            142 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Shopify + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Shopify + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Stockout surprises</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #96BF4830">
-              <i data-lucide="check" class="w-4 h-4" style="color: #96BF48"></i>
-            </div>
-            <p class="text-white font-medium">AI predicts and reorders</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual order updates</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #96BF4830">
-              <i data-lucide="check" class="w-4 h-4" style="color: #96BF48"></i>
-            </div>
-            <p class="text-white font-medium">Auto-notify customers</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Lost upsell opportunities</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #96BF4830">
-              <i data-lucide="check" class="w-4 h-4" style="color: #96BF48"></i>
-            </div>
-            <p class="text-white font-medium">AI recommends bundles</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Shopify</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Shopify API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #96BF4820">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #96BF48"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Product Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, manage inventory, pricing, and variants at scale.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #96BF4820">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #96BF48"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Order Processing</h3>
-          <p class="text-zinc-400 text-sm">Track orders, fulfillment, refunds, and customer communications.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #96BF4820">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #96BF48"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Analytics</h3>
-          <p class="text-zinc-400 text-sm">Purchase history, lifetime value, segment high-value customers.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #96BF4820">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #96BF48"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
-          <p class="text-zinc-400 text-sm">Stock alerts, auto-reorder, multi-location sync.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #96BF48; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Shopify to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage orders, update inventory, and track sales — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/shopify" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/shopify
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-cart" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Shopify orders..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-cart" class="w-4 h-4"></i>
+                      Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">32</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="package" class="w-4 h-4"></i>
+                      Products
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #5847 — $342.50</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • 12 min ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Ready to ship</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Priority</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #5846 — $127.99</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">James Miller • 1 hour ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Processing</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">In fulfillment</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Standard</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #5843 — $89.00</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Priya Patel • 3 hours ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Shipped</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">In transit</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">USPS</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="60">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Shopify Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Store</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/shopify" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual order updates</p><p class="text-xs sm:text-sm text-zinc-500">Customers ask "where's my order?" — you have to look it up, copy tracking, and reply</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Inventory blindness</p><p class="text-xs sm:text-sm text-zinc-500">Products go out of stock without warning; you find out when customers complain</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Report rabbit holes</p><p class="text-xs sm:text-sm text-zinc-500">Spend 30 minutes exporting CSVs just to answer "what sold best last month?"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Endless clicking</p><p class="text-xs sm:text-sm text-zinc-500">Update product prices, manage variants, and fulfill orders — one tedious click at a time</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant order lookup</p><p class="text-xs sm:text-sm text-zinc-500">"Show me order #5847 details" — full info including tracking and customer notes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart inventory alerts</p><p class="text-xs sm:text-sm text-zinc-500">AI flags low stock and best-sellers before you run out</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-question analytics</p><p class="text-xs sm:text-sm text-zinc-500">"What were my top 5 products last month?" — instant answer with revenue breakdown</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-action</p><p class="text-xs sm:text-sm text-zinc-500">"Mark order #5847 as fulfilled and email the customer" — done in seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your E-Commerce Team Is<br><span class="text-red-400">Drowning in Orders</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Shopify powers your store, but your team spends more time clicking than selling.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="inbox" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Customer Service Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">"Where's my order?" "Is this in stock?" "Can I change my address?" — your inbox is full of questions you have to manually look up in Shopify.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Inventory Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're selling a product that's out of stock (again). Or sitting on inventory that won't move. You have no real-time visibility.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Analytics Paralysis</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Shopify has the data, but extracting insights requires exports, pivot tables, and guesswork. By the time you have an answer, the trend has changed.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Commerce</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Shopify Store</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Install the MCPEngage app from the Shopify App Store or use a private app token. MCPEngage discovers all products, orders, customers, and inventory — building 60+ tools automatically.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all unfulfilled orders." "What's my best-selling product this week?" "Update inventory for SKU-1234 to 50 units." Your AI understands your store like a veteran ops manager.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Store Operations</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: auto-respond to order status inquiries, flag low inventory, generate daily sales reports, sync data to your accounting system — all running 24/7 without human touch.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Shopify</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          60+ Shopify tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-cart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Order Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, fulfill, refund, and track orders through conversation. "Show me all high-value orders from last week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Product Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update prices, manage variants, and sync inventory. "Which products have less than 10 units in stock?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Sales Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time revenue, conversion rates, average order value, and top products. "What's my total revenue this month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull customer lifetime value, order history, and cart abandonment data in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="box" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Inventory Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor stock levels, set reorder points, and get low-stock alerts. "Alert me when any product drops below 5 units."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="truck" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Fulfillment Workflows</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-fulfill orders, generate shipping labels, and send tracking emails. "Fulfill all paid orders from today."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Shopify account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Shopify API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Shopify settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Shopify.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Shopify?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You can install MCPEngage as a Shopify app (OAuth flow) or use a custom app with Admin API access. MCPEngage uses the Shopify GraphQL and REST APIs to create 60+ tools covering orders, products, customers, inventory, and more.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it work with my Shopify theme and apps?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage works at the API level and doesn't interfere with your theme, checkout flow, or other apps. It's purely a backend integration for data access and automation.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it handle bulk operations?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. You can update hundreds of products, fulfill multiple orders, or adjust inventory across variants — all through natural language commands. MCPEngage uses Shopify's bulk APIs for efficient large-scale operations.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Stripe, QuickBooks, Salesforce, Zendesk, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Shopify?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Shopify Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #96BF48; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Shopify<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of e-commerce teams using MCPEngage to supercharge their Shopify stores.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Shopify is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Shopify Connect. Not affiliated with Shopify.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(149,205,50,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#95cd32;"></div><span style="font-size:11px;font-weight:700;color:#95cd32;text-transform:uppercase;letter-spacing:0.5px;">High-Value Orders — Last 24h</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$2,145 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$342.50</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Order #5847</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · 12 min ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Paid</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(149,205,50,0.15);color:#95cd32;text-transform:uppercase;">Ready to Ship</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$287.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Order #5844</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Alex Kim · 4 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Processing</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">In Fulfillment</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$225.75</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Order #5841</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Maria Lopez · 18 hours ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Shipped</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">In Transit</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">6 ready to fulfill, 1 in fulfillment, 1 shipped</span><span style="font-size:10px;color:#95cd32;cursor:pointer;">View in Shopify →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Order #5847 Fulfilled</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$342.50</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Shipping label created</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">USPS Priority Mail</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Tracking:</span><span style="font-size:10px;color:#22c55e;font-family:monospace;">9400111899562845123456</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Est. delivery: Jan 19-21</div></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Customer notification sent</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">Email sent to: sarah.chen@example.com</div><div style="font-size:10px;color:rgba(255,255,255,0.5);font-style:italic;">"Your order #5847 has shipped! Track your package with USPS..."</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all orders over $200 from the last 24 hours' },
+      { type:'ai', text:'Found 8 high-value orders totaling $2,145:', embed: embed_1 },
+      { type:'user', text:'Fulfill order #5847 with USPS Priority and email the customer' },
+      { type:'ai', text:'Order fulfilled! Here\'s the summary:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Shopify', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Shopify API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Shopify API', color:'text-green-400', delay:3000 },
+      { text:'✓ 60 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Shopify', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Shopify';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/square/index.html b/square/index.html
index 654840a..62876dd 100644
--- a/square/index.html
+++ b/square/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Square Connect — AI-Power Your Payments in 2 Clicks</title>
+  <title>MCPEngage for Square — AI-Power Your Square in 2 Clicks</title>
+  <meta name="description" content="Connect Square to any AI model with MCPEngage. Manage orders, process payments, track inventory, and analyze sales through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#006AFF',
-              600: '#006AFFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #006AFF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #006AFF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #006AFF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #006AFF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Square Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #006AFF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #006AFF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Square</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Square MCP server. Payments, POS, invoices, and customer data — AI-powered commerce. <strong class="text-white">86 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #006AFF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/square.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #006AFF; color: #fff">
-            86 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Square + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Square + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">End-of-day reconciliation</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006AFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #006AFF"></i>
-            </div>
-            <p class="text-white font-medium">AI balances automatically</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Generic customer service</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006AFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #006AFF"></i>
-            </div>
-            <p class="text-white font-medium">Personalized based on history</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual invoice follow-up</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006AFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #006AFF"></i>
-            </div>
-            <p class="text-white font-medium">Smart payment reminders</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Square</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Square API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006AFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #006AFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Payment Processing</h3>
-          <p class="text-zinc-400 text-sm">Accept payments, track transactions, manage refunds automatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006AFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #006AFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">POS & Inventory</h3>
-          <p class="text-zinc-400 text-sm">Track sales, manage stock, sync across locations in real-time.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006AFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #006AFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Profiles</h3>
-          <p class="text-zinc-400 text-sm">Build loyalty, track purchase history, personalize offers.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006AFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #006AFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Invoice & Billing</h3>
-          <p class="text-zinc-400 text-sm">Send invoices, automate reminders, collect payments online.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #006AFF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Square to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Process payments, manage inventory, and analyze sales — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/square" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/square
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-cart" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Square sales..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-cart" class="w-4 h-4"></i>
+                      Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">24</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="package" class="w-4 h-4"></i>
+                      Inventory
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #4892</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • 5m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$124.50</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">In-Store</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #4891</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">James Miller • 18m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$89.99</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Online</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #4890</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Maria Lopez • 1h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Refunded</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">$45.00</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">In-Store</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="52">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Square Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Access</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/square" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual inventory counts</p><p class="text-xs sm:text-sm text-zinc-500">Close early to count stock, update spreadsheets, hope the numbers are right</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost sales insights</p><p class="text-xs sm:text-sm text-zinc-500">"What sold well last week?" requires exporting CSV files and pivot tables</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Refund chaos</p><p class="text-xs sm:text-sm text-zinc-500">Customer wants a refund, you dig through orders, verify receipt, process manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Zero automation</p><p class="text-xs sm:text-sm text-zinc-500">Every discount code, every loyalty reward, every promotion requires manual setup</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time inventory</p><p class="text-xs sm:text-sm text-zinc-500">"How many espresso machines do we have?" Get instant stock levels across all locations</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant sales analytics</p><p class="text-xs sm:text-sm text-zinc-500">"What were our top 5 items yesterday?" AI pulls the data and shows trends</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-command refunds</p><p class="text-xs sm:text-sm text-zinc-500">"Refund order #4890" — processed in 3 seconds with full audit trail</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart automation</p><p class="text-xs sm:text-sm text-zinc-500">Auto-reorder low stock, create dynamic discounts, reward loyal customers — all AI-driven</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Business Is<br><span class="text-red-400">Running Blind</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Square handles transactions, but extracting insights and managing operations is a full-time job.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Inventory Nightmare</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're always out of your best-sellers and overstocked on slow movers. No real-time alerts. By the time you notice, you've lost a week of sales.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Square has all your sales data, but getting answers requires exporting CSVs, building pivot tables, and guessing what matters. You make decisions with gut feel instead of facts.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Everything</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Process refunds by hand. Update inventory counts on paper. Create discount codes one by one. It's 2025 and you're still running a business like it's 1995.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Commerce</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Square</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Square API token. MCPEngage discovers all locations, products, orders, and customers, building 52+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"What were our total sales yesterday?" "Which items are low in stock?" "Process a refund for order #4890." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-reorder inventory, send receipts, reward repeat customers, generate daily sales reports, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Square</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          52+ Square tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Payment Processing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create payments, process refunds, and check transaction status through conversation. "Process a $50 refund for order #4890."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Inventory Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track stock levels, update counts, and get low-stock alerts. "How many lattes did we sell today?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-cart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Order Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search orders, update fulfillment status, and manage customer details. "Show me all pending orders."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Catalog Control</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Add products, update pricing, and manage categories. "Create a new menu item: Oat Milk Latte, $5.50."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View customer purchase history, lifetime value, and preferences. "Who are our top 10 customers this month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Sales Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate revenue reports, track trends, and identify best-sellers. "Compare this week's sales to last week."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Square account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Square API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Square settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Square.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Square?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Square Access Token (generated in Square Developer Dashboard). MCPEngage uses the Square API to create 52+ tools covering payments, orders, inventory, catalog, customers, and analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it handle multiple locations?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage automatically detects all your Square locations and lets you query across them. "What's our total inventory across all stores?" or "Show sales for the downtown location only."
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Shopify, Stripe, PayPal, WooCommerce, QuickBooks, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Square?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Square Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #006AFF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Square<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of businesses using MCPEngage to supercharge their commerce.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Square is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Square Connect. Not affiliated with Square.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Top Sellers — Yesterday</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$2,847</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, rgba(234,179,8,0.2), rgba(234,179,8,0.05));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#facc15;">1</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Vanilla Latte</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">124 sold</span><span style="font-size:10px;color:rgba(255,255,255,0.2);">·</span><span style="font-size:10px;font-weight:600;color:#22c55e;">$682.00</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:700;color:#e4e4e7;">$5.50</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">each</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, rgba(168,162,158,0.2), rgba(168,162,158,0.05));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#d4d4d8;">2</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Almond Croissant</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">98 sold</span><span style="font-size:10px;color:rgba(255,255,255,0.2);">·</span><span style="font-size:10px;font-weight:600;color:#22c55e;">$441.00</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:700;color:#e4e4e7;">$4.50</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">each</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, rgba(205,127,50,0.2), rgba(205,127,50,0.05));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#cd7f32;">3</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Iced Americano</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">87 sold</span><span style="font-size:10px;color:rgba(255,255,255,0.2);">·</span><span style="font-size:10px;font-weight:600;color:#22c55e;">$391.50</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:700;color:#e4e4e7;">$4.50</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">each</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:rgba(255,255,255,0.3);">4</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Espresso</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">76 sold</span><span style="font-size:10px;color:rgba(255,255,255,0.2);">·</span><span style="font-size:10px;font-weight:600;color:#22c55e;">$228.00</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:700;color:#e4e4e7;">$3.00</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">each</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:rgba(255,255,255,0.3);">5</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Blueberry Muffin</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">62 sold</span><span style="font-size:10px;color:rgba(255,255,255,0.2);">·</span><span style="font-size:10px;font-weight:600;color:#22c55e;">$248.00</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:700;color:#e4e4e7;">$4.00</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">each</div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">447 items sold · $2,847 revenue</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Full report →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Low Stock Alerts</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 items</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(239,68,68,0.03);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Oat Milk</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Beverages · Dairy Alt</span></div></div><div style="text-align:right;"><div style="font-size:13px;font-weight:700;color:#ef4444;">2</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">units left</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(245,158,11,0.03);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Almond Croissants</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Pastries · Frozen</span></div></div><div style="text-align:right;"><div style="font-size:13px;font-weight:700;color:#f59e0b;">8</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">units left</div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Colombian Beans (1lb)</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Coffee · Retail</span></div></div><div style="text-align:right;"><div style="font-size:13px;font-weight:700;color:#ef4444;">3</div><div style="font-size:9px;color:rgba(255,255,255,0.3);">bags left</div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Auto-reorder thresholds: 10 units</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Create PO →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'What were our top 5 selling items yesterday?' },
+      { type:'ai', text:'Here are your top 5 items from yesterday:', embed: embed_1 },
+      { type:'user', text:'Which items are low in stock?' },
+      { type:'ai', text:'3 items need restocking:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Square', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Square API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Square API', color:'text-green-400', delay:3000 },
+      { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Square', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Square';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/squarespace/index.html b/squarespace/index.html
index e487cc0..291c193 100644
--- a/squarespace/index.html
+++ b/squarespace/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Squarespace Connect — AI-Power Your Website in 2 Clicks</title>
+  <title>MCPEngage for Squarespace — AI-Power Your Squarespace in 2 Clicks</title>
+  <meta name="description" content="Connect Squarespace to any AI model with MCPEngage. Manage pages, products, orders, and content through natural conversation. Real-time website automation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fafafa',
-              100: '#f5f5f5',
-              200: '#e5e5e5',
-              300: '#d4d4d4',
-              400: '#a3a3a3',
-              500: '#171717',
-              600: '#0a0a0a',
-              700: '#000000',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,619 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 50%, #ffffff 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.08), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
-      transform: translateY(-4px);
-      border-color: rgba(255, 255, 255, 0.2);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); }
-      50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.25); }
-    }
-    .video-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .shimmer-border {
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 3s linear infinite;
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 0 40px 0 rgba(255, 255, 255, 0.1); }
-      50% { box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.3), 0 0 60px 10px rgba(255, 255, 255, 0.15); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-    }
-    .orb {
-      position: absolute;
-      border-radius: 50%;
-      filter: blur(100px);
-      opacity: 0.4;
-    }
-    .sq-gradient {
-      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Orbs Background -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="orb w-96 h-96 bg-zinc-400/20 top-1/4 -left-48 animate-float"></div>
-    <div class="orb w-64 h-64 bg-zinc-300/10 top-1/2 -right-32 animate-float-delayed"></div>
-    <div class="orb w-72 h-72 bg-zinc-500/10 bottom-1/4 left-1/3 animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-lg shadow-white/10">
-          <i data-lucide="layout" class="w-5 h-5 text-black"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Squarespace Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-white text-black hover:bg-zinc-200 rounded-xl font-medium transition shadow-lg shadow-white/10">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-white animate-pulse"></span>
-        Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Squarespace + AI
+        </div>
       </div>
-      
-      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
-        Connect <span class="gradient-text">Squarespace</span><br>
-        to AI in 2 Clicks
-      </h1>
-      
-      <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
-        The complete Squarespace MCP server. <strong class="text-white">67 tools</strong> for pages, products, and analytics. 
-        No setup. No OAuth headaches. Just connect and automate.
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Squarespace</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Squarespace to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage content, process orders, update products — all through conversation.</span>
       </p>
-      
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-white/20">
-          Join the Waitlist
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
         </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
-          <i data-lucide="play-circle" class="w-5 h-5"></i>
-          Watch Demo
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/squarespace" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
         </a>
       </div>
 
-      <!-- Social Proof -->
-      <div class="flex flex-col items-center gap-4">
-        <div class="flex -space-x-3">
-          <img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-          <img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-          <img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-          <img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-          <img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/squarespace
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-bag" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="package" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="image" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Squarespace site..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-bag" class="w-4 h-4"></i>
+                      Recent Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">28</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Pages
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #SS-4821</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Photography Print Set • $189</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Unfulfilled</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Digital goods</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">2h ago</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #SS-4820</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Premium Template • $299</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Fulfilled</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Download sent</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">5h ago</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Order #SS-4819</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Coaching Session • $450</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Needs scheduling</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">1d ago</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <p class="text-zinc-400">
-          Trusted by <strong class="text-white">400+</strong> website owners & creators
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Squarespace Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Website</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/squarespace" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual content updates</p><p class="text-xs sm:text-sm text-zinc-500">Log into Squarespace, navigate through menus, edit pages one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Order processing bottleneck</p><p class="text-xs sm:text-sm text-zinc-500">Check for new orders every few hours, manually send digital downloads</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Product management chaos</p><p class="text-xs sm:text-sm text-zinc-500">Updating prices, descriptions, and inventory across dozens of products takes hours</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No real-time insights</p><p class="text-xs sm:text-sm text-zinc-500">Wait for email summaries to see what's selling, traffic is up, or orders are pending</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant content updates</p><p class="text-xs sm:text-sm text-zinc-500">"Update the pricing page with new rates" — AI edits content in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-fulfill orders</p><p class="text-xs sm:text-sm text-zinc-500">AI detects new orders, sends downloads, schedules services — zero manual work</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Bulk product management</p><p class="text-xs sm:text-sm text-zinc-500">"Discount all digital products by 20%" — done instantly across your catalog</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Live site intelligence</p><p class="text-xs sm:text-sm text-zinc-500">"How many orders today?" "What's our best seller?" — real-time answers</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Website Is<br><span class="text-red-400">A Manual Job</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Squarespace is beautiful, but every update, order, and product change requires you to log in and click around.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mouse-pointer-click" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Too Many Clicks</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every content update requires logging in, navigating menus, editing pages, saving changes, and previewing. Simple updates take 15 minutes when they should take 15 seconds.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Order Fulfillment Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">A customer buys your digital product at 2am. They're still waiting for the download link at 9am because you haven't checked for new orders yet. Frustrated customers = refund requests.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Pricing Updates Are Painful</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Running a flash sale? You have to manually update every product price, then remember to change them back. You skip sales because the admin work isn't worth it.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI manages your Squarespace site</p>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Squarespace</span>
+        </h2>
       </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/squarespace.mp4" type="video/mp4">
-            </video>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Squarespace</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Squarespace API key. MCPEngage discovers all available endpoints and builds 55+ tools automatically. No code, no configuration, no DevOps.</p>
           </div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="file-text" class="w-4 h-4 text-white"></i>
-            <span class="text-sm text-zinc-300">Pages</span>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
           </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="shopping-bag" class="w-4 h-4 text-white"></i>
-            <span class="text-sm text-zinc-300">Products</span>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all unfulfilled orders." "Update the About page with new bio text." "What's my revenue this week?" Your AI understands and acts.</p>
           </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-white"></i>
-            <span class="text-sm text-zinc-300">Analytics</span>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-fulfill digital orders, update product inventory, publish scheduled content, and sync data across your stack — all running 24/7.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-16 items-center">
-        <div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
-            Setting up Squarespace + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-6">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Manual content updates</p>
-                <p class="text-zinc-500">Updating pages, products, and blogs takes forever.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Inventory headaches</p>
-                <p class="text-zinc-500">Stock levels out of sync, overselling nightmares.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Missed form leads</p>
-                <p class="text-zinc-500">Contact submissions sit unread for days.</p>
-              </div>
-            </div>
-          </div>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
-        <div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
-          <div class="flex items-center gap-3 mb-8">
-            <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg">
-              <i data-lucide="check" class="w-6 h-6 text-black"></i>
-            </div>
-            <h3 class="text-2xl font-bold">With Squarespace Connect</h3>
-          </div>
-          <div class="space-y-5 text-lg">
-            <div class="flex items-center gap-3 text-zinc-300">
-              <div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
-                <i data-lucide="check" class="w-4 h-4 text-white"></i>
-              </div>
-              AI keeps your site fresh automatically
-            </div>
-            <div class="flex items-center gap-3 text-zinc-300">
-              <div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
-                <i data-lucide="check" class="w-4 h-4 text-white"></i>
-              </div>
-              Auto-sync stock levels across channels
-            </div>
-            <div class="flex items-center gap-3 text-zinc-300">
-              <div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
-                <i data-lucide="check" class="w-4 h-4 text-white"></i>
-              </div>
-              Instant AI follow-up on form submissions
-            </div>
-            <div class="flex items-center gap-3 text-zinc-300">
-              <div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
-                <i data-lucide="check" class="w-4 h-4 text-white"></i>
-              </div>
-              Works with Claude, GPT, any MCP client
-            </div>
-            <div class="flex items-center gap-3 text-zinc-300">
-              <div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
-                <i data-lucide="check" class="w-4 h-4 text-white"></i>
-              </div>
-              Connect in 2 clicks via OAuth
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Squarespace API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
-            <i data-lucide="file-text" class="w-7 h-7 text-white"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Content Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Update pages, blogs, and galleries programmatically. Keep content fresh with AI.</p>
-        </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
-            <i data-lucide="shopping-bag" class="w-7 h-7 text-white"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Commerce</h3>
-          <p class="text-zinc-400 leading-relaxed">Manage products, inventory, orders, and fulfillment. Complete e-commerce control.</p>
-        </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
-            <i data-lucide="inbox" class="w-7 h-7 text-white"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Form Submissions</h3>
-          <p class="text-zinc-400 leading-relaxed">Access and process contact form data automatically. Never miss a lead again.</p>
-        </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Analytics</h3>
-          <p class="text-zinc-400 leading-relaxed">Pull traffic, sales, and engagement metrics. AI-powered insights on demand.</p>
-        </div>
-      </div>
-      
-      <div class="mt-16 text-center">
-        <p class="text-zinc-400 mb-6">Full API coverage including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Pages</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Products</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Orders</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Inventory</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Blogs</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Forms</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Members</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Profiles</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white text-sm font-medium mb-6 border border-white/20">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-white">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-white">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone"
-              required
-              placeholder="+1 (555) 000-0000"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email"
-              placeholder="you@company.com"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-white/10"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message (hidden by default) -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check" class="w-8 h-8 text-white"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="lock" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Squarespace</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Squarespace tools accessible through one natural-language interface.
         </p>
       </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const submitBtn = document.getElementById('submit-btn');
-      const successMsg = document.getElementById('success-message');
-      
-      submitBtn.disabled = true;
-      submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
-      
-      setTimeout(() => {
-        form.classList.add('hidden');
-        successMsg.classList.remove('hidden');
-      }, 1000);
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 md:p-12 shadow-2xl">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 text-lg leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/squarespace-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-white hover:text-zinc-300 font-medium text-lg group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
-            </a>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/squarespace-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-white">✓ Squarespace MCP Server running</span>
-<span class="text-white">✓ 67 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Content Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update pages, blog posts, and site content through conversation. "Add a new testimonial to the homepage."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-bag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Order Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Process orders, send digital products, and manage fulfillment. "Send download links for all unfulfilled digital orders."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="package" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Product Control</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and manage products with natural language. "Set all coaching sessions to $350 each."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="image" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Media Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Upload, organize, and update images across your site. "Replace the hero image on the homepage."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Site Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track orders, revenue, traffic, and product performance in real-time with natural language queries.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Scheduling Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Publish blog posts on schedule, launch products at specific times, and automate content workflows.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Squarespace account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Squarespace settings.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Squarespace?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 400+ website owners already automating with Squarespace Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition shadow-xl shadow-white/20">
-          Join the Waitlist
-        </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
-          Watch Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center">
-            <i data-lucide="layout" class="w-5 h-5 text-black"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Squarespace.
           </div>
-          <span class="font-bold text-xl">Squarespace Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/squarespace-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/squarespace-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/squarespace-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Squarespace?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Squarespace API key (generated in Settings → Advanced → API Keys). MCPEngage uses the Squarespace Commerce API to create 55+ tools covering pages, products, orders, inventory, and content. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Squarespace Connect. Not affiliated with Squarespace.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI actually edit my website content?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! AI can update page content, blog posts, product descriptions, and more — all through natural language. You can review changes before they go live and maintain full editorial control.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including WordPress, Shopify, Webflow, Wix, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Squarespace<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of creators and businesses using MCPEngage to supercharge their Squarespace sites.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Squarespace is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-white text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Unfulfilled Orders</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$1,127 pending</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#SS-4821</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Photography Print Set</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · $189 · 2h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Urgent</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#93c5fd;text-transform:uppercase;">Digital</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">⏱</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#SS-4819</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Coaching Session</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Marcus Lee · $450 · 1d ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Action needed</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(168,85,247,0.15);color:#c084fc;text-transform:uppercase;">Service</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">📄</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#SS-4818</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Website Template Pro</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Emma Wilson · $199 · 8h ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#93c5fd;text-transform:uppercase;">Digital</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">📄</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#SS-4817</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Design Kit Bundle</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">James Park · $289 · 12h ago</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#93c5fd;text-transform:uppercase;">Digital</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">3 digital orders ready to send · 1 service needs scheduling</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Fulfill all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Orders Fulfilled</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 of 4</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">3 Digital Products Sent</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:4px;">✓ #SS-4821 — Photography Print Set → Sarah Chen</div><div style="margin-bottom:4px;">✓ #SS-4818 — Website Template Pro → Emma Wilson</div><div>✓ #SS-4817 — Design Kit Bundle → James Park</div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#3b82f6;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Scheduling Email Drafted — #SS-4819</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:10px;"><div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hi Marcus, Thanks for booking your coaching session! I'm excited to work with you. Please use this link to schedule a time that works best: [Calendly Link]. Looking forward to our conversation! — [Your Name]"</div></div><div style="display:flex;gap:6px;"><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;border:none;cursor:pointer;">Send Email</button><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;border:none;cursor:pointer;">Edit First</button></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all unfulfilled orders from the past 24 hours' },
+      { type:'ai', text:'Found 4 orders pending fulfillment:', embed: embed_1 },
+      { type:'user', text:'Send download links for all digital orders and draft a scheduling email for the coaching session' },
+      { type:'ai', text:'Done! Here\'s what happened:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Squarespace', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Squarespace API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Squarespace API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Squarespace', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Squarespace';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/stripe/index.html b/stripe/index.html
index c7008c0..42ddc41 100644
--- a/stripe/index.html
+++ b/stripe/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Stripe Connect — AI-Power Your Payments in 2 Clicks</title>
+  <title>MCPEngage for Stripe — AI-Power Your Stripe in 2 Clicks</title>
+  <meta name="description" content="Connect Stripe to any AI model with MCPEngage. Manage charges, subscriptions, and invoices through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#635BFF',
-              600: '#635BFFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #635BFF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #635BFF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #635BFF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #635BFF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Stripe Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #635BFF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #635BFF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Stripe</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Stripe MCP server. Subscriptions, payments, customers, and revenue analytics — AI-optimized billing. <strong class="text-white">168 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #635BFF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/stripe.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #635BFF; color: #fff">
-            168 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Stripe + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Stripe + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Failed payment chaos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #635BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #635BFF"></i>
-            </div>
-            <p class="text-white font-medium">AI retries and recovers</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Churn blindness</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #635BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #635BFF"></i>
-            </div>
-            <p class="text-white font-medium">Proactive retention alerts</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual subscription changes</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #635BFF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #635BFF"></i>
-            </div>
-            <p class="text-white font-medium">AI handles upgrades/downgrades</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Stripe</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Stripe API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #635BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #635BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Payment Management</h3>
-          <p class="text-zinc-400 text-sm">Process charges, refunds, disputes. Handle multi-currency globally.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #635BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #635BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Subscription Billing</h3>
-          <p class="text-zinc-400 text-sm">Automate recurring billing, trials, upgrades, and cancellations.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #635BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #635BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Customer Data</h3>
-          <p class="text-zinc-400 text-sm">Access payment methods, history, lifetime value, and risk scores.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #635BFF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #635BFF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Revenue Analytics</h3>
-          <p class="text-zinc-400 text-sm">MRR, churn, retention cohorts, and financial reporting.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #635BFF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Stripe to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage payments, track subscriptions, and analyze revenue — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/stripe" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/stripe
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="repeat" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Stripe payments..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="credit-card" class="w-4 h-4"></i>
+                      Payments
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">47</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="repeat" class="w-4 h-4"></i>
+                      Subs
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">$2,450.00 — Enterprise Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Succeeded</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Annual</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Visa •••• 4242</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">$149.00 — Pro Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Requires action</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Failed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Monthly</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">MC •••• 5555</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">$49.00 — Starter Plan</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignHub • Processing</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Monthly</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Amex •••• 0005</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="55">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Stripe Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Billing</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/stripe" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Dashboard diving</p><p class="text-xs sm:text-sm text-zinc-500">Switch between 6 different Stripe dashboards to understand revenue health</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Failed payment chaos</p><p class="text-xs sm:text-sm text-zinc-500">Manually email customers about declined cards and chase down payments</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Subscription headaches</p><p class="text-xs sm:text-sm text-zinc-500">Customers ask "when does my plan renew?" — you have to look it up every time</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Refund delays</p><p class="text-xs sm:text-sm text-zinc-500">Support tickets pile up while you manually process refunds one by one</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-question insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me MRR growth this quarter" — instant answer with breakdown by plan</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-recovery workflows</p><p class="text-xs sm:text-sm text-zinc-500">AI detects failures, sends smart retry emails, and updates billing contact</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Subscription intel on demand</p><p class="text-xs sm:text-sm text-zinc-500">"When does Acme's subscription renew?" — answer in chat without tab switching</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant refunds</p><p class="text-xs sm:text-sm text-zinc-500">"Refund invoice #1234 and email the customer" — done in one command</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Billing Team Is<br><span class="text-red-400">Overwhelmed</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Stripe collects payments, but your team drowns in support tickets and manual reconciliation.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Failed Payment Firefighting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Cards decline, subscriptions churn, and your team manually chases customers. Revenue leaks while you play email tag.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="refresh-ccw" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Subscription Complexity</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customers upgrade, downgrade, pause, and cancel — each change creates support overhead. Your team can't keep up.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Revenue Reconciliation Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Finance needs MRR by cohort, churn by plan, and LTV by segment. You spend hours exporting CSVs and building pivot tables.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Payments</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Stripe</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Stripe API key (test or live mode). MCPEngage discovers all payment methods, products, plans, and webhooks — building 55+ tools automatically. No code required.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all failed payments this week." "Refund invoice #1234." "What's our MRR breakdown by plan?" Your AI understands Stripe like a veteran finance ops pro.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Billing Ops</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: retry failed payments, send renewal reminders, flag subscription downgrades, generate revenue reports, and sync data to your accounting system — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Stripe</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          55+ Stripe tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Payment Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, capture, refund, and dispute payments through conversation. "Show me all charges over $1000 from last month."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Subscription Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track renewals, upgrades, downgrades, and cancellations. "Which enterprise subscriptions are up for renewal this quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Invoice Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, finalize, and void invoices with natural language commands. "Send draft invoice to Acme Corp for $2450."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Customer Insights</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull customer lifetime value, payment history, subscription timeline, and balance in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Revenue Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate MRR, churn rate, ARPU, and cohort analysis on demand. "What's our net revenue retention this year?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-alert" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Fraud & Dispute Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor Radar alerts, review disputes, and respond to chargebacks. "Show me high-risk payments flagged today."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Stripe account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Stripe API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Stripe settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Stripe.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Stripe?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Stripe API key (restricted or secret key) from your Stripe Dashboard. MCPEngage uses the Stripe API to create 55+ tools covering payments, subscriptions, customers, invoices, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my payment data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own infrastructure — payment data never passes through our servers. API keys are encrypted at rest. You can use restricted keys to limit scope to read-only operations if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it work with test mode and live mode?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect both test and live mode simultaneously. MCPEngage clearly labels which mode you're operating in and prevents accidental cross-mode operations.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Zendesk, Slack, QuickBooks, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Stripe?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Stripe Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #635BFF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Stripe<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of businesses using MCPEngage to supercharge their Stripe billing.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Stripe is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Stripe Connect. Not affiliated with Stripe.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Failed Payments — Action Needed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$3,847 at risk</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$149.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Pro Plan Subscription</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · MC •••• 5555</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Card declined</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">2 days ago</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$49.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Starter Monthly</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">DesignHub · Visa •••• 1234</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Insufficient funds</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">5 days ago</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$299.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Team Plan Annual</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalShip · Amex •••• 0005</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Card expired</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">6 days ago</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">3 auto-retries scheduled, 9 need customer action</span><span style="font-size:10px;color:#ef4444;cursor:pointer;">Email customers →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Recovery Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">12 customers</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sent 12 payment retry emails</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;font-weight:600;color:rgba(255,255,255,0.7);">Email template used: "Update Payment Method"</div><div>✉️ TechFlow Inc — Card declined<br>✉️ DesignHub — Insufficient funds<br>✉️ GlobalShip — Card expired<br><span style="opacity:0.6;">+ 9 more customers</span></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Posted alert to #billing-alerts</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:18px;height:18px;border-radius:4px;background:#4A154B;display:flex;align-items:center;justify-content:center;font-size:10px;">📊</div><span style="font-size:11px;color:rgba(255,255,255,0.7);font-weight:600;">Slack notification sent</span></div><div style="font-size:10px;color:rgba(255,255,255,0.5);">"🚨 12 failed payments ($3,847) — recovery emails sent. Monitor responses in Stripe."</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all failed payments from the last 7 days' },
+      { type:'ai', text:'Found 12 failed payments totaling $3,847:', embed: embed_1 },
+      { type:'user', text:'Send payment retry emails to all failed subscriptions and flag them in Slack' },
+      { type:'ai', text:'Done! Here\'s what I automated:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Stripe', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Stripe API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Stripe API', color:'text-green-400', delay:3000 },
+      { text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Stripe', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Stripe';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/toast/index.html b/toast/index.html
index 74f5f55..2f0373f 100644
--- a/toast/index.html
+++ b/toast/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Toast Connect — AI-Power Your Restaurant in 2 Clicks</title>
+  <title>MCPEngage for Toast POS — AI-Power Your Toast in 2 Clicks</title>
+  <meta name="description" content="Connect Toast POS to any AI model with MCPEngage. Manage orders, menus, employees, and revenue through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fff7ed',
-              100: '#ffedd5',
-              200: '#fed7aa',
-              300: '#fdba74',
-              400: '#fb923c',
-              500: '#FF4C00',
-              600: '#e64500',
-              700: '#c73d00',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,615 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #FF4C00 0%, #ff8c42 30%, #f97316 60%, #fbbf24 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 76, 0, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(255, 76, 0, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(255, 76, 0, 0.4);
-    }
-    .video-glow {
-      box-shadow: 0 25px 80px rgba(255, 76, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; }
-      50% { opacity: 1; }
-    }
-    .pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-      box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 76, 0, 0.4), 0 0 40px 0 rgba(255, 76, 0, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(255, 76, 0, 0.6), 0 0 60px 10px rgba(255, 76, 0, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(255, 76, 0, 0.5), rgba(251, 191, 36, 0.5));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #18181b;
-      border-radius: calc(1rem - 1px);
-    }
-    .text-glow {
-      text-shadow: 0 0 40px rgba(255, 76, 0, 0.5);
-    }
-    @keyframes sizzle {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
-    }
-    .sizzle:hover {
-      animation: sizzle 0.3s ease-in-out;
-    }
-    .fire-gradient {
-      background: linear-gradient(180deg, rgba(255, 76, 0, 0.1) 0%, transparent 100%);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-80 h-80 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="utensils" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl tracking-tight">Toast Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-4xl mx-auto text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="relative flex h-2 w-2">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
-            </span>
-            Open Source + Hosted Cloud
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text text-glow">Toast</span><br>
-            to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
-            The complete Toast MCP server. <strong class="text-white">94 tools</strong> for orders, menus, and operations. 
-            No tech headaches. Just connect and serve.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-            <a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2 sizzle">
-              Join the Waitlist
-              <i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
-            </a>
-            <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Social Proof -->
-          <div class="flex items-center justify-center gap-4">
-            <div class="flex -space-x-3">
-              <img src="https://i.pravatar.cc/100?img=41" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=42" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=43" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-              <img src="https://i.pravatar.cc/100?img=44" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            </div>
-            <p class="text-zinc-400 text-sm">
-              Trusted by <strong class="text-white">500+</strong> restaurants
-            </p>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Toast + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Toast POS</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Toast to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage orders, update menus, and track revenue — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/toast" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/toast
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-cart" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="utensils" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="dollar-sign" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about today's sales..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-cart" class="w-4 h-4"></i>
+                      Orders
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="utensils" class="w-4 h-4"></i>
+                      Menu
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Table 12 — $287.50</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">4 guests • Server: Maria</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">45 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Dinner</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Online Order #8471 — $64.25</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Pickup in 12 min • Paid</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Ready Soon</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Prepaid</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Takeout</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Bar Tab — $142.00</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">2 guests • Bartender: Jake</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Open</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">1.5 hrs</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Happy Hour</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/toast.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="58">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Toast Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="clipboard-list" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Orders</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Menus</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Reports</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI POS</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-16 items-center">
-        <div>
-          <span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
-          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
-            Running a restaurant + AI<br>
-            <span class="text-zinc-500">shouldn't be this hard</span>
-          </h2>
-          <div class="space-y-6">
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">86'd item confusion</p>
-                <p class="text-zinc-500 mt-1">Servers keep selling items you ran out of 20 minutes ago.</p>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Labor cost overruns</p>
-                <p class="text-zinc-500 mt-1">Overstaffed on slow nights, understaffed during rush.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 group">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">No actionable sales insights</p>
-                <p class="text-zinc-500 mt-1">Data exists but nobody has time to analyze it.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="gradient-border">
-          <div class="gradient-border-inner p-8 md:p-10">
-            <div class="flex items-center gap-3 mb-8">
-              <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
-                <i data-lucide="check" class="w-6 h-6 text-white"></i>
-              </div>
-              <h3 class="text-2xl font-bold">With Toast Connect</h3>
-            </div>
-            <div class="space-y-5">
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>AI updates menu instantly when items run out</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>Smart scheduling based on predicted demand</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>AI identifies your profit drivers daily</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>Works with Claude, GPT, any MCP client</span>
-              </div>
-              <div class="flex items-center gap-3 text-lg">
-                <i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
-                <span>2-click OAuth — no API key headaches</span>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
       </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/toast" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 fire-gradient pointer-events-none"></div>
-    <div class="max-w-6xl mx-auto px-6 relative">
-      <div class="text-center mb-16">
-        <span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-4">Features</span>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Toast API access through one simple connection</p>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Order Management</h3>
-          <p class="text-zinc-400">Access tickets, modifiers, and real-time order flow from every station.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="book-open" class="w-7 h-7 text-amber-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Menu Control</h3>
-          <p class="text-zinc-400">Update items, prices, and availability in real-time across all locations.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Labor Management</h3>
-          <p class="text-zinc-400">Track shifts, manage schedules, and monitor labor costs intelligently.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-2">Reporting</h3>
-          <p class="text-zinc-400">Sales mix, peak hours, server performance — all AI-analyzed.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Guests</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Payments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Discounts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tables</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Inventory</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Modifiers</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Revenue Centers</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tips</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="flame" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
             
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone"
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual sales tracking</p><p class="text-xs sm:text-sm text-zinc-500">End-of-shift reports take 30 minutes, real-time revenue visibility is impossible</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Menu update chaos</p><p class="text-xs sm:text-sm text-zinc-500">Out-of-stock items still showing, daily specials require tablet clicking for every location</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Labor cost blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't see if you're overstaffed until the week closes and payroll hits</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered order data</p><p class="text-xs sm:text-sm text-zinc-500">Dine-in, takeout, delivery, and catering orders live in different tabs</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email"
-                placeholder="you@restaurant.com"
-                class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 sizzle"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="shield-check" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time revenue intel</p><p class="text-xs sm:text-sm text-zinc-500">"What's today's revenue by hour?" — instant breakdown without logging in</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice menu updates</p><p class="text-xs sm:text-sm text-zinc-500">"86 the salmon and add lobster special at $38" — live across all tablets</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart labor alerts</p><p class="text-xs sm:text-sm text-zinc-500">AI warns when labor % hits your threshold and suggests optimal staffing</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified order view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show all open orders" — see everything in one conversation</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Restaurant Is<br><span class="text-red-400">Bleeding Money</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Toast has the data, but by the time you see it, the lunch rush is over and you're overstaffed.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 text-lg mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/toast-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Too Slow to React</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't adjust staffing, 86 items, or respond to trends in real-time because pulling data from Toast takes too many clicks and too much time.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Menu Profit Leaks</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">High-cost items stay on the menu too long, popular items run out without warning, and you have no idea which dishes drive profit until month-end.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Labor Cost Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're guessing on scheduling. Some shifts are understaffed (angry customers), others overstaffed (tanked margins). Toast reports it after it's too late.</p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-green-400">✓ Toast MCP Server running</span>
-<span class="text-green-400">✓ 94 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Restaurant Ops</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Toast</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Toast API credentials. MCPEngage discovers orders, menus, employees, and sales data — building 58+ tools automatically. No code, no integration nightmare.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"What's today's revenue?" "86 the ribeye." "Which server has the highest ticket average?" Your AI understands Toast and acts instantly.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Ops</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: flag slow-moving menu items, alert when labor % exceeds target, generate end-of-day sales summaries, and sync Toast data to your accounting stack.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Toast</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          58+ Toast tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-cart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Order Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">View, update, and analyze orders across all channels. "Show me all open bar tabs over $100."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="utensils" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Menu Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update items, pricing, and availability in real-time. "What are my top 5 selling items this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Employee Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track server performance, hours worked, and tip totals. "Which bartender has the highest sales per hour?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Revenue Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time sales, comps, discounts, and payment breakdowns. "What's my credit card vs cash ratio today?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Profit Optimization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Identify high-margin items, cost leaks, and pricing opportunities. "Which menu items have the best profit margin?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Shift Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-generate daily sales summaries, labor reports, and inventory alerts. "Send me EOD revenue every night at 11pm."</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Toast Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Toast account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Toast settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Does it work with multiple restaurant locations?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Absolutely. Toast Connect is designed for multi-location restaurant groups. Manage all your locations from a single AI interface, 
-            with location-specific commands and reporting.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-        Ready to AI-power your <span class="gradient-text">restaurant?</span>
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 500+ restaurants already automating with Toast Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 sizzle">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
-            <i data-lucide="utensils" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to Toast POS.
           </div>
-          <span class="font-bold text-xl">Toast Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/toast-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
-          <a href="https://github.com/BusyBee3333/toast-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
-          <a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://github.com/BusyBee3333/toast-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Toast?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Toast API access token (generated in Toast Web > Settings > Integrations). MCPEngage uses the Toast API to create 58+ tools covering orders, menus, employees, and revenue. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Toast Connect. Not affiliated with Toast, Inc.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Toast data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Toast's official API with the same permissions as any integration. You control which scopes to grant. All menu and order changes are logged in Toast's activity history.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my accounting software?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Connect Toast + QuickBooks, Xero, or any other MCP-enabled platform. Have AI sync daily sales, tips, and labor costs automatically — no more manual exports.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Multi-location restaurant plans available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including QuickBooks, Stripe, Slack, and more. Each platform gets its own MCP server. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Toast<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of restaurants using MCPEngage to supercharge their Toast POS.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Toast POS is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-amber-500 rounded-full font-semibold transition-all"
-    >
-      <i data-lucide="flame" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,119,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ff7700;"></div><span style="font-size:11px;font-weight:700;color:#ff7700;text-transform:uppercase;letter-spacing:0.5px;">Today's Revenue</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$8,247</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$3,420</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Lunch (11am–3pm)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">142 orders · $24 avg ticket</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">↑ 12%</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$4,827</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Dinner (5pm–close)</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">108 orders · $45 avg ticket</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">↑ 8%</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Labor: 28.4% · Food cost: 31.2%</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Menu Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 changes</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Grilled Salmon</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">86'd</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Marked out of stock · All tablets updated</div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Lobster Special</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Added</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Price: $38 · Category: Specials · Live now</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me today\'s revenue by hour' },
+      { type:'ai', text:'Here\'s your revenue breakdown for today:', embed: embed_1 },
+      { type:'user', text:'86 the salmon and add a lobster special at $38' },
+      { type:'ai', text:'Done! Menu updated across all tablets:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Toast POS', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Toast API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Toast API', color:'text-green-400', delay:3000 },
+      { text:'✓ 58 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Toast', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Toast POS';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/touchbistro/index.html b/touchbistro/index.html
index 667207b..097c6ad 100644
--- a/touchbistro/index.html
+++ b/touchbistro/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>TouchBistro Connect — AI-Power Your Restaurant POS in 2 Clicks</title>
+  <title>MCPEngage for TouchBistro — AI-Power Your TouchBistro in 2 Clicks</title>
+  <meta name="description" content="Connect TouchBistro to any AI model with MCPEngage. Manage orders, tables, menus, and staff through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#fff7ed',
-              100: '#ffedd5',
-              200: '#fed7aa',
-              300: '#fdba74',
-              400: '#fb923c',
-              500: '#F26522',
-              600: '#ea580c',
-              700: '#c2410c',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,639 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #F26522 0%, #ff8c00 50%, #ffc107 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(242, 101, 34, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 60px rgba(242, 101, 34, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(242, 101, 34, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(242, 101, 34, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(242, 101, 34, 0.5); }
-    }
-    .video-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes gradient-shift {
-      0%, 100% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-    }
-    .animated-gradient {
-      background: linear-gradient(-45deg, #F26522, #ff8c00, #F26522, #c2410c);
-      background-size: 400% 400%;
-      animation: gradient-shift 8s ease infinite;
-    }
-    .glow-orb {
-      position: absolute;
-      border-radius: 50%;
-      filter: blur(60px);
-      opacity: 0.35;
-      pointer-events: none;
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse-btn {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(242, 101, 34, 0.4), 0 0 40px 0 rgba(242, 101, 34, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(242, 101, 34, 0.6), 0 0 60px 10px rgba(242, 101, 34, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1);
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .shimmer {
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 2s infinite;
-    }
-    .restaurant-pattern {
-      background-image: radial-gradient(circle at 1px 1px, rgba(242, 101, 34, 0.1) 1px, transparent 0);
-      background-size: 40px 40px;
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Orbs -->
-  <div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
-  <div class="glow-orb w-72 h-72 bg-yellow-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
-  <div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
-          <i data-lucide="utensils" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">TouchBistro Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="absolute inset-0 restaurant-pattern opacity-30"></div>
-    <div class="max-w-4xl mx-auto px-6 py-20 relative">
-      <div class="flex flex-col items-center text-center">
-        <div class="relative z-10">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-            <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-            Connect <span class="gradient-text">TouchBistro</span> to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
-            The complete TouchBistro MCP server. <strong class="text-white">58 tools</strong> for orders, reservations, and reports. 
-            No setup. No OAuth headaches. Just connect and automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-            <a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25 relative overflow-hidden">
-              <span class="relative z-10">Join the Waitlist</span>
-              <div class="absolute inset-0 shimmer"></div>
-            </a>
-            <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
-              <i data-lucide="play" class="w-5 h-5"></i>
-              Watch Demo
-            </a>
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
 
-          <!-- Restaurant Stats -->
-          <div class="flex flex-wrap justify-center gap-6">
-            <div class="flex items-center gap-3">
-              <div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
-                <i data-lucide="receipt" class="w-6 h-6 text-brand-400"></i>
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect TouchBistro + AI
+        </div>
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">TouchBistro</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects TouchBistro to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage tables, orders, and staff — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/touchbistro" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/touchbistro
+                </div>
+                <div class="w-16 sm:w-20"></div>
               </div>
-              <div class="text-left">
-                <div class="text-2xl font-bold">58</div>
-                <div class="text-sm text-zinc-500">API Tools</div>
-              </div>
-            </div>
-            <div class="flex items-center gap-3">
-              <div class="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center border border-yellow-500/20">
-                <i data-lucide="clock" class="w-6 h-6 text-yellow-400"></i>
-              </div>
-              <div class="text-left">
-                <div class="text-2xl font-bold">2 min</div>
-                <div class="text-sm text-zinc-500">Setup Time</div>
-              </div>
-            </div>
-            <div class="flex items-center gap-3">
-              <div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
-                <i data-lucide="trending-up" class="w-6 h-6 text-green-400"></i>
-              </div>
-              <div class="text-left">
-                <div class="text-2xl font-bold">24/7</div>
-                <div class="text-sm text-zinc-500">AI Uptime</div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="grid" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="shopping-bag" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about table status..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="grid" class="w-4 h-4"></i>
+                      Tables
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="shopping-bag" class="w-4 h-4"></i>
+                      Orders
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Table 8 — 6 guests</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$342.75 • Server: Alex</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Ordering</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">52 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Appetizers</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Table 12 — 4 guests</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$218.50 • Server: Maria</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Entrees Out</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">38 min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Main Course</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Table 4 — 2 guests</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">$87.25 • Server: Jake</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Check Ready</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">1h 12m</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Dessert</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
-      </div>
-      <div class="bg-gradient-to-r from-brand-500/50 to-yellow-500/20 p-[1px] rounded-2xl">
-        <div class="bg-zinc-900 rounded-2xl p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/touchbistro.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="54">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">TouchBistro Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="shopping-cart" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Orders</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Reservations</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Reports</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI POS</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-16 items-center">
-        <div>
-          <span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
-          <h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
-            Setting up TouchBistro + AI<br>
-            <span class="text-zinc-500">shouldn't take a week</span>
-          </h2>
-          <div class="space-y-6">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Reservation no-shows</p>
-                <p class="text-zinc-500 mt-1">Empty tables at prime time because guests forgot or ghosted.</p>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">Menu update delays</p>
-                <p class="text-zinc-500 mt-1">86'd items still showing. Guests order, kitchen can't deliver.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-lg">End-of-day reporting chaos</p>
-                <p class="text-zinc-500 mt-1">Hours spent reconciling sales, tips, and inventory.</p>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
-          <div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
-          <div class="relative">
-            <div class="flex items-center gap-3 mb-8">
-              <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
-                <i data-lucide="check" class="w-6 h-6 text-white"></i>
-              </div>
-              <h3 class="text-2xl font-bold">With TouchBistro Connect</h3>
-            </div>
-            <div class="space-y-4 text-lg">
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
-                <i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
-                <p>AI confirms and reminds guests</p>
-              </div>
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
-                <i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
-                <p>Instant 86 management</p>
-              </div>
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
-                <i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
-                <p>Real-time dashboards</p>
-              </div>
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
-                <i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
-                <p>Works with Claude, GPT, any MCP client</p>
-              </div>
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
-                <i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
-                <p>Full API access — 58 tools ready</p>
-              </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/touchbistro" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Table chaos during rush</p><p class="text-xs sm:text-sm text-zinc-500">No way to see which tables are ready to order, which need check, which are stalled</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Server performance mystery</p><p class="text-xs sm:text-sm text-zinc-500">Can't tell who's crushing it and who's dragging down ticket averages until weekly review</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Menu update nightmare</p><p class="text-xs sm:text-sm text-zinc-500">Updating daily specials means touching every iPad individually during prep time</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Revenue reporting delay</p><p class="text-xs sm:text-sm text-zinc-500">Want to know if tonight's strong? Wait until close and manually pull reports</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time table intel</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all tables over 45 minutes" — instant list with server, status, and check total</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Live server rankings</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Who has the highest check average tonight?" — see real-time leaderboard</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice menu control</p><p class="text-xs sm:text-sm text-zinc-500">"Add butter chicken special at $22.95" — live across all iPads instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">On-demand revenue</p><p class="text-xs sm:text-sm text-zinc-500">"What's tonight's revenue so far?" — no logging in, no clicking, just the number</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full TouchBistro API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
-            <i data-lucide="shopping-cart" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Order Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Access tickets, mods, and transaction data in real-time.</p>
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 flex items-center justify-center mb-5 border border-yellow-500/20">
-            <i data-lucide="calendar-days" class="w-7 h-7 text-yellow-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Reservations</h3>
-          <p class="text-zinc-400 leading-relaxed">Manage bookings, waitlists, and table turns automatically.</p>
-        </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
-            <i data-lucide="book-open" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Menu Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Update items, prices, and availability instantly.</p>
-        </div>
-        
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Reporting</h3>
-          <p class="text-zinc-400 leading-relaxed">Sales, labor, and inventory analytics on demand.</p>
-        </div>
-      </div>
-      
-      <div class="mt-16 text-center">
-        <p class="text-zinc-400 mb-6">+ 40 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Table Management</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Staff Scheduling</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory Tracking</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Tips & Gratuity</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Kitchen Display</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer Profiles</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Loyalty Programs</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-2xl mx-auto px-6 relative">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="+1 (555) 000-0000"
-              class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email"
-              placeholder="you@company.com"
-              class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25 relative overflow-hidden"
-          >
-            <span class="relative z-10">Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5 relative z-10"></i>
-            <div class="absolute inset-0 shimmer"></div>
-          </button>
-        </form>
-        
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
-            <i data-lucide="check" class="w-10 h-10 text-green-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
-          Something went wrong. Please try again.
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="shield-check" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Restaurant Is<br><span class="text-red-400">Losing Tables</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          TouchBistro tracks everything, but by the time you check the iPad, the customer's been waiting 10 minutes.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Table Turn Time Killer</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Tables sit empty because you can't see which ones need bussing, which guests want the check, or where the bottlenecks are until service is already in the weeds.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Server Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your best servers carry weak ones, but you don't know who needs coaching or who deserves recognition until the shift's over and the damage is done.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Menu Profit Leaks</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Daily specials get skipped because updating TouchBistro takes too long, so you're stuck pushing last week's menu while fresh inventory expires in the walk-in.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const submitBtn = document.getElementById('submit-btn');
-      const successMsg = document.getElementById('success-message');
-      
-      submitBtn.disabled = true;
-      submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
-      
-      await new Promise(r => setTimeout(r, 1000));
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 text-lg mb-8 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/touchbistro-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Table Service</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/touchbistro-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ TouchBistro MCP Server running</span>
-<span class="text-green-400">✓ 58 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your TouchBistro</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your TouchBistro API credentials. MCPEngage discovers tables, orders, menus, and staff data — building 54+ tools automatically. No tech skills required.</p>
           </div>
         </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which tables have been seated over an hour?" "What's Alex's check average tonight?" "86 the duck." Your AI understands TouchBistro and responds instantly.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Floor</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring alerts: flag tables over 60 minutes, notify when a VIP checks in, generate nightly staff performance reports, and sync sales to your accounting software.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge TouchBistro</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          54+ TouchBistro tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="grid" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Table Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time table status, wait times, and turn rates. "Show me all open tables with checks over $200."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shopping-bag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Order Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track order flow, kitchen times, and guest preferences. "What's the average time from seat to first drink?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="utensils" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Menu Control</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update items, pricing, and specials instantly across all devices. "What are tonight's top 3 selling entrees?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Staff Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Server performance, sales per hour, and tip tracking. "Who has the most covers tonight?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Revenue Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Live sales, comps, voids, and payment types. "What's my dine-in vs takeout split today?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Shift Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-generate end-of-shift reports, staff rankings, and inventory alerts. "Send me server stats every night at 11pm."</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
-        <h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your TouchBistro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your TouchBistro settings.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can my kitchen staff use this?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Absolutely! AI can help with menu updates, 86 management, and answering questions about orders. 
-            Train it once on your menu and processes, and it works 24/7.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your TouchBistro?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join restaurants already automating with TouchBistro Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25 relative overflow-hidden">
-          <span class="relative z-10">Join the Waitlist</span>
-          <div class="absolute inset-0 shimmer"></div>
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center">
-            <i data-lucide="utensils" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to TouchBistro.
           </div>
-          <span class="font-bold text-xl">TouchBistro Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/touchbistro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/touchbistro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/touchbistro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/touchbistro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to TouchBistro?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a TouchBistro API access token (generated in TouchBistro Cloud > Settings > API Access). MCPEngage uses the TouchBistro API to create 54+ tools covering tables, orders, menus, and staff. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 TouchBistro Connect. Not affiliated with TouchBistro.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my TouchBistro data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses TouchBistro's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in TouchBistro's activity history.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my accounting software?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Connect TouchBistro + QuickBooks, Xero, or any other MCP-enabled platform. Have AI sync daily sales, tips, and labor costs automatically — no more manual CSV exports.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Multi-location restaurant plans available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including QuickBooks, Stripe, Slack, and more. Each platform gets its own MCP server. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating TouchBistro<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of restaurants using MCPEngage to supercharge their TouchBistro POS.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for TouchBistro is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#fbbf24;text-transform:uppercase;letter-spacing:0.5px;">Tables Over 45 Min</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">5 tables</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;font-weight:800;color:#fbbf24;">8</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$342.75</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">6 guests</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Server: Alex · 52 min</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Appetizers</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;font-weight:800;color:#f87171;">4</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$87.25</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">2 guests</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Server: Jake · 1h 12m</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Check Ready</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Avg table time tonight: 58 min</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Menu Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Live now</span></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Butter Chicken Special</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Added</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Price: $22.95 · Category: Specials</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Available on all iPads · Servers notified</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all tables over 45 minutes' },
+      { type:'ai', text:'Here are your long-running tables:', embed: embed_1 },
+      { type:'user', text:'Add butter chicken special at $22.95' },
+      { type:'ai', text:'Done! Menu updated across all iPads:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: TouchBistro', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to TouchBistro API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to TouchBistro API', color:'text-green-400', delay:3000 },
+      { text:'✓ 54 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about TouchBistro', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'TouchBistro';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/trello/index.html b/trello/index.html
index 1a90d2d..6f094c2 100644
--- a/trello/index.html
+++ b/trello/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Trello Connect — AI-Power Your Boards in 2 Clicks</title>
+  <title>MCPEngage for Trello — AI-Power Your Trello in 2 Clicks</title>
+  <meta name="description" content="Connect Trello to any AI model with MCPEngage. Manage boards, cards, and workflows through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#eff6ff',
-              100: '#dbeafe',
-              200: '#bfdbfe',
-              300: '#93c5fd',
-              400: '#60a5fa',
-              500: '#0079BF',
-              600: '#0067a3',
-              700: '#005587',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,591 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #0079BF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 121, 191, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 40px rgba(0, 121, 191, 0.15);
-      transform: translateY(-4px);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(0, 121, 191, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-      animation-delay: -1.5s;
-    }
-    .animate-pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) rotate(0deg); }
-      50% { transform: translateY(-20px) rotate(2deg); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; transform: scale(1); }
-      50% { opacity: 0.8; transform: scale(1.05); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 121, 191, 0.4), 0 0 40px 0 rgba(0, 121, 191, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(0, 121, 191, 0.6), 0 0 60px 10px rgba(0, 121, 191, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, #0079BF, #8b5cf6, #ec4899);
-      padding: 2px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #09090b;
-      border-radius: calc(1rem - 2px);
-    }
-    .feature-icon {
-      background: linear-gradient(135deg, rgba(0, 121, 191, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
-    }
-    .bg-grid {
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-    }
-    /* Floating Trello cards */
-    .floating-card {
-      background: linear-gradient(135deg, rgba(0, 121, 191, 0.1), rgba(139, 92, 246, 0.05));
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(10px);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
-  
-  <!-- Floating decorative elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float-slow"></div>
-    
-    <!-- Decorative floating cards (Trello-themed) -->
-    <div class="absolute top-1/3 right-1/4 floating-card w-32 h-20 rounded-lg animate-float opacity-30"></div>
-    <div class="absolute bottom-1/3 left-1/5 floating-card w-28 h-16 rounded-lg animate-float-delayed opacity-20"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Trello Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20">
-      <div class="flex flex-col items-center text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Trello + AI
         </div>
-        
-        <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Trello</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Trello</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
-          The complete Trello MCP server. <strong class="text-white">89 tools</strong> covering boards, cards, and lists. 
-          No setup. No OAuth headaches. Just connect and automate.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-          <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </a>
-          <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Trello to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create cards, move tasks, and organize boards — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/trello" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">10,000+</strong> project managers
-          </p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/trello
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trello" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="list" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Trello boards..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="credit-card" class="w-4 h-4"></i>
+                      Cards
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">24</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="trello" class="w-4 h-4"></i>
+                      Boards
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Launch landing page redesign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Product Roadmap • Due tomorrow</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">In Progress</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">High Priority</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Design</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Fix authentication bug</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Engineering Sprint • Assigned to Jake</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">To Do</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Bug</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Backend</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 planning meeting notes</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Team Wiki • Completed yesterday</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Done</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-blue-500/15 text-blue-400 text-[10px] xl:text-xs font-medium">Planning</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Meeting</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/trello.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="44">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Trello Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="sticky-note" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Cards</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="layout-dashboard" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Boards</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Checklists</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Board Mgmt</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Trello + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <p class="font-medium text-zinc-400">Manual card shuffling</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
-            <p class="font-semibold text-white">AI moves cards based on status</p>
           </div>
         </div>
-        
-        <!-- Pain Point 2 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/trello" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
           <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <p class="font-medium text-zinc-400">Forgetting due dates</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
           </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Card creation takes forever</p><p class="text-xs sm:text-sm text-zinc-500">Opening Trello, finding the right board and list, filling in details — 2 minutes per card</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Board chaos</p><p class="text-xs sm:text-sm text-zinc-500">Cards scattered across multiple boards, no quick way to see what's assigned to you or overdue</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual status updates</p><p class="text-xs sm:text-sm text-zinc-500">Dragging cards between lists, updating checklists, tagging members — endless clicking</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Lost context</p><p class="text-xs sm:text-sm text-zinc-500">Can't remember which board has that important card or what the team decided last week</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
-            <p class="font-semibold text-white">Proactive deadline reminders</p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-card creation</p><p class="text-xs sm:text-sm text-zinc-500">"Create a card: Fix auth bug, assign to Jake, due Friday" — done in 3 seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified task view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me all my overdue cards" — instant list across all boards</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto workflow management</p><p class="text-xs sm:text-sm text-zinc-500">"Move all completed cards to Done" — AI bulk-updates in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant board search</p><p class="text-xs sm:text-sm text-zinc-500">"Find the card about Q1 planning" — AI searches all boards and surfaces it immediately</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Team Is<br><span class="text-red-400">Drowning in Cards</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Trello has your tasks, but finding and updating them takes longer than doing the actual work.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Card Discovery Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You know the card exists but can't remember which of your 12 boards it's on. 5 minutes of clicking later, you find it — or give up.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Triage Tax</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every card needs a list, labels, members, and due date. Your team spends 30 minutes daily on admin instead of shipping.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Silent Deadline Slip</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Cards go overdue and no one notices until standup. By then, the feature is late and the customer is upset.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Boards</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Trello</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Trello API token. MCPEngage discovers all boards, lists, cards, and checklists — building 44+ tools automatically. No code, no configuration.</p>
           </div>
         </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-            </div>
-            <p class="font-medium text-zinc-400">Scattered project updates</p>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
           </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
-              <i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
-            </div>
-            <p class="font-semibold text-white">AI summarizes board activity</p>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me my cards due this week." "Move all 'In Review' cards to Done." "Create a card for the new feature." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-archive old cards, flag overdue items, sync tasks from email, and generate daily standup reports.</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
-        </span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Trello API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="sticky-note" class="w-7 h-7 text-brand-500"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Card Management</h3>
-          <p class="text-zinc-400">Create, move, update cards. Full control over your workflow.</p>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
         </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Trello</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          44+ Trello tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
         
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="layout-dashboard" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Board Operations</h3>
-          <p class="text-zinc-400">Manage lists, labels, and board settings programmatically.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Smart Card Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and move cards through conversation. "Bulk-move all done cards to archive."</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="check-square" class="w-7 h-7 text-pink-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trello" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Checklists & Dates</h3>
-          <p class="text-zinc-400">Track progress, set deadlines, manage subtasks.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Board Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to all boards, lists, and cards. Search across everything with natural language.</p>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-orange-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-3">Member Actions</h3>
-          <p class="text-zinc-400">Assign cards, manage permissions, coordinate teams.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Checklist Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Add checklist items, mark complete, and track progress. "Check off all items in the launch card."</p>
         </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Labels</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Attachments</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Comments</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Power-Ups</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Webhooks</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Custom Fields</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Member Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Assign cards, mention teammates, and track who's working on what. "Show me all Jake's cards."</p>
         </div>
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
-        
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/trello-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="tag" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/trello-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-green-400">✓ Trello MCP Server running</span>
-<span class="text-green-400">✓ 89 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Label & Filter</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Apply labels, filter by color, and organize cards automatically. "Show high-priority engineering cards."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Workflow Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See card velocity, completion rates, and team productivity trends on demand.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Trello account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Trello settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Trello?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join thousands of project managers already automating with Trello Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
-            <i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Trello.
           </div>
-          <span class="font-bold text-xl">Trello Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/trello-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/trello-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/trello-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/trello-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Trello?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Trello API key and token (generated at https://trello.com/app-key). MCPEngage uses the Trello API to create 44+ tools covering boards, lists, cards, checklists, and members. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Trello Connect. Not affiliated with Trello.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Trello boards?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Trello's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Trello's activity feed, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with Asana or Jira?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use Trello as your source of truth and have AI sync tasks to Asana, Jira, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Jira, Asana, Notion, Slack, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Trello<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their boards.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Trello is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(59,130,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#3b82f6;"></div><span style="font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:0.5px;">Your Cards This Week</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 cards</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Launch landing page redesign</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Product Roadmap · Due tomorrow</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">High Priority</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Fix authentication bug</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering Sprint · Due Friday</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Bug</span></div></div></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Card Created</span></div></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">Ship mobile app beta</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">📋 Board: Product Roadmap</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">👤 Assigned: Sarah</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">📅 Due: Monday, Jan 27</div></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all cards assigned to me that are due this week' },
+      { type:'ai', text:'Found 3 cards due this week:', embed: embed_1 },
+      { type:'user', text:'Create a card on Product Roadmap: \'Ship mobile app beta\', assign to Sarah, due next Monday' },
+      { type:'ai', text:'Card created successfully:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Trello', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Trello API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Trello API', color:'text-green-400', delay:3000 },
+      { text:'✓ 44 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Trello', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Trello';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/twilio/index.html b/twilio/index.html
index d933180..0640fea 100644
--- a/twilio/index.html
+++ b/twilio/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Twilio Connect — AI-Power Your Communications in 2 Clicks</title>
+  <title>MCPEngage for Twilio — AI-Power Your Twilio in 2 Clicks</title>
+  <meta name="description" content="Connect Twilio to any AI model with MCPEngage. Send SMS, make calls, and manage phone numbers through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#F22F46',
-              600: '#F22F46dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #F22F46 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F22F4625, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #F22F4620; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F22F46">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Twilio Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F22F46; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #F22F46"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Twilio</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Twilio MCP server. SMS, voice, video, and messaging — AI-driven communications at scale. <strong class="text-white">134 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F22F46; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/twilio.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F22F46; color: #fff">
-            134 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Twilio + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Twilio + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">SMS compliance headaches</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F22F4630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F22F46"></i>
-            </div>
-            <p class="text-white font-medium">AI enforces opt-in rules</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual call transcription</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F22F4630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F22F46"></i>
-            </div>
-            <p class="text-white font-medium">Auto-transcribe and summarize</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">High messaging costs</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F22F4630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #F22F46"></i>
-            </div>
-            <p class="text-white font-medium">AI optimizes send timing</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Twilio</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Twilio API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F22F4620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F22F46"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">SMS & Messaging</h3>
-          <p class="text-zinc-400 text-sm">Send texts, track delivery, manage opt-ins and compliance.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F22F4620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F22F46"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Voice Calling</h3>
-          <p class="text-zinc-400 text-sm">Make calls, record, transcribe, and analyze conversations.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F22F4620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F22F46"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Video & Chat</h3>
-          <p class="text-zinc-400 text-sm">Launch video calls, manage rooms, moderate chat channels.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F22F4620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #F22F46"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics</h3>
-          <p class="text-zinc-400 text-sm">Delivery rates, response times, cost optimization insights.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F22F46; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Twilio to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Send messages, make calls, and automate communications — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/twilio" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/twilio
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-circle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="phone" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="hash" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-2" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Twilio messages..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="message-circle" class="w-4 h-4"></i>
+                      Messages
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">24</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="phone" class="w-4 h-4"></i>
+                      Calls
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">+1 (555) 234-5678</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Delivered • 2m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Verification</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$0.0075</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">+1 (555) 876-5432</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Delivered • 8m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Marketing</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$0.0075</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">+1 (555) 123-9999</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Failed • 15m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Failed</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Invalid number</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">$0.00</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="38">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Twilio Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Comms</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/twilio" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual message sending</p><p class="text-xs sm:text-sm text-zinc-500">Log into Twilio console, paste numbers, send one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Complex API calls</p><p class="text-xs sm:text-sm text-zinc-500">Write custom code for every SMS campaign or phone call</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No delivery tracking</p><p class="text-xs sm:text-sm text-zinc-500">Did the message send? Did it deliver? Check logs manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Billing surprises</p><p class="text-xs sm:text-sm text-zinc-500">Unexpected charges from failed messages or premium numbers</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Natural language sending</p><p class="text-xs sm:text-sm text-zinc-500">"Send verification code to all new signups from today"</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Zero-code automation</p><p class="text-xs sm:text-sm text-zinc-500">Set up SMS campaigns, call routing, and alerts through conversation</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time insights</p><p class="text-xs sm:text-sm text-zinc-500">Instant delivery status, failure reasons, and cost breakdowns</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart cost control</p><p class="text-xs sm:text-sm text-zinc-500">AI warns before sending to premium numbers or international rates</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Communications Are<br><span class="text-red-400">Fragile</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Twilio is powerful, but every SMS campaign requires custom code, and failures disappear into log files.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="code" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Developer Dependency</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Need to send a bulk SMS? Write code. Change a message template? Write more code. Every campaign needs engineering time you don't have.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Silent Failures</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Messages fail due to invalid numbers, carrier blocks, or content filters — and you only find out when customers complain they never got the code.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cost Opacity</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">International messages cost 10x more. Premium numbers drain budgets. You discover this after the bill arrives, not before you hit send.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Communications</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Twilio</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Twilio account SID and auth token. MCPEngage discovers all phone numbers, messaging services, and available endpoints — building 38+ tools automatically. No code required.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Send order confirmation to +1-555-234-5678." "How many messages failed delivery today?" "Buy a new phone number in New York." Your AI understands and executes.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Workflows</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring tasks: send daily SMS reports, call customers when orders ship, alert your team when usage spikes — all running 24/7 with no code.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Twilio</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          38+ Twilio tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="message-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">SMS Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send individual or bulk SMS, track delivery status, and get instant failure notifications. "Send reminder to all users who haven't verified."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="phone-call" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Voice Calls</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Make outbound calls, set up IVR flows, and manage call logs through conversation. "Call +1-555-1234 and play the welcome message."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="phone-incoming" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Number Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search, buy, and configure phone numbers in any area code. "Buy a toll-free number for customer support."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Verification</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Send 2FA codes, verify phone numbers, and validate user identities. "Send verification code to user@example.com's phone."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="activity" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Usage Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time insights on message delivery, call duration, and spending. "How much did we spend on SMS last month?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bell-ring" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get notified when messages fail, costs spike, or usage exceeds thresholds. Prevent issues before they impact customers.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Twilio account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Twilio API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Twilio settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Twilio.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Twilio?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Twilio account SID and auth token (found in your Twilio console). MCPEngage uses the Twilio REST API to create 38+ tools covering SMS, voice, phone numbers, verification, and usage analytics. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it actually send messages and make calls?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage has full read/write access to your Twilio account (with your permission). You can send SMS, make calls, buy phone numbers, configure messaging services, and more — all through natural language. Rate limits prevent accidental spam.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Slack, SendGrid, Mailchimp, Stripe, Shopify, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Twilio?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Twilio Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F22F46; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Twilio<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of developers using MCPEngage to simplify their communications.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Twilio is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Twilio Connect. Not affiliated with Twilio.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Failed Messages</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 24h</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">+1 (555) 123-9999</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">15m ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Invalid number</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">+44 7700 900123</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">2h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Carrier block</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">✕</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">+1 (555) 444-8888</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">4h ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Undelivered</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">3 of 127 messages failed (2.4%)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in Twilio →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Message Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;"><div style="margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:4px;">To:</div><div style="font-size:13px;font-weight:600;color:#e4e4e7;">+1 (555) 234-5678</div></div><div style="margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:4px;">Message:</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:8px 10px;font-size:12px;color:rgba(255,255,255,0.7);line-height:1.4;">Your verification code is: 482916<br><br>This code expires in 10 minutes.</div></div><div style="display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Delivered</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Cost: $0.0075</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">SMS ID: SM8a9b...</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all failed SMS messages from the last 24 hours' },
+      { type:'ai', text:'Found 3 failed messages:', embed: embed_1 },
+      { type:'user', text:'Send a verification code to +1-555-234-5678' },
+      { type:'ai', text:'Message sent successfully!', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Twilio', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Twilio API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Twilio API', color:'text-green-400', delay:3000 },
+      { text:'✓ 38 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Twilio', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Twilio';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/wave/index.html b/wave/index.html
index ca39589..8ebcfee 100644
--- a/wave/index.html
+++ b/wave/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Wave Connect — AI-Power Your Accounting in 2 Clicks</title>
+  <title>MCPEngage for Wave — AI-Power Your Wave in 2 Clicks</title>
+  <meta name="description" content="Connect Wave to any AI model with MCPEngage. Manage invoices, bills, and transactions through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#eff6ff',
-              100: '#dbeafe',
-              200: '#bfdbfe',
-              300: '#93c5fd',
-              400: '#165DFF',
-              500: '#1447cc',
-              600: '#1036a3',
-              700: '#0c2a7a',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,736 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #165DFF 0%, #0c2a7a 50%, #1e1b4b 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .gradient-text-hero {
-      background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 50%, #ec4899 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(22, 93, 255, 0.2), transparent);
-    }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px rgba(22, 93, 255, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-      transform: translateY(-4px);
-      border-color: rgba(22, 93, 255, 0.3);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(22, 93, 255, 0.4); }
-      50% { box-shadow: 0 0 40px rgba(22, 93, 255, 0.6); }
-    }
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    .shimmer-border {
-      background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.3), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 3s infinite;
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(22, 93, 255, 0.2), 0 0 120px rgba(22, 93, 255, 0.1);
-    }
-    .btn-primary {
-      background: linear-gradient(135deg, #165DFF 0%, #1447cc 100%);
-      transition: all 0.3s ease;
-    }
-    .btn-primary:hover {
-      transform: scale(1.05);
-      box-shadow: 0 0 30px rgba(22, 93, 255, 0.5);
-    }
-    .feature-icon {
-      background: linear-gradient(135deg, rgba(22, 93, 255, 0.2) 0%, rgba(22, 93, 255, 0.05) 100%);
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(22, 93, 255, 0.4), 0 0 40px 0 rgba(22, 93, 255, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(22, 93, 255, 0.6), 0 0 60px 10px rgba(22, 93, 255, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .stat-card {
-      background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, transparent 100%);
-    }
-    @keyframes count-up {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .number-highlight {
-      background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
-          <i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Wave Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
-        <a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20 text-center">
-      <div class="flex flex-col items-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
-          Free for Small Businesses
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Wave + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text-hero">Wave</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Wave</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
-          The complete Wave MCP server. <strong class="text-white">42 tools</strong> for invoices, receipts, and reports. 
-          Simplify your accounting with AI.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
-          <a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
-            Join the Waitlist
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </a>
-          <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Stats Row -->
-        <div class="grid grid-cols-3 gap-8 max-w-md mx-auto">
-          <div class="text-center">
-            <p class="text-3xl font-bold number-highlight">42</p>
-            <p class="text-sm text-zinc-500">API Tools</p>
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Wave to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage invoices, track expenses, and analyze cash flow — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/wave" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
-          <div class="text-center">
-            <p class="text-3xl font-bold number-highlight">2 min</p>
-            <p class="text-sm text-zinc-500">Setup Time</p>
-          </div>
-          <div class="text-center">
-            <p class="text-3xl font-bold number-highlight">100%</p>
-            <p class="text-sm text-zinc-500">API Coverage</p>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/wave
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="credit-card" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about outstanding invoices..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Invoices
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="credit-card" class="w-4 h-4"></i>
+                      Bills
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">INV-2847 — $4,250</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Due in 3 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Unpaid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Sent 12d ago</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Overdue soon</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">INV-2846 — $1,825</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Due today</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Overdue</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Sent 17d ago</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">2nd reminder</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">INV-2845 — $3,100</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • Paid yesterday</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">On time</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">ACH</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your accounting workflow</p>
-      </div>
-      <div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
-        <div class="bg-zinc-900 rounded-2xl p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/wave.mp4" type="video/mp4">
-            </video>
-          </div>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="47">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Wave Tools</div>
         </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
-            <span class="text-sm text-zinc-300">Invoices</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
-            <span class="text-sm text-zinc-300">Expenses</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="pie-chart" class="w-4 h-4 text-brand-400"></i>
-            <span class="text-sm text-zinc-300">Reports</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Bookkeeper</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-6">
-          Accounting + AI<br>
-          <span class="text-zinc-500">shouldn't be complicated</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">
-          Stop dreading your bookkeeping. Let AI handle the tedious work while you focus on your business.
-        </p>
       </div>
-      
-      <div class="grid md:grid-cols-2 gap-8 items-stretch">
-        <!-- Problems -->
-        <div class="space-y-4">
-          <h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
-            <i data-lucide="x-circle" class="w-5 h-5"></i>
-            The Old Way
-          </h3>
-          
-          <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">Shoebox of receipts</p>
-                <p class="text-zinc-500">Piles of paper receipts waiting to be entered. Tax season panic mode.</p>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-          </div>
-          
-          <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">Inconsistent invoicing</p>
-                <p class="text-zinc-500">Some months you invoice on time. Others... not so much.</p>
-              </div>
-            </div>
-          </div>
-          
-          <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">Accounting anxiety</p>
-                <p class="text-zinc-500">Always worried if your books are right. Afraid of what you'll find.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- Solutions -->
-        <div class="space-y-4">
-          <h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
-            <i data-lucide="check-circle" class="w-5 h-5"></i>
-            With Wave Connect
-          </h3>
-          
-          <div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">AI categorizes everything</p>
-                <p class="text-zinc-400">Snap a photo, AI does the rest. Perfectly categorized, every time.</p>
-              </div>
-            </div>
-          </div>
-          
-          <div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">Automated billing cycles</p>
-                <p class="text-zinc-400">Set it and forget it. Invoices go out on time, every time.</p>
-              </div>
-            </div>
-          </div>
-          
-          <div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
-            <div class="flex items-start gap-4">
-              <div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
-              </div>
-              <div>
-                <p class="font-semibold text-white mb-1">AI keeps books clean</p>
-                <p class="text-zinc-400">Always know where you stand. Real-time financial clarity.</p>
-              </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
           </div>
         </div>
       </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/wave" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Wave API access through one simple connection. 42 tools at your fingertips.</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
-            <i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Invoice Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Create, send, track invoices automatically. Get paid faster.</p>
-        </div>
-        
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
-            <i data-lucide="scan" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Receipt Scanning</h3>
-          <p class="text-zinc-400 leading-relaxed">Capture expenses, categorize, attach to records instantly.</p>
-        </div>
-        
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
-            <i data-lucide="landmark" class="w-7 h-7 text-cyan-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Banking</h3>
-          <p class="text-zinc-400 leading-relaxed">Connect accounts, categorize transactions, reconcile effortlessly.</p>
-        </div>
-        
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
-            <i data-lucide="pie-chart" class="w-7 h-7 text-pink-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Reports</h3>
-          <p class="text-zinc-400 leading-relaxed">P&L, balance sheet, cash flow — on demand, anytime.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 38 more tools including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Customer Management</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Vendor Payments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Tax Prep</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Multi-Currency</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Estimates</span>
-          <span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Recurring Billing</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- How It Works -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
-        
-        <div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
-              How It Works
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
             </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Just talk to Claude
-            </h2>
-            <p class="text-zinc-400 mb-8 leading-relaxed">
-              No accounting jargon required. Just describe what you need in plain English and Claude handles 
-              the bookkeeping through your Wave account.
-            </p>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
             
-            <div class="space-y-4">
-              <div class="flex items-center gap-3">
-                <div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <span class="text-zinc-300">"Create an invoice for Acme Corp, $500"</span>
-              </div>
-              <div class="flex items-center gap-3">
-                <div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <span class="text-zinc-300">"Categorize last week's expenses"</span>
-              </div>
-              <div class="flex items-center gap-3">
-                <div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
-                </div>
-                <span class="text-zinc-300">"Show me my P&L for Q4"</span>
-              </div>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual invoice chasing</p><p class="text-xs sm:text-sm text-zinc-500">Tracking who owes what means opening Wave, filtering invoices, and manually emailing reminders</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Expense categorization hell</p><p class="text-xs sm:text-sm text-zinc-500">Receipts pile up, transactions sit uncategorized, and tax time becomes a nightmare</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Cash flow blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't see if you're about to run out of money without manually building reports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered financial data</p><p class="text-xs sm:text-sm text-zinc-500">Invoices in Wave, expenses in email, bank data in spreadsheets</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
             </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
           </div>
-          
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Claude + Wave</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> How much did I spend on
-     software this month?
-
-<span class="text-brand-400">Claude:</span> Let me check your expenses...
-
-<span class="text-zinc-500">→ Using:</span> wave_get_expenses
-<span class="text-zinc-500">→ Category:</span> Software
-<span class="text-zinc-500">→ Period:</span> This month
-
-<span class="text-green-400">✓ Found 8 transactions</span>
-
-<span class="text-brand-400">Claude:</span> You spent <span class="text-white">$847.32</span> on
-     software this month:
-
-     • Figma: $45
-     • AWS: $312.32
-     • Notion: $96
-     • GitHub: $44
-     ...</code></pre>
-          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice invoice management</p><p class="text-xs sm:text-sm text-zinc-500">"Send a reminder for all overdue invoices" — done instantly across all clients</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-categorized expenses</p><p class="text-xs sm:text-sm text-zinc-500">AI reads receipts and categorizes transactions automatically. Zero manual tagging.</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time cash flow</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's my cash position for next 30 days?" — instant forecast with AR/AP</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified financial view</p><p class="text-xs sm:text-sm text-zinc-500">One conversation covers invoices, expenses, bank balance, and tax estimates</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
-        <div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
-        
-        <form id="waitlist-form" class="space-y-6 relative z-10">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-            <input 
-              type="text" 
-              id="name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone"
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
-            >
-          </div>
-          
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email"
-              placeholder="you@company.com"
-              class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
-            <i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="shield-check" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Business Is<br><span class="text-red-400">Cash-Strapped</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Wave has the numbers, but by the time you check, the invoice is 60 days overdue and your cash is gone.
         </p>
       </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Invoice Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Clients ghost you because you forget to send reminders. By the time you notice an overdue invoice, the client's budget is gone and you're funding their project out of pocket.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Expense Black Hole</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Receipts vanish, transactions go uncategorized, and your P&L is a guess. When tax time hits, you're scrambling through months of unreconciled data.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-down" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cash Flow Surprise</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You think you're profitable, then payroll hits and you're overdrawn. Wave had the warning signs, but you didn't see them until it was too late.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
-        <div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Accounting</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
         
-        <div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-8 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle of managing infrastructure.
-            </p>
-            <a href="https://github.com/BusyBee3333/wave-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
-              <i data-lucide="github" class="w-5 h-5"></i>
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/wave-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Wave</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Wave API token. MCPEngage discovers invoices, bills, transactions, and customers — building 47+ tools automatically. No accounting knowledge required.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Which invoices are overdue?" "Categorize last week's expenses." "What's my profit this month?" Your AI understands Wave and acts instantly.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Books</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: send weekly invoice reminders, auto-categorize expenses from email receipts, generate monthly P&L reports, and sync data to your tax software.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-brand-400">✓ Wave MCP Server running</span>
-<span class="text-brand-400">✓ 42 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Wave</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          47+ Wave tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Invoice Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, and track invoices through conversation. "Send reminders for all invoices over 30 days."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Expense Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-categorize transactions, attach receipts, and track vendor bills. "What did I spend on software last quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Cash Flow Forecasting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time AR aging, AP scheduling, and cash runway projections. "When am I getting paid next?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Customer Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track payment history, average invoice value, and DSO by client. "Who are my slowest payers?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Recurring Billing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up automated invoicing and subscription tracking. "Create a $500 monthly retainer for Acme Corp."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="pie-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Financial Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate P&L, balance sheets, and tax summaries on demand. "Show me this year's revenue vs last year."</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Wave Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is Wave really free?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Wave's accounting software is free. Wave Connect (this integration) will have a free tier for basic usage, 
-            with paid tiers for higher volume. We believe every small business should have access to AI-powered accounting.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my financial data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Absolutely. We use OAuth 2.0 and never store your Wave credentials. Data flows directly between Claude and Wave — 
-            we don't store your financial information. All connections are encrypted with bank-level security.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can AI make mistakes with my accounting?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Claude always confirms before taking important actions. For sensitive operations like deleting transactions or sending invoices, 
-            you'll see a preview and confirm. Think of it as a very smart assistant that always double-checks with you.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need accounting experience?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Not at all! That's the beauty of AI. Just describe what you need in plain English: "Send an invoice to John for last week's work" 
-            or "How much did I spend on marketing?" Claude handles the accounting complexity.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Wave?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
-        Join small businesses already automating their accounting with Wave Connect. Be first in line for early access.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
-          Join the Waitlist
-          <i data-lucide="arrow-right" class="w-5 h-5"></i>
-        </a>
-        <a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
-          Watch Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
-            <i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to Wave Accounting.
           </div>
-          <span class="font-bold text-xl">Wave Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/wave-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
-          <a href="https://github.com/BusyBee3333/wave-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
-          <a href="https://github.com/BusyBee3333/wave-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://github.com/BusyBee3333/wave-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Wave?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Wave API access token (generated in Wave Settings > Apps & Integrations > API Access). MCPEngage uses the Wave API to create 47+ tools covering invoices, bills, transactions, and reports. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Wave Connect. Not affiliated with Wave Financial.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Wave data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses Wave's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Wave's activity history, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my tax software?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Connect Wave + QuickBooks, Xero, or any other MCP-enabled platform. Have AI sync invoices, expenses, and tax-ready reports automatically — no more manual exports.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Accountant/bookkeeper plans with multi-client access available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Stripe, PayPal, banks via Plaid, and more. Each platform gets its own MCP server. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Wave<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of small businesses using MCPEngage to supercharge their Wave accounting.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Wave is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    // Form submission
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-    
-    // Sticky CTA visibility
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#f87171;text-transform:uppercase;letter-spacing:0.5px;">Overdue Invoices</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$6,975</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f87171;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$1,825</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">INV-2846</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · 17 days overdue</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">2nd reminder</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$2,800</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">INV-2842</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">BuildCo LLC · 8 days overdue</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">1st reminder</span></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Send reminders?</span><span style="font-size:10px;color:#ff7700;cursor:pointer;">Send All →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Reminders Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 clients</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ TechFlow Inc — INV-2846 ($1,825)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Emailed: accounts@techflow.com · 2nd reminder</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ BuildCo LLC — INV-2842 ($2,800)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Emailed: billing@buildco.com · 1st reminder</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Which invoices are overdue?' },
+      { type:'ai', text:'You have 3 overdue invoices totaling $6,975:', embed: embed_1 },
+      { type:'user', text:'Send reminders for all overdue invoices' },
+      { type:'ai', text:'Done! Reminders sent to 3 clients:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Wave', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Wave API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Wave API', color:'text-green-400', delay:3000 },
+      { text:'✓ 47 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Wave', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Wave';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/webflow/index.html b/webflow/index.html
index 643b816..a26eb2e 100644
--- a/webflow/index.html
+++ b/webflow/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Webflow Connect — AI-Power Your Website in 2 Clicks</title>
+  <title>MCPEngage for Webflow — AI-Power Your Webflow in 2 Clicks</title>
+  <meta name="description" content="Connect Webflow to any AI model with MCPEngage. Manage sites, update CMS collections, and automate publishing — all through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#4353FF',
-              600: '#4353FFdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #4353FF 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #4353FF25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #4353FF20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #4353FF">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Webflow Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #4353FF; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #4353FF"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Webflow</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Webflow MCP server. Pages, CMS, ecommerce, and analytics — AI-managed visual web development. <strong class="text-white">94 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #4353FF; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/webflow.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #4353FF; color: #fff">
-            94 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Webflow + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Webflow + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual content updates</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4353FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4353FF"></i>
-            </div>
-            <p class="text-white font-medium">AI syncs from your data</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">SEO optimization guesswork</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4353FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4353FF"></i>
-            </div>
-            <p class="text-white font-medium">AI optimizes meta & content</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Form lead delays</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4353FF30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #4353FF"></i>
-            </div>
-            <p class="text-white font-medium">Instant AI follow-up</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Webflow</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Webflow API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4353FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4353FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">CMS Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, publish CMS items and blog posts programmatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4353FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4353FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Ecommerce</h3>
-          <p class="text-zinc-400 text-sm">Manage products, orders, inventory, and customer data.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4353FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4353FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Site Publishing</h3>
-          <p class="text-zinc-400 text-sm">Auto-publish changes, manage staging, rollback if needed.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4353FF20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #4353FF"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics</h3>
-          <p class="text-zinc-400 text-sm">Traffic, conversions, form submissions, and engagement metrics.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #4353FF; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Webflow to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage sites, update content, and automate workflows — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/webflow" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/webflow
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="layout" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="database" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="zap" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Webflow sites..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="layout" class="w-4 h-4"></i>
+                      Sites
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="database" class="w-4 h-4"></i>
+                      CMS Items
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">acmecorp.com</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Last published 2h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">24 pages</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">CMS: 147 items</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">marketing.acme.io</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Staging • Draft changes pending</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Staging</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">12 unpublished</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Blog site</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">docs.acme.io</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Published 3d ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Live</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">96 pages</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Help Center</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="40">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Webflow Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Sites</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/webflow" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual CMS updates</p><p class="text-xs sm:text-sm text-zinc-500">Logging into Webflow to add every blog post, case study, and team member</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Publishing anxiety</p><p class="text-xs sm:text-sm text-zinc-500">"Did I break the live site?" — staging chaos and accidental overwrites</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Content bottlenecks</p><p class="text-xs sm:text-sm text-zinc-500">Marketing waits on developers to update simple text and images</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">No bulk operations</p><p class="text-xs sm:text-sm text-zinc-500">Updating 50 blog posts one by one because there's no batch editor</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI content publishing</p><p class="text-xs sm:text-sm text-zinc-500">"Add this blog post to the marketing site" — AI creates the CMS item and publishes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Safe deployments</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's unpublished on staging?" before pushing — zero surprises</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Self-service updates</p><p class="text-xs sm:text-sm text-zinc-500">Marketing asks AI to update hero text, swap images, and republish — no dev handoff</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant bulk edits</p><p class="text-xs sm:text-sm text-zinc-500">"Update all blog posts tagged 'Product' with the new CTA" — done in 5 seconds</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Webflow Sites Are<br><span class="text-red-400">High Maintenance</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Webflow is powerful, but managing sites and CMS content still requires constant manual work and context switching.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">CMS Drudgery</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every blog post, every team member bio, every case study — manually created in the Webflow UI. You're a content producer stuck doing data entry. Bulk operations? Good luck.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-warning" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Staging Roulette</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have staging changes across 5 sites. Which are ready to publish? Which will break production? You're clicking through sites, comparing diffs, praying nothing explodes.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Developer Bottleneck</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Marketing needs to update one hero image. They Slack you. You open Webflow, find the right site, swap the asset, republish. 15 minutes wasted on a 2-second change.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sites</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Webflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Webflow API token. MCPEngage discovers all available endpoints and builds 40+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Add this blog post to the marketing site." "Publish all staging changes for acmecorp.com." "List all CMS items tagged 'Featured'." Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-publish blog posts from your CMS, sync team member data from your HR system, generate SEO reports, and backup site configs — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Webflow</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          40+ Webflow tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">CMS Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and delete CMS items through conversation. "Add 10 new blog posts from this Google Doc."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Smart Publishing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Publish sites with AI safety checks. "Publish staging if no broken links detected." Rollback with one command.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layout" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Site Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">List sites, check publish status, and monitor domain health. "Which sites have unpublished changes?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Content Discovery</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search across all CMS collections and pages. "Find all blog posts mentioning 'API integration' published in Q4."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="copy" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Bulk Operations</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Update hundreds of CMS items at once. "Set all blog posts from 2023 to 'archived' status."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Pre-Publish Validation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI checks for broken links, missing images, and SEO issues before publishing. Catch errors before they go live.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Webflow account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Webflow API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Webflow settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Webflow.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Webflow?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide a Webflow API token (generated in Webflow Account Settings → Integrations). MCPEngage uses the Webflow Data API to create 40+ tools covering sites, pages, CMS collections, and publishing. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can AI publish to my live site?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Only if you grant permission. MCPEngage operates on an allow-list model — you control exactly which tools (read-only vs. write) your AI can access. You can enable staging-only mode for safe experimentation.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Does it work with Webflow CMS?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! Full support for all CMS collections — create, read, update, delete items; manage fields; and bulk operations. Perfect for blog sites, directories, job boards, and dynamic content.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including WordPress, Shopify, Contentful, Airtable, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Webflow?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Webflow Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4353FF; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Webflow<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join design teams using MCPEngage to manage Webflow sites with AI.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Webflow is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Webflow Connect. Not affiliated with Webflow.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Staging Changes</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 sites</span></div><div style="padding:0;"><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:24px;height:24px;border-radius:6px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">⚠</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">marketing.acme.io</span></div><div style="margin-left:32px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:6px;">12 unpublished CMS items:</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.5);">📝 "Q4 2024 Product Roundup" (Blog Posts)</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.5);">📝 "How to Scale Your SaaS" (Blog Posts)</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.5);">+ 10 more items</div></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:24px;height:24px;border-radius:6px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">ℹ</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">docs.acme.io</span></div><div style="margin-left:32px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:6px;">3 unpublished pages:</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.5);">📄 "/api/webhooks" (API Docs)</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.5);">📄 "/changelog/2025-q1" (Changelog)</div></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Review before publishing</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Publish all →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">marketing.acme.io published</span></div><div style="margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.1);color:#4ade80;">12 items live</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Build time: 42s</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">No errors</span></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Blog post created</span></div><div style="margin-top:6px;margin-left:28px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:8px 10px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:4px;">"AI-Powered Webflow"</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Slug: <span style="font-family:monospace;color:#17c3b2;">ai-powered-webflow</span></div><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-top:2px;">Status: <span style="color:#fbbf24;">Draft (unpublished)</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all unpublished changes across my Webflow sites' },
+      { type:'ai', text:'Found unpublished changes on 2 sites:', embed: embed_1 },
+      { type:'user', text:'Publish marketing.acme.io and add a new blog post titled \'AI-Powered Webflow\'' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Webflow', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Webflow API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Webflow API', color:'text-green-400', delay:3000 },
+      { text:'✓ 40 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Webflow', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Webflow';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/wrike/index.html b/wrike/index.html
index 806e798..6e3e833 100644
--- a/wrike/index.html
+++ b/wrike/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Wrike Connect — AI-Power Your Workflows in 2 Clicks</title>
+  <title>MCPEngage for Wrike — AI-Power Your Wrike in 2 Clicks</title>
+  <meta name="description" content="Connect Wrike to any AI model with MCPEngage. Manage tasks, projects, and timesheets through natural conversation. Automate project workflows instantly.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#ecfdf5',
-              100: '#d1fae5',
-              200: '#a7f3d0',
-              300: '#6ee7b7',
-              400: '#34d399',
-              500: '#08CF65',
-              600: '#059669',
-              700: '#047857',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,587 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #08CF65 0%, #06b557 50%, #059669 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(8, 207, 101, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow:hover {
-      box-shadow: 0 0 60px rgba(8, 207, 101, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(8, 207, 101, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite 2s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite 1s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 20px rgba(8, 207, 101, 0.4); }
-      50% { box-shadow: 0 0 40px rgba(8, 207, 101, 0.6); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(8, 207, 101, 0.4), 0 0 40px 0 rgba(8, 207, 101, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(8, 207, 101, 0.6), 0 0 60px 10px rgba(8, 207, 101, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .feature-card:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, rgba(8, 207, 101, 0.5), rgba(6, 181, 87, 0.2));
-      padding: 1px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: rgb(24 24 27);
-      border-radius: calc(1rem - 1px);
-    }
-    .text-shadow {
-      text-shadow: 0 0 40px rgba(8, 207, 101, 0.5);
-    }
-    .bg-grid {
-      background-image: 
-        linear-gradient(rgba(8, 207, 101, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(8, 207, 101, 0.03) 1px, transparent 1px);
-      background-size: 50px 50px;
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Floating Background Elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/5 rounded-full blur-3xl animate-float-slow"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
-          <i data-lucide="workflow" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Wrike Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
-    <div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
-        Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Wrike + AI
+        </div>
       </div>
-      
-      <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
-        Connect <span class="gradient-text text-shadow">Wrike</span><br>
-        to AI in 2 Clicks
-      </h1>
-      
-      <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
-        The most comprehensive Wrike MCP server. <strong class="text-white">98 tools</strong> covering projects, tasks, and collaboration. 
-        No setup. No OAuth headaches. Just connect and automate.
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Wrike</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
+      </div>
+
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Wrike to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage tasks, track projects, and automate workflows — all through conversation.</span>
       </p>
-      
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
-          Join the Waitlist
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
         </a>
-        <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
-          <i data-lucide="play" class="w-5 h-5"></i>
-          Watch Demo
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/wrike" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
         </a>
       </div>
 
-      <!-- Social Proof -->
-      <div class="flex flex-col items-center gap-4">
-        <div class="flex -space-x-3">
-          <img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-          <img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/wrike
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="layout-dashboard" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="check-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="folder" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="clock" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Wrike projects..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="check-square" class="w-4 h-4"></i>
+                      Tasks
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">24</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="folder" class="w-4 h-4"></i>
+                      Projects
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Product Launch</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Marketing Team • Due in 3 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">At Risk</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">18/24 tasks</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">High Priority</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Website Redesign</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Design Team • Due in 8 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">On Track</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">12/15 tasks</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Medium Priority</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Customer Onboarding Flow</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Product Team • Due in 12 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">On Track</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">7/10 tasks</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Medium Priority</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <p class="text-zinc-400">
-          Trusted by <strong class="text-white">300+</strong> project teams worldwide
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="60">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Wrike Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/wrike" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual project updates</p><p class="text-xs sm:text-sm text-zinc-500">Hunt through folders and tasks to update statuses one by one</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered task visibility</p><p class="text-xs sm:text-sm text-zinc-500">Jump between dashboards, views, and reports to find overdue tasks</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Time tracking overhead</p><p class="text-xs sm:text-sm text-zinc-500">Remind team members to log hours, export timesheets manually</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow status reporting</p><p class="text-xs sm:text-sm text-zinc-500">Build weekly project status reports by hand from multiple sources</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI bulk updates</p><p class="text-xs sm:text-sm text-zinc-500">"Mark all completed tasks in Q1 Launch as done" — instant batch edits</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified task intelligence</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all overdue tasks assigned to marketing" — one query, full view</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto timesheet reminders</p><p class="text-xs sm:text-sm text-zinc-500">AI tracks missing hours, sends reminders, and generates reports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">On-demand project reports</p><p class="text-xs sm:text-sm text-zinc-500">"Give me a status update on Website Redesign" — instant summaries</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Projects Are<br><span class="text-red-400">Out of Control</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Wrike has the features, but your team spends more time updating tasks than doing actual work.
         </p>
       </div>
-    </div>
-  </section>
-
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your Wrike workflows</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/wrike.mp4" type="video/mp4">
-            </video>
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-center mt-8">
-        <div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
-          <div class="flex items-center gap-2">
-            <i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">98 API Tools</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">2-Click Setup</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="shield-check" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">OAuth 2.0</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Problem/Solution -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-2 gap-12 items-center">
-        <div>
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Managing Wrike + AI<br>
-            <span class="text-zinc-500">shouldn't be a full-time job</span>
-          </h2>
-          <div class="space-y-5">
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Project status chaos</p>
-                <p class="text-zinc-500 text-sm mt-1">Constantly switching between tools to track progress across teams.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Approval bottlenecks</p>
-                <p class="text-zinc-500 text-sm mt-1">Reviews get stuck. Deadlines slip. Everyone's frustrated.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
-              <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
-                <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-              </div>
-              <div>
-                <p class="font-medium text-white">Resource conflicts</p>
-                <p class="text-zinc-500 text-sm mt-1">Team members overbooked. Projects understaffed. No visibility.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
-              <i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
-            </div>
-            <h3 class="text-2xl font-semibold">With Wrike Connect</h3>
-          </div>
-          <div class="space-y-4">
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>AI dashboards everything automatically</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Smart routing & reviewer reminders</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>AI optimizes team allocation</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Works with Claude, GPT, any MCP client</span>
-            </div>
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
-              <i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
-              <span>Automatic token refresh forever</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Wrike API access through one simple connection</p>
-      </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
-            <i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2">Task Management</h3>
-          <p class="text-zinc-400">Create, assign, track tasks across projects. Full CRUD with dependencies.</p>
-        </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
         
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
-            <i data-lucide="folder-kanban" class="w-7 h-7 text-purple-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder-tree" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Project Ops</h3>
-          <p class="text-zinc-400">Manage folders, timelines, and dependencies. Full project lifecycle control.</p>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Folder Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Projects nested 5 levels deep, tasks scattered across spaces. Finding the right task feels like searching a maze.</p>
         </div>
-        
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
-            <i data-lucide="clock" class="w-7 h-7 text-cyan-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Time & Budget</h3>
-          <p class="text-zinc-400">Track hours, expenses, and project budgets. Real-time cost visibility.</p>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Status Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Projects silently slip behind schedule. By the time you see the red flag in a dashboard, you've already missed the deadline.</p>
         </div>
-        
-        <div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
-          <div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
-            <i data-lucide="badge-check" class="w-7 h-7 text-amber-400"></i>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock-8" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <h3 class="text-xl font-semibold mb-2">Approvals</h3>
-          <p class="text-zinc-400">Route reviews, collect feedback, manage sign-offs. Never miss a deadline.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 90 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Comments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Attachments</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Custom Fields</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Workflows</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Teams</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timelogs</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Timesheet Black Hole</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Chasing team members for time entries every Friday. Payroll and client billing delayed because hours aren't logged.</p>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
         </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Projects</span>
+        </h2>
       </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="Your phone number"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email"
-                placeholder="you@company.com"
-                class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Wrike</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Wrike API token (generated in Account Settings). MCPEngage discovers all available endpoints and builds 60+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all at-risk projects." "Create a new task in Q1 Launch assigned to Sarah." "What's the total hours logged this week?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-assign tasks, escalate overdue items, generate weekly project reports, and sync data across your stack — all running 24/7.</p>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6">
-            <i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
-            We respect your privacy. No spam, ever.
-          </p>
         </div>
       </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      this.classList.add('hidden');
-      document.getElementById('success-message').classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/wrike-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
-            </a>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Wrike</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          60+ Wrike tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="check-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/wrike-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
-
-<span class="text-brand-400">✓ Wrike MCP Server running</span>
-<span class="text-brand-400">✓ 98 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Task Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, assign, and complete tasks through conversation. "Create 5 tasks for the Q2 planning project."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="folder" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Project Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query across all projects and folders instantly. "Show me all projects due this month with incomplete tasks."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Timesheet Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Track hours, generate reports, and send reminders. "Who hasn't logged time this week?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Team Workload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See who's overloaded, reassign tasks, and balance capacity. "Show me Sarah's workload for next week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate project status reports, task completion rates, and time tracking summaries on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Project Summaries</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Get instant project health reports with task progress, blockers, and next steps — no manual report building.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Wrike account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Wrike settings.
-          </p>
-        </details>
-        
-        <details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium">Can I use this with other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Wrike?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join 300+ project teams already automating with Wrike Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center">
-            <i data-lucide="workflow" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Wrike.
           </div>
-          <span class="font-bold text-xl">Wrike Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/wrike-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/wrike-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/wrike-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-1">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
-          <a href="https://github.com/BusyBee3333/wrike-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Wrike?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Wrike API token (generated in Account Settings > Apps & Integrations). MCPEngage uses the Wrike REST API to create 60+ tools covering tasks, projects, folders, timesheets, and workflows. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Wrike Connect. Not affiliated with Wrike.</p>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my project data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Asana, Monday, Jira, ClickUp, Salesforce, HubSpot, Slack, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Wrike<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Wrike.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Wrike is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
-  <!-- Sticky Floating CTA -->
-  <div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
-    <a 
-      href="#pricing" 
-      class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-600 rounded-full font-semibold transition-all transform hover:scale-110"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">At Risk Projects</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 projects</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Q1 Product Launch</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Marketing Team · Due Mar 15</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">3 days left</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">75%</div><div style="width:60px;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:75%;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444);"></div></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Mobile App Redesign</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Design Team · Due Mar 22</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">10 days left</span></div></div><div style="text-align:right;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">62%</div><div style="width:60px;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:62%;height:100%;background:linear-gradient(90deg,#eab308,#f59e0b);"></div></div></div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">6 tasks overdue across both projects</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Wrike →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Task Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">TASK-1847</span></div><div style="padding:12px 14px;"><div style="margin-bottom:10px;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">Finalize launch messaging</div><div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Q1 Product Launch</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Active</span></div></div><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.3);">Assignee:</span><span style="color:#e4e4e7;font-weight:500;">Sarah Chen</span><span style="color:rgba(255,255,255,0.3);">Due Date:</span><span style="color:#e4e4e7;font-weight:500;">Mar 15, 2024 (3 days)</span><span style="color:rgba(255,255,255,0.3);">Priority:</span><span style="color:#f59e0b;font-weight:600;">High</span><span style="color:rgba(255,255,255,0.3);">Status:</span><span style="color:#4ade80;font-weight:500;">Active</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Sarah will be notified</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Wrike →</span></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all at-risk projects due this month' },
+      { type:'ai', text:'Found 2 at-risk projects:', embed: embed_1 },
+      { type:'user', text:'Create a task "Finalize launch messaging" in Q1 Product Launch assigned to Sarah' },
+      { type:'ai', text:'Task created successfully:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Wrike', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Wrike API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Wrike API', color:'text-green-400', delay:3000 },
+      { text:'✓ 60 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Wrike', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Wrike';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/xero/index.html b/xero/index.html
index f233cc8..dc35250 100644
--- a/xero/index.html
+++ b/xero/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Xero Connect — AI-Power Your Accounting in 2 Clicks</title>
+  <title>MCPEngage for Xero — AI-Power Your Xero in 2 Clicks</title>
+  <meta name="description" content="Connect Xero to any AI model with MCPEngage. Manage invoices, bills, and transactions through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#13B5EA',
-              600: '#13B5EAdd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,853 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #13B5EA 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #13B5EA25, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #13B5EA20; }
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
+    }
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+    }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
-  
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #13B5EA">
-          <i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Xero Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #13B5EA; color: #fff">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="grid lg:grid-cols-2 gap-12 items-center">
-        <div>
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
-            <span class="w-2 h-2 rounded-full animate-pulse" style="background: #13B5EA"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Xero</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Xero MCP server. Invoices, bills, bank reconciliation, and reports — AI-managed cloud accounting. <strong class="text-white">118 tools</strong> ready to automate.
-          </p>
-          
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #13B5EA; color: #fff">
-              Join the Waitlist
-            </a>
-            <a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
-              See Features
-            </a>
-          </div>
-        </div>
-        
-        <div class="relative">
-          <div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/xero.mp4" type="video/mp4">
-            </video>
-          </div>
-          <div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #13B5EA; color: #fff">
-            118 API Tools
-          </div>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Xero + AI
         </div>
       </div>
-    </div>
-  </section>
 
-  <!-- Pain Points -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
-        Setting up Xero + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Overdue invoice chaos</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #13B5EA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #13B5EA"></i>
-            </div>
-            <p class="text-white font-medium">AI sends perfect reminders</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual bank reconciliation</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #13B5EA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #13B5EA"></i>
-            </div>
-            <p class="text-white font-medium">Auto-match transactions</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Tax deadline stress</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #13B5EA30">
-              <i data-lucide="check" class="w-4 h-4" style="color: #13B5EA"></i>
-            </div>
-            <p class="text-white font-medium">Year-round compliant books</p>
-          </div>
-        </div>
-        
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Xero</span>
+          <span class="block">in 2 Clicks</span>
+        </h1>
       </div>
-    </div>
-  </section>
 
-  <!-- Features -->
-  <section id="features" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
-      <p class="text-zinc-400 text-center mb-12">Full Xero API access through one simple connection</p>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #13B5EA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #13B5EA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Invoice & Bills</h3>
-          <p class="text-zinc-400 text-sm">Create, send, track invoices and bills. Automate payment reminders.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #13B5EA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #13B5EA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Bank Reconciliation</h3>
-          <p class="text-zinc-400 text-sm">Match transactions, categorize, reconcile accounts automatically.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #13B5EA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #13B5EA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Financial Reports</h3>
-          <p class="text-zinc-400 text-sm">Generate P&L, balance sheet, cash flow, tax summaries on demand.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #13B5EA20">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #13B5EA"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Expense Management</h3>
-          <p class="text-zinc-400 text-sm">Log receipts, categorize spending, track budgets.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #13B5EA; color: #fff">
-          Get Early Access
-        </button>
-      </form>
-      <p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
-    </div>
-  </section>
-
-  <!-- Open Source -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="flex items-center gap-3 mb-4">
-        <span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
-      </div>
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">
-        Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
-      </h2>
-      <p class="text-zinc-400 mb-6">
-        The entire MCP server is open source. Run it yourself, modify it, contribute back.
-        The hosted version just saves you the hassle.
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Xero to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create invoices, track expenses, and reconcile transactions — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Join Waitlist</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </a>
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/xero" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
+            <i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
+          </div>
+          <span>View on GitHub</span>
+        </a>
+      </div>
+
+      <!-- Product Mockup -->
+      <div class="relative max-w-6xl mx-auto reveal-scale">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
+                </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.mcpengage.com/xero
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="dollar-sign" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Xero finances..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="file-text" class="w-4 h-4"></i>
+                      Invoices
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">34</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="receipt" class="w-4 h-4"></i>
+                      Bills
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #INV-1247</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • $12,450.00</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Overdue</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">15 days late</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #INV-1248</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • $8,250.00</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Due in 5 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Monthly</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Invoice #INV-1249</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • $3,800.00</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Paid today</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Project</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="62">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Xero Tools</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Accountant</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
+        </h2>
+      </div>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
+            </div>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6 sm:mt-8 text-center reveal-up">
+        <a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/xero" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
+          <i data-lucide="github" class="w-5 h-5"></i>
+          <span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
+          <i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual invoice creation</p><p class="text-xs sm:text-sm text-zinc-500">Typing invoices one by one in Xero, copying client details from email or spreadsheets</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Expense tracking chaos</p><p class="text-xs sm:text-sm text-zinc-500">Receipts in email, Slack, and photos on your phone — reconciliation takes hours</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Cash flow blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly see AR aging, overdue invoices, or upcoming bills without reports</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Reconciliation hell</p><p class="text-xs sm:text-sm text-zinc-500">Matching bank transactions to invoices manually, hunting for missing payments</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-invoice</p><p class="text-xs sm:text-sm text-zinc-500">"Create invoice for Acme Corp, $5K for consulting, due in 30 days" — done instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart expense capture</p><p class="text-xs sm:text-sm text-zinc-500">Forward receipt emails to AI, it extracts data and creates Xero bills automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time cash insights</p><p class="text-xs sm:text-sm text-zinc-500">Ask "What's my AR aging?" or "Which invoices are overdue?" — instant answers</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-reconciliation</p><p class="text-xs sm:text-sm text-zinc-500">AI matches bank transactions to invoices and bills, flags exceptions for review</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Cash Flow Is<br><span class="text-red-400">Out of Control</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          Xero has your financial data, but you can't access it fast enough to make decisions.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Slow Invoicing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Creating invoices takes 5+ minutes each. Your team delays billing until the end of the month, hurting cash flow and making revenue unpredictable.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't quickly see which clients owe money, what bills are due, or your actual cash position. By the time you run a report, the insight is already stale.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Reconciliation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Matching hundreds of bank transactions to invoices and bills takes hours. Mistakes slip through, throwing off your books and tax filings.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Accounting</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Xero</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Authorize MCPEngage via OAuth. We discover all organizations, contacts, invoices, bills, and accounts — building 62+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all overdue invoices." "Create an invoice for Acme Corp." "What's my cash position today?" Your AI understands and executes.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-create invoices from deals closed in your CRM, flag overdue payments, generate weekly AR reports, and reconcile transactions.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Xero</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          62+ Xero tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Invoice Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, send, and track invoices in seconds. "Generate 10 invoices from this CSV with standard payment terms."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="credit-card" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Payment Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">See which invoices are paid, pending, or overdue. "Which clients owe us more than $10K?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="receipt" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Bill & Expense Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-create bills from receipt photos or forwarded emails. "Log this $450 software expense."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="repeat" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Bank Reconciliation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI matches transactions to invoices and bills. "Reconcile last week's bank transactions."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Financial Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate P&L, balance sheet, and cash flow reports on demand. "What's our profit this quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Contact Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Full customer and supplier history at your fingertips. "Show me all transactions with Acme Corp."</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
-      <div class="space-y-6">
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            What is MCP?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Do I need to install anything?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Xero account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
-        </details>
-        <details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
-            Is my data secure?
-            <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Xero API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Xero settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Xero.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Xero?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You authorize MCPEngage via Xero's OAuth flow (the same process as any accounting integration). MCPEngage uses the Xero API to create 62+ tools covering invoices, bills, contacts, transactions, and reports. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my financial data safe?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage uses Xero's official API with bank-grade encryption. You control which organizations to grant access to. All changes are logged in Xero's audit trail, and you can revoke access anytime.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my CRM or bank?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Auto-create Xero invoices from HubSpot deals, sync expenses from your bank feed, or pull financial data into Google Sheets — all through natural language.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including QuickBooks, Stripe, HubSpot, Salesforce, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- CTA -->
-  <section class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-4xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Xero?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Xero Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #13B5EA; color: #fff">
-        Join the Waitlist →
-      </a>
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Xero<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of businesses using MCPEngage to supercharge their accounting.
+      </p>
+      <form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
+        <div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
+          <div class="flex gap-3">
+            <input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+            <input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          </div>
+          <input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+          <input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
+        </div>
+        <button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
+          Join Waitlist
+        </button>
+        <p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
+      </form>
+      <div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
+        <div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
+          <div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
+          </div>
+          <h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Xero is ready.</p>
+        </div>
+      </div>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
     </div>
   </section>
 
-  <footer class="py-8 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
-      © 2026 Xero Connect. Not affiliated with Xero.
+  <!-- FOOTER -->
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
+        <a href="/" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
+            <span class="font-black text-base sm:text-lg text-black">ME</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+        </a>
+        <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
+          <a href="#features" class="hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
+          <a href="#faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#" class="hover:text-white transition-colors">Privacy</a>
+          <a href="#" class="hover:text-white transition-colors">Terms</a>
+          <a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Overdue Invoices</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$38,700 total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">$</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">$12,450 · INV-1247</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · 15 days overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;">CRITICAL</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">$</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">$11,200 · INV-1238</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalTech · 8 days overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">OVERDUE</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#fbbf24;">$</span></div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">$8,050 · INV-1229</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">DataFlow Inc · 3 days overdue</div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;">OVERDUE</span></div></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Reminder Sent</span></div></div><div style="padding:12px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:8px;"><strong>To:</strong> accounts@acmecorp.com</div><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:8px;"><strong>Subject:</strong> Payment Reminder: Invoice INV-1247 ($12,450.00)</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;">Invoice INV-1247 for $12,450.00 is now 15 days overdue. Please remit payment at your earliest convenience.</div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all overdue invoices over $5,000' },
+      { type:'ai', text:'Found 4 overdue invoices totaling $38,700:', embed: embed_1 },
+      { type:'user', text:'Send a payment reminder to Acme Corp for INV-1247' },
+      { type:'ai', text:'Payment reminder sent:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Xero', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Xero API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Xero API', color:'text-green-400', delay:3000 },
+      { text:'✓ 62 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Xero', color:'text-green-400', delay:4200 },
+    ];
+    const termContainer = document.getElementById('terminal-lines');
+    let termAnimated = false;
+    function typeTermLine(lineEl, text, speed=30) {
+      return new Promise(resolve => {
+        let idx = 0;
+        const cursor = document.createElement('span');
+        cursor.className = 'terminal-cursor';
+        lineEl.appendChild(cursor);
+        function tick() {
+          if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
+          else { cursor.remove(); resolve(); }
+        }
+        tick();
+      });
+    }
+    ScrollTrigger.create({
+      trigger: termContainer, start:"top 80%",
+      onEnter: async () => {
+        if(termAnimated) return; termAnimated = true;
+        for(const line of termLines) {
+          await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
+          const lineEl = document.createElement('div');
+          lineEl.className = line.color || 'text-white';
+          termContainer.appendChild(lineEl);
+          if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
+        }
+        const finalCursor = document.createElement('div');
+        finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
+        termContainer.appendChild(finalCursor);
+      },
+      once: true
+    });
+
+    // FAQ
+    function toggleFaq(btn) {
+      const item = btn.closest('.faq-item');
+      const wasOpen = item.classList.contains('open');
+      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
+      if(!wasOpen) item.classList.add('open');
+    }
+
+    // WAITLIST FORM → GoHighLevel
+    async function submitWaitlist(e) {
+      e.preventDefault();
+      const btn = document.getElementById('wl-btn');
+      const status = document.getElementById('wl-status');
+      const form = document.getElementById('waitlist-form');
+      const success = document.getElementById('wl-success');
+      
+      btn.disabled = true;
+      btn.textContent = 'Joining...';
+      status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
+      status.textContent = 'Adding you to the waitlist...';
+      
+      const firstName = document.getElementById('wl-first').value.trim();
+      const lastName = document.getElementById('wl-last').value.trim();
+      const phone = document.getElementById('wl-phone').value.trim();
+      const email = document.getElementById('wl-email').value.trim();
+      const platformName = 'Xero';
+      
+      try {
+        const body = {
+          firstName,
+          lastName,
+          phone,
+          tags: ['MCP waitlist', platformName],
+          source: 'MCPEngage Waitlist — ' + platformName
+        };
+        if (email) body.email = email;
+        if (!body.name) body.name = firstName + ' ' + lastName;
+        
+        const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        if (res.ok || res.status === 200 || res.status === 201) {
+          form.classList.add('hidden');
+          success.classList.remove('hidden');
+          lucide.createIcons();
+        } else {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.message || 'Server error');
+        }
+      } catch (err) {
+        status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
+        status.textContent = 'Something went wrong. Please try again.';
+        btn.disabled = false;
+        btn.textContent = 'Join Waitlist';
+        console.error('Waitlist error:', err);
+      }
+      return false;
+    }
+
+    // MAGNETIC BUTTONS
+    if(window.innerWidth >= 1024) {
+      document.querySelectorAll('.magnetic-btn').forEach(btn => {
+        btn.addEventListener('mousemove', e => {
+          const rect = btn.getBoundingClientRect();
+          const x = e.clientX - rect.left - rect.width/2;
+          const y = e.clientY - rect.top - rect.height/2;
+          btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
