refactor: improve layout with consistent containers and spacing

Apply UI refactoring following design best practices:

Layout Improvements:
- Standardize all sections to use max-w-7xl mx-auto px-4 container
- Increase vertical spacing: py-24 lg:py-32 for better whitespace
- Move padding-x from section to inner container for consistency
- Improve visual hierarchy with generous breathing room

Components Updated:
- Navbar: Consistent container padding structure
- Hero: max-w-5xl → max-w-7xl, increased py-16 → py-24
- ProblemSolution: max-w-6xl → max-w-7xl, py-16 → py-24
- HowItWorks: max-w-6xl → max-w-7xl, py-16 → py-24

Design Principles Applied:
- Consistent max-width containers (max-w-7xl)
- Generous whitespace between sections (py-24/32)
- Mobile-first responsive padding (px-4 sm:px-6 lg:px-8)
- Better readability with ample vertical spacing

Safety First:
- Verified Tailwind classes compile correctly
- Layout remains responsive across breakpoints
- No breaking changes to component logic
- Incremental improvements following 'little often'

Refs: docs/frontend_landing_plan.md

frontend/src/components/layout/Navbar.tsx

@@ -6,8 +6,8 @@ interface NavbarProps {
 
 export const Navbar: React.FC<NavbarProps> = ({ onCtaClick }) => {
   return (
-    <nav className="w-full px-4 sm:px-6 lg:px-8 py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
+    <nav className="w-full py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
         {/* Logo */}
         <div className="flex items-center gap-2">
           <span className="text-2xl">🌌</span>

frontend/src/components/sections/Hero.tsx

@@ -10,8 +10,8 @@ export const Hero: React.FC<HeroProps> = ({
   onSecondaryCtaClick,
 }) => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-slate-50 to-white">
+    <section className="w-full py-24 lg:py-32 bg-gradient-to-b from-slate-50 to-white">
-      <div className="max-w-5xl mx-auto text-center">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         {/* Badge */}
         <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-full mb-8">
           <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>

frontend/src/components/sections/HowItWorks.tsx

@@ -101,8 +101,8 @@ export const HowItWorks: React.FC = () => {
   ];
 
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-slate-50">
+    <section className="w-full py-24 lg:py-32 bg-slate-50">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">

frontend/src/components/sections/ProblemSolution.tsx

@@ -3,8 +3,8 @@ import { Terminal, AlertCircle, CheckCircle, ArrowRight } from 'lucide-react';
 
 export const ProblemSolution: React.FC = () => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-white">
+    <section className="w-full py-24 lg:py-32 bg-white">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">

frontend/src/index.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 :root {
   --text: #6b6375;
   --text-h: #08060d;