diff --git a/src/platform/features.njk b/src/platform/features.njk
index 74b791febe..bf2241c1a1 100644
--- a/src/platform/features.njk
+++ b/src/platform/features.njk
@@ -6,187 +6,295 @@ meta:
 description:
     FlowFuse provides the features companies require to reliably deliver industrial applications to devices and cloud in a collaborative, secure manner.
 sitemapPriority: 0.8
-hubspot:
-    script: "hubspot/hs-form.njk"
-    formId: 93ddc751-741d-4997-a22a-c05548a0a698
-    cta: "cta-download-platform-overview"
-    reference: "features"
+enterprise:
+  heading: 'Built for <span class="text-indigo-600">Enterprise Manufacturing</span>'
+  description: "FlowFuse is SOC 2 Type I and Type II certified, with role-based access control, single sign-on, audit logging, and air-gapped, self-hosted deployment options, built for the security and compliance requirements of large-scale manufacturing organizations."
+  badge: "components/icons/soc-2-badge.svg"
+  badgeLabel: "SOC 2 Type II"
+  items:
+    - icon: "components/icons/single-sign-on.svg"
+      label: "Single Sign-On"
+    - icon: "components/icons/audit-logs.svg"
+      label: "Audit Logs"
+    - icon: "components/icons/role-based-access.svg"
+      label: "Role-Based Access Control"
+    - icon: "components/icons/air-gapped-deployment.svg"
+      label: "Air-Gapped / Self-Hosted Deployment"
+  linkText: "Review our security and compliance details"
+  linkHref: "/platform/security/"
 ---
 
-<div class="nohero w-full">
-    <div class="w-full px-6">
-        <!-- Add modal structure -->
-        <div id="modal" class="hidden fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-white p-6 rounded-lg max-w-2xl w-full">
-                <span class="close absolute top-2 right-2 cursor-pointer text-xl">&times;</span>
-                <h2 id="download-platform-overview" class="mb-6 w-full text-center">Download Platform Overview</h2>
-                {% include hubspot.script %}
-            </div>
-        </div>
+<style>
+    .features-page { position: relative; }
+    .features-content { position: relative; z-index: 1; }
+    /* Modern, on-brand backdrop behind the hero: indigo + soft coral blobs, faint grid, fading to white */
+    .features-hero-bg {
+        position: absolute; top: 0; left: 0; right: 0; height: 560px;
+        z-index: 0; overflow: hidden; pointer-events: none;
+        background:
+            radial-gradient(48% 62% at 6% -6%, rgba(99,102,241,0.34), transparent 62%),
+            radial-gradient(44% 56% at 106% -4%, rgba(255,110,74,0.16), transparent 60%),
+            radial-gradient(35% 45% at 80% 38%, rgba(129,140,248,0.13), transparent 65%),
+            linear-gradient(180deg, #E7EAFF 0%, #EEF0FF 26%, #ffffff 74%);
+    }
+    .features-hero-bg::after {
+        content: ""; position: absolute; inset: 0;
+        background-image:
+            linear-gradient(to right, rgba(79,70,229,0.08) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(79,70,229,0.08) 1px, transparent 1px);
+        background-size: 42px 42px;
+        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 68%);
+        mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 68%);
+    }
+</style>
+<div class="nohero w-full features-page">
+    <div class="features-hero-bg" aria-hidden="true"></div>
+    <div class="w-full px-6 features-content">
         <div class="pt-12 pb-20 max-w-screen-lg mx-auto">
             <!--Hero Content-->
-            <div class="container text-center max-w-4xl mx-auto">
-                    <h1 class="m-auto leading-normal">
-                        FlowFuse Platform <span class="text-indigo-600">Features</span>
-                    </h1>
-                    <h2 class="text-xl text-indigo-400 mt-6 sm:mt-1">
-                        Low-Code Development Meets Industrial Strength
-                    </h2>
-                    <p class="text-center m-auto mt-6">Bridging the gaps between OT and IT, FlowFuse provides a comprehensive platform for all your industrial data connectivity needs, delivered with enterprise-grade control and security.</p>
-                    <div class="m-auto my-8 flex gap-6 items-center justify-center flex-row pb-2">
-                        <a class="ff-btn ff-btn--primary flex flex-col" href="/contact-us"
-                            onclick="capture('cta-contact-us', {'position': 'hero'})">
-                            <span class="text-base flex gap-2 uppercase items-center">
-                                Contact us
-                            </span>
-                        </a>
-                        <a class="ff-btn ff-btn--primary-outlined flex flex-col" onclick="openModal(event)">
-                            <span class="text-base uppercase items-center">
-                                DOWNLOAD PLATFORM OVERVIEW
-                            </span>
-                        </a>
+            <div class="container max-w-screen-lg mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+                    <!--Left: headline, subhead, copy, CTAs-->
+                    <div class="text-left">
+                        <h1 class="leading-tight text-4xl sm:text-5xl font-bold">
+                            Build, deploy, and govern industrial applications - in record time.
+                        </h1>
+                        <p class="mt-6 text-lg text-gray-500 max-w-xl">Bridge the gap between OT and IT teams using FlowFuse, the only comprehensive application platform with industrial AI and governance baked in.</p>
+                        <div class="mt-8 flex gap-4 items-start sm:items-center justify-start flex-col sm:flex-row">
+                            <a class="ff-btn ff-btn--primary flex flex-col" href="/book-demo/"
+                                onclick="capture('cta-request-demo', {'position': 'hero'})">
+                                <span class="text-base flex gap-2 uppercase items-center">
+                                    Request a Demo
+                                </span>
+                            </a>
+                            <a class="ff-btn ff-btn--primary-outlined flex flex-col" href="/pricing/" onclick="capture('cta-pricing', {'position': 'hero'})">
+                                <span class="text-base uppercase items-center">
+                                    View Pricing
+                                </span>
+                            </a>
+                        </div>
                     </div>
-                    <div class="max-w-[750px] m-auto border-indigo-300 border-2 ff-image-cover rounded-md">
-                        {% image "./images/features/flowfuse-features-hero.png", "FlowFuse Features", [750] %}
+                    <!--Right: scroll-tilted product screenshot (flat PNG on a CSS 3D plane)-->
+                    <div class="ff-hero-3d w-full" style="perspective: 1200px;">
+                        <div class="ff-hero-3d__inner ff-image-cover rounded-lg shadow-2xl border border-gray-200" style="transform-style: preserve-3d; transform-origin: center center; will-change: transform; transform: rotateY(-8deg);">
+                            {% image "./images/features/flowfuse-features-hero.png", "FlowFuse Features", [750] %}
+                        </div>
                     </div>
+                </div>
+                <script>
+                // Scroll-driven 3D rotation for the hero image (n8n-style): a flat PNG on a CSS
+                // perspective plane that eases from a tilt to flat as you scroll down the page.
+                (function () {
+                    var wrap = document.querySelector('.ff-hero-3d');
+                    if (!wrap) return;
+                    var inner = wrap.querySelector('.ff-hero-3d__inner');
+                    if (!inner) return;
+                    var START_Y = -8;  // starting rotateY in degrees (0 = flat facing viewer); negative = left edge recedes
+                    var DIST = 500;    // px of scroll over which it flattens
+                    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                        inner.style.transform = 'none'; return; // respect reduced-motion
+                    }
+                    var ticking = false;
+                    function update() {
+                        ticking = false;
+                        var y = window.scrollY || window.pageYOffset || 0;
+                        var p = Math.max(0, Math.min(1, y / DIST));
+                        inner.style.transform = 'rotateY(' + (START_Y * (1 - p)).toFixed(2) + 'deg)';
+                    }
+                    function onScroll() { if (!ticking) { ticking = true; requestAnimationFrame(update); } }
+                    window.addEventListener('scroll', onScroll, { passive: true });
+                    window.addEventListener('resize', onScroll, { passive: true });
+                    update();
+                })();
+                </script>
             </div>
             <!--Low-code-->
             <div class="mt-24">
                 <h2 class="mb-10 max-sm:text-center">
-                    <span class="text-indigo-600">Low-Code</span> Development
+                    The needs of modern industry requires <span class="text-indigo-600">modern solutions</span>
                 </h2>
-                <section>
-                        <div class="float-left min-w-[110px] w-[110px] md:w-[135px] mr-6 mb-3 ff-image-rounded rounded-md border-2 border-white shadow-2xl">
-                            {% image "./images/node-red-icon.png", "Node-RED logo", [131] %}
+                <!--Modern industry: differentiator cards-->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+                    <div class="rounded-lg bg-indigo-50/50 p-6 pt-8 flex flex-col gap-4">
+                        <h3 class="text-2xl font-light text-indigo-600">Vendor-Free Open Source</h3>
+                        <p class="mb-0">Every factory is different, so why deploy the same solution as everyone else? Build your way with ready-made blueprints, your own app store, or anything in between — we never dictate your tools.</p>
+                    </div>
+                    <div class="rounded-lg bg-indigo-50/50 p-6 pt-8 flex flex-col gap-4">
+                        <h3 class="text-2xl font-light text-indigo-600">Flexible and Secure</h3>
+                        <p class="mb-0">From whole-factory rollouts to last-mile fixes across any industry. Build your solution, then secure it with granular RBAC, auditing, version control, and traceability.</p>
+                    </div>
+                    <div class="rounded-lg bg-indigo-50/50 p-6 pt-8 flex flex-col gap-4">
+                        <h3 class="text-2xl font-light text-indigo-600">Seamless Collaboration</h3>
+                        <p class="mb-0">OT teams prototype and deploy fast while IT keeps the governance, security, and auditability they need — no trade-offs.</p>
+                    </div>
+                </div>
+    <!--What's inside the platform (tier scrollytelling)-->
+    <div class="w-full px-6">
+        <div class="max-w-screen-lg mx-auto pt-8 pb-20">
+            <h2 class="mb-12 max-sm:text-center">Find the Product for <span class="text-indigo-600">How You Work</span></h2>
+            <div class="flex flex-col lg:flex-row gap-10">
+                <!-- Sticky tab nav (desktop) -->
+                <nav class="hidden lg:block lg:w-60 shrink-0">
+                    <ul class="flex flex-col border-l border-gray-200" style="position: sticky; top: 6rem;">
+                        <li><a href="#tier-edge" class="wip-tab">FlowFuse Edge</a></li>
+                        <li><a href="#tier-hub" class="wip-tab">FlowFuse Hub</a></li>
+                        <li><a href="#tier-fleet" class="wip-tab">FlowFuse Fleet</a></li>
+                    </ul>
+                </nav>
+                <!-- Steps -->
+                <div class="flex-1 min-w-0 flex flex-col gap-20">
+                    <!-- Edge -->
+                    <div id="tier-edge" class="wip-step scroll-mt-24 grid md:grid-cols-2 gap-12 items-center">
+                        <div>
+                            <div class="text-sm font-semibold uppercase tracking-wide text-gray-500">FlowFuse Edge</div>
+                            <h3 class="text-3xl font-bold mt-2">You run the plant floor</h3>
+                            <p class="mt-4 text-gray-500">Connect PLCs, machines, and controllers. Standardize automation across sites instead of reinventing it plant by plant. Built for OT and digitalization leadership running production at scale.</p>
+                            <p class="mt-4 text-sm text-gray-500 italic">Ideal fit if you're dealing with: multi-plant rollouts, PLC/SCADA integration, machine connectivity, or Node-RED sprawl across sites.</p>
+                            <a class="mt-6 inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline" href="/pricing/" onclick="capture('cta-learn-more', {'position': 'features-edge'})">Learn more about FlowFuse Edge &rarr;</a>
                         </div>
-                    <p><a href="/node-red">Node-RED</a> is at the core of the FlowFuse platform. The low-code visual programming environment is the development experience you enjoy when using FlowFuse. This includes accessing the large community of Node-RED nodes to connect with various protocols, hardware platforms, databases, services, and more. Led by the creator of Node-RED and CTO of FlowFuse, Nick O’Leary, our team is deeply invested in the Node-RED Community and is committed to the success of the open-source project.</p>
-            <!-- Industrial Automation -->
-            <div class="w-full pt-2 mt-16">
-                <div class="max-w-md sm:max-w-screen-lg mx-auto">
-                    <div class="mx-auto w-full md:max-w-screen-lg gap-x-8 gap-y-14">
-                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
-                            {% set sections = [
-                            {
-                            title: "Connect",
-                            text: "Integrate seamlessly with industry-standard protocols to ensure secure communication with your
-                            devices.",
-                            svgPath: "components/icons/arrows.svg",
-                            image1: "./images/home/connect_graphic.png",
-                            image1Alt: "Icons of communication protocols",
-                            url: "/use-cases/edge-connectivity/"
-                            },
-                            {
-                            title: "Collect & Transform",
-                            text: "Gather and standardise data from various sources into a unified format for powerful insights.",
-                            svgPath: "components/icons/data-block.svg",
-                            image1: "./images/home/collect_graphic.png",
-                            image1Alt: "Icons of files formats",
-                            url: "/use-cases/data-integration/"
-                            },
-                            {
-                            title: "Visualise",
-                            text: "Turn data into actionable insights with customisable dashboards and real-time monitoring.",
-                            svgPath: "components/icons/chart.svg",
-                            image1: "./images/home/visualise_graphic.png",
-                            image1Alt: "Dashboard charts",
-                            url: "/platform/dashboard/"
-                            },
-                            {
-                            title: "Interact",
-                            text: "Control systems directly from the dashboard, enabling real-time adjustments and responsiveness.",
-                            svgPath: "components/icons/bolt.svg",
-                            image1: "./images/home/interact_graphic.png",
-                            image1Alt: "Dashboard charts with interactive elements",
-                            url: "/platform/dashboard/"
-                            }
-                            ] %}
-                            {% for section in sections %}
-                            <a href="{{ section.url }}" class="rounded-lg bg-indigo-50/50 p-5 pt-8 flex flex-col gap-6 md:gap-10 md:flex-row hover:bg-indigo-50 hover:no-underline transition ease-in-out duration-300">
-                                <div class="flex flex-col md:min-h-64">
-                                    <div>
-                                        <div class="flex flex-row max-md:justify-center items-center text-indigo-600">
-                                            <div class="w-10 h-10 text-indigo-600 mr-2">
-                                                {% set svgPath = section.svgPath %}
-                                                {% include svgPath %}
-                                            </div>
-                                            <h3 class="text-2xl font-light text-indigo-600">{{ section.title }}</h3>
-                                        </div>
-                                        <p>{{ section.text }}</p>
-                                    </div>
-                                    <div class="flex flex-grow items-center max-md:mt-6">
-                                        {% image section.image1, section.image1Alt, [455] %}
-                                    </div>
-                                </div>
-                            </a>
-                            {% endfor %}
+                        <div class="wip-hero-img">
+                            {% image "./images/home/home-edge-connectivity.png", "FlowFuse Edge: industrial edge connectivity", [600] %}
                         </div>
                     </div>
+                    <!-- Hub -->
+                    <div id="tier-hub" class="wip-step scroll-mt-24 grid md:grid-cols-2 gap-12 items-center">
+                        <div>
+                            <div class="text-sm font-semibold uppercase tracking-wide text-gray-500">FlowFuse Hub</div>
+                            <h3 class="text-3xl font-bold mt-2">You move data across the business</h3>
+                            <p class="mt-4 text-gray-500">Integrate and orchestrate data across ERPs, databases, and cloud APIs — governed centrally, not stitched together app by app. Built for central IT and enterprise architecture teams.</p>
+                            <p class="mt-4 text-sm text-gray-500 italic">Ideal fit if you're dealing with: system integration, API orchestration, data pipelines, or governance across business systems.</p>
+                            <a class="mt-6 inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline" href="/pricing/" onclick="capture('cta-learn-more', {'position': 'features-hub'})">Learn more about FlowFuse Hub &rarr;</a>
+                        </div>
+                        <div class="wip-hero-img">
+                            {% image "./images/home/home-data-integration.png", "FlowFuse Hub: enterprise data integration", [600] %}
+                        </div>
+                    </div>
+                    <!-- Fleet -->
+                    <div id="tier-fleet" class="wip-step scroll-mt-24 grid md:grid-cols-2 gap-12 items-center">
+                        <div>
+                            <div class="text-sm font-semibold uppercase tracking-wide text-gray-500">FlowFuse Fleet</div>
+                            <h3 class="text-3xl font-bold mt-2">You manage a Node-RED fleet</h3>
+                            <p class="mt-4 text-gray-500">Push flows, ship updates, and roll back remotely across thousands of distributed devices, without waiting on a firmware release. Built for hardware OEMs, partners, and asset operators.</p>
+                            <p class="mt-4 text-sm text-gray-500 italic">Ideal fit if you're dealing with: distributed devices, remote sites, sensors and telemetry at scale, or shipping Node-RED inside your own product.</p>
+                            <a class="mt-6 inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline" href="/pricing/" onclick="capture('cta-learn-more', {'position': 'features-fleet'})">Learn more about FlowFuse Fleet &rarr;</a>
+                        </div>
+                        <div class="wip-hero-img">
+                            {% image "./images/screen-pseudo-devices.png", "FlowFuse Fleet: device fleet management console", [600] %}
+                        </div>
+                    </div>
+
                 </div>
             </div>
-                </section>
-            </div>
         </div>
     </div>
-    <!--FlowFuse-->
-    <div class="w-full bg-gray-50 px-6">
-        <div class="max-w-screen-lg flex flex-col sm:grid sm:grid-cols-2 gap-6 mx-auto pt-16 pb-20">
-            <div class="col-span-2">
-            <h2 class="mb-6 max-sm:text-center">FlowFuse: The Industrial Application Platform</h2>
-            <p>In an enterprise environment, industrial application deployments need to be robust, secure, and scalable. FlowFuse bridges the gap between IT and OT, offering key features like robust security protocols to protect sensitive data, streamlined management tools for effortless scaling, and compliance frameworks to ensure adherence to industry standards. With FlowFuse, your solutions evolve from agile prototypes to enterprise-grade powerhouses, ready to tackle the complexities of your business operations.</p>
-            </div>
-            {%- for f in features -%}
-            <div class="container prose border-2 border-indigo-100 rounded-lg p-6">
-                <div class="md:items-center">
-                    {% if f.imageFile %}
-                    <div class="flex justify-center items-center w-full">
-                        <div class="w-[100px] sm:w-[143px] mb-2">
-                            {% set imageSrc = [f.imageFolder, f.imageFile] | join %}
-                            {% set imageDescription = ["Image depicting", f.imageAlt] | join %}
-                            {% image imageSrc, imageDescription, [250] %}
+    <style>
+        .wip-tab { display:block; padding:0.6rem 0 0.6rem 1.25rem; margin-left:-1px; border-left:2px solid transparent; color:#6b7280; font-weight:500; transition:color .2s ease, border-color .2s ease; }
+        .wip-tab:hover { color:#4f46e5; }
+        .wip-tab.is-active { color:#4f46e5; border-left-color:#4f46e5; }
+        /* Tailwind gap-20/scroll-mt-24 don't compile in the legacy CSS build, so space the steps here */
+        .wip-step { scroll-margin-top: 6rem; }
+        .wip-step + .wip-step { margin-top: 5rem; padding-top: 5rem; border-top: 1px solid #f1f1f4; }
+        .wip-hero-img { align-self: start; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 12px 32px rgba(2,6,13,0.12); border: 1px solid #e5e7eb; }
+        .wip-hero-img img { display: block; width: 100%; height: auto; }
+        /* ff-btn is display:flex (full-width); keep the pricing CTAs sized to their content */
+        .wip-step .ff-btn { display: inline-flex; }
+    </style>
+    <script>
+        // Active-tab tracking for the "What's inside the platform" section.
+        // IntersectionObserver (not scroll+rAF) — highlights the tab whose step crosses the viewport's vertical middle.
+        (function () {
+            var tabs = {};
+            document.querySelectorAll('.wip-tab').forEach(function (t) { tabs[t.getAttribute('href').slice(1)] = t; });
+            var steps = document.querySelectorAll('.wip-step');
+            if (!steps.length) return;
+            var obs = new IntersectionObserver(function (entries) {
+                entries.forEach(function (e) {
+                    if (e.isIntersecting) {
+                        Object.keys(tabs).forEach(function (k) { tabs[k].classList.remove('is-active'); });
+                        if (tabs[e.target.id]) tabs[e.target.id].classList.add('is-active');
+                    }
+                });
+            }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });
+            steps.forEach(function (s) { obs.observe(s); });
+        })();
+    </script>
+    <!-- ============================================================
+         FLOWFUSE PLATFORM (core, moved out of the sticky-nav block)
+    ============================================================ -->
+                    <div class="w-full px-6">
+        <div class="max-w-screen-lg mx-auto pt-8 pb-20">
+                        <div>
+                            <h2 class="m-0">The FlowFuse Platform is the Foundation for All of your IT/OT Applications</h2>
+                            <p class="mt-6 text-gray-500">Leveraging enterprise-grade development, deployment, and governance solutions, you can build faster, scale more efficiently, and secure deployments of any size.</p>
+                            <div class="mt-10">
+                                <div class="text-sm font-semibold uppercase tracking-wide text-gray-500 mb-4">Integrations</div>
+                                <div class="cap-links">
+                                    <a class="cap-link" href="/ai/">Industrial AI</a>
+                                    <a class="cap-link" href="/use-cases/it-ot-middleware/">IT/OT Middleware</a>
+                                    <a class="cap-link" href="/use-cases/uns/">Unified Namespace</a>
+                                    <a class="cap-link" href="/use-cases/mes/">MES</a>
+                                    <a class="cap-link" href="/use-cases/scada/">SCADA</a>
+                                    <a class="cap-link" href="/use-cases/edge-connectivity/">Edge Connectivity</a>
+                                    <a class="cap-link" href="/use-cases/data-integration/">Data Integration</a>
+                                </div>
+                            </div>
                         </div>
+                        <style>
+                            .cap-links { display:flex; flex-wrap:nowrap; gap:.5rem; }
+                            .cap-link { white-space:nowrap; display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .8rem; border:1px solid #e5e7eb; border-radius:9999px; font-size:.8rem; font-weight:500; color:#374151; background:#fff; transition:border-color .15s ease, color .15s ease, background .15s ease; }
+                            @media (max-width: 900px) { .cap-links { flex-wrap:wrap; } }
+                            .cap-link::after { content:"\2192"; color:#a5b4fc; }
+                            .cap-link:hover { border-color:#4f46e5; color:#4f46e5; background:#eef2ff; }
+                            .cap-link:hover::after { color:#4f46e5; }
+                        </style>
                     </div>
-                    {% endif %}
-                    <div>
-                        <h3 class="w-full text-center font-semibold max-sm:mt-3 text-xl">
-                            {{ f.title }}
-                        </h3>
-                        <p class="mb-0">
-                            {{ f.content | safe }}
-                        </p>
-                        <ul>
-                            {% if f.list %}
-                            {%- for item in f.list -%}
-                            <li>{{ item }}</li>
-                            {%- endfor -%}
-                            {% endif %}
-                        </ul>
+    </div>
+    <!-- ============================================================
+         BUILT FOR ENTERPRISE MANUFACTURING (reused from industries/automotive.njk)
+    ============================================================ -->
+    <section class="w-full comparison-section-bg py-20 px-6">
+        <div class="max-w-screen-lg mx-auto flex flex-col md:flex-row gap-12 items-center justify-between">
+            <div class="shrink md:shrink md:basis-2/5 md:min-w-0 max-md:text-center">
+                <h2 class="m-0">{{ enterprise.heading | safe }}</h2>
+                <p class="text-gray-600">{{ enterprise.description }}</p>
+                <a href="{{ enterprise.linkHref }}" class="flex items-center gap-1.5 text-blue-600 hover:underline max-md:justify-center">
+                    {{ enterprise.linkText }}
+                    {% include "components/icons/arrow-long-right.svg" %}
+                </a>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-7 gap-4 w-full max-w-md md:max-w-[646px] md:shrink md:basis-3/5 md:min-w-0">
+                <div class="col-span-2 md:col-span-3 md:row-span-2 flex flex-col items-center justify-between gap-4 rounded-xl border border-white p-5 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/10%)_100%)]">
+                    <div class="w-full max-w-[220px] aspect-square m-auto">
+                        {% include enterprise.badge %}
+                    </div>
+                    <p class="text-gray-500 text-sm m-0">{{ enterprise.badgeLabel }}</p>
+                </div>
+                {% for item in enterprise.items %}
+                <div class="md:col-span-2 flex flex-col gap-2 items-center justify-center text-center rounded-xl border border-white p-3 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/10%)_100%)]">
+                    <div class="w-full max-w-14 aspect-square">
+                        {% include item.icon %}
                     </div>
+                    <p class="text-gray-600 text-sm m-0">{{ item.label }}</p>
                 </div>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+
             </div>
-        {%- endfor -%}
         </div>
     </div>
     <div class="w-full px-6">
-        <div class="m-auto text-center sm:text-left py-20 max-w-screen-lg">
-            {% include "get-started.njk" %}
+        <div class="max-w-screen-lg mx-auto pt-4 pb-20">
+            <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center" style="background: radial-gradient(ellipse 50% 150% at 50% 100%, #6366f1, #211c64)">
+                <p class="text-white text-4xl sm:text-5xl font-medium m-0">Get Started with FlowFuse</p>
+                <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit.</p>
+                <div class="flex flex-col sm:flex-row gap-4 items-center">
+                    <a class="ff-btn ff-btn--highlight" href="/book-demo/" onclick="capture('cta-request-demo', {'position': 'get-started'})">Request a Demo</a>
+                    <a class="ff-btn" style="background:#ffffff;color:#211c64;" href="/pricing/" onclick="capture('cta-pricing', {'position': 'get-started'})">View Pricing</a>
+                </div>
+            </div>
         </div>
     </div>
 </div>
-
-<!-- Add JavaScript to handle modal display -->
-<script>
-    function openModal(event) {
-        event.preventDefault();
-        document.getElementById('modal').classList.remove('hidden');
-    }
-
-    document.querySelector('.close').onclick = function() {
-        document.getElementById('modal').classList.add('hidden');
-    }
-
-    window.onclick = function(event) {
-        if (event.target == document.getElementById('modal')) {
-            document.getElementById('modal').classList.add('hidden');
-        }
-    }
-</script>
\ No newline at end of file