diff --git a/src/components/home-page/HeroTrustedByStrip.tsx b/src/components/home-page/HeroTrustedByStrip.tsx
index a30f08f..7cd0234 100644
--- a/src/components/home-page/HeroTrustedByStrip.tsx
+++ b/src/components/home-page/HeroTrustedByStrip.tsx
@@ -46,8 +46,8 @@ const HeroTrustedByStrip = () => {
               <img
                 className={`max-h-full max-w-full object-contain transition-opacity ${
                   customer.noFilter
-                    ? "opacity-70 hover:opacity-100"
-                    : `grayscale opacity-70 hover:opacity-100 ${customer.invertDark ? "dark:invert" : ""}`
+                    ? "opacity-40 hover:opacity-100"
+                    : `grayscale opacity-40 hover:opacity-100 ${customer.invertDark ? "dark:invert" : ""}`
                 }`}
                 src={customer.logo}
                 alt={customer.name}
diff --git a/src/components/home-page/HeroVideoInline.tsx b/src/components/home-page/HeroVideoInline.tsx
new file mode 100644
index 0000000..acb113f
--- /dev/null
+++ b/src/components/home-page/HeroVideoInline.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Maximize2 } from "lucide-react";
+
+interface HeroVideoInlineProps {
+  sources: string[];
+  poster?: string;
+  onExpand?: () => void;
+  className?: string;
+  aspectClassName?: string;
+  // When true (default) the clip sits as a faint grayscale backdrop and only
+  // comes to full colour on hover. When false it plays fully visible.
+  dimmed?: boolean;
+}
+
+// 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",
+  dimmed = true,
+}) => {
+  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} ${onExpand ? "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 transition-all duration-500 ease-out ${
+            dimmed
+              ? "grayscale opacity-[0.28] 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
deleted file mode 100644
index 1c88f2e..0000000
--- a/src/components/home-page/HeroVideoModal.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { X } from "lucide-react";
-
-interface HeroVideoModalProps {
-  sources: string[];
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const HeroVideoModal: React.FC<HeroVideoModalProps> = ({
-  sources,
-  isOpen,
-  onClose,
-}) => {
-  const [index, setIndex] = useState(0);
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (isOpen) setIndex(0);
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (isOpen && videoRef.current) {
-      videoRef.current.load();
-      videoRef.current.play().catch(() => {});
-    }
-  }, [index, isOpen]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [isOpen, onClose]);
-
-  const handleEnded = () => {
-    if (index < sources.length - 1) {
-      setIndex(index + 1);
-    } else {
-      onClose();
-    }
-  };
-
-  if (!isOpen) return null;
-
-  const currentSrc = sources[index];
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/95 z-[100] flex items-center justify-center p-4"
-      onClick={onClose}
-      role="dialog"
-      aria-label="Product walkthrough video"
-    >
-      <div
-        className="relative w-full max-w-6xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <video
-          ref={videoRef}
-          key={`hero-modal-${index}`}
-          autoPlay
-          controls
-          playsInline
-          onEnded={handleEnded}
-          className="w-full h-auto rounded-lg shadow-2xl"
-        >
-          <source src={currentSrc} type="video/webm" />
-          <source src={currentSrc.replace(".webm", ".mp4")} type="video/mp4" />
-        </video>
-
-        <button
-          onClick={onClose}
-          className="absolute -top-3 -right-3 sm:top-2 sm:right-2 bg-black/80 hover:bg-black text-white p-2 rounded-full shadow-lg"
-          aria-label="Close fullscreen video"
-        >
-          <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>
-      </div>
-    </div>
-  );
-};
-
-export default HeroVideoModal;
diff --git a/src/components/home-page/HomeHeroVibe.tsx b/src/components/home-page/HomeHeroVibe.tsx
index 002e0b4..f4a4f42 100644
--- a/src/components/home-page/HomeHeroVibe.tsx
+++ b/src/components/home-page/HomeHeroVibe.tsx
@@ -2,9 +2,9 @@ import React, { useRef, useState, useEffect } from "react";
 import {
   Globe,
   AppWindow,
+  FlaskConical,
   Landmark,
   ShoppingCart,
-  Play,
   Plus,
   Sparkles,
   ChevronDown,
@@ -15,8 +15,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 +71,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);
@@ -89,8 +88,8 @@ const HomeHeroVibe = () => {
     isOpen: false,
     mode: "vibe",
   });
-  const [videoOpen, setVideoOpen] = useState(false);
   const [showInstructions, setShowInstructions] = useState(false);
+  const [videoHovered, setVideoHovered] = useState(false);
   const [demoMenuOpen, setDemoMenuOpen] = useState(false);
   const urlInputRef = useRef<HTMLInputElement>(null);
   const demoMenuRef = useRef<HTMLDivElement>(null);
@@ -135,10 +134,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-6 sm:gap-8 lg:gap-12 overflow-hidden py-8 sm:py-10 lg:py-14">
       <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 +147,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 +172,120 @@ 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="bg-white dark:bg-gray-900 rounded-[14px] p-4 sm:p-5 flex flex-col gap-3">
+      <div className="relative z-20 w-full max-w-6xl px-4 flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-12">
+        {/* Left: the "start testing" form. */}
+        <div className="w-full lg:w-[560px] flex-shrink-0 flex flex-col items-center gap-2">
+          <div className="relative w-full rounded-2xl shadow-2xl shadow-purple-900/40">
+            {/* Gradient border layer — animates out when the demo video is
+                hovered, mirroring the video's frame animating in. */}
+            <span
+              aria-hidden="true"
+              className={`pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-secondary-wopee via-purple-500 to-primary-wopee transition-opacity duration-500 ${
+                videoHovered ? "opacity-0" : "opacity-100"
+              }`}
+            />
+          <div className="relative bg-white dark:bg-gray-900 rounded-[14px] m-[1.5px] 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
@@ -215,7 +311,7 @@ const HomeHeroVibe = () => {
                 return (
                   <>
                     <textarea
-                      rows={3}
+                      rows={5}
                       aria-label="Testing instructions"
                       autoFocus={showInstructions}
                       value={testingInstructions}
@@ -255,100 +351,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,18 +359,39 @@ 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>
 
+            <p className="text-center text-xs text-gray-500 dark:text-gray-400">
+              No credit card required
+            </p>
+
+          </div>
           </div>
         </div>
+
+        {/* Right: fully-visible demo video. Hovering it fades the video's own
+            gradient frame in while fading the form's gradient border out. */}
+        <div
+          className="w-full lg:flex-1 flex flex-col items-center gap-3"
+          onMouseEnter={() => setVideoHovered(true)}
+          onMouseLeave={() => setVideoHovered(false)}
+        >
+          <HeroVideoInline
+            sources={heroVideoSources}
+            poster="/how-it-works/step-1.webp"
+            dimmed={false}
+            className="w-full"
+            aspectClassName="aspect-video"
+          />
+        </div>
       </div>
 
       <HeroTrustedByStrip />
@@ -381,11 +405,6 @@ const HomeHeroVibe = () => {
         isOpen={loginDialogState.isOpen}
       />
 
-      <HeroVideoModal
-        sources={heroVideoSources}
-        isOpen={videoOpen}
-        onClose={() => setVideoOpen(false)}
-      />
     </div>
   );
 };
diff --git a/src/components/home-page/vibe/LoginDialog.tsx b/src/components/home-page/vibe/LoginDialog.tsx
index e3bbcc6..2a1b623 100644
--- a/src/components/home-page/vibe/LoginDialog.tsx
+++ b/src/components/home-page/vibe/LoginDialog.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "@mdi/react";
 import { mdiGithub, mdiGitlab, mdiGoogle } from "@mdi/js";
-import { Globe, Sparkles, ChevronRight } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { cmdBaseUrl } from "../../../../cmdBaseUrl";
 
 import {
@@ -13,19 +13,6 @@ import {
 } from "@/components/ui/dialog";
 import { AppType } from "./enums";
 
-// Insert zero-width spaces after each dot so long hostnames can wrap at
-// segment boundaries instead of mid-character.
-const wrapHost = (host: string) => host.replace(/\./g, ".​");
-
-const cleanHost = (raw: string) => {
-  if (!raw) return "";
-  try {
-    return new URL(raw).hostname.replace(/^www\./, "");
-  } catch {
-    return raw.replace(/^https?:\/\//, "").replace(/^www\./, "").split("/")[0];
-  }
-};
-
 // Real customer logos used elsewhere on the site (homepage trusted-by strip).
 // Each logo sits in a fixed slot with object-contain so wildly different source
 // aspect ratios (Generali wordmark, Multitude monogram, Synot text mark) all
@@ -71,15 +58,12 @@ const LoginDialog = ({
     setIsOpenVibe(false);
   };
 
-  const host = cleanHost(appUrl);
   const isVibe = mode === "vibe";
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpenVibe}>
       <DialogContent className="bg-white dark:bg-gray-900 border-secondary-wopee/30 shadow-2xl shadow-purple-900/40 sm:max-w-md p-6 gap-0">
-        {/* HEADER BLOCK — explicit margins between relationships so spacing
-            reflects meaning: logo → header (medium), subtitle → testing
-            (medium), testing → steps (tight). */}
+        {/* HEADER BLOCK — logo, then title + subtitle. */}
         <div className="flex flex-col items-center">
           <div className="relative mb-4">
             <img
@@ -120,36 +104,6 @@ const LoginDialog = ({
             </DialogDescription>
           </DialogHeader>
 
-          {/* Testing + steps grouped tight (both supporting context),
-              med-spaced from the header above. */}
-          {isVibe && (
-            <div className="flex flex-col items-center gap-1 mt-3">
-              {host && (
-                <p className="flex items-center justify-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
-                  <Globe className="w-3 h-3 flex-shrink-0" aria-hidden="true" />
-                  <span>
-                    Testing{" "}
-                    <span className="font-mono text-gray-700 dark:text-gray-300 break-words">
-                      {wrapHost(host)}
-                    </span>
-                  </span>
-                </p>
-              )}
-              <div className="flex items-center justify-center gap-2 text-[11px] text-gray-500 dark:text-gray-400">
-                <span>Sign in</span>
-                <ChevronRight
-                  className="w-3 h-3 text-gray-400/60 dark:text-gray-500/60 flex-shrink-0"
-                  aria-hidden="true"
-                />
-                <span>Agents test</span>
-                <ChevronRight
-                  className="w-3 h-3 text-gray-400/60 dark:text-gray-500/60 flex-shrink-0"
-                  aria-hidden="true"
-                />
-                <span>Get your report</span>
-              </div>
-            </div>
-          )}
         </div>
 
         {/* CTA BLOCK — primary + secondary OAuth, medium gap from header */}
@@ -218,8 +172,7 @@ const LoginDialog = ({
 
         {isVibe && (
           <>
-          {/* SUPPORTING BLOCK — trust strip only. Steps moved up next to
-              the Testing-<host> line, where they share visual context. */}
+          {/* SUPPORTING BLOCK — trust strip. */}
           <div className="flex flex-col gap-3 mt-5">
             {/* "trusted by" divider — same line style as "or continue with"
                 so the modal has consistent section separators. */}
diff --git a/src/css/custom.css b/src/css/custom.css
index 340a1df..7f1a476 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -416,14 +416,14 @@ a.navbar__item:hover {
   100% { transform: translateX(-50%); }
 }
 .animate-marquee {
-  animation: hero-marquee 35s linear infinite;
+  animation: hero-marquee 90s linear infinite;
 }
 .animate-marquee:hover {
   animation-play-state: paused;
 }
 .mask-fade-x {
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
 }
 
 /* Footer */