STYLED - Add a layered ambient backdrop behind all heroes

Replace the flat, empty hero background with a pure-CSS layered backdrop:
faded grid, brand glow, drifting brand orbs, grain, and a bottom fade that
blends the hero into page content. Applies to both the home hero and the
compact page heroes via HeroMotionBackdrop; respects prefers-reduced-motion.

components/layout/hero-motion-backdrop.tsx

@@ -1,13 +1,33 @@
+import { cn } from "@/lib/utils";
+
 type HeroMotionBackdropProps = {
   compact?: boolean;
 };
 
-export function HeroMotionBackdrop({}: HeroMotionBackdropProps) {
+/**
+ * Layered ambient backdrop rendered behind every hero (home + page).
+ * Pure CSS so it needs no client JS: a faded grid for structure, a soft
+ * brand glow, slowly drifting brand orbs, a grain overlay for texture, and
+ * a bottom fade that blends the hero into the page content. The orb drift is
+ * disabled under `prefers-reduced-motion` (see globals.css).
+ */
+export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
   return (
-    <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
-      <div className="hero-sheet-base" />
-      <div className="hero-sheet-veil" />
-      <div className="hero-sheet-fade" />
+    <div
+      aria-hidden="true"
+      className={cn(
+        "hero-backdrop pointer-events-none absolute inset-0 z-0 overflow-hidden",
+        compact && "is-compact",
+      )}
+    >
+      <div className="hero-backdrop-base" />
+      <div className="hero-backdrop-grid" />
+      <div className="hero-backdrop-glow" />
+      <span className="hero-orb hero-orb-1" />
+      <span className="hero-orb hero-orb-2" />
+      <span className="hero-orb hero-orb-3" />
+      <div className="hero-noise hero-backdrop-noise" />
+      <div className="hero-backdrop-floor" />
     </div>
   );
 }