fix: responsive layout for 360px minimum viewport width

- Store badges: w-full on mobile, sm:w-[260px] on larger screens
- AppPreview phone: w-full with aspect-ratio on mobile
- UseCases rows: stack vertically on mobile (flex-col sm:flex-row)
- Footer/DownloadCTA: responsive padding and container widths

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

src/components/AppPreview.astro

@@ -18,7 +18,7 @@ const slides = [
   </div>
 
   <!-- Carousel -->
-  <div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">
+  <div class="flex gap-[20px] items-end justify-center shrink-0 w-full" id="carousel">
 
     <!-- Left phone (hidden on mobile) -->
     <div class="hidden lg:block relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">

src/components/DownloadCTA.astro

@@ -30,7 +30,7 @@ const phoneArt = "/assets/cta-phone-art.png";
       </div>
 
       <!-- Store badges -->
-      <div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0">
+      <div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0 w-full">
         <div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
           <img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
           <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">

src/components/Footer.astro

@@ -17,7 +17,7 @@ const appleIcon = "/assets/footer-apple-icon.svg";
           TalkPro is a modern communication app designed for messaging, group conversations, channels, voice calls, and video calls.
         </p>
         <!-- Store badges -->
-        <div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0">
+        <div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0 w-full">
           <div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
             <img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
             <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">