fix(landing): comprehensive mobile responsiveness for all viewport sizes

[Ojas2095]

Summary

Fixes #3 — Makes the landing page fully responsive across all mobile viewports (320px–768px).

What Changed

Navigation

• Hamburger menu on screens < 640px with an animated slide-down dropdown
• Desktop nav links hidden on mobile, replaced with a clean toggle (Menu/X icons)
• Menu auto-closes on link click

Hero Section

• Reduced minimum clamp() font size from 2.2rem → 1.75rem to prevent text overflow on 320px screens
• Tighter vertical padding on mobile (pt-12 pb-16) scaling up at sm and md breakpoints
• Reduced gap between hero text and crystal prism

Tools Grid

• Added custom Tailwind xs breakpoint at 400px
• Grid now flows: 1 column (< 400px) → 2 columns (400–640px) → 4 columns (640px+)
• Prevents cards from being too cramped on very small screens

CTA Section

• Reduced minimum clamp() font size to 1.75rem
• Buttons stack vertically on mobile for better tap targets
• Tighter vertical padding on mobile

Footer

• Stacks vertically and centers on mobile
• Proper spacing adjustments for small screens

Crystal Prism

• Scaled responsively using min(340px, 70vw) instead of fixed 340px

Global

• All sections: horizontal padding reduced from px-6 → px-4 on mobile for better edge spacing

Testing

• ✅ TypeScript compilation passes
• ✅ Production build succeeds (
  pm run build)
• Tested mentally against 320px, 375px, 414px, 768px, and 1024px viewport widths

Files Changed

• \rontend/src/pages/LandingPage.tsx\ — all responsive fixes
• \rontend/tailwind.config.js\ — added \xs: 400px\ breakpoint