diff --git a/apps/marketing/public/hero-bg.svg b/apps/marketing/public/hero-bg.svg
deleted file mode 100644
index f912c01..0000000
--- a/apps/marketing/public/hero-bg.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" fill="none" role="img" aria-label="Abstract hero backdrop">
-  <defs>
-    <radialGradient id="glow" cx="62%" cy="42%" r="55%">
-      <stop offset="0%" stop-color="#e8c06a" stop-opacity="0.55"/>
-      <stop offset="45%" stop-color="#c79a3f" stop-opacity="0.18"/>
-      <stop offset="100%" stop-color="#0c0e14" stop-opacity="0"/>
-    </radialGradient>
-    <linearGradient id="ring" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#f0cd7a"/>
-      <stop offset="100%" stop-color="#7d6326" stop-opacity="0.15"/>
-    </linearGradient>
-    <pattern id="grid" width="56" height="56" patternUnits="userSpaceOnUse">
-      <path d="M56 0H0V56" fill="none" stroke="#cbd5e1" stroke-opacity="0.05" stroke-width="1"/>
-    </pattern>
-  </defs>
-
-  <!-- ink canvas -->
-  <rect width="1600" height="900" fill="#0c0e14"/>
-  <rect width="1600" height="900" fill="url(#grid)"/>
-
-  <!-- warm light source, upper right -->
-  <rect width="1600" height="900" fill="url(#glow)"/>
-
-  <!-- concentric editorial rings -->
-  <g transform="translate(1000 400)" stroke="url(#ring)" fill="none">
-    <circle r="320" stroke-width="1.2"/>
-    <circle r="232" stroke-width="1.2" stroke-opacity="0.8"/>
-    <circle r="150" stroke-width="1.2" stroke-opacity="0.6"/>
-    <circle r="78" stroke-width="1.2" stroke-opacity="0.45"/>
-  </g>
-
-  <!-- a single sweeping arc + node, the "spotlight" accent -->
-  <g transform="translate(1000 400)">
-    <path d="M -300 200 Q 0 -360 320 -40" stroke="#f0cd7a" stroke-opacity="0.7" stroke-width="2" fill="none"/>
-    <circle cx="320" cy="-40" r="7" fill="#f0cd7a"/>
-    <circle cx="-300" cy="200" r="4.5" fill="#f0cd7a" fill-opacity="0.7"/>
-    <circle cx="0" cy="-150" r="4.5" fill="#f0cd7a" fill-opacity="0.5"/>
-  </g>
-
-  <!-- faint horizon line for editorial structure -->
-  <line x1="0" y1="640" x2="1600" y2="640" stroke="#cbd5e1" stroke-opacity="0.06" stroke-width="1"/>
-</svg>
diff --git a/apps/marketing/public/hero.png b/apps/marketing/public/hero.png
new file mode 100644
index 0000000..3fc98f6
Binary files /dev/null and b/apps/marketing/public/hero.png differ
diff --git a/apps/marketing/src/components/marketing/sections/hero.tsx b/apps/marketing/src/components/marketing/sections/hero.tsx
index d39a663..46b4477 100644
--- a/apps/marketing/src/components/marketing/sections/hero.tsx
+++ b/apps/marketing/src/components/marketing/sections/hero.tsx
@@ -9,8 +9,9 @@ import { GithubMark } from "../github-mark";
 // Full-viewport hero: a 16:9 backdrop image fills the section edge-to-edge,
 // a dimming gradient keeps foreground copy readable, and the content stack
 // is anchored to the lower-left. The site's fixed MarketingHeader is the top
-// overlay (it sits above this on z). Swap public/hero-bg.svg for a generated
-// raster (point the src at it) to rebrand the backdrop.
+// overlay (it sits above this on z). Swap public/hero.png to rebrand the
+// backdrop. Content is vertically centered so the backdrop reads on tall
+// viewports without a large empty band under the nav.
 export function Hero({ stars }: { stars?: number | null }) {
 	const root = useRef<HTMLElement>(null);
 
@@ -34,12 +35,11 @@ export function Hero({ stars }: { stars?: number | null }) {
 	return (
 		<section
 			ref={root}
-			className="relative flex h-[100svh] max-h-[960px] min-h-[600px] flex-col justify-end overflow-hidden bg-[color:var(--marketing-bg)]"
+			className="relative flex h-[100svh] max-h-[900px] min-h-[600px] flex-col justify-center overflow-hidden bg-[color:var(--marketing-bg)]"
 		>
-			{/* Background image — decorative. Replace /hero-bg.svg with your
-			    generated 16:9 raster (e.g. /hero-bg.jpg) to rebrand. */}
+			{/* Background image — decorative. Swap public/hero.png to rebrand. */}
 			<img
-				src="/hero-bg.svg"
+				src="/hero.png"
 				alt=""
 				aria-hidden
 				className="absolute inset-0 h-full w-full object-cover"
@@ -65,7 +65,7 @@ export function Hero({ stars }: { stars?: number | null }) {
 			/>
 
 			{/* Bottom-anchored content stack */}
-			<div className="relative z-10 mx-auto w-full max-w-7xl px-6 pb-14 sm:pb-20 lg:px-10">
+			<div className="relative z-10 mx-auto w-full max-w-7xl px-6 py-20 lg:px-10">
 				<div className="max-w-2xl">
 					<p className="hero-eyebrow font-mono text-[color:var(--marketing-muted)] text-xs uppercase tracking-[0.3em]">
 						— Built for vibe-coders in a hurry
@@ -95,7 +95,7 @@ export function Hero({ stars }: { stars?: number | null }) {
 						would rather move fast than wire boilerplate.
 					</p>
 
-					<div className="mt-7 flex flex-col gap-3 sm:flex-row sm:items-center">
+					<div className="mt-7 flex flex-col gap-3 sm:flex-row sm:items-stretch">
 						<a
 							href={WEB_URLS.signUp}
 							className="hero-cta group inline-flex items-center justify-center gap-2 rounded-full bg-[color:var(--marketing-accent)] px-7 py-3.5 font-medium text-[color:var(--marketing-bg)] text-base transition-transform hover:scale-[1.02]"