diff --git a/apps/marketing/public/hero-bg.mp4 b/apps/marketing/public/hero-bg.mp4
deleted file mode 100644
index ac43cd1..0000000
Binary files a/apps/marketing/public/hero-bg.mp4 and /dev/null differ
diff --git a/apps/marketing/public/hero-bg.svg b/apps/marketing/public/hero-bg.svg
new file mode 100644
index 0000000..f912c01
--- /dev/null
+++ b/apps/marketing/public/hero-bg.svg
@@ -0,0 +1,42 @@
+<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/src/components/marketing/sections/hero.tsx b/apps/marketing/src/components/marketing/sections/hero.tsx
index afd5aa0..d39a663 100644
--- a/apps/marketing/src/components/marketing/sections/hero.tsx
+++ b/apps/marketing/src/components/marketing/sections/hero.tsx
@@ -6,11 +6,11 @@ import { formatStars, GITHUB_URL } from "@/lib/github";
 import { gsap, useGSAP } from "@/lib/use-gsap";
 import { GithubMark } from "../github-mark";
 
-// Full-viewport hero: a muted looping video fills the section edge-to-edge,
+// 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). Background falls back to the ink canvas
-// for reduced-motion users and while the video loads.
+// 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.
 export function Hero({ stars }: { stars?: number | null }) {
 	const root = useRef<HTMLElement>(null);
 
@@ -36,20 +36,14 @@ export function Hero({ stars }: { stars?: number | null }) {
 			ref={root}
 			className="relative flex h-[100svh] max-h-[960px] min-h-[600px] flex-col justify-end overflow-hidden bg-[color:var(--marketing-bg)]"
 		>
-			{/* Background video — decorative, muted, looping. Hidden for
-			    reduced-motion; the ink section background shows through. */}
-			<video
-				className="absolute inset-0 h-full w-full object-cover motion-reduce:hidden"
-				autoPlay
-				loop
-				muted
-				playsInline
+			{/* Background image — decorative. Replace /hero-bg.svg with your
+			    generated 16:9 raster (e.g. /hero-bg.jpg) to rebrand. */}
+			<img
+				src="/hero-bg.svg"
+				alt=""
 				aria-hidden
-				tabIndex={-1}
-				preload="auto"
-			>
-				<source src="/hero-bg.mp4" type="video/mp4" />
-			</video>
+				className="absolute inset-0 h-full w-full object-cover"
+			/>
 
 			{/* Dimming layers: a vertical scrim (nav legibility up top, copy
 			    legibility at the bottom) plus a left scrim for the text column. */}