feat(hero): responsive mobile + iPad hero banner

- Add banner_mobile.mp4 (portrait source asset for phones/iPads)
- Generate optimized versions (banner_mobile-optimized.webm ~295KB + .mp4 ~224KB) for fast loading using VP9/H264 at 540x956
- Update hero <video> in app/page.tsx to use <source media='(max-width: 1024px)'> so mobile devices and iPads get the portrait banner for proper visualization (WebM first for size, MP4 fallback)
- Desktop/large screens continue using the existing landscape banner1.mp4
- Keeps existing responsive object-position framing and structure

This improves mobile hero experience above the signature menu.

app/page.tsx

@@ -188,7 +188,9 @@ export default function ShahiKitchenHomepage() {
       <section className="relative min-h-[70dvh] sm:min-h-[78dvh] md:min-h-[85dvh] lg:min-h-[92dvh] xl:min-h-[100dvh] 
                           flex items-center justify-center pt-40 sm:pt-44 md:pt-52 lg:pt-[200px] xl:pt-[220px] overflow-hidden bg-[#fbf7ef]">
         
-        {/* Banner Video - Optimized positioning per device */}
+        {/* Banner Video - Responsive sources for proper mobile/iPad visualization (portrait asset) + desktop (landscape).
+           Mobile/iPad (<=1024px) uses the compressed banner_mobile-optimized versions (WebM primary for size/speed, MP4 fallback).
+           These were generated from the provided banner_mobile.mp4 (original kept as source asset). */}
         <video
           autoPlay
           muted
@@ -199,7 +201,18 @@ export default function ShahiKitchenHomepage() {
                      lg:object-[50%_20%] xl:object-[50%_24%]"
           onError={(e) => console.error('Hero banner video failed to load', e)}
         >
-          {/* Using the compressed banner1.mp4 from images/logo as intended for the hero */}
+          {/* Mobile + iPad (portrait-friendly framing for better visualization on small screens) */}
+          <source 
+            src="/images/logo/banner_mobile-optimized.webm" 
+            type="video/webm" 
+            media="(max-width: 1024px)" 
+          />
+          <source 
+            src="/images/logo/banner_mobile-optimized.mp4" 
+            type="video/mp4" 
+            media="(max-width: 1024px)" 
+          />
+          {/* Desktop / large screens */}
           <source src="/images/logo/banner1.mp4" type="video/mp4" />
         </video>