diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index e27e9aea2f6..01976e7fe12 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { COMPANY } from "@superset/shared/constants";
-import { useState } from "react";
+import { useScroll } from "framer-motion";
+import { useRef, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { DownloadButton } from "../DownloadButton";
 import { WaitlistModal } from "../WaitlistModal";
@@ -10,64 +11,68 @@ import { TypewriterText } from "./components/TypewriterText";
 
 export function HeroSection() {
 	const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
+	const demoRef = useRef<HTMLDivElement>(null);
+
+	const { scrollYProgress } = useScroll({
+		target: demoRef,
+		offset: ["start 0.45", "start 0"],
+	});
 
 	return (
 		<div>
-			<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center -translate-y-12 overflow-hidden">
-				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px] py-8 sm:py-12 lg:py-16">
-					<div className="grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-8 lg:gap-16 items-center">
-						<div className="space-y-6 sm:space-y-8">
-							<div className="space-y-2 sm:space-y-6">
-								<h1
-									className="text-3xl sm:text-4xl lg:text-5xl font-normal tracking-normal leading-[1.3em] text-foreground relative"
-									style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
-								>
-									<span className="invisible" aria-hidden="true">
-										The Terminal for Coding Agents.
-									</span>
-									<span className="absolute inset-0">
-										<TypewriterText
-											segments={[
-												{ text: "The Terminal for " },
-												{
-													text: "Coding Agents",
-													style: {
-														fontFamily: "var(--font-geist-pixel-grid)",
-													},
+			<div className="flex flex-col items-center pt-24 sm:pt-32 lg:pt-40 overflow-hidden">
+				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px]">
+					<div className="flex flex-col items-center text-center">
+						<div className="space-y-4 sm:space-y-6">
+							<h1
+								className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight leading-[1.1] text-foreground relative"
+								style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
+							>
+								<span className="invisible" aria-hidden="true">
+									The Code Editor for AI Agents.
+								</span>
+								<span className="absolute inset-0">
+									<TypewriterText
+										segments={[
+											{ text: "The Code Editor for " },
+											{
+												text: "AI Agents.",
+												style: {
+													fontFamily: "var(--font-geist-pixel-grid)",
 												},
-												{ text: "." },
-											]}
-											speed={40}
-											delay={600}
-										/>
-									</span>
-								</h1>
-								<p className="text-base sm:text-xl font-light text-muted-foreground max-w-[400px]">
-									Orchestrate a team of Claude Code, Codex, or any other coding
-									agents
-								</p>
-							</div>
-
-							<div className="flex flex-wrap items-center gap-2 sm:gap-4">
-								<DownloadButton
-									onJoinWaitlist={() => setIsWaitlistOpen(true)}
-								/>
-								<button
-									type="button"
-									className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
-									onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
-									aria-label="View on GitHub"
-								>
-									View on GitHub
-									<FaGithub className="size-4" />
-								</button>
-							</div>
+											},
+										]}
+										speed={40}
+										delay={600}
+									/>
+								</span>
+							</h1>
+							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-4xl mx-auto">
+								Orchestrate swarms of Claude Code, Codex, etc. in parallel.
+								Works for any agents. Built for the AI era.
+							</p>
 						</div>
 
-						<div className="relative w-full min-w-0">
-							<ProductDemo />
+						<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 mt-6 sm:mt-8">
+							<DownloadButton onJoinWaitlist={() => setIsWaitlistOpen(true)} />
+							<button
+								type="button"
+								className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
+								onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
+								aria-label="View on GitHub"
+							>
+								View on GitHub
+								<FaGithub className="size-4" />
+							</button>
 						</div>
 					</div>
+
+					<div
+						ref={demoRef}
+						className="relative w-full mt-12 sm:mt-16 lg:mt-20"
+					>
+						<ProductDemo scrollYProgress={scrollYProgress} />
+					</div>
 				</div>
 			</div>
 			<WaitlistModal
diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index 80fc0f67a8e..6f36f0329d0 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -47,14 +47,14 @@ function StatusIndicator({
 	}[status];
 
 	return (
-		<span className="relative flex size-2 shrink-0">
+		<span className="relative flex size-1.5 shrink-0">
 			{config.pulse && (
 				<span
 					className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${config.ping}`}
 				/>
 			)}
 			<span
-				className={`relative inline-flex size-2 rounded-full ${config.dot}`}
+				className={`relative inline-flex size-1.5 rounded-full ${config.dot}`}
 			/>
 		</span>
 	);
@@ -143,16 +143,16 @@ function WorkspaceItem({
 }) {
 	return (
 		<div
-			className={`flex items-start gap-2 px-2 py-1 text-[10px] ${isActive ? "bg-white/10" : "hover:bg-white/5"} cursor-pointer relative`}
+			className={`flex items-start gap-2.5 px-2.5 py-1.5 text-xs ${isActive ? "bg-white/10" : "hover:bg-white/5"} cursor-pointer relative`}
 		>
 			{isActive && (
 				<div className="absolute left-0 top-0 bottom-0 w-0.5 bg-cyan-500 rounded-r" />
 			)}
 			<div className="mt-0.5 text-muted-foreground/50 relative">
 				{status === "working" ? (
-					<AsciiSpinner className="text-[10px]" />
+					<AsciiSpinner className="text-xs" />
 				) : (
-					<LuFolderGit2 className="size-3.5" />
+					<LuFolderGit2 className="size-4" />
 				)}
 				{status && status !== "working" && (
 					<span className="absolute -top-0.5 -right-0.5">
@@ -170,7 +170,7 @@ function WorkspaceItem({
 					{(add !== undefined || pr) && (
 						<div className="flex items-center gap-1 shrink-0">
 							{add !== undefined && (
-								<span className="text-[9px]">
+								<span className="text-[11px]">
 									<span className="text-emerald-400">+{add}</span>
 									{del !== undefined && del > 0 && (
 										<span className="text-red-400 ml-0.5">-{del}</span>
@@ -181,12 +181,12 @@ function WorkspaceItem({
 					)}
 				</div>
 				<div className="flex items-center justify-between">
-					<span className="text-muted-foreground/50 truncate text-[9px] font-mono">
+					<span className="text-muted-foreground/50 truncate text-[11px] font-mono">
 						{branch}
 					</span>
 					{pr && (
-						<span className="text-muted-foreground/40 text-[9px] flex items-center gap-0.5">
-							<LuGitPullRequest className="size-2.5" />
+						<span className="text-muted-foreground/40 text-[11px] flex items-center gap-0.5">
+							<LuGitPullRequest className="size-3" />
 							{pr}
 						</span>
 					)}
@@ -229,18 +229,18 @@ function FileChangeItem({
 	return (
 		<div
 			className={`flex items-center justify-between gap-2 hover:bg-white/5 px-3 ${isFolder ? "py-1.5 mt-1" : "py-1"}`}
-			style={{ paddingLeft: `${12 + (indent || 0) * 14}px` }}
+			style={{ paddingLeft: `${12 + (indent || 0) * 16}px` }}
 		>
 			<div className="flex items-center gap-2 min-w-0">
 				<Icon className={`size-3.5 shrink-0 ${iconColor}`} />
 				<span
-					className={`truncate ${isFolder ? "text-muted-foreground/60 text-[9px]" : "text-muted-foreground/80 text-[10px]"}`}
+					className={`truncate ${isFolder ? "text-muted-foreground/60 text-[11px]" : "text-muted-foreground/80 text-xs"}`}
 				>
 					{path}
 				</span>
 			</div>
 			{!isFolder && (add > 0 || del > 0) && (
-				<span className="shrink-0 tabular-nums text-[9px]">
+				<span className="shrink-0 tabular-nums text-[11px]">
 					{add > 0 && <span className="text-emerald-400">+{add}</span>}
 					{del > 0 && <span className="text-red-400 ml-1">-{del}</span>}
 				</span>
@@ -260,51 +260,59 @@ interface AppMockupProps {
 }
 
 export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
-	// Animation states based on activeDemo
-	// - "Use Any Agents": Highlight terminal area with agent output
-	// - "Create Parallel Branches": Highlight workspace sidebar with branches
-	// - "See Changes": Highlight file changes panel on right
-	// - "Open in Any IDE": Highlight top bar / open actions
-
 	return (
 		<div
-			className="relative w-full min-w-[600px] rounded-xl overflow-hidden bg-black/40 backdrop-blur-xl border border-white/[0.08] shadow-2xl"
+			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)]"
 			style={{ aspectRatio: "16/10" }}
 		>
+			{/* Diagonal gradient glass border — bright on top-left & bottom-right corners */}
+			<div
+				className="absolute inset-0 rounded-2xl pointer-events-none z-10"
+				style={{
+					background:
+						"linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.15) 100%)",
+					mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					WebkitMask:
+						"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					maskComposite: "exclude",
+					WebkitMaskComposite: "xor",
+					padding: "1.5px",
+				}}
+			/>
 			{/* Window chrome */}
-			<div className="flex items-center justify-between px-3 py-2 bg-white/[0.03] backdrop-blur-md border-b border-white/[0.06]">
+			<div className="flex items-center justify-between px-4 py-2.5 bg-white/[0.03] backdrop-blur-md border-b border-white/[0.06]">
 				<div className="flex items-center gap-1.5">
-					<div className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
-					<div className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
-					<div className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
+					<div className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+					<div className="w-3 h-3 rounded-full bg-[#febc2e]" />
+					<div className="w-3 h-3 rounded-full bg-[#28c840]" />
 				</div>
-				<span className="text-[11px] text-muted-foreground/70">superset</span>
+				<span className="text-[13px] text-muted-foreground/70">superset</span>
 				<div className="w-12" />
 			</div>
 
-			<div className="flex h-[calc(100%-36px)]">
+			<div className="flex h-[calc(100%-40px)]">
 				{/* Left sidebar */}
-				<div className="w-[180px] bg-white/[0.02] backdrop-blur-lg border-r border-white/[0.06] flex flex-col shrink-0">
+				<div className="w-[210px] bg-white/[0.02] backdrop-blur-lg border-r border-white/[0.06] flex flex-col shrink-0">
 					{/* New Workspace button */}
-					<div className="px-2 py-2 border-b border-white/[0.06]">
+					<div className="px-2.5 py-2.5 border-b border-white/[0.06]">
 						<button
 							type="button"
-							className="flex items-center gap-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground cursor-pointer w-full px-1.5 py-1 hover:bg-white/[0.04] rounded"
+							className="flex items-center gap-2 text-xs text-muted-foreground/60 hover:text-muted-foreground cursor-pointer w-full px-2 py-1 hover:bg-white/[0.04] rounded"
 						>
-							<LuPlus className="size-3.5" />
+							<LuPlus className="size-4" />
 							<span>New Workspace</span>
 						</button>
 					</div>
 
 					{/* Repository section */}
-					<div className="flex items-center justify-between px-2 py-1.5 border-b border-white/[0.06] cursor-pointer hover:bg-white/[0.04]">
+					<div className="flex items-center justify-between px-2.5 py-2 border-b border-white/[0.06] cursor-pointer hover:bg-white/[0.04]">
 						<div className="flex items-center gap-2">
-							<span className="text-[11px] text-foreground/90">superset</span>
-							<span className="text-[10px] text-muted-foreground/50">(5)</span>
+							<span className="text-[13px] text-foreground/90">superset</span>
+							<span className="text-xs text-muted-foreground/50">(5)</span>
 						</div>
 						<div className="flex items-center gap-1 text-muted-foreground/50">
-							<LuPlus className="size-3" />
-							<LuChevronDown className="size-3" />
+							<LuPlus className="size-3.5" />
+							<LuChevronDown className="size-3.5" />
 						</div>
 					</div>
 
@@ -320,9 +328,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							}}
 							transition={{ duration: 0.3, ease: "easeOut" }}
 						>
-							<div className="flex items-start gap-2 px-2 py-1 text-[10px] bg-cyan-500/10 border-l-2 border-cyan-500 relative">
+							<div className="flex items-start gap-2.5 px-2.5 py-1.5 text-xs bg-cyan-500/10 border-l-2 border-cyan-500 relative">
 								<div className="mt-0.5 text-muted-foreground/50 relative">
-									<AsciiSpinner className="text-[10px]" />
+									<AsciiSpinner className="text-xs" />
 								</div>
 								<div className="flex-1 min-w-0">
 									<div className="flex items-center justify-between gap-1">
@@ -330,7 +338,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 											new workspace
 										</span>
 									</div>
-									<span className="text-muted-foreground/50 truncate text-[9px] font-mono">
+									<span className="text-muted-foreground/50 truncate text-[11px] font-mono">
 										creating...
 									</span>
 								</div>
@@ -356,27 +364,27 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 					</div>
 
 					{/* Ports section */}
-					<div className="border-t border-white/[0.06]">
-						<div className="flex items-center justify-between px-2 py-1.5">
-							<div className="flex items-center gap-1 text-[10px] text-muted-foreground/40">
+					<div className="border-t border-white/[0.06] mb-2">
+						<div className="flex items-center justify-between px-2.5 py-2">
+							<div className="flex items-center gap-1 text-xs text-muted-foreground/40">
 								<span>⌥</span>
 								<span>Ports</span>
 							</div>
-							<span className="text-[9px] text-muted-foreground/30">4</span>
+							<span className="text-[11px] text-muted-foreground/30">4</span>
 						</div>
 						{PORTS.map((port) => (
-							<div key={port.workspace} className="px-2 py-1">
-								<div className="flex items-center justify-between text-[9px]">
+							<div key={port.workspace} className="px-2.5 py-1">
+								<div className="flex items-center justify-between text-[11px]">
 									<span className="text-muted-foreground/50 truncate">
 										{port.workspace}
 									</span>
-									<LuX className="size-2.5 text-muted-foreground/30" />
+									<LuX className="size-3 text-muted-foreground/30" />
 								</div>
 								<div className="flex flex-wrap gap-1 mt-0.5">
 									{port.ports.map((p) => (
 										<span
 											key={p}
-											className="px-1.5 py-0.5 bg-white/[0.04] rounded text-[9px] text-muted-foreground/60 tabular-nums"
+											className="px-1.5 py-0.5 bg-white/[0.04] rounded text-[11px] text-muted-foreground/60 tabular-nums"
 										>
 											{p}
 										</span>
@@ -390,12 +398,12 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				{/* Main content area */}
 				<div className="flex-1 flex flex-col min-w-0">
 					{/* Tab bar */}
-					<div className="flex items-center gap-0.5 px-2 py-1 bg-white/[0.02] backdrop-blur-md border-b border-white/[0.06]">
+					<div className="flex items-center gap-0.5 px-2 py-1.5 bg-white/[0.02] backdrop-blur-md border-b border-white/[0.06]">
 						{/* Claude tab - always visible, active */}
-						<div className="flex items-center gap-1.5 px-3 py-1 bg-white/[0.06] backdrop-blur-sm rounded-t text-[10px] text-foreground/90 border-b-2 border-cyan-500/70">
+						<div className="flex items-center gap-1.5 px-3 py-1 bg-white/[0.06] backdrop-blur-sm rounded-t text-xs text-foreground/90 border-b-2 border-cyan-500/70">
 							{activeDemo === "Create Parallel Branches" ? (
 								<>
-									<LuTerminal className="size-3 text-muted-foreground/70" />
+									<LuTerminal className="size-3.5 text-muted-foreground/70" />
 									<span>setup</span>
 								</>
 							) : (
@@ -403,17 +411,17 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 									<Image
 										src="/app-icons/claude.svg"
 										alt="Claude"
-										width={12}
-										height={12}
+										width={14}
+										height={14}
 									/>
 									<span>claude</span>
 								</>
 							)}
-							<LuX className="size-3 text-muted-foreground/50 hover:text-muted-foreground" />
+							<LuX className="size-3.5 text-muted-foreground/50 hover:text-muted-foreground" />
 						</div>
 						{/* Other agent tabs - shown when "Use Any Agents" is active */}
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -435,14 +443,14 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/codex.svg"
 								alt="Codex"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>codex</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -464,14 +472,14 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/gemini.svg"
 								alt="Gemini"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>gemini</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -493,31 +501,29 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/cursor-agent.svg"
 								alt="Cursor"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>cursor</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<div className="flex items-center px-2 py-1 text-muted-foreground/40 hover:text-muted-foreground/60 cursor-pointer">
-							<LuPlus className="size-3.5" />
-							<LuChevronDown className="size-3 ml-0.5" />
+							<LuPlus className="size-4" />
+							<LuChevronDown className="size-3.5 ml-0.5" />
 						</div>
 					</div>
 
 					{/* Terminal header */}
-					<div className="flex items-center gap-2 px-3 py-1.5 bg-black/20 border-b border-white/[0.04]">
-						<span className="text-muted-foreground/40 text-[10px]">⬛</span>
-						<span className="text-[10px] text-muted-foreground/60">
-							Terminal
-						</span>
+					<div className="flex items-center gap-2 px-4 py-2 bg-black/20 border-b border-white/[0.04]">
+						<span className="text-muted-foreground/40 text-xs">⬛</span>
+						<span className="text-xs text-muted-foreground/60">Terminal</span>
 						<div className="flex-1" />
-						<span className="text-muted-foreground/20 text-[10px]">□</span>
-						<LuX className="size-3 text-muted-foreground/20" />
+						<span className="text-muted-foreground/20 text-xs">□</span>
+						<LuX className="size-3.5 text-muted-foreground/20" />
 					</div>
 
 					{/* Terminal content */}
-					<div className="flex-1 bg-black/30 backdrop-blur-sm p-3 font-mono text-[10px] leading-relaxed overflow-hidden relative">
+					<div className="flex-1 bg-black/30 backdrop-blur-sm p-4 font-mono text-xs leading-relaxed overflow-hidden relative">
 						{/* Default terminal content */}
 						<motion.div
 							initial={{ opacity: 1 }}
@@ -528,12 +534,12 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						>
 							{/* Claude ASCII art header */}
 							<div className="flex items-start gap-3 mb-3">
-								<div className="text-cyan-400 leading-none whitespace-pre text-[9px]">
+								<div className="text-cyan-400 leading-none whitespace-pre text-[11px]">
 									{`  * ▐▛███▜▌ *
  * ▝▜█████▛▘ *
   *  ▘▘ ▝▝  *`}
 								</div>
-								<div className="text-muted-foreground/90 text-[10px]">
+								<div className="text-muted-foreground/90 text-xs">
 									<div>
 										<span className="text-foreground font-medium">
 											Claude Code
@@ -617,7 +623,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 						{/* Create Parallel Branches overlay */}
 						<motion.div
-							className="absolute inset-0 p-3 font-mono text-[10px] leading-relaxed"
+							className="absolute inset-0 p-4 font-mono text-xs leading-relaxed"
 							initial={{ opacity: 0 }}
 							animate={{
 								opacity: activeDemo === "Create Parallel Branches" ? 1 : 0,
@@ -634,7 +640,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							</div>
 							<div className="space-y-1.5 text-muted-foreground/70">
 								<div className="flex items-center gap-2">
-									<AsciiSpinner className="text-[10px]" />
+									<AsciiSpinner className="text-xs" />
 									<span>Setting up new parallel environment...</span>
 								</div>
 								<div className="ml-5 text-muted-foreground/50">
@@ -654,9 +660,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				{/* Right sidebar */}
 				<motion.div
 					className="bg-white/[0.02] backdrop-blur-lg border-l border-white/[0.06] flex flex-col shrink-0 relative overflow-hidden"
-					initial={{ width: 200 }}
+					initial={{ width: 230 }}
 					animate={{
-						width: activeDemo === "See Changes" ? 350 : 200,
+						width: activeDemo === "See Changes" ? 380 : 230,
 					}}
 					transition={{ duration: 0.3, ease: "easeOut" }}
 				>
@@ -673,24 +679,22 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						}}
 					>
 						{/* Header */}
-						<div className="flex items-center justify-between px-3 py-2 border-b border-white/[0.06]">
-							<span className="text-[10px] text-foreground/70">
-								Review Changes
-							</span>
-							<div className="flex items-center gap-1 text-[10px]">
-								<LuGitPullRequest className="size-3.5 text-cyan-400/70" />
+						<div className="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.06]">
+							<span className="text-xs text-foreground/70">Review Changes</span>
+							<div className="flex items-center gap-1 text-xs">
+								<LuGitPullRequest className="size-4 text-cyan-400/70" />
 								<span className="text-muted-foreground/60">#827</span>
 							</div>
 						</div>
 
 						{/* Commit & Push section */}
-						<div className="px-3 py-2 border-b border-white/[0.06] space-y-2">
-							<div className="h-7 bg-black/20 rounded border border-white/[0.06] px-2 flex items-center text-[10px] text-muted-foreground/30">
+						<div className="px-3 py-2.5 border-b border-white/[0.06] space-y-2">
+							<div className="h-8 bg-black/20 rounded border border-white/[0.06] px-2.5 flex items-center text-xs text-muted-foreground/30">
 								Commit message...
 							</div>
 							<button
 								type="button"
-								className="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-[10px] bg-white/[0.06] hover:bg-white/[0.1] rounded text-foreground/80"
+								className="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-xs bg-white/[0.06] hover:bg-white/[0.1] rounded text-foreground/80"
 							>
 								<span>↑</span>
 								<span>Push</span>
@@ -737,9 +741,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						}}
 					>
 						{/* PR Header */}
-						<div className="flex items-center justify-between px-3 py-2 border-b border-white/[0.06]">
+						<div className="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.06]">
 							<div className="flex items-center gap-2">
-								<LuGitPullRequest className="size-4 text-emerald-400/80" />
+								<LuGitPullRequest className="size-4.5 text-emerald-400/80" />
 								<span className="text-sm text-foreground/80 font-medium">
 									Review PR #827
 								</span>
@@ -763,13 +767,13 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						</div>
 
 						{/* Diff content */}
-						<div className="flex-1 overflow-hidden p-3 font-mono text-[10px]">
+						<div className="flex-1 overflow-hidden p-3 font-mono text-xs">
 							<div className="space-y-0.5">
 								<div className="text-muted-foreground/40 py-1">
 									@@ -1,4 +1,6 @@
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										1
 									</span>
 									<span className="text-muted-foreground/60">
@@ -777,37 +781,37 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										import {"{"} CloudWorkspace {"}"} from "./types"
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										import {"{"} createSSHConnection {"}"} from "./ssh"
 									</span>
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										2
 									</span>
 									<span className="text-muted-foreground/60"></span>
 								</div>
 								<div className="flex bg-red-500/[0.08]">
-									<span className="w-6 text-red-400/80 shrink-0">-</span>
+									<span className="w-7 text-red-400/80 shrink-0">-</span>
 									<span className="text-red-400/80">
 										export const getWorkspaces = () ={">"} {"{"}
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										export const getWorkspaces = async () ={">"} {"{"}
 									</span>
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										4
 									</span>
 									<span className="text-muted-foreground/60">
@@ -818,7 +822,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						</div>
 
 						{/* Review actions */}
-						<div className="px-3 py-2 border-t border-white/[0.06] flex items-center gap-2">
+						<div className="px-3 py-2.5 border-t border-white/[0.06] flex items-center gap-2">
 							<button
 								type="button"
 								className="px-3 py-1.5 text-xs bg-emerald-500/[0.12] text-emerald-400/80 rounded hover:bg-emerald-500/20"
@@ -838,7 +842,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 			{/* External IDE Popup - shown when "Open in Any IDE" is active */}
 			<motion.div
-				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl border border-white/[0.1] shadow-2xl"
+				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)]"
 				style={{ aspectRatio: "16/10" }}
 				initial={{ opacity: 0, scale: 0.9, y: 20 }}
 				animate={{
@@ -848,6 +852,20 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				}}
 				transition={{ duration: 0.3, ease: "easeOut" }}
 			>
+				{/* Diagonal gradient glass border */}
+				<div
+					className="absolute inset-0 rounded-xl pointer-events-none z-10"
+					style={{
+						background:
+							"linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.13) 100%)",
+						mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						WebkitMask:
+							"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						maskComposite: "exclude",
+						WebkitMaskComposite: "xor",
+						padding: "1.5px",
+					}}
+				/>
 				{/* IDE window chrome */}
 				<div className="flex items-center justify-between px-3 py-2 bg-white/[0.04] backdrop-blur-md border-b border-white/[0.06]">
 					<div className="flex items-center gap-1.5">
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index a7e67a7a91b..a88ed50236c 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -1,58 +1,63 @@
 "use client";
 
-import { motion } from "framer-motion";
-import dynamic from "next/dynamic";
+import { useIsMobile } from "@superset/ui/hooks/use-mobile";
+import { type MotionValue, motion, useTransform } from "framer-motion";
 import { useState } from "react";
 import { type ActiveDemo, AppMockup } from "../AppMockup";
 import { SelectorPill } from "./components/SelectorPill";
 import { DEMO_OPTIONS } from "./constants";
 
-const MeshGradient = dynamic(
-	() => import("@superset/ui/mesh-gradient").then((mod) => mod.MeshGradient),
-	{ ssr: false },
-);
+interface ProductDemoProps {
+	scrollYProgress: MotionValue<number>;
+}
 
-export function ProductDemo() {
+export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 	const [activeOption, setActiveOption] =
 		useState<ActiveDemo>("Use Any Agents");
+	const isMobile = useIsMobile();
 
+	// Starts full size, shrinks as user scrolls down (less aggressive on mobile)
+	const scale = useTransform(
+		scrollYProgress,
+		[0, 1],
+		[1, isMobile ? 0.95 : 0.82],
+	);
+	// Pills shift up to follow the shrinking mockup (minimal on mobile since scale is subtle)
+	const pillsY = useTransform(
+		scrollYProgress,
+		[0, 1],
+		[0, isMobile ? -6 : -40],
+	);
 	return (
-		<div className="relative w-full max-w-full rounded-lg overflow-hidden">
-			{/* Animated mesh gradient backgrounds - all rendered, opacity controlled */}
-			{DEMO_OPTIONS.map((option) => (
-				<motion.div
-					key={`gradient-${option.label}`}
-					className="absolute inset-0"
-					initial={false}
-					animate={{ opacity: activeOption === option.label ? 1 : 0 }}
-					transition={{ duration: 0.5, ease: "easeInOut" }}
-				>
-					<MeshGradient
-						colors={option.colors}
-						className="absolute inset-0 w-full h-full"
-					/>
-				</motion.div>
-			))}
-
-			{/* Content wrapper - no right padding on mobile so content touches edge */}
-			<div className="relative flex flex-col gap-3 sm:gap-4 py-4 pl-4 sm:p-6">
-				{/* App mockup - horizontally scrollable on mobile */}
-				<div className="overflow-x-auto scrollbar-hide">
-					<AppMockup activeDemo={activeOption} />
+		<div className="relative w-full max-w-full">
+			{/* Mockup with scroll-driven scale */}
+			<motion.div
+				className="relative"
+				style={{ scale, willChange: "transform" }}
+			>
+				<div className="relative">
+					{/* Large diffuse back-shadow */}
+					<div className="absolute inset-[10%] top-[20%] rounded-3xl bg-white/[0.07] blur-[60px] pointer-events-none" />
+					<div className="relative overflow-x-auto scrollbar-hide">
+						<AppMockup activeDemo={activeOption} />
+					</div>
 				</div>
+			</motion.div>
 
-				{/* Selector pills - horizontally scrollable on mobile */}
-				<div className="flex items-center gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide">
-					{DEMO_OPTIONS.map((option) => (
-						<SelectorPill
-							key={option.label}
-							label={option.label}
-							active={activeOption === option.label}
-							onSelect={() => setActiveOption(option.label as ActiveDemo)}
-						/>
-					))}
-				</div>
-			</div>
+			{/* Selector pills - below mockup, shift up as mockup scales */}
+			<motion.div
+				className="flex items-center gap-2 -mt-2 sm:-mt-4 px-4 sm:px-0 sm:justify-center overflow-x-auto pb-1 scrollbar-hide"
+				style={{ y: pillsY, willChange: "transform" }}
+			>
+				{DEMO_OPTIONS.map((option) => (
+					<SelectorPill
+						key={option.label}
+						label={option.label}
+						active={activeOption === option.label}
+						onSelect={() => setActiveOption(option.label as ActiveDemo)}
+					/>
+				))}
+			</motion.div>
 		</div>
 	);
 }
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
index be5dd4d03bb..a199dad69e9 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
@@ -19,11 +19,11 @@ export function SelectorPill({
 			onMouseEnter={onSelect}
 			onClick={onSelect}
 			className={`
-				inline-flex items-center justify-center py-2 text-xs sm:text-sm whitespace-nowrap cursor-pointer shrink-0
+				inline-flex items-center justify-center py-2 text-xs sm:text-sm whitespace-nowrap cursor-pointer shrink-0 rounded-full
 				${
 					active
 						? "bg-foreground/90 border border-foreground text-background/80"
-						: "bg-foreground/5 border border-foreground/20 text-foreground/80 hover:bg-foreground/10 hover:border-foreground/30"
+						: "bg-foreground/[0.03] border border-foreground/10 text-foreground/50 hover:bg-foreground/[0.06] hover:border-foreground/20 hover:text-foreground/70"
 				}
 			`}
 			animate={{
diff --git a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
index 7bdf4fc3a76..81180a3c924 100644
--- a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
+++ b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
@@ -37,7 +37,7 @@ export function TrustedBySection() {
 		<section className="py-6 sm:py-12 md:py-18 bg-background overflow-hidden">
 			<div className="max-w-7xl mx-auto">
 				<div>
-					<h2 className="text-lg sm:text-xl font-mono font-normal text-center mb-4 sm:mb-8 text-foreground px-4">
+					<h2 className="hidden sm:block text-lg sm:text-xl font-mono font-normal text-center mb-4 sm:mb-8 text-foreground px-4">
 						Trusted by builders from
 					</h2>
 				</div>
@@ -49,7 +49,7 @@ export function TrustedBySection() {
 						{CLIENT_LOGOS.map((client) => (
 							<div
 								key={client.name}
-								className="flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer whitespace-nowrap h-14 gap-2 mx-10"
+								className="flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer whitespace-nowrap h-10 sm:h-14 gap-1.5 sm:gap-2 mx-5 sm:mx-10"
 								style={{ willChange: "transform" }}
 							>
 								<Image
@@ -57,7 +57,7 @@ export function TrustedBySection() {
 									alt={client.name}
 									width={160}
 									height={client.height}
-									className="object-contain"
+									className="object-contain scale-75 sm:scale-100"
 									style={{
 										height: client.height,
 										width: "auto",
@@ -67,7 +67,7 @@ export function TrustedBySection() {
 									unoptimized
 								/>
 								{client.text && (
-									<span className="ml-2 mt-1 font-medium text-foreground text-[1.3rem]">
+									<span className="ml-2 mt-1 font-medium text-foreground text-[1rem] sm:text-[1.3rem]">
 										{client.text}
 									</span>
 								)}