Fix hero backdrop to span full viewport width on wide screens

Use full-bleed margin technique to break out of max-w-6xl container,
add explicit w-full to prevent aspect-ratio from shrinking the image
container when max-height kicks in, and add overflow-x-hidden to the
page wrapper to prevent scrollbar from 100vw units.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/explore/hero-banner.tsx

@@ -45,12 +45,12 @@ export function HeroBanner({
 
   return (
     <motion.div
-      className="relative -mx-4 -mt-6 mb-4 overflow-hidden sm:-mx-6"
+      className="relative -mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.6 }}
     >
-      <div className="relative aspect-[21/9] min-h-[280px] max-h-[420px]">
+      <div className="relative w-full min-h-[280px] max-h-[420px] aspect-[21/9]">
         {backdropPath ? (
           <Image
             src={backdropPath}

app/(pages)/layout.tsx

@@ -14,7 +14,7 @@ export default function PagesLayout({
 }) {
   return (
     <KeyboardProvider>
-      <div className="min-h-screen pb-14 sm:pb-0">
+      <div className="min-h-screen overflow-x-hidden pb-14 sm:pb-0">
         <NavBar />
         {/* Ambient glow */}
         <div className="pointer-events-none fixed left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[800px] rounded-full bg-primary/3 blur-[200px]" />