Fix logo scaling and positioning across screen sizes

- Enhanced responsive breakpoints for 5 screen size categories
- Fixed logo centering with flexbox at multiple container levels
- Added proper CSS centering for Three.js canvas element
- Improved logo container positioning and aspect ratio handling
- Logo now scales from 4rem (mobile) to 16rem (desktop) appropriately

🤖 Generated with [Claude Code](https://claude.ai/code)

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

modules/teaser/components/TeaserHero.tsx

@@ -23,14 +23,14 @@ export default function TeaserHero({ onEarlyAccess }: TeaserHeroProps) {
   return (
     <section className="min-h-screen flex flex-col items-center justify-center px-chorus-lg py-chorus-xxl bg-gradient-to-b from-white via-sand-100 to-sand-200 dark:from-carbon-950 dark:via-mulberry-950 dark:to-carbon-950 text-center relative">
       {/* CHORUS 3D Logo - Responsive sizing */}
-      <div className="animate-fade-in">
-        <div className="w-32 h-32 md:w-96 md:h-96">
-          <ThreeLogo className="mx-auto drop-shadow-2xl w-full h-full" />
+      <div className="animate-fade-in flex justify-center items-center">
+        <div className="responsive-logo">
+          <ThreeLogo className="logo-container drop-shadow-2xl" />
         </div>
       </div>
 
       {/* CHORUS Title */}
-      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
+      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mt-chorus-xl mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
         CHORUS
       </h1>