From 1d8eb60f04c4a818f71c6e0ea7ed648aefba6596 Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Fri, 13 Feb 2026 21:38:54 -0500
Subject: [PATCH] =?UTF-8?q?64=20landing=20pages=20=E2=80=94=20datadog,=20f?=
 =?UTF-8?q?ieldedge=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 datadog/index.html   | 1045 +++++++++++++++++++++++++--------
 fieldedge/index.html | 1332 ++++++++++++++++++++++++------------------
 2 files changed, 1588 insertions(+), 789 deletions(-)
diff --git a/datadog/index.html b/datadog/index.html
index 09730db..1aa1fb2 100644
--- a/datadog/index.html
+++ b/datadog/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Datadog Connect — AI-Power Your Monitoring in 2 Clicks</title>
+  <title>MCPEngage for Datadog — AI-Power Your Monitoring in 2 Clicks</title>
+  <meta name="description" content="Connect Datadog to any AI model with MCPEngage. Manage metrics, monitors, dashboards, and logs 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: '#632CA6',
-              600: '#632CA6dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,840 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #632CA6 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%, #632CA625, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #632CA620; }
+    @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: #632CA6">
-          <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">Datadog 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: #632CA6; 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: #632CA6"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">Datadog</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete Datadog MCP server. Metrics, logs, traces, and alerts. <strong class="text-white">178 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: #632CA6; 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/datadog.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: #632CA6; color: #fff">
-            178 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 Datadog + 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 Datadog + 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">Alert 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: #632CA630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
-            </div>
-            <p class="text-white font-medium">AI correlates and deduplicates</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 incident triage</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: #632CA630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
-            </div>
-            <p class="text-white font-medium">AI identifies root cause</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 monitoring 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: #632CA630">
-              <i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
-            </div>
-            <p class="text-white font-medium">Unified AI-powered insights</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">Datadog</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 Datadog 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: #632CA620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Metrics & Monitoring</h3>
-          <p class="text-zinc-400 text-sm">Query infrastructure metrics, APM, and RUM 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: #632CA620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Alert Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, mute, and resolve alerts.</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: #632CA620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Log Analysis</h3>
-          <p class="text-zinc-400 text-sm">Search logs, analyze patterns, and debug issues.</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: #632CA620">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Dashboard Operations</h3>
-          <p class="text-zinc-400 text-sm">Access and update custom dashboards programmatically.</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: #632CA6; 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 Datadog to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Query metrics, investigate incidents, and build dashboards — 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/datadog" 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/datadog
+                </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="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="bell" 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 infrastructure..." 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="bell" class="w-4 h-4"></i>
+                      Alerts
+                      <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="activity" class="w-4 h-4"></i>
+                      Metrics
+                    </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">High CPU on prod-api-12</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Triggered 4 min ago • Critical</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">Firing</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">Production</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">API cluster</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">Elevated error rate</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Triggered 12 min ago • Warning</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">Warning</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">Staging</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">Web service</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">Monitoring 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 Observability</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/datadog" 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 surfing</p><p class="text-xs sm:text-sm text-zinc-500">Toggle between 15 different Datadog dashboards trying to correlate CPU, memory, and error rates</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">Alert fatigue</p><p class="text-xs sm:text-sm text-zinc-500">Slack alerts fire constantly — you check Datadog UI, find the host, check logs, dig through metrics</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 queries</p><p class="text-xs sm:text-sm text-zinc-500">Want to know "which service is slowest?" — you write custom PromQL, wait 30 seconds, format results</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">Incident chaos</p><p class="text-xs sm:text-sm text-zinc-500">On-call gets paged — spend 10 minutes finding the right dashboard, host, and time window</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 visibility</p><p class="text-xs sm:text-sm text-zinc-500">"Show me prod CPU usage in the last hour" — instant graph with anomaly highlights</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 incident triage</p><p class="text-xs sm:text-sm text-zinc-500">"What's wrong with prod-api-12?" — AI pulls CPU, memory, logs, and recent deploys in one 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">Natural metric queries</p><p class="text-xs sm:text-sm text-zinc-500">"Which service has the highest error rate?" — AI queries, ranks, and explains in plain English</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 troubleshooting</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all errors from checkout service in the last 10 minutes" — logs + context delivered</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 Infrastructure 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">
+          Datadog collects everything, but finding the right metric at 3am is still a nightmare.
+        </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="activity" 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">Metric Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're tracking 10,000+ metrics across services, hosts, and containers. Finding the one that explains why checkout is slow requires dashboard archaeology.</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="bell" 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">Alert Storm Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Monitors fire all the time. Half are false positives. The other half require 5 clicks to understand context. By the time you investigate, the incident has evolved.</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">Log Labyrinth</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Error logs are in Datadog. Stack traces are in Sentry. Recent deploys are in GitHub. Correlating them requires opening six browser tabs and manual detective 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 Monitoring</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 Datadog</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Datadog API and application keys from account settings. MCPEngage discovers all metrics, monitors, dashboards, and logs — building 58+ 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 prod CPU spikes." "What's firing right now?" "Which service is slowest?" Your AI understands observability like a veteran SRE.</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 Incident Response</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: triage alerts, correlate metrics, query logs, notify on-call, create dashboards, and post summaries to Slack — 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 Observability</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+ Datadog 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="activity" 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">Metric Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Query any metric with natural language. "Show me average response time by service 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="bell" 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">Monitor Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, mute, and resolve monitors through conversation. "Mute the staging alerts."</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">Dashboard Builder</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate custom dashboards on demand. "Create a dashboard for checkout service performance."</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">Log Explorer</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Search logs, filter by tags, and correlate with metrics. "Show me all errors from prod-api 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-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">Incident Correlation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI connects alerts, metrics, logs, and deploys to surface root cause. "Why is checkout slow?"</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">Anomaly Detection</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Spot unusual patterns in metrics automatically. "Which metrics are behaving abnormally?"</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 Datadog 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 Datadog API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Datadog 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 access to Datadog.
+          </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 Datadog?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 Datadog API key and application key from your account settings. MCPEngage uses the Datadog API to create 58+ tools covering metrics, monitors, dashboards, and logs. 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 monitoring 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 — monitoring data never passes through our servers. API keys are encrypted at rest. You control all access 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">Can it replace the Datadog UI?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 designed to complement the Datadog UI, not replace it. Use AI for quick queries, incident triage, and automation. Use the UI for deep investigation and visual 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">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 PagerDuty, Slack, GitHub, AWS, 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 Datadog?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Datadog Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #632CA6; 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 Monitoring<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 engineering teams using MCPEngage to supercharge their Datadog 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 Datadog 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 Datadog Connect. Not affiliated with Datadog.
+  <!-- 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;">Firing Alerts — 2 Active</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Prod impacted</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;">High CPU on prod-api-12</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Triggered 4 min ago · 92% CPU</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;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;">Elevated error rate</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Staging · 12 min ago · 8.2% errors</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;">Warning</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;">Metric Query Result</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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);">prod-api-12 · CPU Usage (Last Hour)</div><div style="font-size:10px;">📈 Avg: 68% · Peak: 92% (4 min ago) · Spike detected at 2:43 PM</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Graph exported to dashboard · Recent deploy detected</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'What alerts are firing right now?' },
+      { type:'ai', text:'You have 2 active alerts:', embed: embed_1 },
+      { type:'user', text:'Show me CPU usage for prod-api-12 in the last hour' },
+      { type:'ai', text:'CPU metrics for prod-api-12:', 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: Datadog', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Datadog API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Datadog API', color:'text-green-400', delay:3000 },
+      { text:'✓ 58 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Datadog', 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 = 'Datadog';
+      
+      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/fieldedge/index.html b/fieldedge/index.html
index 1c8c4b8..32c4e56 100644
--- a/fieldedge/index.html
+++ b/fieldedge/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>FieldEdge Connect — AI-Power Your Field Ops in 2 Clicks</title>
+  <title>MCPEngage for FieldEdge — AI-Power Your Field Service in 2 Clicks</title>
+  <meta name="description" content="Connect FieldEdge to any AI model with MCPEngage. Manage work orders, customers, and dispatch 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: '#0066B2',
-              600: '#0052a0',
-              700: '#003d7a',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,610 +26,840 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #0066B2 0%, #00a0dc 50%, #00d4ff 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, 102, 178, 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 {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 60px rgba(0, 102, 178, 0.2);
-      transform: translateY(-4px);
-      border-color: rgba(0, 102, 178, 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(0, 102, 178, 0.3); }
-      50% { box-shadow: 0 0 40px rgba(0, 102, 178, 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, #0066B2, #00a0dc, #0066B2, #003d7a);
-      background-size: 400% 400%;
-      animation: gradient-shift 8s ease infinite;
-    }
-    .glow-orb {
-      position: absolute;
-      border-radius: 50%;
-      filter: blur(60px);
-      opacity: 0.3;
-      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(0, 102, 178, 0.4), 0 0 40px 0 rgba(0, 102, 178, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(0, 102, 178, 0.6), 0 0 60px 10px rgba(0, 102, 178, 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);
-    }
-    .stat-card {
-      background: linear-gradient(135deg, rgba(0, 102, 178, 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 Orbs -->
-  <div class="glow-orb w-96 h-96 bg-blue-500 top-20 -left-48 fixed animate-float-slow"></div>
-  <div class="glow-orb w-72 h-72 bg-cyan-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
-  <div class="glow-orb w-64 h-64 bg-blue-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-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
-          <i data-lucide="wrench" 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">FieldEdge 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="max-w-4xl mx-auto px-6 py-20">
-      <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">FieldEdge</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 FieldEdge MCP server. <strong class="text-white">68 tools</strong> for work orders, dispatch, and service. 
-            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">
-              Join the Waitlist
-            </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>
 
-          <!-- Stats Row -->
-          <div class="grid grid-cols-3 gap-4 max-w-md mx-auto">
-            <div class="stat-card rounded-xl p-4 border border-zinc-800/50">
-              <div class="text-3xl font-bold text-brand-400">68</div>
-              <div class="text-sm text-zinc-500">API Tools</div>
-            </div>
-            <div class="stat-card rounded-xl p-4 border border-zinc-800/50">
-              <div class="text-3xl font-bold text-cyan-400">2</div>
-              <div class="text-sm text-zinc-500">Clicks to Connect</div>
-            </div>
-            <div class="stat-card rounded-xl p-4 border border-zinc-800/50">
-              <div class="text-3xl font-bold text-green-400">24/7</div>
-              <div class="text-sm text-zinc-500">AI Automation</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 FieldEdge + 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">FieldEdge</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 FieldEdge to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage work orders, dispatch techs, and handle customers — 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/fieldedge" 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/fieldedge
+                </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="clipboard" 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="truck" 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 field service..." 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="clipboard" class="w-4 h-4"></i>
+                      Today
+                      <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>
+                      Techs
+                    </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">HVAC Repair — Johnson Residence</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Scheduled 2:00 PM • Tech: Mike Chen</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">En Route</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">Emergency</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">Est. $450</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">Plumbing Service — Acme Office</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Completed 11:30 AM • Tech: Sarah Lee</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">Invoiced</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">Commercial</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">$275 paid</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 field service management</p>
-      </div>
-      <div class="bg-gradient-to-r from-brand-500/50 to-cyan-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/fieldedge.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">Field Service 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">Work Orders</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="layout-grid" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Dispatch</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="file-badge" class="w-4 h-4 text-brand-500"></i>
-            <span class="text-sm text-zinc-300">Agreements</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 Dispatch</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 FieldEdge + 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">Missed service renewals</p>
-                <p class="text-zinc-500 mt-1">Memberships expire and you don't even notice until they call to cancel.</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">Inefficient dispatch</p>
-                <p class="text-zinc-500 mt-1">Techs driving across town when there's a job next door.</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">Paper work orders</p>
-                <p class="text-zinc-500 mt-1">Lost tickets, illegible notes, no accountability.</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-cyan-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 FieldEdge 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 tracks and reminds on renewals</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>AI-optimized routing & dispatch</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>Fully digital job tracking</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 — 68 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/fieldedge" 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">Dispatch chaos</p><p class="text-xs sm:text-sm text-zinc-500">Emergency call comes in — check tech availability, customer history, parts inventory across 4 screens</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 scheduling</p><p class="text-xs sm:text-sm text-zinc-500">Drag-drop work orders to techs, call to confirm, email customer, update status — 15 minutes per job</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">Invoice delays</p><p class="text-xs sm:text-sm text-zinc-500">Tech finishes job — you manually create invoice, email customer, track payment, update books</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 confusion</p><p class="text-xs sm:text-sm text-zinc-500">"When did we last service this HVAC?" — dig through work order history, notes, and invoices</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 dispatch</p><p class="text-xs sm:text-sm text-zinc-500">"Assign emergency HVAC to nearest available tech" — AI checks skills, location, schedule, dispatches 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">One-command scheduling</p><p class="text-xs sm:text-sm text-zinc-500">"Schedule Mike for the Johnson job tomorrow at 2pm" — calendar updated, customer notified, parts reserved</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-invoicing</p><p class="text-xs sm:text-sm text-zinc-500">"Create invoice for the Acme job and send it" — invoice generated from work order, emailed 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 customer intel</p><p class="text-xs sm:text-sm text-zinc-500">"Show me Johnson's service history" — full timeline with work orders, invoices, equipment, and notes</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 FieldEdge 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="clipboard-list" class="w-7 h-7 text-brand-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Work Order Management</h3>
-          <p class="text-zinc-400 leading-relaxed">Create, assign, and track service calls with full visibility.</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-cyan-500/20 to-cyan-500/5 flex items-center justify-center mb-5 border border-cyan-500/20">
-            <i data-lucide="layout-grid" class="w-7 h-7 text-cyan-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Dispatch Board</h3>
-          <p class="text-zinc-400 leading-relaxed">Optimize tech schedules, manage capacity, reduce drive time.</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="file-badge" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Service Agreements</h3>
-          <p class="text-zinc-400 leading-relaxed">Track memberships, renewals, and maintenance schedules.</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="credit-card" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="text-xl font-bold mb-3">Invoicing</h3>
-          <p class="text-zinc-400 leading-relaxed">Generate invoices, process payments on-site, sync to accounting.</p>
-        </div>
-      </div>
-      
-      <div class="mt-16 text-center">
-        <p class="text-zinc-400 mb-6">+ 50 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">Customer History</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">Equipment 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">Technician GPS</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">Price Book</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">Reporting</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</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">Quotes</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">Webhooks</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"
-          >
-            <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-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 Field Team Is<br><span class="text-red-400">Stuck in the Office</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">
+          FieldEdge tracks jobs, but your dispatchers drown in manual scheduling and customer calls.
         </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" 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">Dispatch Bottlenecks</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Emergency calls come in constantly. You're manually checking tech availability, skills, location, and parts inventory. Every dispatch takes 10 minutes while the customer waits.</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="truck" 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 Chaos</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're juggling 20 techs across 50 jobs per day. Route optimization, skill matching, and priority handling are all manual. Techs get sent to the wrong jobs constantly.</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" 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 Context Lost</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customer calls asking about their last service. You're switching between work orders, invoices, equipment records, and notes. By the time you answer, they're frustrated.</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/fieldedge-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 Field 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/fieldedge-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">✓ FieldEdge MCP Server running</span>
-<span class="text-green-400">✓ 68 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 FieldEdge</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your FieldEdge API credentials from account settings. MCPEngage discovers all work orders, customers, techs, and inventory — building 47+ 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">"Who's available for emergency HVAC?" "Show me today's invoices." "Reschedule Mike's 3pm job." Your AI understands field service like a veteran dispatcher.</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 Field Ops</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: auto-dispatch jobs, optimize routes, send customer updates, generate invoices, track parts, and flag overdue payments — 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 Field Service</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+ FieldEdge 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="clipboard" 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">Work Order Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, assign, update, and complete work orders through conversation. "Show me all open emergency jobs."</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="truck" 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 Dispatch</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI-powered tech assignment based on skills, location, availability, and priority. "Assign nearest tech to this job."</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 Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Access service history, equipment details, payment records, and notes. "Pull up Johnson's account."</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" 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">Schedule Optimization</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Route planning, time slot management, and conflict resolution. "Optimize Mike's route for tomorrow."</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">Invoice Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Auto-generate invoices from completed work orders and track payments. "Invoice all completed jobs 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="package" 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">Inventory Tracking</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Monitor parts, check availability, and reserve stock for jobs. "Do we have the part for this HVAC job?"</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 FieldEdge 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 FieldEdge API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your FieldEdge 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 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">
-    <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 FieldEdge?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join service pros already automating with FieldEdge 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">
-          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="wrench" 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 access to FieldEdge.
           </div>
-          <span class="font-bold text-xl">FieldEdge Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/fieldedge-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 FieldEdge?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 FieldEdge API credentials from your account settings. MCPEngage uses the FieldEdge API to create 47+ tools covering work orders, dispatch, customers, and inventory. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 FieldEdge Connect. Not affiliated with FieldEdge.</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 infrastructure — customer data never passes through our servers. API credentials are encrypted at rest. You control all access 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">Can it help with route optimization?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 can analyze tech locations, job addresses, and time windows to suggest optimized routes. It integrates with mapping tools for real-time traffic data.
+          </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, 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 Field Service<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 field service businesses using MCPEngage to supercharge their FieldEdge 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 FieldEdge 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(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;">Today — 18 Jobs</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$4,250 est.</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;">HVAC Repair — Johnson</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">2:00 PM · Mike Chen</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;">En route</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;">Plumbing — Acme Office</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">11:30 AM · Sarah Lee</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;">Invoiced</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;">Job Dispatched</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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);">Emergency HVAC — 742 Oak St</div><div style="font-size:10px;">Assigned to: <span style="color:#22c55e;font-weight:600;">Tom Rodriguez</span> (7 min away)</div><div style="font-size:10px;opacity:0.7;">Customer notified · ETA: 3:25 PM</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Work order #7482 · Priority: Emergency</div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all work orders scheduled for today' },
+      { type:'ai', text:'You have 18 work orders scheduled today:', embed: embed_1 },
+      { type:'user', text:'Assign the next available tech to a new emergency HVAC job at 742 Oak Street' },
+      { type:'ai', text:'Emergency job created and dispatched:', 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: FieldEdge', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to FieldEdge API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to FieldEdge API', color:'text-green-400', delay:3000 },
+      { text:'✓ 47 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about FieldEdge', 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 = 'FieldEdge';
+      
+      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>
