diff --git a/Home/Views/Partials/hero-cards/ai-autofix.ejs b/Home/Views/Partials/hero-cards/ai-autofix.ejs
new file mode 100644
index 0000000000..412a9e0517
--- /dev/null
+++ b/Home/Views/Partials/hero-cards/ai-autofix.ejs
@@ -0,0 +1,12 @@
+<!-- AI Auto-Fix - Fuchsia -->
+<div class="hero-card-wrapper hero-glow-fuchsia-wrapper h-full">
+  <a href="/product/ai-agent" class="hero-card hero-glow-fuchsia group flex flex-col items-center justify-center text-center rounded-2xl bg-white px-4 py-5 ring-1 ring-inset ring-gray-200 transition-all hover:ring-fuchsia-300 h-full">
+    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-fuchsia-50 ring-1 ring-fuchsia-200">
+      <svg class="h-5 w-5 text-fuchsia-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085" />
+      </svg>
+    </div>
+    <div class="mt-3 text-sm font-medium text-gray-900">AI Auto-Fix</div>
+    <div class="mt-1 text-xs text-gray-500">Auto-fix code & create PRs</div>
+  </a>
+</div>
diff --git a/Home/Views/Partials/hero-cards/ai-copilot.ejs b/Home/Views/Partials/hero-cards/ai-copilot.ejs
new file mode 100644
index 0000000000..7539d9c2d7
--- /dev/null
+++ b/Home/Views/Partials/hero-cards/ai-copilot.ejs
@@ -0,0 +1,10 @@
+<!-- AI Copilot - Violet -->
+<div class="hero-card-wrapper hero-glow-violet-wrapper h-full">
+  <a href="/product/ai-agent" class="hero-card hero-glow-violet group flex flex-col items-center justify-center text-center rounded-2xl bg-white px-4 py-5 ring-1 ring-inset ring-gray-200 transition-all hover:ring-violet-300 h-full">
+    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
+      <%- include('../icons/ai-agent') %>
+    </div>
+    <div class="mt-3 text-sm font-medium text-gray-900">AI Copilot</div>
+    <div class="mt-1 text-xs text-gray-500">Detect & diagnose issues</div>
+  </a>
+</div>
diff --git a/Home/Views/Partials/hero-cards/product-grid.ejs b/Home/Views/Partials/hero-cards/product-grid.ejs
index c7eab621e1..b16f938af8 100644
--- a/Home/Views/Partials/hero-cards/product-grid.ejs
+++ b/Home/Views/Partials/hero-cards/product-grid.ejs
@@ -13,6 +13,6 @@
   <%- include('./dashboards') -%>
   <%- include('./kubernetes') -%>
   <%- include('./profiles') -%>
+  <%- include('./ai-copilot') -%>
+  <%- include('./ai-autofix') -%>
 </div>
-
-<%- include('./ai-agent') -%>
diff --git a/Home/Views/Partials/hero.ejs b/Home/Views/Partials/hero.ejs
index a210b91537..23434155ac 100644
--- a/Home/Views/Partials/hero.ejs
+++ b/Home/Views/Partials/hero.ejs
@@ -96,7 +96,7 @@
       background-color: rgb(255 255 255) !important;
       box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3), 0 4px 12px -4px rgb(99 102 241 / 0.15), 0 0 30px -8px rgb(99 102 241 / 0.1);
   }
-  /* Violet - AI Agent */
+  /* Violet - AI Copilot */
   .hero-glow-violet-wrapper::before {
       background: radial-gradient(ellipse at center, rgb(139 92 246 / 0.06) 0%, rgb(139 92 246 / 0.02) 40%, transparent 70%);
   }
@@ -104,6 +104,14 @@
       background-color: rgb(255 255 255) !important;
       box-shadow: 0 0 0 2px rgb(139 92 246 / 0.3), 0 4px 12px -4px rgb(139 92 246 / 0.15), 0 0 30px -8px rgb(139 92 246 / 0.1);
   }
+  /* Fuchsia - AI Auto-Fix */
+  .hero-glow-fuchsia-wrapper::before {
+      background: radial-gradient(ellipse at center, rgb(217 70 239 / 0.06) 0%, rgb(217 70 239 / 0.02) 40%, transparent 70%);
+  }
+  .hero-glow-fuchsia:hover {
+      background-color: rgb(255 255 255) !important;
+      box-shadow: 0 0 0 2px rgb(217 70 239 / 0.3), 0 4px 12px -4px rgb(217 70 239 / 0.15), 0 0 30px -8px rgb(217 70 239 / 0.1);
+  }
 </style>
 
 <div class="relative isolate bg-white overflow-hidden" id="hero-section">
diff --git a/Home/Views/Partials/product-tabs.ejs b/Home/Views/Partials/product-tabs.ejs
index 6a11151a31..d4cd268df2 100644
--- a/Home/Views/Partials/product-tabs.ejs
+++ b/Home/Views/Partials/product-tabs.ejs
@@ -27,163 +27,57 @@
             </select>
           </div>
 
-        <div class="hidden sm:block">
-            <div class="">
-                <nav class="-mb-px flex justify-center flex-wrap gap-x-8 gap-y-4 max-w-5xl mx-auto px-6" aria-label="Product feature tabs" role="tablist">
-                    <!-- Status Pages - Emerald -->
-                    <button type="button" onclick="showTab('status-pages')" id="tab-status-pages" role="tab" aria-selected="true" aria-controls="panel-status-pages"
-                        class="tab-status-pages-button tab-1-button cursor-pointer bg-gray-100 text-gray-900 shadow-sm ring-1 ring-gray-200 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="0" aria-label="Status Pages - communicates service availability to users">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-emerald-50 ring-1 ring-emerald-200 mr-2">
-                            <svg class="icon-tab-1 text-emerald-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                        </span>
-                        <span>Status Pages</span>
-                    </button>
-                    <!-- Monitoring - Blue -->
-                    <button type="button" onclick="showTab('monitoring')" id="tab-monitoring" role="tab" aria-selected="false" aria-controls="panel-monitoring"
-                        class="tab-monitoring-button tab-2-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Monitoring - uptime, performance and synthetic checks">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-blue-50 ring-1 ring-blue-200 mr-2">
-                            <svg class="icon-tab-2 text-blue-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
-                            </svg>
-                        </span>
-                        <span>Monitoring</span>
-                    </button>
-                    <!-- Incidents - Rose -->
-                    <button type="button" onclick="showTab('incidents')" id="tab-incidents" role="tab" aria-selected="false" aria-controls="panel-incidents"
-                        class="tab-incidents-button tab-3-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Incidents - detect, respond and learn from outages">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon-tab-3 text-rose-600 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-                            </svg>
-                        </span>
-                        <span>Incidents</span>
-                    </button>
-                    <!-- On-Call - Stone -->
-                    <button type="button" onclick="showTab('on-call')" id="tab-on-call" role="tab" aria-selected="false" aria-controls="panel-on-call"
-                        class="tab-on-call-button tab-4-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="On Call Alerts - intelligent alert routing and scheduling">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-stone-100 ring-1 ring-stone-200 mr-2">
-                            <svg class="icon-tab-4 text-stone-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
-                            </svg>
-                        </span>
-                        <span>On-Call</span>
-                    </button>
-                    <!-- Logs - Amber -->
-                    <button type="button" onclick="showTab('logs')" id="tab-logs" role="tab" aria-selected="false" aria-controls="panel-logs"
-                        class="tab-logs-button tab-5-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Logs - centralized log management and analytics">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-amber-50 ring-1 ring-amber-200 mr-2">
-                            <svg class="icon-tab-5 text-amber-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
-                            </svg>
-                        </span>
-                        <span>Logs</span>
-                    </button>
-                    <!-- Metrics - Purple -->
-                    <button type="button" onclick="showTab('metrics')" id="tab-metrics" role="tab" aria-selected="false" aria-controls="panel-metrics"
-                        class="tab-metrics-button tab-6-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Metrics - application and infrastructure metrics">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-purple-50 ring-1 ring-purple-200 mr-2">
-                            <svg class="icon-tab-6 text-purple-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7" />
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20" />
-                            </svg>
-                        </span>
-                        <span>Metrics</span>
-                    </button>
-                    <!-- Traces - Yellow -->
-                    <button type="button" onclick="showTab('traces')" id="tab-traces" role="tab" aria-selected="false" aria-controls="panel-traces"
-                        class="tab-traces-button tab-7-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Traces - distributed request tracing">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-yellow-50 ring-1 ring-yellow-200 mr-2">
-                            <svg class="icon-tab-7 text-yellow-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <rect x="2" y="3" width="20" height="4" rx="0.5" />
-                                <rect x="2" y="10" width="10" height="4" rx="0.5" />
-                                <rect x="2" y="17" width="5" height="4" rx="0.5" />
-                                <rect x="17" y="17" width="5" height="4" rx="0.5" />
-                            </svg>
-                        </span>
-                        <span>Traces</span>
-                    </button>
-                    <!-- Exceptions - Orange -->
-                    <button type="button" onclick="showTab('exceptions')" id="tab-exceptions" role="tab" aria-selected="false" aria-controls="panel-exceptions"
-                        class="tab-exceptions-button tab-8-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Exceptions - error tracking and debugging">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-orange-50 ring-1 ring-orange-200 mr-2">
-                            <svg class="icon-tab-8 text-orange-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <ellipse cx="12" cy="14" rx="5" ry="6" />
-                                <path stroke-linecap="round" d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6" />
-                            </svg>
-                        </span>
-                        <span>Exceptions</span>
-                    </button>
-                    <!-- Workflows - Sky -->
-                    <button type="button" onclick="showTab('workflows')" id="tab-workflows" role="tab" aria-selected="false" aria-controls="panel-workflows"
-                        class="tab-workflows-button tab-9-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Workflows - automate reliability operations and responses">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-sky-50 ring-1 ring-sky-200 mr-2">
-                            <svg class="icon-tab-9 text-sky-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="transform: rotate(180deg)">
-                                <rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
-                                <rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
-                                <rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5" />
-                                <path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5" />
-                            </svg>
-                        </span>
-                        <span>Workflows</span>
-                    </button>
-                    <!-- Dashboards - Indigo -->
-                    <button type="button" onclick="showTab('dashboards')" id="tab-dashboards" role="tab" aria-selected="false" aria-controls="panel-dashboards"
-                        class="tab-dashboards-button tab-10-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Dashboards - custom data visualizations">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-50 ring-1 ring-indigo-200 mr-2">
-                            <svg class="icon-tab-10 text-indigo-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
-                            </svg>
-                        </span>
-                        <span>Dashboards</span>
-                    </button>
-                    <!-- Kubernetes - Cyan -->
-                    <button type="button" onclick="showTab('kubernetes')" id="tab-kubernetes" role="tab" aria-selected="false" aria-controls="panel-kubernetes"
-                        class="tab-kubernetes-button tab-11-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Kubernetes - monitor Kubernetes clusters and workloads">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-cyan-50 ring-1 ring-cyan-200 mr-2">
-                            <svg class="icon-tab-11 text-cyan-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <polygon stroke-linecap="round" stroke-linejoin="round" points="12,2.5 19.43,6.08 21.26,14.11 15.95,20.64 8.05,20.56 2.74,14.27 4.57,6.22"></polygon>
-                                <circle cx="12" cy="12" r="2.2" stroke-linecap="round" stroke-linejoin="round"></circle>
-                                <line x1="12" y1="9.8" x2="12" y2="4" stroke-linecap="round"></line>
-                            </svg>
-                        </span>
-                        <span>Kubernetes</span>
-                    </button>
-                    <!-- Profiles - Rose -->
-                    <button type="button" onclick="showTab('profiles')" id="tab-profiles" role="tab" aria-selected="false" aria-controls="panel-profiles"
-                        class="tab-profiles-button tab-12-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Profiles - CPU and memory profiling with flamegraphs">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2">
-                            <svg class="icon-tab-12 text-rose-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"></path>
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z"></path>
-                            </svg>
-                        </span>
-                        <span>Profiles</span>
-                    </button>
-                    <!-- AI Agent - Violet -->
-                    <button type="button" onclick="showTab('ai-agent')" id="tab-ai-agent" role="tab" aria-selected="false" aria-controls="panel-ai-agent"
-                        class="tab-ai-agent-button tab-13-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="AI Agent - intelligent automation powered by AI">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-violet-50 ring-1 ring-violet-200 mr-2">
-                            <svg class="icon-tab-13 text-violet-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
-                            </svg>
-                        </span>
-                        <span>AI Agent</span>
-                    </button>
-                    <!-- Scheduled Maintenance - Teal -->
-                    <button type="button" onclick="showTab('scheduled-maintenance')" id="tab-scheduled-maintenance" role="tab" aria-selected="false" aria-controls="panel-scheduled-maintenance"
-                        class="tab-scheduled-maintenance-button tab-14-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Scheduled Maintenance - plan and communicate maintenance windows">
-                        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-teal-50 ring-1 ring-teal-200 mr-2">
-                            <svg class="icon-tab-14 text-teal-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                            </svg>
-                        </span>
-                        <span>Maintenance</span>
-                    </button>
-                </nav>
-            </div>
+        <div class="hidden sm:block max-w-5xl mx-auto px-6">
+            <nav aria-label="Product feature tabs" role="tablist">
+                <!-- Reliability & Response -->
+                <div class="mb-6">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Reliability & Response</p>
+                    <div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
+                        <!-- Status Pages -->
+                        <button type="button" onclick="showTab('status-pages')" id="tab-status-pages" role="tab" aria-selected="true" aria-controls="panel-status-pages" class="tab-status-pages-button tab-1-button cursor-pointer bg-gray-100 text-gray-900 shadow-sm ring-1 ring-gray-200 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="0" aria-label="Status Pages"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-emerald-50 ring-1 ring-emerald-200 mr-2"><svg class="icon-tab-1 text-emerald-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></span><span>Status Pages</span></button>
+                        <!-- Monitoring -->
+                        <button type="button" onclick="showTab('monitoring')" id="tab-monitoring" role="tab" aria-selected="false" aria-controls="panel-monitoring" class="tab-monitoring-button tab-2-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Monitoring"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-blue-50 ring-1 ring-blue-200 mr-2"><svg class="icon-tab-2 text-blue-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg></span><span>Monitoring</span></button>
+                        <!-- Incidents -->
+                        <button type="button" onclick="showTab('incidents')" id="tab-incidents" role="tab" aria-selected="false" aria-controls="panel-incidents" class="tab-incidents-button tab-3-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Incidents"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon-tab-3 text-rose-600 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg></span><span>Incidents</span></button>
+                        <!-- On-Call -->
+                        <button type="button" onclick="showTab('on-call')" id="tab-on-call" role="tab" aria-selected="false" aria-controls="panel-on-call" class="tab-on-call-button tab-4-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="On-Call"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-stone-100 ring-1 ring-stone-200 mr-2"><svg class="icon-tab-4 text-stone-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" /></svg></span><span>On-Call</span></button>
+                        <!-- Maintenance -->
+                        <button type="button" onclick="showTab('scheduled-maintenance')" id="tab-scheduled-maintenance" role="tab" aria-selected="false" aria-controls="panel-scheduled-maintenance" class="tab-scheduled-maintenance-button tab-14-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Maintenance"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-teal-50 ring-1 ring-teal-200 mr-2"><svg class="icon-tab-14 text-teal-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg></span><span>Maintenance</span></button>
+                    </div>
+                </div>
+
+                <!-- Observability -->
+                <div class="mb-6">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Observability</p>
+                    <div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
+                        <!-- Logs -->
+                        <button type="button" onclick="showTab('logs')" id="tab-logs" role="tab" aria-selected="false" aria-controls="panel-logs" class="tab-logs-button tab-5-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Logs"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-amber-50 ring-1 ring-amber-200 mr-2"><svg class="icon-tab-5 text-amber-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" /></svg></span><span>Logs</span></button>
+                        <!-- Metrics -->
+                        <button type="button" onclick="showTab('metrics')" id="tab-metrics" role="tab" aria-selected="false" aria-controls="panel-metrics" class="tab-metrics-button tab-6-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Metrics"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-purple-50 ring-1 ring-purple-200 mr-2"><svg class="icon-tab-6 text-purple-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7" /><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20" /></svg></span><span>Metrics</span></button>
+                        <!-- Traces -->
+                        <button type="button" onclick="showTab('traces')" id="tab-traces" role="tab" aria-selected="false" aria-controls="panel-traces" class="tab-traces-button tab-7-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Traces"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-yellow-50 ring-1 ring-yellow-200 mr-2"><svg class="icon-tab-7 text-yellow-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><rect x="2" y="3" width="20" height="4" rx="0.5" /><rect x="2" y="10" width="10" height="4" rx="0.5" /><rect x="2" y="17" width="5" height="4" rx="0.5" /><rect x="17" y="17" width="5" height="4" rx="0.5" /></svg></span><span>Traces</span></button>
+                        <!-- Exceptions -->
+                        <button type="button" onclick="showTab('exceptions')" id="tab-exceptions" role="tab" aria-selected="false" aria-controls="panel-exceptions" class="tab-exceptions-button tab-8-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Exceptions"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-orange-50 ring-1 ring-orange-200 mr-2"><svg class="icon-tab-8 text-orange-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><ellipse cx="12" cy="14" rx="5" ry="6" /><path stroke-linecap="round" d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6" /></svg></span><span>Exceptions</span></button>
+                        <!-- Kubernetes -->
+                        <button type="button" onclick="showTab('kubernetes')" id="tab-kubernetes" role="tab" aria-selected="false" aria-controls="panel-kubernetes" class="tab-kubernetes-button tab-11-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Kubernetes"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-cyan-50 ring-1 ring-cyan-200 mr-2"><svg class="icon-tab-11 text-cyan-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><polygon stroke-linecap="round" stroke-linejoin="round" points="12,2.5 19.43,6.08 21.26,14.11 15.95,20.64 8.05,20.56 2.74,14.27 4.57,6.22"></polygon><circle cx="12" cy="12" r="2.2" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="12" y1="9.8" x2="12" y2="4" stroke-linecap="round"></line></svg></span><span>Kubernetes</span></button>
+                        <!-- Profiles -->
+                        <button type="button" onclick="showTab('profiles')" id="tab-profiles" role="tab" aria-selected="false" aria-controls="panel-profiles" class="tab-profiles-button tab-12-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Profiles"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2"><svg class="icon-tab-12 text-rose-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z"></path></svg></span><span>Profiles</span></button>
+                    </div>
+                </div>
+
+                <!-- Automation & Intelligence -->
+                <div>
+                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Automation & Intelligence</p>
+                    <div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
+                        <!-- Workflows -->
+                        <button type="button" onclick="showTab('workflows')" id="tab-workflows" role="tab" aria-selected="false" aria-controls="panel-workflows" class="tab-workflows-button tab-9-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Workflows"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-sky-50 ring-1 ring-sky-200 mr-2"><svg class="icon-tab-9 text-sky-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="transform: rotate(180deg)"><rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5" /><rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5" /><rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5" /><path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5" /></svg></span><span>Workflows</span></button>
+                        <!-- Dashboards -->
+                        <button type="button" onclick="showTab('dashboards')" id="tab-dashboards" role="tab" aria-selected="false" aria-controls="panel-dashboards" class="tab-dashboards-button tab-10-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Dashboards"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-50 ring-1 ring-indigo-200 mr-2"><svg class="icon-tab-10 text-indigo-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg></span><span>Dashboards</span></button>
+                        <!-- AI Agent -->
+                        <button type="button" onclick="showTab('ai-agent')" id="tab-ai-agent" role="tab" aria-selected="false" aria-controls="panel-ai-agent" class="tab-ai-agent-button tab-13-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="AI Agent"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-violet-50 ring-1 ring-violet-200 mr-2"><svg class="icon-tab-13 text-violet-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg></span><span>AI Agent</span></button>
+                    </div>
+                </div>
+            </nav>
         </div>
     </div>
 
diff --git a/Home/Views/features-table.ejs b/Home/Views/features-table.ejs
index 51c38c6f31..1ad5bb7cc2 100644
--- a/Home/Views/features-table.ejs
+++ b/Home/Views/features-table.ejs
@@ -2,6 +2,8 @@
     /* Feature Card Styles - Enhanced */
     .feature-card-wrapper {
         position: relative;
+        overflow: hidden;
+        border-radius: 1rem;
     }
     .feature-card-wrapper::before {
         content: '';
@@ -59,6 +61,12 @@
     .feature-glow-indigo-wrapper::before { background: radial-gradient(ellipse at center, rgb(99 102 241 / 0.12) 0%, rgb(99 102 241 / 0.04) 40%, transparent 70%); }
     .feature-glow-indigo:hover { box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3), 0 20px 40px -12px rgb(99 102 241 / 0.25); }
 
+    .feature-glow-teal-wrapper::before { background: radial-gradient(ellipse at center, rgb(20 184 166 / 0.12) 0%, rgb(20 184 166 / 0.04) 40%, transparent 70%); }
+    .feature-glow-teal:hover { box-shadow: 0 0 0 2px rgb(20 184 166 / 0.3), 0 20px 40px -12px rgb(20 184 166 / 0.25); }
+
+    .feature-glow-cyan-wrapper::before { background: radial-gradient(ellipse at center, rgb(6 182 212 / 0.12) 0%, rgb(6 182 212 / 0.04) 40%, transparent 70%); }
+    .feature-glow-cyan:hover { box-shadow: 0 0 0 2px rgb(6 182 212 / 0.3), 0 20px 40px -12px rgb(6 182 212 / 0.25); }
+
     .feature-list-item {
         display: flex;
         align-items: flex-start;
@@ -157,234 +165,242 @@
                 </div>
             </div>
 
-            <!-- Feature Cards Grid -->
-            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-
-                <!-- Status Page - Emerald -->
-                <div class="feature-card-wrapper feature-glow-emerald-wrapper">
-                    <a href="/product/status-page" class="feature-card feature-glow-emerald group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-emerald-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-50 to-emerald-100 ring-1 ring-emerald-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-emerald-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Status Page</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Beautiful, customizable status pages that build trust with your customers.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Unlimited pages & subscribers</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Public & private status pages</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Custom domains & branding</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Email, SMS & webhook alerts</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Scheduled maintenance</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-emerald-600 font-medium">Replaces Statuspage, Instatus</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
+            <!-- Feature Cards Carousel -->
+            <div class="relative">
+                <!-- Navigation Buttons -->
+                <div class="flex items-center justify-end gap-2 mb-6">
+                    <button onclick="scrollEssentialsCarousel(-1)" id="essentials-prev" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 ring-1 ring-gray-200 text-gray-400 cursor-not-allowed transition-all" disabled>
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
+                    </button>
+                    <button onclick="scrollEssentialsCarousel(1)" id="essentials-next" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 ring-1 ring-gray-300 text-gray-600 transition-all hover:bg-gray-300">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
+                    </button>
                 </div>
 
-                <!-- Incidents - Rose -->
-                <div class="feature-card-wrapper feature-glow-rose-wrapper">
-                    <a href="/product/incident-management" class="feature-card feature-glow-rose group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-rose-50 to-rose-100 ring-1 ring-rose-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-rose-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-                                </svg>
-                            </div>
+                <!-- Carousel Track -->
+                <div class="overflow-hidden rounded-2xl" id="essentials-carousel-viewport">
+                    <div class="flex gap-8 transition-transform duration-500 ease-in-out" id="essentials-carousel-track">
+
+                        <!-- Status Page - Emerald -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-emerald-wrapper">
+                            <a href="/product/status-page" class="feature-card feature-glow-emerald group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-emerald-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-50 to-emerald-100 ring-1 ring-emerald-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-emerald-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Status Page</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Beautiful, customizable status pages that build trust with your customers.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Unlimited pages & subscribers</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Public & private status pages</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom domains & branding</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Email, SMS & webhook alerts</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Scheduled maintenance</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-emerald-600 font-medium">Replaces Statuspage, Instatus</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Incident Management</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Detect, triage, and resolve incidents faster with automated workflows and clear ownership.</p>
+
+                        <!-- Incidents - Rose -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-rose-wrapper">
+                            <a href="/product/incident-management" class="feature-card feature-glow-rose group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-rose-50 to-rose-100 ring-1 ring-rose-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-rose-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Incident Management</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Detect, triage, and resolve incidents faster with automated workflows and clear ownership.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Automatic incident detection</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Slack & Teams integration</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom workflows</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Severity levels & escalation</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Blameless postmortems</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-rose-600 font-medium">Replaces Incident.io, FireHydrant</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Automatic incident detection</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Slack & Teams integration</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Custom workflows</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Severity levels & escalation</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Blameless postmortems</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-rose-600 font-medium">Replaces Incident.io, FireHydrant</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
+
+                        <!-- Monitoring - Blue -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-blue-wrapper">
+                            <a href="/product/uptime-monitoring" class="feature-card feature-glow-blue group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 ring-1 ring-blue-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-blue-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Uptime Monitoring</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Know when your services go down before your customers do. Monitor from any global locations.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">HTTP, TCP, UDP, DNS, ICMP</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Multi-step API monitoring</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">User journey monitoring</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Container, VM & Kubernetes</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">SSL certificate monitoring</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-blue-600 font-medium">Replaces Pingdom, UptimeRobot</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                    </a>
+
+                        <!-- On-Call - Stone -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-stone-wrapper">
+                            <a href="/product/on-call" class="feature-card feature-glow-stone group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-stone-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-stone-50 to-stone-100 ring-1 ring-stone-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-stone-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">On-Call Scheduling</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Get the right person notified at the right time. Fair rotations, smart escalations, zero burnout.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Call, SMS, Push + More</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Multi-tier escalation policies</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Flexible rotation schedules</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">User Vacation and OOO Policy</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Slack and Teams Integration</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-stone-600 font-medium">Replaces PagerDuty, Opsgenie</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
+                        </div>
+
+                        <!-- Maintenance - Teal -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-teal-wrapper">
+                            <a href="/product/scheduled-maintenance" class="feature-card feature-glow-teal group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-teal-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-teal-50 to-teal-100 ring-1 ring-teal-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-teal-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Maintenance</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Plan downtime before it plans itself. Keep users informed, not surprised.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Maintenance windows with start & end</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Auto-notify subscribers</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Status page integration</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Suppress alerts during maintenance</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Recurring maintenance schedules</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-teal-600 font-medium">Built-in, no extra tools needed</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
+                        </div>
+
+                    </div>
                 </div>
 
-                <!-- Monitoring - Blue -->
-                <div class="feature-card-wrapper feature-glow-blue-wrapper">
-                    <a href="/product/uptime-monitoring" class="feature-card feature-glow-blue group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 ring-1 ring-blue-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-blue-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Uptime Monitoring</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Know when your services go down before your customers do. Monitor from any global locations.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">HTTP, TCP, UDP, DNS, ICMP</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Multi-step API monitoring</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">User journey monitoring</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Container, VM & Kubernetes</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">SSL certificate monitoring</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-blue-600 font-medium">Replaces Pingdom, UptimeRobot</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
-                </div>
-
-                <!-- On-Call - Stone -->
-                <div class="feature-card-wrapper feature-glow-stone-wrapper">
-                    <a href="/product/on-call" class="feature-card feature-glow-stone group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-stone-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-stone-50 to-stone-100 ring-1 ring-stone-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-stone-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">On-Call Scheduling</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Get the right person notified at the right time. Fair rotations, smart escalations, zero burnout.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Call, SMS, Push + More</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Multi-tier escalation policies</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Flexible rotation schedules</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">User Vacation and OOO Policy</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Slack and Teams Integration</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-stone-600 font-medium">Replaces PagerDuty, Opsgenie</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
-                </div>
-
-                <!-- Scheduled Maintenance - Teal -->
-                <div class="feature-card-wrapper feature-glow-teal-wrapper">
-                    <a href="/product/scheduled-maintenance" class="feature-card feature-glow-teal group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-teal-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-teal-50 to-teal-100 ring-1 ring-teal-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-teal-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Maintenance</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Plan downtime before it plans itself. Keep users informed, not surprised.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Maintenance windows with start & end</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Auto-notify subscribers</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Status page integration</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Suppress alerts during maintenance</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Recurring maintenance schedules</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-teal-600 font-medium">Built-in, no extra tools needed</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
-                </div>
+                <!-- Progress Dots -->
+                <div class="flex items-center justify-center gap-2 mt-8" id="essentials-dots"></div>
             </div>
+
+            <script>
+            (function() {
+                const track = document.getElementById('essentials-carousel-track');
+                const viewport = document.getElementById('essentials-carousel-viewport');
+                const prevBtn = document.getElementById('essentials-prev');
+                const nextBtn = document.getElementById('essentials-next');
+                const dotsContainer = document.getElementById('essentials-dots');
+                const cards = track.children;
+                let currentIndex = 0;
+
+                function getVisibleCount() {
+                    if (window.innerWidth >= 1024) return 4;
+                    if (window.innerWidth >= 640) return 2;
+                    return 1;
+                }
+
+                function getMaxIndex() {
+                    return Math.max(0, cards.length - getVisibleCount());
+                }
+
+                function updateCarousel() {
+                    const visibleCount = getVisibleCount();
+                    const gap = 32; // gap-8 = 2rem = 32px
+                    const cardWidth = (viewport.offsetWidth - gap * (visibleCount - 1)) / visibleCount;
+                    const offset = currentIndex * (cardWidth + gap);
+                    track.style.transform = 'translateX(-' + offset + 'px)';
+
+                    // Update buttons
+                    const maxIdx = getMaxIndex();
+                    prevBtn.disabled = currentIndex === 0;
+                    prevBtn.classList.toggle('cursor-not-allowed', currentIndex === 0);
+                    prevBtn.classList.toggle('text-gray-400', currentIndex === 0);
+                    prevBtn.classList.toggle('bg-gray-100', currentIndex === 0);
+                    prevBtn.classList.toggle('bg-gray-200', currentIndex !== 0);
+                    prevBtn.classList.toggle('text-gray-600', currentIndex !== 0);
+                    prevBtn.classList.toggle('hover:bg-gray-300', currentIndex !== 0);
+
+                    nextBtn.disabled = currentIndex >= maxIdx;
+                    nextBtn.classList.toggle('cursor-not-allowed', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('text-gray-400', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('bg-gray-100', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('bg-gray-200', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('ring-1', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('ring-gray-200', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('ring-gray-300', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('text-gray-600', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('hover:bg-gray-300', currentIndex < maxIdx);
+
+                    // Update dots
+                    const totalPages = maxIdx + 1;
+                    dotsContainer.innerHTML = '';
+                    for (let i = 0; i < totalPages; i++) {
+                        const dot = document.createElement('button');
+                        dot.className = 'h-2 rounded-full transition-all duration-300 ' + (i === currentIndex ? 'w-6 bg-gray-400' : 'w-2 bg-gray-200 hover:bg-gray-300');
+                        dot.onclick = function() { currentIndex = i; updateCarousel(); };
+                        dotsContainer.appendChild(dot);
+                    }
+                }
+
+                window.scrollEssentialsCarousel = function(dir) {
+                    const maxIdx = getMaxIndex();
+                    currentIndex = Math.max(0, Math.min(maxIdx, currentIndex + dir));
+                    updateCarousel();
+                };
+
+                window.addEventListener('resize', function() {
+                    currentIndex = Math.min(currentIndex, getMaxIndex());
+                    updateCarousel();
+                });
+
+                updateCarousel();
+            })();
+            </script>
         </div>
     </div>
 </div>
@@ -429,193 +445,272 @@
                 </div>
             </div>
 
-            <!-- Feature Cards Grid -->
-            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-
-                <!-- Logs - Amber -->
-                <div class="feature-card-wrapper feature-glow-amber-wrapper">
-                    <a href="/product/logs-management" class="feature-card feature-glow-amber group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-amber-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-amber-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-amber-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Log Management</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Centralize, search, and analyze logs from all your services at any scale.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">OpenTelemetry support</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Lightning-fast full-text search</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Real-time log tailing</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Log-based alerting rules</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Any source, stack, or app</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-amber-600 font-medium">Replaces Splunk, Datadog Logs</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
+            <!-- Feature Cards Carousel -->
+            <div class="relative">
+                <div class="flex items-center justify-end gap-2 mb-6">
+                    <button onclick="scrollObservabilityCarousel(-1)" id="observability-prev" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 ring-1 ring-gray-200 text-gray-400 cursor-not-allowed transition-all" disabled>
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
+                    </button>
+                    <button onclick="scrollObservabilityCarousel(1)" id="observability-next" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 ring-1 ring-gray-300 text-gray-600 transition-all hover:bg-gray-300">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
+                    </button>
                 </div>
 
-                <!-- Metrics - Purple -->
-                <div class="feature-card-wrapper feature-glow-purple-wrapper">
-                    <a href="/product/metrics" class="feature-card feature-glow-purple group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-50 to-purple-100 ring-1 ring-purple-200">
-                                <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7"></path>
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20"></path>
-                                </svg>
-                            </div>
+                <div class="overflow-hidden rounded-2xl" id="observability-carousel-viewport">
+                    <div class="flex gap-8 transition-transform duration-500 ease-in-out" id="observability-carousel-track">
+
+                        <!-- Logs - Amber -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-amber-wrapper">
+                            <a href="/product/logs-management" class="feature-card feature-glow-amber group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-amber-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-amber-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-amber-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Log Management</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Centralize, search, and analyze logs from all your services at any scale.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">OpenTelemetry support</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Lightning-fast full-text search</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Real-time log tailing</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Log-based alerting rules</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Any source, stack, or app</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-amber-600 font-medium">Replaces Splunk, Datadog Logs</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Metrics</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Track system and application performance with high-resolution metrics.</p>
+
+                        <!-- Traces - Yellow -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-yellow-wrapper">
+                            <a href="/product/traces" class="feature-card feature-glow-yellow group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-yellow-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-50 to-yellow-100 ring-1 ring-yellow-200">
+                                        <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                            <rect x="2" y="3" width="20" height="4" rx="0.5"></rect>
+                                            <rect x="2" y="10" width="10" height="4" rx="0.5"></rect>
+                                            <rect x="2" y="17" width="5" height="4" rx="0.5"></rect>
+                                            <rect x="17" y="17" width="5" height="4" rx="0.5"></rect>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Distributed Traces</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Follow requests across your stack. See where time is spent and what's causing slowdowns.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">End-to-end request tracing</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Auto-generated service maps</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Span-level analysis</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Latency percentile tracking</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Trace microservices</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-yellow-600 font-medium">Replaces Jaeger, Zipkin</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">OpenTelemetry & Prometheus</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Custom application metrics</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Metric monitoring</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Threshold & anomaly alerts</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Visualize in dashboards</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-purple-600 font-medium">Replaces Datadog, Prometheus</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
+
+                        <!-- Exceptions - Orange -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-orange-wrapper">
+                            <a href="/product/exceptions" class="feature-card feature-glow-orange group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-orange-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-50 to-orange-100 ring-1 ring-orange-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-orange-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Error Tracking</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Capture, group, and track every exception. Get the context you need to fix bugs faster.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Full stack traces with context</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Intelligent error grouping</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Release & deployment tracking</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Issue assignment & workflows</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">AI-powered auto-fix</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-orange-600 font-medium">Replaces Sentry, Bugsnag</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
                         </div>
-                    </a>
+
+                        <!-- Kubernetes - Cyan -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-cyan-wrapper">
+                            <a href="/product/kubernetes" class="feature-card feature-glow-cyan group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-cyan-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-50 to-cyan-100 ring-1 ring-cyan-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-cyan-600">
+                                            <polygon stroke-linecap="round" stroke-linejoin="round" points="12,2.5 19.43,6.08 21.26,14.11 15.95,20.64 8.05,20.56 2.74,14.27 4.57,6.22"></polygon>
+                                            <circle cx="12" cy="12" r="2.2" stroke-linecap="round" stroke-linejoin="round"></circle>
+                                            <line x1="12" y1="9.8" x2="12" y2="4" stroke-linecap="round"></line>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Kubernetes</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Monitor Kubernetes clusters, pods, and workloads in real-time with full visibility.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Cluster & node monitoring</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Pod & container metrics</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Deployment tracking</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Resource utilization alerts</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Namespace-level insights</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-cyan-600 font-medium">Replaces Lens, K9s</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
+                        </div>
+
+                        <!-- Profiles - Rose -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-rose-wrapper">
+                            <a href="/product/profiles" class="feature-card feature-glow-rose group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-rose-50 to-rose-100 ring-1 ring-rose-200">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-rose-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"></path>
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Profiling</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">CPU and memory profiling with flamegraphs to find and fix performance bottlenecks.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">CPU & memory flamegraphs</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Continuous profiling</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Compare profiles over time</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Language-agnostic support</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Correlate with traces & logs</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-rose-600 font-medium">Replaces Pyroscope, pprof</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
+                        </div>
+
+                        <!-- Metrics - Purple -->
+                        <div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-purple-wrapper">
+                            <a href="/product/metrics" class="feature-card feature-glow-purple group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-50 to-purple-100 ring-1 ring-purple-200">
+                                        <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7"></path>
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <h3 class="text-lg font-semibold text-gray-900">Metrics</h3>
+                                    <p class="mt-2 text-sm text-gray-600 leading-relaxed">Track system and application performance with high-resolution metrics.</p>
+                                </div>
+                                <ul class="mt-5 space-y-3 flex-1">
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">OpenTelemetry & Prometheus</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom application metrics</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Metric monitoring</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Threshold & anomaly alerts</span></li>
+                                    <li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Visualize in dashboards</span></li>
+                                </ul>
+                                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
+                                    <p class="text-xs text-purple-600 font-medium">Replaces Datadog, Prometheus</p>
+                                    <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
+                                </div>
+                            </a>
+                        </div>
+
+                    </div>
                 </div>
 
-                <!-- Traces - Yellow -->
-                <div class="feature-card-wrapper feature-glow-yellow-wrapper">
-                    <a href="/product/traces" class="feature-card feature-glow-yellow group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-yellow-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-50 to-yellow-100 ring-1 ring-yellow-200">
-                                <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                    <rect x="2" y="3" width="20" height="4" rx="0.5"></rect>
-                                    <rect x="2" y="10" width="10" height="4" rx="0.5"></rect>
-                                    <rect x="2" y="17" width="5" height="4" rx="0.5"></rect>
-                                    <rect x="17" y="17" width="5" height="4" rx="0.5"></rect>
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Distributed Traces</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Follow requests across your stack. See where time is spent and what's causing slowdowns.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">End-to-end request tracing</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Auto-generated service maps</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Span-level analysis</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Latency percentile tracking</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Trace microservices</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-yellow-600 font-medium">Replaces Jaeger, Zipkin</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
-                </div>
-
-                <!-- Exceptions - Orange -->
-                <div class="feature-card-wrapper feature-glow-orange-wrapper">
-                    <a href="/product/exceptions" class="feature-card feature-glow-orange group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-orange-300 h-full">
-                        <div class="flex items-start justify-between">
-                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-50 to-orange-100 ring-1 ring-orange-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-orange-600">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <h3 class="text-lg font-semibold text-gray-900">Error Tracking</h3>
-                            <p class="mt-2 text-sm text-gray-600 leading-relaxed">Capture, group, and track every exception. Get the context you need to fix bugs faster.</p>
-                        </div>
-                        <ul class="mt-5 space-y-3 flex-1">
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Full stack traces with context</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Intelligent error grouping</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Release & deployment tracking</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">Issue assignment & workflows</span>
-                            </li>
-                            <li class="feature-list-item">
-                                <%- include('./Partials/tick-icon') %>
-                                <span class="text-sm text-gray-600">AI-powered auto-fix</span>
-                            </li>
-                        </ul>
-                        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
-                            <p class="text-xs text-orange-600 font-medium">Replaces Sentry, Bugsnag</p>
-                            <svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                            </svg>
-                        </div>
-                    </a>
-                </div>
+                <div class="flex items-center justify-center gap-2 mt-8" id="observability-dots"></div>
             </div>
+
+            <script>
+            (function() {
+                const track = document.getElementById('observability-carousel-track');
+                const viewport = document.getElementById('observability-carousel-viewport');
+                const prevBtn = document.getElementById('observability-prev');
+                const nextBtn = document.getElementById('observability-next');
+                const dotsContainer = document.getElementById('observability-dots');
+                const cards = track.children;
+                let currentIndex = 0;
+
+                function getVisibleCount() {
+                    if (window.innerWidth >= 1024) return 4;
+                    if (window.innerWidth >= 640) return 2;
+                    return 1;
+                }
+
+                function getMaxIndex() {
+                    return Math.max(0, cards.length - getVisibleCount());
+                }
+
+                function updateCarousel() {
+                    const visibleCount = getVisibleCount();
+                    const gap = 32;
+                    const cardWidth = (viewport.offsetWidth - gap * (visibleCount - 1)) / visibleCount;
+                    const offset = currentIndex * (cardWidth + gap);
+                    track.style.transform = 'translateX(-' + offset + 'px)';
+
+                    const maxIdx = getMaxIndex();
+                    prevBtn.disabled = currentIndex === 0;
+                    prevBtn.classList.toggle('cursor-not-allowed', currentIndex === 0);
+                    prevBtn.classList.toggle('text-gray-400', currentIndex === 0);
+                    prevBtn.classList.toggle('bg-gray-100', currentIndex === 0);
+                    prevBtn.classList.toggle('bg-gray-200', currentIndex !== 0);
+                    prevBtn.classList.toggle('text-gray-600', currentIndex !== 0);
+                    prevBtn.classList.toggle('hover:bg-gray-300', currentIndex !== 0);
+
+                    nextBtn.disabled = currentIndex >= maxIdx;
+                    nextBtn.classList.toggle('cursor-not-allowed', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('text-gray-400', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('bg-gray-100', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('bg-gray-200', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('ring-1', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('ring-gray-200', currentIndex >= maxIdx);
+                    nextBtn.classList.toggle('ring-gray-300', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('text-gray-600', currentIndex < maxIdx);
+                    nextBtn.classList.toggle('hover:bg-gray-300', currentIndex < maxIdx);
+
+                    const totalPages = maxIdx + 1;
+                    dotsContainer.innerHTML = '';
+                    for (let i = 0; i < totalPages; i++) {
+                        const dot = document.createElement('button');
+                        dot.className = 'h-2 rounded-full transition-all duration-300 ' + (i === currentIndex ? 'w-6 bg-gray-400' : 'w-2 bg-gray-200 hover:bg-gray-300');
+                        dot.onclick = function() { currentIndex = i; updateCarousel(); };
+                        dotsContainer.appendChild(dot);
+                    }
+                }
+
+                window.scrollObservabilityCarousel = function(dir) {
+                    const maxIdx = getMaxIndex();
+                    currentIndex = Math.max(0, Math.min(maxIdx, currentIndex + dir));
+                    updateCarousel();
+                };
+
+                window.addEventListener('resize', function() {
+                    currentIndex = Math.min(currentIndex, getMaxIndex());
+                    updateCarousel();
+                });
+
+                updateCarousel();
+            })();
+            </script>
         </div>
     </div>
 </div>