From 2d05046dc1a4e75026dc6a30dbfba06ecab828a7 Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Mon, 2 Feb 2026 05:09:17 -0500
Subject: [PATCH] Redesign homepage: cleaner platform grid by category, updated
 pricing model

---
 landing-pages/index.html | 515 +++++++++++++++++++++------------------
 1 file changed, 274 insertions(+), 241 deletions(-)

diff --git a/landing-pages/index.html b/landing-pages/index.html
index 889b00b..29c84e3 100644
--- a/landing-pages/index.html
+++ b/landing-pages/index.html
@@ -168,263 +168,296 @@
   <!-- Platforms Grid -->
   <section id="platforms" class="py-24 px-6 border-t border-slate-800/50">
     <div class="max-w-7xl mx-auto">
-      <div class="text-center mb-16">
+      <div class="text-center mb-20">
         <h2 class="text-4xl md:text-5xl font-black mb-6">30 Platforms. One Engine.</h2>
         <p class="text-xl text-slate-400 max-w-3xl mx-auto">
           From field service to e-commerce, we've built MCP servers for the tools your business actually uses.
         </p>
       </div>
       
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+      <!-- Categories -->
+      <div class="space-y-16">
+        
         <!-- Field Service -->
-        <a href="servicetitan.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
-            <i data-lucide="wrench" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="wrench" class="w-6 h-6 text-orange-500"></i>
+            Field Service
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="servicetitan.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
+                <i data-lucide="wrench" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">ServiceTitan</div>
+            </a>
+            <a href="jobber.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+                <i data-lucide="briefcase" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Jobber</div>
+            </a>
+            <a href="housecallpro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
+                <i data-lucide="home" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Housecall Pro</div>
+            </a>
+            <a href="fieldedge.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
+                <i data-lucide="tool" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">FieldEdge</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">ServiceTitan</div>
-          <div class="text-xs text-slate-500 mt-1">Field Service</div>
-        </a>
+        </div>
         
-        <a href="jobber.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
-            <i data-lucide="briefcase" class="w-6 h-6 text-white"></i>
+        <!-- HR & Payroll -->
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="users" class="w-6 h-6 text-pink-500"></i>
+            HR & Payroll
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="gusto.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
+                <i data-lucide="users" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Gusto</div>
+            </a>
+            <a href="bamboohr.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
+                <i data-lucide="user-check" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">BambooHR</div>
+            </a>
+            <a href="rippling.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
+                <i data-lucide="building-2" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Rippling</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Jobber</div>
-          <div class="text-xs text-slate-500 mt-1">Field Service</div>
-        </a>
-        
-        <a href="housecallpro.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
-            <i data-lucide="home" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Housecall Pro</div>
-          <div class="text-xs text-slate-500 mt-1">Field Service</div>
-        </a>
-        
-        <a href="fieldedge.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
-            <i data-lucide="tool" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">FieldEdge</div>
-          <div class="text-xs text-slate-500 mt-1">Field Service</div>
-        </a>
-        
-        <!-- HR -->
-        <a href="gusto.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
-            <i data-lucide="users" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Gusto</div>
-          <div class="text-xs text-slate-500 mt-1">HR & Payroll</div>
-        </a>
-        
-        <a href="bamboohr.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
-            <i data-lucide="user-check" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">BambooHR</div>
-          <div class="text-xs text-slate-500 mt-1">HR</div>
-        </a>
-        
-        <a href="rippling.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
-            <i data-lucide="building-2" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Rippling</div>
-          <div class="text-xs text-slate-500 mt-1">HR & IT</div>
-        </a>
+        </div>
         
         <!-- Scheduling -->
-        <a href="calendly.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-            <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="calendar" class="w-6 h-6 text-blue-500"></i>
+            Scheduling
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="calendly.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                <i data-lucide="calendar" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Calendly</div>
+            </a>
+            <a href="acuity.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
+                <i data-lucide="clock" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Acuity</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Calendly</div>
-          <div class="text-xs text-slate-500 mt-1">Scheduling</div>
-        </a>
+        </div>
         
-        <a href="acuity.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
-            <i data-lucide="clock" class="w-6 h-6 text-white"></i>
+        <!-- Restaurant & POS -->
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="utensils" class="w-6 h-6 text-red-500"></i>
+            Restaurant & POS
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="toast.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
+                <i data-lucide="utensils" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Toast</div>
+            </a>
+            <a href="touchbistro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
+                <i data-lucide="smartphone" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">TouchBistro</div>
+            </a>
+            <a href="clover.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
+                <i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Clover</div>
+            </a>
+            <a href="lightspeed.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
+                <i data-lucide="zap" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Lightspeed</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Acuity</div>
-          <div class="text-xs text-slate-500 mt-1">Scheduling</div>
-        </a>
-        
-        <!-- Restaurant/POS -->
-        <a href="toast.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
-            <i data-lucide="utensils" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Toast</div>
-          <div class="text-xs text-slate-500 mt-1">Restaurant POS</div>
-        </a>
-        
-        <a href="touchbistro.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
-            <i data-lucide="smartphone" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">TouchBistro</div>
-          <div class="text-xs text-slate-500 mt-1">POS</div>
-        </a>
-        
-        <a href="clover.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
-            <i data-lucide="credit-card" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Clover</div>
-          <div class="text-xs text-slate-500 mt-1">Retail POS</div>
-        </a>
-        
-        <a href="lightspeed.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
-            <i data-lucide="zap" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Lightspeed</div>
-          <div class="text-xs text-slate-500 mt-1">Commerce</div>
-        </a>
+        </div>
         
         <!-- Email Marketing -->
-        <a href="mailchimp.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
-            <i data-lucide="mail" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="mail" class="w-6 h-6 text-yellow-500"></i>
+            Email Marketing
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="mailchimp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
+                <i data-lucide="mail" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Mailchimp</div>
+            </a>
+            <a href="brevo.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+                <i data-lucide="send" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Brevo</div>
+            </a>
+            <a href="constantcontact.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
+                <i data-lucide="megaphone" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Constant Contact</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Mailchimp</div>
-          <div class="text-xs text-slate-500 mt-1">Email Marketing</div>
-        </a>
-        
-        <a href="brevo.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
-            <i data-lucide="send" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Brevo</div>
-          <div class="text-xs text-slate-500 mt-1">Marketing</div>
-        </a>
-        
-        <a href="constantcontact.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
-            <i data-lucide="megaphone" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Constant Contact</div>
-          <div class="text-xs text-slate-500 mt-1">Email</div>
-        </a>
+        </div>
         
         <!-- CRM -->
-        <a href="closecrm.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
-            <i data-lucide="target" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="target" class="w-6 h-6 text-purple-500"></i>
+            CRM
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="closecrm.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
+                <i data-lucide="target" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Close</div>
+            </a>
+            <a href="pipedrive.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
+                <i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Pipedrive</div>
+            </a>
+            <a href="keap.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                <i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Keap</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Close</div>
-          <div class="text-xs text-slate-500 mt-1">Sales CRM</div>
-        </a>
-        
-        <a href="pipedrive.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
-            <i data-lucide="trending-up" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Pipedrive</div>
-          <div class="text-xs text-slate-500 mt-1">Pipeline CRM</div>
-        </a>
-        
-        <a href="keap.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
-            <i data-lucide="sparkles" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Keap</div>
-          <div class="text-xs text-slate-500 mt-1">CRM</div>
-        </a>
+        </div>
         
         <!-- Project Management -->
-        <a href="trello.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
-            <i data-lucide="layout-grid" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="layout-grid" class="w-6 h-6 text-blue-500"></i>
+            Project Management
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="trello.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+                <i data-lucide="layout-grid" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Trello</div>
+            </a>
+            <a href="clickup.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
+                <i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">ClickUp</div>
+            </a>
+            <a href="basecamp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
+                <i data-lucide="mountain" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Basecamp</div>
+            </a>
+            <a href="wrike.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
+                <i data-lucide="layers" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Wrike</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Trello</div>
-          <div class="text-xs text-slate-500 mt-1">Project Mgmt</div>
-        </a>
+        </div>
         
-        <a href="clickup.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
-            <i data-lucide="check-circle" class="w-6 h-6 text-white"></i>
+        <!-- Customer Support -->
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="headphones" class="w-6 h-6 text-green-500"></i>
+            Customer Support
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="zendesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
+                <i data-lucide="headphones" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Zendesk</div>
+            </a>
+            <a href="freshdesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+                <i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Freshdesk</div>
+            </a>
+            <a href="helpscout.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
+                <i data-lucide="life-buoy" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Help Scout</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">ClickUp</div>
-          <div class="text-xs text-slate-500 mt-1">Productivity</div>
-        </a>
-        
-        <a href="basecamp.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
-            <i data-lucide="mountain" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Basecamp</div>
-          <div class="text-xs text-slate-500 mt-1">Collaboration</div>
-        </a>
-        
-        <a href="wrike.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
-            <i data-lucide="layers" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Wrike</div>
-          <div class="text-xs text-slate-500 mt-1">Enterprise PM</div>
-        </a>
-        
-        <!-- Support -->
-        <a href="zendesk.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
-            <i data-lucide="headphones" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Zendesk</div>
-          <div class="text-xs text-slate-500 mt-1">Support</div>
-        </a>
-        
-        <a href="freshdesk.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
-            <i data-lucide="message-circle" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Freshdesk</div>
-          <div class="text-xs text-slate-500 mt-1">Helpdesk</div>
-        </a>
-        
-        <a href="helpscout.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
-            <i data-lucide="life-buoy" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Help Scout</div>
-          <div class="text-xs text-slate-500 mt-1">Customer Support</div>
-        </a>
+        </div>
         
         <!-- E-commerce -->
-        <a href="squarespace.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
-            <i data-lucide="square" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="shopping-bag" class="w-6 h-6 text-purple-500"></i>
+            E-commerce
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="squarespace.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
+                <i data-lucide="square" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Squarespace</div>
+            </a>
+            <a href="bigcommerce.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                <i data-lucide="shopping-bag" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">BigCommerce</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">Squarespace</div>
-          <div class="text-xs text-slate-500 mt-1">E-commerce</div>
-        </a>
-        
-        <a href="bigcommerce.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
-            <i data-lucide="shopping-bag" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">BigCommerce</div>
-          <div class="text-xs text-slate-500 mt-1">Enterprise Commerce</div>
-        </a>
+        </div>
         
         <!-- Accounting -->
-        <a href="freshbooks.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
-            <i data-lucide="receipt" class="w-6 h-6 text-white"></i>
+        <div>
+          <h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
+            <i data-lucide="receipt" class="w-6 h-6 text-green-500"></i>
+            Accounting
+          </h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <a href="freshbooks.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
+                <i data-lucide="receipt" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">FreshBooks</div>
+            </a>
+            <a href="wave.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
+                <i data-lucide="wallet" class="w-8 h-8 text-white"></i>
+              </div>
+              <div class="font-bold">Wave</div>
+            </a>
           </div>
-          <div class="font-semibold text-sm">FreshBooks</div>
-          <div class="text-xs text-slate-500 mt-1">Accounting</div>
-        </a>
+        </div>
         
-        <a href="wave.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
-          <div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
-            <i data-lucide="wallet" class="w-6 h-6 text-white"></i>
-          </div>
-          <div class="font-semibold text-sm">Wave</div>
-          <div class="text-xs text-slate-500 mt-1">Free Accounting</div>
-        </a>
       </div>
     </div>
   </section>
@@ -435,7 +468,7 @@
       <div class="text-center mb-16">
         <h2 class="text-4xl md:text-5xl font-black mb-6">Simple, Transparent Pricing</h2>
         <p class="text-xl text-slate-400 max-w-3xl mx-auto">
-          Self-host for free, or let us manage the infrastructure for you.
+          Self-host for free, use our managed service, or become a provider.
         </p>
       </div>
       
@@ -454,7 +487,7 @@
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">GitHub repository access</span>
+              <span class="text-slate-300">Full source code access</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
@@ -474,24 +507,24 @@
           </a>
         </div>
         
-        <!-- Managed -->
+        <!-- Per-Platform Managed -->
         <div class="p-8 rounded-2xl bg-gradient-to-br from-engine-500/10 to-purple-600/10 border-2 border-engine-500/50 relative">
           <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-gradient-to-r from-engine-500 to-purple-600 text-sm font-bold text-white">
             Most Popular
           </div>
-          <div class="text-lg font-semibold text-engine-400 mb-2">Managed</div>
+          <div class="text-lg font-semibold text-engine-400 mb-2">Select Your Apps</div>
           <div class="text-5xl font-black mb-6">
-            $99
-            <span class="text-xl text-slate-500 font-normal">/month</span>
+            $49
+            <span class="text-xl text-slate-500 font-normal">/app/mo</span>
           </div>
           <ul class="space-y-3 mb-8">
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">Everything in Open Source</span>
+              <span class="text-slate-300">Choose any platforms</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">Hosted infrastructure</span>
+              <span class="text-slate-300">Fully managed hosting</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
@@ -507,28 +540,28 @@
             </li>
           </ul>
           <a href="#contact" class="block w-full py-3 px-6 rounded-lg bg-engine-500 hover:bg-engine-600 text-center font-semibold transition text-white">
-            Coming Soon
+            Coming Q2 2026
           </a>
         </div>
         
-        <!-- Enterprise -->
+        <!-- Enterprise / Reseller -->
         <div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
-          <div class="text-lg font-semibold text-slate-400 mb-2">Enterprise</div>
+          <div class="text-lg font-semibold text-slate-400 mb-2">Become a Provider</div>
           <div class="text-5xl font-black mb-6">
-            Custom
+            Partner
           </div>
           <ul class="space-y-3 mb-8">
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">Everything in Managed</span>
+              <span class="text-slate-300">White-label deployment</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">Custom platforms</span>
+              <span class="text-slate-300">Offer managed services</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
-              <span class="text-slate-300">Private deployment</span>
+              <span class="text-slate-300">Revenue sharing model</span>
             </li>
             <li class="flex items-start gap-3">
               <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
@@ -539,8 +572,8 @@
               <span class="text-slate-300">Custom SLA</span>
             </li>
           </ul>
-          <a href="mailto:enterprise@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
-            Contact Sales
+          <a href="mailto:partners@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
+            Become a Partner
           </a>
         </div>
       </div>