From e1027bab97c9e8c3a5688b4ba0c054aa3f191b7c Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Fri, 13 Feb 2026 21:13:51 -0500
Subject: [PATCH] landing pages: hubspot, salesforce, zendesk (generated from
 template)

---
 hubspot/index.html    |  980 ++++++++++++++++++++++--------
 salesforce/index.html | 1311 ++++++++++++++++++++++-------------------
 zendesk/index.html    | 1220 ++++++++++++++++++++++----------------
 3 files changed, 2145 insertions(+), 1366 deletions(-)
diff --git a/hubspot/index.html b/hubspot/index.html
index b7a86b2..5b59b2e 100644
--- a/hubspot/index.html
+++ b/hubspot/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>HubSpot Connect — AI-Power Your CRM & Marketing in 2 Clicks</title>
+  <title>MCPEngage for HubSpot — AI-Power Your HubSpot in 2 Clicks</title>
+  <meta name="description" content="Connect HubSpot to any AI model with MCPEngage. Manage deals, contacts, and pipelines through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              500: '#FF7A59',
-              600: '#FF7A59dd',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -26,263 +26,775 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #FF7A59 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%, #FF7A5925, transparent); }
-    .card-glow:hover { box-shadow: 0 0 40px #FF7A5920; }
+    @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: #FF7A59">
-          <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">HubSpot 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: #FF7A59; 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">Get Started</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: #FF7A59"></span>
-            Open Source + Hosted
-          </div>
-          
-          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
-            Connect <span class="gradient-text">HubSpot</span><br>to AI in 2 Clicks
-          </h1>
-          
-          <p class="text-xl text-zinc-400 mb-8">
-            The complete HubSpot MCP server. Contacts, deals, campaigns, and analytics. <strong class="text-white">186 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: #FF7A59; 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/hubspot.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: #FF7A59; color: #fff">
-            186 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 HubSpot + 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 HubSpot + AI<br><span class="text-zinc-500">shouldn't take a week</span>
-      </h2>
-      <div class="grid md:grid-cols-3 gap-8 mt-12">
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Manual lead qualification</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: #FF7A5930">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
-            </div>
-            <p class="text-white font-medium">AI scores and prioritizes leads</p>
-          </div>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
-          <div class="flex items-start gap-3 mb-4">
-            <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
-              <i data-lucide="x" class="w-4 h-4 text-red-400"></i>
-            </div>
-            <p class="text-zinc-400">Lost deals in pipeline</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: #FF7A5930">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
-            </div>
-            <p class="text-white font-medium">Proactive alerts on stale opportunities</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">Campaign performance guesswork</p>
-          </div>
-          <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF7A5930">
-              <i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
-            </div>
-            <p class="text-white font-medium">Real-time AI insights and optimization</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">HubSpot</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 HubSpot 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: #FF7A5920">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Contact & Deal Management</h3>
-          <p class="text-zinc-400 text-sm">Create, update, and track leads through your entire pipeline.</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: #FF7A5920">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Marketing Automation</h3>
-          <p class="text-zinc-400 text-sm">Manage email campaigns, workflows, and lead nurturing sequences.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF7A5920">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Sales Pipeline</h3>
-          <p class="text-zinc-400 text-sm">Track opportunities, forecast revenue, and manage deal stages.</p>
-        </div>
-        
-        <div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
-          <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF7A5920">
-            <i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Analytics & Reporting</h3>
-          <p class="text-zinc-400 text-sm">Pull engagement metrics, conversion rates, and revenue attribution.</p>
-        </div>
-        
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-xl mx-auto px-6 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
-      <p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
-      <form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
-        <input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
-        <button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF7A59; 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 HubSpot to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage deals, update contacts, and track pipelines — all through conversation.</span>
       </p>
-      <a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
-        <i data-lucide="github" class="w-5 h-5"></i>
-        View on GitHub
-      </a>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Get Started Free</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>
+        <button 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="play" class="w-4 h-4 sm:w-5 sm:h-5 ml-0.5"></i>
+          </div>
+          <span>Watch Demo</span>
+        </button>
+      </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/hubspot
+                </div>
+                <div class="w-16 sm:w-20"></div>
+              </div>
+
+              <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
+                <!-- Sidebar -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="briefcase" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your HubSpot deals..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="briefcase" class="w-4 h-4"></i>
+                      Deals
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">24</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user" class="w-4 h-4"></i>
+                      Contacts
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Enterprise Migration — $125K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Closing in 12 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Negotiation</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">90% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Annual Renewal — $48K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Due in 3 days</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Contract Sent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">98% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Renewal</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Starter Plan — $12K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignCo • Demo scheduled</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Qualified</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">45% close</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">New Logo</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="65">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">HubSpot 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 CRM</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>
+  </section>
+
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
+      </div>
+      <div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
+              <i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual deal updates</p><p class="text-xs sm:text-sm text-zinc-500">Sales reps forget to log calls, activities get lost, pipeline data goes stale</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Scattered contact data</p><p class="text-xs sm:text-sm text-zinc-500">Customer info spread across HubSpot, email, Slack, and sticky notes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Pipeline blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly see which deals need attention or are about to slip</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Endless clicking</p><p class="text-xs sm:text-sm text-zinc-500">5+ clicks just to update a deal stage or add a contact note</p></div></li>
+          </ul>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
+              <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
+            </div>
+            <h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
+          </div>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice-to-CRM updates</p><p class="text-xs sm:text-sm text-zinc-500">"Move Acme deal to negotiation and log today's call" — done instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Unified contact view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me everything about Acme Corp" — full context in seconds</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart pipeline alerts</p><p class="text-xs sm:text-sm text-zinc-500">AI surfaces at-risk deals and next actions without asking</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-sentence commands</p><p class="text-xs sm:text-sm text-zinc-500">Update deals, create tasks, and schedule follow-ups through chat</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Sales Team Is<br><span class="text-red-400">Losing Deals</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">
+          HubSpot has the data, but your reps spend more time updating it than selling.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Data Entry Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reps lose 2+ hours daily updating HubSpot. They hate it, so data quality tanks and forecasting becomes guesswork.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="eye-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Pipeline Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't see which deals are stalling, which contacts are ghosting, or where to focus effort until it's too late.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Slow Follow-Up</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">By the time a rep manually logs a call and sets a reminder, the prospect has already talked to your competitor.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Sales</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your HubSpot</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your HubSpot API key. MCPEngage discovers all objects, properties, and pipelines — building 65+ tools automatically. No code, no configuration.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me deals over $50K closing this month." "Update Acme to contract sent." "What's my team's pipeline coverage?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-update deal stages from email sentiment, flag stalled deals, generate weekly pipeline reports, and sync data across your stack.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge HubSpot</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">
+          65+ HubSpot 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="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Deal Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and close deals through conversation. "Move all qualified deals from Q1 to contract sent."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to full contact history, deal associations, email opens, and engagement scores in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="git-branch" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Pipeline Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time pipeline health, coverage ratios, and win rate trends. "Which deals are at risk this quarter?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Activity Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Log calls, emails, and meetings instantly. "Log a 30-min call with Acme about pricing objections."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Lead Scoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull lead scores, engagement data, and lifecycle stage changes. "Show me hot leads that haven't been contacted."</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">Forecast Reporting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate weighted forecasts, pipeline snapshots, and rep performance dashboards on demand.</p>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-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 HubSpot 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 HubSpot API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your HubSpot settings.</p>
-        </details>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
+      </div>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
+        
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to HubSpot.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to HubSpot?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 HubSpot private app token (generated in Settings > Integrations > Private Apps). MCPEngage uses the HubSpot API to create 65+ tools covering deals, contacts, companies, tasks, pipelines, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my HubSpot data?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            No. MCPEngage uses HubSpot's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in HubSpot's activity timeline, and you can set read-only mode if preferred.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with Salesforce or other CRMs?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! You can connect multiple platforms simultaneously. Use HubSpot as your source of truth and have AI sync data to Salesforce, Pipedrive, or any other MCP-enabled platform in your stack.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, Zendesk, Jira, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- 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 HubSpot?</h2>
-      <p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with HubSpot Connect.</p>
-      <a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF7A59; 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 HubSpot<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their HubSpot CRM.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
+        <input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
+        <button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-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 whitespace-nowrap">
+          Get Started Free
+        </button>
+      </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 HubSpot Connect. Not affiliated with HubSpot.
+  <!-- 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="#" class="hover:text-white transition-colors">GitHub</a>
+        </div>
+        <p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
+      </div>
     </div>
   </footer>
 
-  <script>lucide.createIcons();</script>
+  <!-- SCRIPTS -->
+  <script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
+
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,119,0,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ff7700;"></div><span style="font-size:11px;font-weight:700;color:#ff7700;text-transform:uppercase;letter-spacing:0.5px;">High-Value Deals Closing</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$342K total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$125K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Enterprise Migration</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · Closes in 12 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">90%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Negotiation</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$85K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Platform Upgrade</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalTech · Closes in 8 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">95%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Contract Sent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$72K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Multi-Year Contract</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">DataFlow Inc · Closes in 5 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">85%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Closed Won</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Weighted forecast: $307K (90% confidence)</span><span style="font-size:10px;color:#ff7700;cursor:pointer;">View in HubSpot →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Deal Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 actions</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Deal stage updated</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Enterprise Migration — $125K</div><div style="display:flex;align-items:center;gap:8px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">Stage:</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;text-decoration:line-through;opacity:0.5;">Negotiation</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Contract Sent</span></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Follow-up task created</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">Check contract signature status</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">📅 Tue Jan 21, 10:00 AM</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,119,0,0.15);color:#ff7700;">High Priority</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all deals over $50K closing this month' },
+      { type:'ai', text:'Found 5 deals totaling $342K:', embed: embed_1 },
+      { type:'user', text:'Move Acme deal to contract sent and schedule a follow-up for next Tuesday' },
+      { type:'ai', text:'Done! Here\'s what I updated:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: HubSpot', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to HubSpot API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to HubSpot API', color:'text-green-400', delay:3000 },
+      { text:'✓ 65 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about HubSpot', 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');
+    }
+
+    // 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/salesforce/index.html b/salesforce/index.html
index a20038c..f28d805 100644
--- a/salesforce/index.html
+++ b/salesforce/index.html
@@ -3,28 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Salesforce Connect — AI-Power Your CRM in 2 Clicks</title>
+  <title>MCPEngage for Salesforce — AI-Power Your Salesforce in 2 Clicks</title>
+  <meta name="description" content="Connect Salesforce to any AI model with MCPEngage. Manage opportunities, leads, and accounts through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#b4ffff',
-              100: '#96ffff',
-              200: '#78ffff',
-              300: '#50f1ff',
-              400: '#28c9ff',
-              500: '#00A1E0',
-              600: '#008dcc',
-              700: '#006fae',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -32,278 +26,306 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #00A1E0 0%, #ddff14 50%, #3cddff 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%, #00A1E033, transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 50px #00A1E026, 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      transform: translateY(-4px);
-      border-color: #00A1E04D;
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite 2s;
-    }
-    .animate-float-slow {
-      animation: float 8s ease-in-out infinite 1s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-20px); }
-    }
-    .video-glow {
-      box-shadow: 0 0 80px #00A1E033, 0 25px 80px -20px rgba(0, 0, 0, 0.8);
-    }
-    .btn-glow {
-      box-shadow: 0 0 30px #00A1E066;
-      transition: all 0.3s ease;
-    }
-    .btn-glow:hover {
-      box-shadow: 0 0 50px #00A1E099;
-      transform: scale(1.05);
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, #00A1E033, #00A1E01A);
-      border: 1px solid #00A1E033;
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 #00A1E066, 0 0 40px 0 #00A1E033; }
-      50% { box-shadow: 0 0 30px 5px #00A1E099, 0 0 60px 10px #00A1E04D; }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-      transform: scale(1.1);
-    }
-    .feature-icon {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-    }
-    .stat-card {
-      background: linear-gradient(135deg, #00A1E01A, transparent);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
-  
-  <!-- Ambient Background Elements -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
-    <div class="absolute top-1/4 -left-32 w-96 h-96 rounded-full blur-3xl animate-float" style="background: #00A1E01A"></div>
-    <div class="absolute top-3/4 -right-32 w-80 h-80 rounded-full blur-3xl animate-float-delayed" style="background: #ddff141A"></div>
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full blur-3xl animate-float-slow" style="background: #00A1E00D"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg" style="background: linear-gradient(135deg, #00A1E0, #ddff14); box-shadow: 0 4px 14px #00A1E040">
-          <i data-lucide="cloud" class="w-5 h-5" style="color: #fff"></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">Salesforce Connect</span>
-      </div>
-      <div class="hidden md:flex items-center gap-8">
-        <a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
-        <a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
-        <a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
-        <a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
-      </div>
-      <div class="flex items-center gap-4">
-        <a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
-        <a href="#pricing" class="px-5 py-2.5 rounded-lg font-medium transition shadow-lg" style="background: #00A1E0; color: #fff; box-shadow: 0 4px 14px #00A1E040">
-          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">Get Started</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center hero-glow pt-20">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-      <div class="max-w-3xl mx-auto text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full animate-pulse" style="background: #00A1E0"></span>
-          <span>Open Source + Hosted</span>
-          <span class="px-2 py-0.5 rounded-full text-xs font-medium ml-1" style="background: #00A1E033; color: #00A1E0">NEW</span>
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Salesforce + AI
         </div>
-        
-        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Salesforce</span><br>to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Salesforce</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
-          The complete Salesforce MCP server. Leads, accounts, opportunities, and automation. <strong class="text-white">246 tools</strong> for sales, contacts, pipeline. 
-          No OAuth headaches. Just connect and automate.
-        </p>
-        
-        <div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
-          <a href="#pricing" class="btn-glow px-8 py-4 rounded-xl font-semibold text-lg text-center" style="background: #00A1E0; color: #fff">
-            Join the Waitlist
-          </a>
-          <a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
-            <i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex items-center gap-4 justify-center">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=16" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=17" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=18" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <img src="https://i.pravatar.cc/100?img=19" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
-            <div class="w-10 h-10 rounded-full border-2 border-zinc-950 flex items-center justify-center text-xs font-bold shadow-lg" style="background: #00A1E0; color: #fff">
-              +125
+      <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 Salesforce to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage opportunities, qualify leads, and track accounts — 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>Get Started Free</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>
+        <button 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="play" class="w-4 h-4 sm:w-5 sm:h-5 ml-0.5"></i>
+          </div>
+          <span>Watch Demo</span>
+        </button>
+      </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/salesforce
+                </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="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="user-plus" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="building" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Salesforce opportunities..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="target" class="w-4 h-4"></i>
+                      Opps
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user-plus" class="w-4 h-4"></i>
+                      Leads
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Enterprise Deal — $280K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Stage: Negotiation</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">90%</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close: 14 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Cloud Migration — $155K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">TechFlow • Stage: Proposal</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">75%</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close: 21 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Strategic</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">SMB Expansion — $42K</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">DesignHub • Stage: Qualified</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">60%</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Close: 35 days</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Upsell</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="text-left">
-            <div class="flex items-center gap-1 text-amber-400 text-sm">
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-              <i data-lucide="star" class="w-4 h-4 fill-current"></i>
-            </div>
-            <p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">500+</strong> crm companies</p>
-          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your crm operations</p>
-      </div>
-      <div class="gradient-border rounded-2xl p-2">
-        <div class="rounded-xl overflow-hidden video-glow">
-          <video autoplay loop muted playsinline class="w-full">
-            <source src="./salesforce.mp4" type="video/mp4">
-          </video>
+  <!-- STATS BAR -->
+  <section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
+    <div class="max-w-7xl mx-auto relative">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+        
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="80">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Salesforce 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="briefcase" class="w-4 h-4" style="color: #00A1E0"></i>
-            <span class="text-sm text-zinc-300">Sales</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="truck" class="w-4 h-4" style="color: #00A1E0"></i>
-            <span class="text-sm text-zinc-300">Contacts</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="file-text" class="w-4 h-4" style="color: #00A1E0"></i>
-            <span class="text-sm text-zinc-300">Pipeline</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 CRM</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Stats Banner -->
-  <section class="py-12 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-        <div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
-          <div class="text-3xl md:text-4xl font-bold mb-1" style="color: #00A1E0">246</div>
-          <div class="text-zinc-400 text-sm">API Tools</div>
+  <!-- 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>
-        <div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
-          <div class="text-3xl md:text-4xl font-bold mb-1" style="color: #00A1E0">2 min</div>
-          <div class="text-zinc-400 text-sm">Setup Time</div>
-        </div>
-        <div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
-          <div class="text-3xl md:text-4xl font-bold mb-1" style="color: #00A1E0">500+</div>
-          <div class="text-zinc-400 text-sm">Companies</div>
-        </div>
-        <div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
-          <div class="text-3xl md:text-4xl font-bold mb-1" style="color: #00A1E0">99.9%</div>
-          <div class="text-zinc-400 text-sm">Uptime</div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Pain Points / Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Salesforce + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="alert-circle" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Data entry hell for reps</h3>
-          <p class="text-zinc-500 mb-6">Manual processes slow you down and cost you time and money.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: #00A1E033">
-                <i data-lucide="check" class="w-5 h-5" style="color: #00A1E0"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
               </div>
-              <p class="text-white font-medium">AI captures everything</p>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-          </div>
-        </div>
-
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="clock" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Stale pipeline data</h3>
-          <p class="text-zinc-500 mb-6">Manual processes slow you down and cost you time and money.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: #00A1E033">
-                <i data-lucide="check" class="w-5 h-5" style="color: #00A1E0"></i>
-              </div>
-              <p class="text-white font-medium">Real-time AI updates</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
-          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
-            <i data-lucide="x-circle" class="w-7 h-7 text-red-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2 text-red-400">Manual reporting</h3>
-          <p class="text-zinc-500 mb-6">Manual processes slow you down and cost you time and money.</p>
-          <div class="pt-6 border-t border-zinc-800">
-            <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: #00A1E033">
-                <i data-lucide="check" class="w-5 h-5" style="color: #00A1E0"></i>
-              </div>
-              <p class="text-white font-medium">AI generates insights</p>
+            <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>
@@ -311,403 +333,468 @@
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium mb-6" style="background: #00A1E01A; color: #00A1E0">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Salesforce API access through one simple connection. 246 tools at your AI's fingertips.</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="briefcase" class="w-7 h-7 text-brand-400"></i>
+      <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>
-          <h3 class="font-semibold text-lg mb-2">Lead & Account Management</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Create, qualify, convert leads. Manage account hierarchies.</p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Report purgatory</p><p class="text-xs sm:text-sm text-zinc-500">Build custom reports just to answer simple questions like "Who's my top rep?"</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">Lead black holes</p><p class="text-xs sm:text-sm text-zinc-500">Leads sit unqualified for days because reps can't keep up with volume</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">Opportunity rot</p><p class="text-xs sm:text-sm text-zinc-500">Deals stall in pipeline stages while you scramble to find context</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="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">Forecast chaos</p><p class="text-xs sm:text-sm text-zinc-500">Weekly forecast meetings turn into arguments over stale spreadsheet data</p></div></li>
+          </ul>
         </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="zap" class="w-7 h-7 text-blue-400"></i>
+        <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>
-          <h3 class="font-semibold text-lg mb-2">Opportunity Pipeline</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Track deals, forecast revenue, manage stages and probabilities.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="file-text" class="w-7 h-7 text-green-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Activity Logging</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Log calls, emails, meetings. Capture all customer interactions.</p>
-        </div>
-
-        <div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
-          <div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Custom Objects</h3>
-          <p class="text-zinc-400 text-sm leading-relaxed">Access any custom Salesforce data, fields, and relationships.</p>
-        </div>
-      </div>
-
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-6">+ 222 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-3">
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Leads</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Contacts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Accounts</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Campaigns</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Reports</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tasks</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Notes</span>
-          <span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Emails</span>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me stalled opportunities over $100K" — answer in 2 seconds, not 20 minutes</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Auto-qualification</p><p class="text-xs sm:text-sm text-zinc-500">AI scores and routes leads based on behavior, firmographics, and fit</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">Context on demand</p><p class="text-xs sm:text-sm text-zinc-500">Pull full opportunity history, stakeholder map, and next actions instantly</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Live forecasting</p><p class="text-xs sm:text-sm text-zinc-500">Real-time weighted pipeline analysis with win probability by rep and region</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Use Cases -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built for CRM</h2>
-        <p class="text-zinc-400 text-lg">Whatever your use case — we've got you covered</p>
-      </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/5 border border-blue-500/20">
-          <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4">
-            <i data-lucide="building-2" class="w-6 h-6 text-blue-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Enterprise Sales</h3>
-          <p class="text-zinc-400 text-sm">Complex deal management, account hierarchies, multi-touch attribution — all automated.</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="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-teal-500/5 border border-cyan-500/20">
-          <div class="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4">
-            <i data-lucide="users" class="w-6 h-6 text-cyan-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">SMB Sales Teams</h3>
-          <p class="text-zinc-400 text-sm">Lead qualification, pipeline management, activity tracking without the data entry.</p>
-        </div>
-
-        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-500/10 to-yellow-500/5 border border-amber-500/20">
-          <div class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center mb-4">
-            <i data-lucide="bar-chart-3" class="w-6 h-6 text-amber-400"></i>
-          </div>
-          <h3 class="font-semibold text-lg mb-2">Revenue Operations</h3>
-          <p class="text-zinc-400 text-sm">Forecasting, territory management, quota tracking with AI precision.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium mb-6" style="background: #00A1E033; color: #00A1E0">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
-        </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
-      </div>
-      
-      <div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
-        <form id="waitlist-form" class="space-y-6">
-          <div>
-            <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span style="color: #00A1E0">*</span></label>
-            <input 
-              type="text" 
-              id="wl-name" 
-              name="name" 
-              required
-              placeholder="Your full name"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 transition"
-              style="--tw-ring-color: #00A1E033"
-            >
-          </div>
-          
-          <div>
-            <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span style="color: #00A1E0">*</span></label>
-            <input 
-              type="tel" 
-              id="phone" 
-              name="phone" 
-              required
-              placeholder="(555) 123-4567"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 transition"
-              style="--tw-ring-color: #00A1E033"
-            >
-          </div>
-
-          <div>
-            <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@company.com"
-              class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 transition"
-              style="--tw-ring-color: #00A1E033"
-            >
-          </div>
-          
-          <button 
-            type="submit" 
-            id="submit-btn"
-            class="w-full py-4 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg"
-            style="background: #00A1E0; color: #fff; box-shadow: 0 4px 14px #00A1E040"
-          >
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </button>
-        </form>
-        
-        <!-- Success Message -->
-        <div id="success-message" class="hidden text-center py-8">
-          <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background: #00A1E033">
-            <i data-lucide="check" class="w-8 h-8" style="color: #00A1E0"></i>
-          </div>
-          <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-          <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
-        </div>
-        
-        <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-          <i data-lucide="shield-check" class="w-4 h-4"></i>
-          We respect your privacy. No spam, ever.
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Sales Ops Team Is<br><span class="text-red-400">Buried</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">
+          Salesforce has the power, but your team drowns in clicks, reports, and manual data entry.
         </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="layout-dashboard" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Dashboard Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 47 dashboards, 200+ reports, and still can't answer "Which deals need attention right now?" without digging for 15 minutes.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-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">Lead Response Lag</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Hot inbound leads wait hours (or days) for qualification because reps are busy updating opportunities and building reports.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="alert-circle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Forecast Guesswork</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your forecast is a negotiation between reps sandbagging and managers hoping. Real-time accuracy is a fantasy.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
-
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
-        <div class="grid md:grid-cols-2 gap-12 items-center">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6 leading-relaxed">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle of OAuth and token management.
-            </p>
-            <a href="https://github.com/BusyBee3333/salesforce-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 font-medium group" style="color: #00A1E0">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
-            </a>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Revenue</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
+        
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/salesforce-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 style="color: #00A1E0">✓ Salesforce MCP Server running</span>
-<span style="color: #00A1E0">✓ 246 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 Salesforce</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Authenticate via OAuth or use a Connected App token. MCPEngage scans your org and builds 80+ tools covering objects, fields, workflows, and custom metadata. Zero configuration 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 opportunities over $100K closing this quarter." "Update Acme stage to proposal." "Which leads haven't been touched in 48 hours?" Your AI understands Salesforce like a veteran admin.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Revenue Ops</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: auto-score leads, flag at-risk deals, sync data to your BI tool, generate pipeline snapshots, and alert reps on Slack — all running 24/7 without human touch.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Salesforce</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          80+ Salesforce 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="target" 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">Opportunity Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, and close opportunities through conversation. "Move all stage 3 opps to negotiation if amount > $50K."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Lead Scoring & Routing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">AI-powered lead qualification using behavioral data, firmographics, and engagement. "Show me MQLs from Fortune 500 companies."</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="building-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Account Intelligence</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull account hierarchies, contact roles, opportunity history, and engagement timelines in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="activity" 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">Pipeline Analytics</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time pipeline coverage, win rates by stage, rep performance, and weighted forecasts. "What's our Q1 commit number?"</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="workflow" 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">Workflow Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Trigger Salesforce flows, update records in bulk, and execute Apex actions through natural language commands.</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="database" 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">Custom Object Access</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">MCPEngage auto-discovers your custom objects, fields, and relationships. Full CRUD operations on any Salesforce data.</p>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
-        <p class="text-zinc-400">Everything you need to know about Salesforce Connect</p>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">What is MCP?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center transition" style="--open-bg: #00A1E033">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Do I need to install anything?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            For the hosted version, no. Just connect your Salesforce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Is my data secure?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Yes. We use OAuth 2.0 and never store your Salesforce API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Salesforce settings.
-          </p>
-        </details>
-
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">How many API endpoints are supported?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            Salesforce Connect includes 246 tools covering the full Salesforce API surface. This includes sales, contacts, pipeline, and more. 
-            We continuously add new endpoints as Salesforce releases them.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
-            <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center transition">
-              <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
-            </div>
-          </summary>
-          <p class="mt-4 text-zinc-400 leading-relaxed">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- Final CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="absolute inset-0 hero-glow"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Salesforce?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
-        Join 500+ crm companies already automating with Salesforce Connect. Be first in line when we launch.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="btn-glow px-8 py-4 rounded-xl font-semibold text-lg" style="background: #00A1E0; color: #fff">
-          Join the Waitlist
-        </a>
-        <a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
-          <i data-lucide="calendar" class="w-5 h-5"></i>
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-3">
-          <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #00A1E0, #ddff14)">
-            <i data-lucide="cloud" class="w-5 h-5" style="color: #fff"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Salesforce.
           </div>
-          <span class="font-bold text-xl">Salesforce Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/salesforce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/salesforce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/salesforce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="github" class="w-4 h-4"></i>
-            GitHub
-          </a>
-          <a href="https://github.com/BusyBee3333/salesforce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
-            <i data-lucide="twitter" class="w-4 h-4"></i>
-            Twitter
-          </a>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Salesforce?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You authenticate via OAuth (recommended) or provide a Connected App token with API access. MCPEngage uses the Salesforce REST and Bulk APIs to create 80+ tools covering standard and custom objects. Your credentials are encrypted and never stored on our servers.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it respect my Salesforce permissions?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron 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 operates within the permissions of the authenticated user. If a user can't delete opportunities in Salesforce, they can't delete them through MCPEngage either. All actions respect profiles, permission sets, and sharing rules.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it handle custom objects and fields?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage auto-discovers your entire org schema including custom objects, fields, relationships, and record types. It works with ISV packages, managed packages, and any customizations your admins have built.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including HubSpot, Zendesk, Jira, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
         </div>
       </div>
-      <div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
-        <p class="text-zinc-500 text-sm">© 2026 Salesforce Connect. Not affiliated with Salesforce.</p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Salesforce<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 revenue teams using MCPEngage to supercharge Salesforce.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
+        <input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
+        <button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-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 whitespace-nowrap">
+          Get Started Free
+        </button>
+      </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="#" 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 rounded-full font-semibold transition-all shadow-xl"
-      style="background: #00A1E0; color: #fff"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(0,161,224,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#00a1e0;"></div><span style="font-size:11px;font-weight:700;color:#00a1e0;text-transform:uppercase;letter-spacing:0.5px;">Q1 Pipeline — High Value</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$1.2M total</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$280K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Q1 Enterprise Deal</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Acme Corp · Close: 14 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">90%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">Negotiation</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$155K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Cloud Migration</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow · Close: 21 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">75%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(59,130,246,0.15);color:#60a5fa;text-transform:uppercase;">Proposal</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">$125K</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Platform Expansion</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalTech · Close: 28 days</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">70%</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#4ade80;text-transform:uppercase;">Qualified</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Weighted forecast: $945K (79% avg probability)</span><span style="font-size:10px;color:#00a1e0;cursor:pointer;">View in Salesforce →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Opportunity Updated</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 changes</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Stage updated to Proposal</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">Q1 Enterprise Deal — $280K</div><div style="display:flex;align-items:center;gap:8px;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;text-decoration:line-through;opacity:0.5;">Negotiation</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">→</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Proposal</span></div></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Activity logged</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">Sent final pricing proposal via email</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.4);">📧 Email · Just now</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(0,161,224,0.15);color:#00a1e0;">Proposal Sent</span></div></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all opportunities over $100K closing this quarter' },
+      { type:'ai', text:'Found 8 opportunities totaling $1.2M:', embed: embed_1 },
+      { type:'user', text:'Update Acme to proposal stage and log that we sent pricing' },
+      { type:'ai', text:'Updated! Here\'s the summary:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Salesforce', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Salesforce API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Salesforce API', color:'text-green-400', delay:3000 },
+      { text:'✓ 80 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Salesforce', 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');
+    }
+
+    // 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/zendesk/index.html b/zendesk/index.html
index 3ba27b0..2e6f38d 100644
--- a/zendesk/index.html
+++ b/zendesk/index.html
@@ -3,30 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Zendesk Connect — AI-Power Your Support in 2 Clicks</title>
+  <title>MCPEngage for Zendesk — AI-Power Your Zendesk in 2 Clicks</title>
+  <meta name="description" content="Connect Zendesk to any AI model with MCPEngage. Manage tickets, automate workflows, and get instant customer context through natural conversation.">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-          },
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
           colors: {
-            brand: {
-              50: '#f0fdfa',
-              100: '#ccfbf1',
-              200: '#99f6e4',
-              300: '#5eead4',
-              400: '#17c3b2',
-              500: '#03363D',
-              600: '#024850',
-              700: '#014451',
-            }
+            brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
           }
         }
       }
@@ -34,587 +26,775 @@
   </script>
   <style>
     .gradient-text {
-      background: linear-gradient(135deg, #17c3b2 0%, #8b5cf6 50%, #ec4899 100%);
+      background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
+      background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      animation: gradient-shift 6s ease infinite;
     }
-    .hero-glow {
-      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(23, 195, 178, 0.2), transparent);
+    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+    .mesh-gradient {
+      background:
+        radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
+        radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
     }
-    .card-glow {
-      transition: all 0.3s ease;
-    }
-    .card-glow:hover {
-      box-shadow: 0 0 40px rgba(23, 195, 178, 0.15);
-      transform: translateY(-4px);
-    }
-    .video-glow {
-      box-shadow: 0 0 80px rgba(23, 195, 178, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
-    }
-    .animate-float {
-      animation: float 6s ease-in-out infinite;
-    }
-    .animate-float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    .animate-pulse-glow {
-      animation: pulse-glow 3s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) rotate(0deg); }
-      50% { transform: translateY(-20px) rotate(2deg); }
-    }
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.5; transform: scale(1); }
-      50% { opacity: 0.8; transform: scale(1.05); }
-    }
-    @keyframes wiggle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes glow-pulse {
-      0%, 100% { box-shadow: 0 0 20px 0 rgba(23, 195, 178, 0.4), 0 0 40px 0 rgba(23, 195, 178, 0.2); }
-      50% { box-shadow: 0 0 30px 5px rgba(23, 195, 178, 0.6), 0 0 60px 10px rgba(23, 195, 178, 0.3); }
-    }
-    .sticky-btn {
-      animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
-    }
-    .sticky-btn:hover {
-      animation: none;
-    }
-    .gradient-border {
-      background: linear-gradient(135deg, #17c3b2, #8b5cf6, #ec4899);
-      padding: 2px;
-      border-radius: 1rem;
-    }
-    .gradient-border-inner {
-      background: #09090b;
-      border-radius: calc(1rem - 2px);
-    }
-    .feature-icon {
-      background: linear-gradient(135deg, rgba(23, 195, 178, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
-    }
-    .bg-grid {
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-    }
-    .teal-accent {
-      color: #17c3b2;
-    }
-    .teal-bg {
-      background-color: #17c3b2;
-    }
-    .teal-glow {
-      box-shadow: 0 0 20px rgba(23, 195, 178, 0.4);
+    .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
+    @supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
+    .glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
+    @supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
+    .glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
+    .glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
+    .float { animation: float 6s ease-in-out infinite; }
+    .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
+    .gradient-border { position: relative; }
+    .gradient-border::before {
+      content:''; position:absolute; inset:0; padding:2px;
+      background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
+      background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
+      border-radius: inherit;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor; mask-composite: exclude;
     }
+    .feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
+    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
+    .feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
+    .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
+    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+    .btn-shine { position:relative; overflow:hidden; }
+    .btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
+    .btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
+    .scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
+    @keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
+    .noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
+    .reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
+    .js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
+    .js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
+    .js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
+    .counter { font-variant-numeric: tabular-nums; }
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    @media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
+    .terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
+    .faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
+    .faq-item.open .faq-chevron { transform: rotate(180deg); }
+    .faq-chevron { transition: transform 0.3s ease; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
-  
-  <!-- Floating decorative elements -->
-  <div class="fixed inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 left-10 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
-    <div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
-  </div>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
 
-  <!-- Nav -->
-  <nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center shadow-lg shadow-teal-500/25">
-          <i data-lucide="headphones" class="w-5 h-5 text-white"></i>
+  <!-- NAVBAR -->
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
+          <span class="font-black text-xs sm:text-sm text-black">ME</span>
         </div>
-        <span class="font-bold text-xl">Zendesk 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 teal-bg hover:opacity-90 rounded-lg font-medium transition shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 hover:scale-105 transform text-white">
-          Join Waitlist
-        </a>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
+      </a>
+      <div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
+        <a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
+        <a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
       </div>
+      <a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Get Started</a>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
-    <div class="max-w-4xl mx-auto px-6 py-20">
-      <div class="flex flex-col items-center text-center">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
-          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-          Open Source + Hosted
+  <!-- HERO -->
+  <section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now Available — Connect Zendesk + AI
         </div>
-        
-        <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
-          Connect <span class="gradient-text">Zendesk</span><br>
-          to AI in 2 Clicks
+      </div>
+
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
+          <span class="block">AI-Power Your</span>
+          <span class="block gradient-text">Zendesk</span>
+          <span class="block">in 2 Clicks</span>
         </h1>
-        
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
-          The complete Zendesk MCP server. <strong class="text-white">156 tools</strong> covering tickets, users, and automations. 
-          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 teal-bg hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 flex items-center justify-center gap-2 text-white">
-            <span>Join the Waitlist</span>
-            <i data-lucide="arrow-right" class="w-5 h-5"></i>
-          </a>
-          <a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
-            <i data-lucide="play" class="w-5 h-5"></i>
-            Watch Demo
-          </a>
-        </div>
+      </div>
 
-        <!-- Social Proof -->
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <div class="flex -space-x-3">
-            <img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
-            <img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        MCPEngage connects Zendesk to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage tickets, pull customer context, and automate workflows — all through conversation.</span>
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Get Started Free</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>
+        <button 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="play" class="w-4 h-4 sm:w-5 sm:h-5 ml-0.5"></i>
           </div>
-          <p class="text-zinc-400">
-            Trusted by <strong class="text-white">5,000+</strong> support teams
-          </p>
+          <span>Watch Demo</span>
+        </button>
+      </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/zendesk
+                </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="ticket" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                </div>
+
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <input type="text" placeholder="Ask about your Zendesk tickets..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
+                      <i data-lucide="ticket" class="w-4 h-4"></i>
+                      Tickets
+                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
+                    </button>
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
+                      <i data-lucide="user" class="w-4 h-4"></i>
+                      Customer
+                    </button>
+                  </div>
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#4821 — Login Issue</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • 12m ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Urgent</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SLA: 28min</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
+                      </div>
+                    </div>
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#4819 — Billing Question</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">James Miller • 1h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">High</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SLA: 2h</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">Pro Plan</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">#4815 — Feature Request</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">Priya Patel • 3h ago</p>
+                        </div>
+                        <span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Normal</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">SLA: 8h</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">Team Plan</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden sm:flex justify-center mt-10 lg:mt-16">
+        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
+          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
+          <i data-lucide="chevron-down" class="w-5 h-5"></i>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Video Demo -->
-  <section id="demo" class="py-20 border-t border-zinc-800/50">
-    <div class="max-w-5xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
-        <p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
-      </div>
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-2">
-          <div class="rounded-xl overflow-hidden video-glow">
-            <video autoplay loop muted playsinline class="w-full">
-              <source src="../output/zendesk.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="50">0</span>+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Zendesk 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="ticket" class="w-4 h-4 teal-accent"></i>
-            <span class="text-sm text-zinc-300">Tickets</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="users" class="w-4 h-4 teal-accent"></i>
-            <span class="text-sm text-zinc-300">Users</span>
-          </div>
-          <div class="w-px h-4 bg-zinc-700"></div>
-          <div class="flex items-center gap-2">
-            <i data-lucide="bar-chart-3" class="w-4 h-4 teal-accent"></i>
-            <span class="text-sm text-zinc-300">Analytics</span>
-          </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Problem/Solution -->
-  <section class="py-24 border-t border-zinc-800/50 relative">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">
-          Setting up Zendesk + AI<br>
-          <span class="text-zinc-500">shouldn't take a week</span>
+  <!-- TERMINAL / INSTALL -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 reveal-up">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
+          <i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Quick Install
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
+          Up and Running in<br><span class="gradient-text">One Command</span>
         </h2>
       </div>
-      
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Pain Point 1 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
+      <div class="reveal-scale">
+        <div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
+            <div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
+              <div class="flex items-center gap-1.5 sm:gap-2">
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span class="text-xs text-zinc-600 font-mono">~/projects</span>
+              <button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
             </div>
-            <p class="font-medium text-zinc-400">Drowning in ticket queues</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 teal-accent"></i>
+            <div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
+              <div id="terminal-lines" class="space-y-1"></div>
             </div>
-            <p class="font-semibold text-white">AI triages and prioritizes automatically</p>
-          </div>
-        </div>
-        
-        <!-- Pain Point 2 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-            </div>
-            <p class="font-medium text-zinc-400">Slow first response times</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 teal-accent"></i>
-            </div>
-            <p class="font-semibold text-white">Instant AI-drafted replies</p>
-          </div>
-        </div>
-        
-        <!-- Pain Point 3 -->
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
-          <div class="flex items-center gap-3 mb-6">
-            <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
-              <i data-lucide="x" class="w-5 h-5 text-red-400"></i>
-            </div>
-            <p class="font-medium text-zinc-400">Context switching constantly</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
-              <i data-lucide="check" class="w-5 h-5 teal-accent"></i>
-            </div>
-            <p class="font-semibold text-white">AI surfaces relevant ticket history</p>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Features -->
-  <section id="features" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/10 teal-accent text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Full API Coverage
-        </span>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
-        <p class="text-xl text-zinc-400">Full Zendesk API access through one simple connection</p>
+  <!-- BEFORE & AFTER -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Difference
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Before vs. <span class="gradient-text">After</span>
+        </h2>
       </div>
-      
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="ticket" class="w-7 h-7 teal-accent"></i>
+      <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>
-          <h3 class="text-xl font-semibold mb-3">Ticket Management</h3>
-          <p class="text-zinc-400">Create, update, resolve tickets. Full CRUD on your queue.</p>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual ticket triage</p><p class="text-xs sm:text-sm text-zinc-500">Sort through hundreds of tickets by hand every morning</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Copy-paste customer data</p><p class="text-xs sm:text-sm text-zinc-500">Manually look up account info across multiple systems</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">Switching between tabs</p><p class="text-xs sm:text-sm text-zinc-500">Zendesk, CRM, docs, analytics — constant context switching</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow response times</p><p class="text-xs sm:text-sm text-zinc-500">SLA breaches piling up, customers getting frustrated</p></div></li>
+          </ul>
         </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
+        <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>
-          <h3 class="text-xl font-semibold mb-3">User & Org Data</h3>
-          <p class="text-zinc-400">Access customer history, tags, and organization details.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="workflow" class="w-7 h-7 text-pink-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Automations</h3>
-          <p class="text-zinc-400">Trigger macros, update fields, route tickets intelligently.</p>
-        </div>
-        
-        <div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
-          <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-orange-400"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-3">Analytics</h3>
-          <p class="text-zinc-400">Pull satisfaction scores, response times, agent performance.</p>
-        </div>
-      </div>
-      
-      <div class="mt-12 text-center">
-        <p class="text-zinc-400 mb-4">+ 150 more endpoints including:</p>
-        <div class="flex flex-wrap justify-center gap-2">
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Views</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Macros</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Groups</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">SLAs</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Triggers</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Brands</span>
-          <span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Help Center</span>
+          <ul class="space-y-4">
+            
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI auto-triage</p><p class="text-xs sm:text-sm text-zinc-500">Tickets categorized, prioritized, and routed automatically</p></div></li>
+            <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant customer context</p><p class="text-xs sm:text-sm text-zinc-500">Full history, account tier, and past interactions 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">One conversation interface</p><p class="text-xs sm:text-sm text-zinc-500">Ask your AI — it reads and writes to Zendesk for you</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">3× faster resolution</p><p class="text-xs sm:text-sm text-zinc-500">Resolve tickets in minutes instead of hours</p></div></li>
+          </ul>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Waitlist -->
-  <section id="pricing" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-2xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/20 teal-accent text-sm font-medium mb-6">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
-          Coming Soon
+  <!-- PAIN POINTS -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Problem
         </div>
-        <h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
-        <p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Your Support Team Is<br><span class="text-red-400">Drowning</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">
+          Zendesk is powerful, but your agents spend more time navigating it than helping customers.
+        </p>
       </div>
-      
-      <div class="gradient-border">
-        <div class="gradient-border-inner p-8">
-          <form id="waitlist-form" class="space-y-6">
-            <div>
-              <label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="teal-accent">*</span></label>
-              <input 
-                type="text" 
-                id="name" 
-                name="name" 
-                required
-                placeholder="Your full name"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="teal-accent">*</span></label>
-              <input 
-                type="tel" 
-                id="phone" 
-                name="phone" 
-                required
-                placeholder="(555) 123-4567"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
-              >
-            </div>
-            
-            <div>
-              <label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
-              <input 
-                type="email" 
-                id="email" 
-                name="email" 
-                placeholder="you@company.com"
-                class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
-              >
-            </div>
-            
-            <button 
-              type="submit" 
-              id="submit-btn"
-              class="w-full py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-teal-500/25 text-white"
-            >
-              <span>Join the Waitlist</span>
-              <i data-lucide="arrow-right" class="w-5 h-5"></i>
-            </button>
-          </form>
-          
-          <div id="success-message" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-              <i data-lucide="check" class="w-8 h-8 text-green-400"></i>
-            </div>
-            <h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
-            <p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="layers" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          
-          <p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
-            <i data-lucide="lock" class="w-4 h-4"></i>
-            We respect your privacy. No spam, ever.
-          </p>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Tool Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Zendesk views, macros, triggers, automations, reporting — agents need months of training just to become productive.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card  stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Blindness</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customer history scattered across tickets, custom fields, and external systems. Agents ask customers to repeat themselves.</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="timer-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
+          </div>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">SLA Pressure</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Tickets pile up, response times slip, and CSAT scores tank. Your team works harder but the queue never shrinks.</p>
         </div>
       </div>
     </div>
   </section>
-  
-  <script>
-    document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const form = this;
-      const successMsg = document.getElementById('success-message');
-      form.classList.add('hidden');
-      successMsg.classList.remove('hidden');
-    });
-  </script>
 
-  <!-- Open Source -->
-  <section class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
-        <div class="absolute top-0 right-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl"></div>
+  <!-- HOW IT WORKS -->
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    <div class="max-w-5xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          The Solution
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">AI-Powered Support</span>
+        </h2>
+      </div>
+      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
         
-        <div class="grid md:grid-cols-2 gap-12 items-center relative">
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
-              <i data-lucide="github" class="w-4 h-4"></i>
-              Open Source
-            </div>
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">
-              Self-host if you want.<br>
-              <span class="text-zinc-500">We won't stop you.</span>
-            </h2>
-            <p class="text-zinc-400 mb-6">
-              The entire MCP server is open source. Run it yourself, modify it, contribute back. 
-              The hosted version just saves you the hassle.
-            </p>
-            <a href="https://github.com/BusyBee3333/zendesk-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 teal-accent hover:text-teal-300 font-medium transition">
-              View on GitHub
-              <i data-lucide="arrow-right" class="w-4 h-4"></i>
-            </a>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
           </div>
-          <div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
-            <div class="flex items-center gap-2 text-zinc-500 mb-4">
-              <span class="w-3 h-3 rounded-full bg-red-500"></span>
-              <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
-              <span class="w-3 h-3 rounded-full bg-green-500"></span>
-              <span class="ml-2">Terminal</span>
-            </div>
-            <pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/zendesk-mcp-2026-complete.git
-<span class="text-zinc-500">$</span> cd mcp && npm install
-<span class="text-zinc-500">$</span> npm run build
-<span class="text-zinc-500">$</span> node dist/server.js
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Zendesk</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Zendesk API key and subdomain. MCPEngage discovers all available endpoints and builds 50+ tools automatically. No code, no configuration, no DevOps.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all urgent tickets from enterprise customers." "Draft a reply for ticket #4821." "What's our CSAT trend this week?" Your AI understands and acts.</p>
+          </div>
+        </div>
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
+            <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-triage incoming tickets, escalate SLA breaches, generate weekly reports, and sync data across your stack — all running 24/7.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<span class="text-green-400">✓ Zendesk MCP Server running</span>
-<span class="text-green-400">✓ 156 tools loaded</span>
-<span class="text-zinc-500">Listening on stdio...</span></code></pre>
+  <!-- FEATURES GRID -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          Features
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Supercharge Zendesk</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          50+ Zendesk tools accessible through one natural-language interface.
+        </p>
+      </div>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="ticket" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Ticket Management</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Create, update, merge, and resolve tickets through conversation. "Close all resolved tickets from last week."</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="shield-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">SLA Monitoring</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Real-time SLA tracking with proactive alerts. "Which tickets are about to breach SLA?"</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="user-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Customer Context</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Instant access to full customer history, account tier, past tickets, and satisfaction scores in one query.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="wand-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Macro Automation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Apply macros, trigger automations, and execute bulk actions with natural language commands.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate CSAT reports, agent performance metrics, and ticket volume trends on demand.</p>
+        </div>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+          </div>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Draft Replies</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Generate contextual reply drafts using ticket history, knowledge base, and customer data. Review and send.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section id="faq" class="py-24 border-t border-zinc-800/50">
-    <div class="max-w-3xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
+  <section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
+          FAQ
+        </div>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
+          Common <span class="gradient-text">Questions</span>
+        </h2>
       </div>
-      
-      <div class="space-y-4">
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">What is MCP?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. 
-            It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
-          </p>
-        </details>
+      <div class="space-y-3 sm:space-y-4" id="faq-list">
         
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Do I need to install anything?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            For the hosted version, no. Just connect your Zendesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). 
-            If you self-host, you'll need Node.js.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Is my data secure?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit. 
-            You can revoke access anytime from your Zendesk settings.
-          </p>
-        </details>
-        
-        <details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
-          <summary class="flex items-center justify-between cursor-pointer list-none">
-            <span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
-            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
-          </summary>
-          <p class="mt-4 text-zinc-400">
-            MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations. 
-            As MCP adoption grows, more clients will support it natively.
-          </p>
-        </details>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-teal-500/5 to-transparent"></div>
-    <div class="max-w-4xl mx-auto px-6 text-center relative">
-      <h2 class="text-3xl md:text-5xl font-bold mb-6">
-        Ready to AI-power your Zendesk?
-      </h2>
-      <p class="text-xl text-zinc-400 mb-10">
-        Join thousands of support teams already automating with Zendesk Connect.
-      </p>
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 text-white">
-          Join the Waitlist
-        </a>
-        <a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
-          Book a Demo
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="border-t border-zinc-800/50 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center">
-            <i data-lucide="headphones" class="w-5 h-5 text-white"></i>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Zendesk.
           </div>
-          <span class="font-bold text-xl">Zendesk Connect</span>
         </div>
-        <div class="flex items-center gap-8 text-zinc-400">
-          <a href="https://github.com/BusyBee3333/zendesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
-          <a href="https://github.com/BusyBee3333/zendesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
-          <a href="https://github.com/BusyBee3333/zendesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
-          <a href="https://github.com/BusyBee3333/zendesk-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 Zendesk?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            You provide your Zendesk subdomain and an API token (generated in Zendesk Admin). MCPEngage uses the Zendesk REST API to create 50+ tools covering tickets, users, organizations, macros, SLAs, and more. Your credentials are encrypted and never stored on our servers.
+          </div>
         </div>
-        <p class="text-zinc-500 text-sm">© 2026 Zendesk Connect. Not affiliated with Zendesk.</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 data secure?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
+          </div>
+        </div>
+        <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
+          <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
+            <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
+          </button>
+          <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
+            Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Jira, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
+    <div class="max-w-4xl mx-auto text-center relative">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Start Automating Zendesk<br><span class="gradient-text">Today</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join thousands of teams using MCPEngage to supercharge their Zendesk.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
+        <input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
+        <button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-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 whitespace-nowrap">
+          Get Started Free
+        </button>
+      </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="#" 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 teal-bg hover:opacity-90 rounded-full font-semibold transition-all transform hover:scale-110 text-white"
-    >
-      <i data-lucide="sparkles" class="w-5 h-5"></i>
-      <span>Join Waitlist</span>
-    </a>
-  </div>
-
+  <!-- SCRIPTS -->
   <script>
-    const stickyCta = document.getElementById('sticky-cta');
-    const pricingSection = document.getElementById('pricing');
-    
-    function updateStickyCta() {
-      const scrollY = window.scrollY;
-      const pricingTop = pricingSection.offsetTop;
-      const pricingBottom = pricingTop + pricingSection.offsetHeight;
-      const viewportBottom = scrollY + window.innerHeight;
-      
-      const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
-      
-      if (shouldShow) {
-        stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      } else {
-        stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
-        stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
-      }
-    }
-    
-    window.addEventListener('scroll', updateStickyCta);
-    updateStickyCta();
-  </script>
+    lucide.createIcons();
+    document.body.classList.add('js-loaded');
 
-  <script>lucide.createIcons();</script>
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.reveal-scale').forEach(el => {
+      gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
+      });
+    });
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
+        scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
+        delay: (i % 4) * 0.1
+      });
+    });
+
+    document.querySelectorAll('.counter').forEach(counter => {
+      const target = parseInt(counter.dataset.target);
+      ScrollTrigger.create({
+        trigger: counter, start:"top 80%",
+        onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
+        once: true
+      });
+    });
+
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start:"top -80",
+      onUpdate: self => {
+        if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
+        else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
+      }
+    });
+
+    // CHAT DEMO
+    const chatDemo = document.getElementById('chat-demo');
+        const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div><span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Urgent Enterprise Tickets</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4821</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Login Issue — SSO Failure</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · Acme Corp</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA 28m</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">API Rate Limiting</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">James Park · TechFlow Inc</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;">SLA 1h 12m</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">High</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4815</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Data Export Timeout</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Maria Lopez · GlobalShip</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;">SLA 45m</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"><span style="font-size:10px;color:rgba(255,255,255,0.25);">Ticket #4821 is closest to SLA breach</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Zendesk →</span></div></div>`;
+    const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Reply drafted for #4821</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hi Sarah, I've looked into the SSO failure you reported. Our team identified a certificate rotation issue affecting your IdP connection. I've refreshed the SAML metadata on our end — could you try logging in again? If the issue persists..."</div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;gap:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819 escalated to Tier 2</span></div><div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Tier 2</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Context attached</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Priority: High</span></div></div></div>`;
+
+    const messages = [
+      { type:'user', text:'Show me all urgent tickets from enterprise customers' },
+      { type:'ai', text:'Found 3 urgent enterprise tickets:', embed: embed_1 },
+      { type:'user', text:'Draft a reply for #4821 and escalate #4819 to tier 2' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: embed_3 },
+    ];
+    function createMessage(msg){
+      const div = document.createElement('div');
+      div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity='0'; div.style.transform='translateY(15px)';
+      if(msg.type==='user'){
+        div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        const embedHtml = msg.embed || '';
+        div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
+      }
+      return div;
+    }
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo, start:"top 75%",
+      onEnter: () => {
+        if(chatAnimated) return; chatAnimated = true;
+        messages.forEach((msg,i) => {
+          setTimeout(() => {
+            const el = createMessage(msg);
+            chatDemo.appendChild(el);
+            lucide.createIcons();
+            gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i*1200);
+        });
+      },
+      once: true
+    });
+
+    // TERMINAL TYPING
+    const termLines = [
+      { text:'$ npx mcpengage init', color:'text-white', delay:0 },
+      { text:'', color:'text-white', delay:600 },
+      { text:'? Select your platform: Zendesk', color:'text-cyan-400', delay:1200 },
+      { text:'', color:'text-white', delay:1600 },
+      { text:'  Connecting to Zendesk API...', color:'text-zinc-500', delay:2000 },
+      { text:'✓ Connected to Zendesk API', color:'text-green-400', delay:3000 },
+      { text:'✓ 50 tools loaded', color:'text-green-400', delay:3600 },
+      { text:'✓ Ready! Ask your AI anything about Zendesk', 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');
+    }
+
+    // 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>
