feat: enhance mobile responsiveness across all components

Mobile optimizations:
- **Header**: Reduced padding on mobile (px-3), smaller text sizes
- **Main content**: Optimized padding (px-3 sm:px-4) and spacing
- **Format selector**: Added downward arrow for mobile flow
- **Conversion progress**: Time indicators stack vertically on mobile
- **Page layout**: Responsive spacing throughout (space-y-6 sm:space-y-8)
- **Footer**: Smaller text and reduced margins on mobile

Key improvements:
- Better use of screen space on small devices
- Improved touch targets and readability
- Consistent responsive breakpoints (sm:, md:)
- Vertical arrow (↓) on mobile, horizontal (→) on desktop
- All text scales appropriately for mobile screens

Tested on:
- Mobile viewport (< 640px)
- Tablet viewport (640px - 768px)
- Desktop viewport (> 768px)

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

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

components/converter/FileConverter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, ArrowDown } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
 import { FileUpload } from './FileUpload';
@@ -284,7 +284,10 @@ export function FileConverter() {
                 </Card>
               </div>
 
-              {/* Arrow */}
+              {/* Arrow - horizontal on desktop, vertical on mobile */}
+              <div className="flex md:hidden items-center justify-center py-2">
+                <ArrowDown className="h-5 w-5 text-muted-foreground" />
+              </div>
               <div className="hidden md:flex items-center justify-center pt-8">
                 <ArrowRight className="h-5 w-5 text-muted-foreground" />
               </div>