diff --git a/src/components/home-page/HeroVideoInline.tsx b/src/components/home-page/HeroVideoInline.tsx
new file mode 100644
index 0000000..d2bee76
--- /dev/null
+++ b/src/components/home-page/HeroVideoInline.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Maximize2 } from "lucide-react";
+
+interface HeroVideoInlineProps {
+  sources: string[];
+  poster?: string;
+  onExpand?: () => void;
+  className?: string;
+  aspectClassName?: string;
+}
+
+// Muted autoplay loop of the demo clips, cycling through `sources`. Muting is
+// required for browsers to allow autoplay without a user gesture; onExpand
+// opens the fullscreen modal with sound + controls.
+const HeroVideoInline: React.FC<HeroVideoInlineProps> = ({
+  sources,
+  poster,
+  onExpand,
+  className = "",
+  aspectClassName = "aspect-video",
+}) => {
+  const [index, setIndex] = useState(0);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    videoRef.current?.play().catch(() => {});
+  }, [index]);
+
+  const currentSrc = sources[index];
+
+  return (
+    <div
+      className={`group relative rounded-xl shadow-md shadow-black/5 transition-shadow duration-500 hover:shadow-lg hover:shadow-purple-900/20 ${className}`}
+    >
+      {/* gradient frame, faded in on hover */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-px rounded-xl bg-gradient-to-br from-secondary-wopee via-purple-500 to-primary-wopee opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+      />
+      <div
+        role={onExpand ? "button" : undefined}
+        tabIndex={onExpand ? 0 : undefined}
+        onClick={onExpand}
+        onKeyDown={(e) => {
+          if (onExpand && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            onExpand();
+          }
+        }}
+        aria-label={onExpand ? "Expand product demo video" : undefined}
+        className={`relative overflow-hidden rounded-xl ${aspectClassName} cursor-pointer border border-gray-200/70 dark:border-gray-700/50 transition-colors duration-500 group-hover:border-transparent`}
+      >
+        <video
+          ref={videoRef}
+          key={`hero-inline-${index}`}
+          autoPlay
+          muted
+          playsInline
+          poster={poster}
+          onEnded={() => setIndex((i) => (i + 1) % sources.length)}
+          className="w-full h-full object-cover grayscale opacity-[0.28] transition-all duration-500 ease-out group-hover:grayscale-0 group-hover:opacity-100"
+        >
+          <source src={currentSrc} type="video/webm" />
+          <source src={currentSrc.replace(".webm", ".mp4")} type="video/mp4" />
+        </video>
+
+        {onExpand && (
+          <span className="absolute top-2 right-2 inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <Maximize2 className="w-4 h-4" />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeroVideoInline;
diff --git a/src/components/home-page/HeroVideoModal.tsx b/src/components/home-page/HeroVideoModal.tsx
index 1c88f2e..65ba693 100644
--- a/src/components/home-page/HeroVideoModal.tsx
+++ b/src/components/home-page/HeroVideoModal.tsx
@@ -1,14 +1,22 @@
 import React, { useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
 
+interface HeroVideoStep {
+  number?: number;
+  title: string;
+  subtitle?: string;
+}
+
 interface HeroVideoModalProps {
   sources: string[];
+  steps?: HeroVideoStep[];
   isOpen: boolean;
   onClose: () => void;
 }
 
 const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
   sources,
+  steps,
   isOpen,
   onClose,
 }) => {
@@ -46,6 +54,7 @@ const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
   if (!isOpen) return null;
 
   const currentSrc = sources[index];
+  const hasSteps = !!steps && steps.length === sources.length;
 
   return (
     <div
@@ -55,7 +64,7 @@ const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
       aria-label="Product walkthrough video"
     >
       <div
-        className="relative w-full max-w-6xl"
+        className="relative w-full max-w-5xl"
         onClick={(e) => e.stopPropagation()}
       >
         <video
@@ -65,7 +74,7 @@ const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
           controls
           playsInline
           onEnded={handleEnded}
-          className="w-full h-auto rounded-lg shadow-2xl"
+          className="w-full h-auto max-h-[70vh] rounded-lg shadow-2xl bg-black"
         >
           <source src={currentSrc} type="video/webm" />
           <source src={currentSrc.replace(".webm", ".mp4")} type="video/mp4" />
@@ -79,16 +88,60 @@ const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
           <X className="w-5 h-5" />
         </button>
 
-        <div className="absolute bottom-3 left-3 right-3 flex items-center gap-1.5 pointer-events-none">
-          {sources.map((_, i) => (
-            <span
-              key={i}
-              className={`h-1 flex-1 rounded-full ${
-                i === index ? "bg-primary-wopee" : "bg-white/30"
-              }`}
-            />
-          ))}
-        </div>
+        {hasSteps ? (
+          // Step cards double as the progress stepper — the playing clip's
+          // card is highlighted, and each card jumps to its clip. Titles +
+          // subtitles mirror the "How it works" section (same video fragments).
+          <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3">
+            {steps!.map((s, i) => {
+              const active = i === index;
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setIndex(i)}
+                  aria-current={active}
+                  className={`text-left rounded-lg border p-3 transition-colors ${
+                    active
+                      ? "border-primary-wopee bg-primary-wopee/10"
+                      : "border-white/15 bg-white/5 hover:border-white/40"
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold flex-shrink-0 ${
+                        active
+                          ? "bg-primary-wopee text-black"
+                          : "bg-white/15 text-white"
+                      }`}
+                    >
+                      {s.number ?? i + 1}
+                    </span>
+                    <span className="text-sm font-semibold text-white leading-tight">
+                      {s.title}
+                    </span>
+                  </div>
+                  {s.subtitle && (
+                    <p className="mt-1 text-xs text-gray-400 leading-snug">
+                      {s.subtitle}
+                    </p>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="absolute bottom-3 left-3 right-3 flex items-center gap-1.5 pointer-events-none">
+            {sources.map((_, i) => (
+              <span
+                key={i}
+                className={`h-1 flex-1 rounded-full ${
+                  i === index ? "bg-primary-wopee" : "bg-white/30"
+                }`}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/home-page/HomeHeroVibe.tsx b/src/components/home-page/HomeHeroVibe.tsx
index 002e0b4..4a98d47 100644
--- a/src/components/home-page/HomeHeroVibe.tsx
+++ b/src/components/home-page/HomeHeroVibe.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from "react";
 import {
   Globe,
   AppWindow,
+  FlaskConical,
   Landmark,
   ShoppingCart,
   Play,
@@ -9,6 +10,7 @@ import {
   Sparkles,
   ChevronDown,
   Check,
+  CheckCircle2,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -16,7 +18,9 @@ import { Button } from "@/components/ui/button";
 import { AppType } from "./vibe/enums";
 import LoginDialog from "./vibe/LoginDialog";
 import HeroVideoModal from "./HeroVideoModal";
+import HeroVideoInline from "./HeroVideoInline";
 import HeroTrustedByStrip from "./HeroTrustedByStrip";
+import { stepsData } from "../../data/steps";
 
 const appTemplates = {
   [AppType.WEBSITE]: {
@@ -70,11 +74,9 @@ const DEMO_SCENARIOS: AppType[] = [
 const URL_REGEX =
   /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
 
-const heroVideoSources = [
-  "/how-it-works/step-1.webm",
-  "/how-it-works/step-2.webm",
-  "/how-it-works/step-3.webm",
-];
+// Same clips (and order) as the "How it works" section, so the fullscreen
+// modal can label each fragment with its step title/subtitle.
+const heroVideoSources = stepsData.map((s) => s.videoSrc);
 
 const HomeHeroVibe = () => {
   const [appUrl, setAppUrl] = useState(appTemplates[defaultTemplate].url);
@@ -135,10 +137,9 @@ const HomeHeroVibe = () => {
   const triggerDemo = DEMO_SCENARIOS.includes(appType)
     ? appType
     : AppType.E_COMMERCE;
-  const TriggerIcon = appTemplates[triggerDemo].icon;
 
   return (
-    <div className="relative lg:min-h-[calc(100vh-100px)] flex flex-col justify-center items-center gap-5 lg:gap-6 overflow-hidden py-5 lg:py-6">
+    <div className="relative min-h-screen flex flex-col justify-center items-center gap-2 lg:gap-3 overflow-hidden py-2 lg:py-3">
       <div
         className="pointer-events-none select-none absolute inset-0 w-full h-full bg-gradient-to-br from-blue-50 via-purple-50 to-indigo-100 dark:from-gray-900 dark:via-purple-900/20 dark:to-indigo-900/20 z-0"
         style={{
@@ -149,24 +150,15 @@ const HomeHeroVibe = () => {
         }}
       />
 
-      <section className="relative z-10 flex flex-col items-center gap-3 md:gap-4 px-4">
-        <button
-          type="button"
-          onClick={() => setVideoOpen(true)}
-          className="group inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium bg-gray-900/5 dark:bg-white/5 backdrop-blur border border-gray-900/10 dark:border-white/15 text-gray-700 dark:text-gray-200 hover:border-secondary-wopee dark:hover:border-primary-wopee transition-colors"
-        >
+      <section className="relative z-10 flex flex-col items-center gap-2 md:gap-3 px-4">
+        <div className="inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium bg-gray-900/5 dark:bg-white/5 backdrop-blur border border-gray-900/10 dark:border-white/15 text-gray-700 dark:text-gray-200">
           <span className="w-1.5 h-1.5 rounded-full bg-primary-wopee" />
           <span>
             Playwright-friendly · Self-healing · <strong className="font-semibold">Free to start</strong>
           </span>
-          <span className="opacity-30">·</span>
-          <span className="inline-flex items-center gap-1.5 text-secondary-wopee dark:text-primary-wopee group-hover:underline">
-            <Play className="w-3 h-3 fill-current" />
-            Watch demo
-          </span>
-        </button>
+        </div>
         <h1
-          className="font-bold text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-pretty leading-[1] tracking-tighter"
+          className="font-bold text-center text-4xl sm:text-5xl md:text-6xl text-pretty leading-[1] tracking-tighter"
           style={{ textShadow: "0 4px 30px rgba(0,0,0,0.25)" }}
         >
           <span className="whitespace-nowrap">AI Testing Agents</span>
@@ -183,13 +175,125 @@ const HomeHeroVibe = () => {
         </h1>
       </section>
 
-      <div className="relative z-20 w-full max-w-3xl px-4">
-        <div className="p-[1.5px] rounded-2xl bg-gradient-to-br from-secondary-wopee via-purple-500 to-primary-wopee shadow-2xl shadow-purple-900/40">
+      <div className="relative z-20 w-full max-w-3xl px-4 grid place-items-center">
+        {/* Faint demo video backdrop behind the content. */}
+        <HeroVideoInline
+          sources={heroVideoSources}
+          poster="/how-it-works/step-1.webp"
+          onExpand={() => setVideoOpen(true)}
+          className="col-start-1 row-start-1 z-0 w-[104%]"
+          aspectClassName="aspect-video"
+        />
+        <div className="col-start-1 row-start-1 z-10 w-full flex flex-col items-center gap-2">
+          <p
+            className="max-w-xl text-center text-sm sm:text-base font-medium text-gray-700 dark:text-gray-100 text-pretty"
+            style={{ textShadow: "0 2px 14px rgba(0,0,0,0.6)" }}
+          >
+            {"Enter a URL, choose what to test, and Wopee's AI agent creates runnable tests with screenshots, checks, and self-healing steps."}
+          </p>
+          <div className="relative w-full p-[1.5px] rounded-2xl bg-gradient-to-br from-secondary-wopee via-purple-500 to-primary-wopee shadow-2xl shadow-purple-900/40">
           <div className="bg-white dark:bg-gray-900 rounded-[14px] p-4 sm:p-5 flex flex-col gap-3">
             <div className="flex flex-col gap-1.5">
-              <label className="text-[10px] uppercase tracking-[0.15em] text-gray-600 dark:text-gray-400 font-semibold pl-1">
-                Your web app URL
-              </label>
+              <div className="flex items-center justify-between gap-2 flex-wrap">
+                <label className="text-[10px] uppercase tracking-[0.15em] text-gray-600 dark:text-gray-400 font-semibold pl-1">
+                  Your web app URL
+                </label>
+                {/* App selector — segmented "Your app" / "Demo app" toggle.
+                    "Demo app" switches to a demo and opens the picker so a
+                    specific demo (Website / E-commerce / Banking) stays
+                    selectable. */}
+                <div className="inline-flex items-center gap-0.5 rounded-lg p-0.5 ring-1 ring-inset ring-secondary-wopee/20 dark:ring-white/10 bg-secondary-wopee/5 dark:bg-white/5">
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    aria-pressed={appType === AppType.YOUR_APPLICATION}
+                    onClick={() => handleAppTypeChange(AppType.YOUR_APPLICATION)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleAppTypeChange(AppType.YOUR_APPLICATION);
+                      }
+                    }}
+                    className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold leading-none cursor-pointer select-none transition-all ${
+                      appType === AppType.YOUR_APPLICATION
+                        ? "bg-secondary-wopee text-white shadow-sm"
+                        : "text-secondary-wopee/70 hover:text-secondary-wopee hover:bg-secondary-wopee/10 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/10"
+                    }`}
+                  >
+                    <AppWindow className="w-3.5 h-3.5" />
+                    Your app
+                  </div>
+                  <div className="relative inline-flex" ref={demoMenuRef}>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      aria-haspopup="listbox"
+                      aria-expanded={demoMenuOpen}
+                      aria-label={`Demo app: ${appTemplates[triggerDemo].label}`}
+                      onClick={() => {
+                        if (!DEMO_SCENARIOS.includes(appType)) {
+                          handleAppTypeChange(triggerDemo);
+                        }
+                        setDemoMenuOpen((open) => !open);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          if (!DEMO_SCENARIOS.includes(appType)) {
+                            handleAppTypeChange(triggerDemo);
+                          }
+                          setDemoMenuOpen((open) => !open);
+                        }
+                      }}
+                      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold leading-none cursor-pointer select-none transition-all ${
+                        DEMO_SCENARIOS.includes(appType)
+                          ? "bg-secondary-wopee text-white shadow-sm"
+                          : "text-secondary-wopee/70 hover:text-secondary-wopee hover:bg-secondary-wopee/10 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/10"
+                      }`}
+                    >
+                      <FlaskConical className="w-3.5 h-3.5" />
+                      Demo app
+                      <ChevronDown
+                        className={`w-3 h-3 transition-transform ${demoMenuOpen ? "rotate-180" : ""}`}
+                      />
+                    </div>
+                    {demoMenuOpen && (
+                      <div
+                        role="listbox"
+                        className="absolute right-0 top-full mt-1 z-20 min-w-[10rem] rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg shadow-purple-900/10 py-1"
+                      >
+                        {DEMO_SCENARIOS.map((type) => {
+                          const tpl = appTemplates[type];
+                          const Icon = tpl.icon;
+                          const selected = appType === type;
+                          return (
+                            <div
+                              key={type}
+                              role="option"
+                              tabIndex={0}
+                              aria-selected={selected}
+                              onClick={() => handleAppTypeChange(type)}
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  handleAppTypeChange(type);
+                                }
+                              }}
+                              className={`flex items-center gap-2 px-3 py-1.5 text-[11px] cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "text-secondary-wopee dark:text-primary-wopee font-semibold" : "text-gray-700 dark:text-gray-300"}`}
+                            >
+                              <Icon className="w-3.5 h-3.5 flex-shrink-0" />
+                              <span className="flex-1">{tpl.label}</span>
+                              {selected && (
+                                <Check className="w-3.5 h-3.5 flex-shrink-0" />
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
               <div className="group relative flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50/80 dark:bg-gray-800/60 focus-within:border-secondary-wopee focus-within:ring-2 focus-within:ring-secondary-wopee/20 transition-all">
                 <SelectedIcon className="w-4 h-4 text-gray-500 dark:text-gray-500 group-focus-within:text-secondary-wopee transition-colors flex-shrink-0" />
                 <input
@@ -255,100 +359,7 @@ const HomeHeroVibe = () => {
               })()}
             </div>
 
-            <div className="flex flex-wrap justify-between items-center gap-3">
-              {/* Your app chip on the left, then "or try a demos:" label,
-                  then a single expander showing the selected demo. Clicking
-                  it reveals the three demo options; picking one pre-fills URL
-                  + instructions and collapses the menu. One click on "Your
-                  app" returns to the empty custom-URL state. */}
-              <div className="flex flex-wrap items-center gap-2">
-                {(() => {
-                  const tpl = appTemplates[AppType.YOUR_APPLICATION];
-                  const Icon = tpl.icon;
-                  // "Your app" is only visually selected once the visitor has
-                  // typed a URL in Your-app mode — otherwise the chip would
-                  // read as active on landing while the CTA is disabled.
-                  const selected =
-                    appType === AppType.YOUR_APPLICATION && appUrl.length > 0;
-                  return (
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      aria-pressed={selected}
-                      onClick={() =>
-                        handleAppTypeChange(AppType.YOUR_APPLICATION)
-                      }
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleAppTypeChange(AppType.YOUR_APPLICATION);
-                        }
-                      }}
-                      className={`scenario-chip ${selected ? "scenario-chip--selected" : ""} inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-normal cursor-pointer select-none transition-colors`}
-                      aria-label={tpl.label}
-                    >
-                      <Icon className="w-3 h-3" />
-                      <span className="hidden sm:inline">{tpl.label}</span>
-                    </div>
-                  );
-                })()}
-                <span className="hidden sm:inline text-[10px] uppercase tracking-[0.15em] text-gray-600 dark:text-gray-400 font-semibold px-1">
-                  or try a demos:
-                </span>
-                <div className="relative" ref={demoMenuRef}>
-                  <button
-                    type="button"
-                    aria-haspopup="listbox"
-                    aria-expanded={demoMenuOpen}
-                    aria-label={`Selected demo: ${appTemplates[triggerDemo].label}`}
-                    onClick={() => setDemoMenuOpen((open) => !open)}
-                    className={`scenario-chip ${DEMO_SCENARIOS.includes(appType) ? "scenario-chip--selected" : ""} inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-normal cursor-pointer select-none transition-colors`}
-                  >
-                    <TriggerIcon className="w-3 h-3" />
-                    <span className="hidden sm:inline">
-                      {appTemplates[triggerDemo].label}
-                    </span>
-                    <ChevronDown
-                      className={`w-3 h-3 transition-transform ${demoMenuOpen ? "rotate-180" : ""}`}
-                    />
-                  </button>
-                  {demoMenuOpen && (
-                    <div
-                      role="listbox"
-                      className="absolute left-0 top-full mt-1 z-20 min-w-[10rem] rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg shadow-purple-900/10 py-1"
-                    >
-                      {DEMO_SCENARIOS.map((type) => {
-                        const tpl = appTemplates[type];
-                        const Icon = tpl.icon;
-                        const selected = appType === type;
-                        return (
-                          <div
-                            key={type}
-                            role="option"
-                            tabIndex={0}
-                            aria-selected={selected}
-                            onClick={() => handleAppTypeChange(type)}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                handleAppTypeChange(type);
-                              }
-                            }}
-                            className={`flex items-center gap-2 px-3 py-1.5 text-[11px] cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "text-secondary-wopee dark:text-primary-wopee font-semibold" : "text-gray-700 dark:text-gray-300"}`}
-                          >
-                            <Icon className="w-3.5 h-3.5 flex-shrink-0" />
-                            <span className="flex-1">{tpl.label}</span>
-                            {selected && (
-                              <Check className="w-3.5 h-3.5 flex-shrink-0" />
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </div>
-
+            <div>
               <Button
                 size="lg"
                 variant="wopeeFlat"
@@ -356,16 +367,51 @@ const HomeHeroVibe = () => {
                 onClick={() =>
                   setLoginDialogState({ isOpen: true, mode: "vibe" })
                 }
-                className="hero-cta flex items-center gap-2 px-6 py-3 text-base font-bold rounded-lg shadow-lg shadow-purple-500/40 dark:shadow-yellow-500/40 hover:shadow-purple-500/60 dark:hover:shadow-yellow-500/60 hover:scale-105 transition-all"
+                className="hero-cta w-full flex items-center justify-center gap-2 px-6 py-3 text-base font-bold rounded-lg shadow-lg shadow-purple-500/40 dark:shadow-yellow-500/40 hover:shadow-purple-500/60 dark:hover:shadow-yellow-500/60 transition-all"
                 id="vibe-testing"
               >
                 <Sparkles className="w-5 h-5" />
                 <span className="text-white dark:text-black font-bold">
-                  Try it free
+                  Generate my first test
                 </span>
               </Button>
             </div>
 
+            <div className="flex flex-wrap items-center justify-center sm:justify-between gap-x-4 gap-y-1.5 text-sm text-gray-600 dark:text-gray-300">
+              <span className="inline-flex items-center gap-1.5">
+                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
+                Free to start
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
+                No credit card required
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
+                Works with your Playwright setup
+              </span>
+            </div>
+
+          </div>
+          </div>
+          {/* Watch-demo affordance over the video below the form. */}
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => setVideoOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setVideoOpen(true);
+              }
+            }}
+            aria-label="Watch 90-second demo"
+            className="group/play inline-flex items-center gap-2.5 cursor-pointer text-white/60 transition-colors duration-300 hover:text-white"
+          >
+            <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 backdrop-blur ring-1 ring-white/30 transition-all duration-300 group-hover/play:ring-2 group-hover/play:ring-secondary-wopee dark:group-hover/play:ring-primary-wopee group-hover/play:scale-110 group-hover/play:shadow-lg group-hover/play:shadow-purple-900/50">
+              <Play className="w-4 h-4 fill-current translate-x-px" />
+            </span>
+            <span className="text-sm font-medium">Watch 90-sec demo</span>
           </div>
         </div>
       </div>
@@ -383,6 +429,7 @@ const HomeHeroVibe = () => {
 
       <HeroVideoModal
         sources={heroVideoSources}
+        steps={stepsData}
         isOpen={videoOpen}
         onClose={() => setVideoOpen(false)}
       />
diff --git a/src/css/custom.css b/src/css/custom.css
index d190ed1..0619c90 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -397,6 +397,9 @@ body.is-home .navbar.navbar--revealed {
   background-color: rgb(0 0 0 / 0.05);
   color: rgb(75 85 99); /* gray-600 */
   border: 1px solid rgb(0 0 0 / 0.08);
+  /* Normalise line-height so the <div> "Your app" chip and the <button>
+     demo picker render at the same height (div inherits Infima's 1.65). */
+  line-height: 1;
 }
 .scenario-chip:hover {
   background-color: rgb(0 0 0 / 0.1);