fix: constrain nav and footer content to max-w-[1200px] like main content

Nav keeps full-width background; inner content wrapped in max-w-[1200px]
mx-auto px-7 container to align with page content width.

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

app/layout.tsx

@@ -28,12 +28,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <AppApolloProvider>
           <Nav />
           <main className="pt-[60px] min-h-screen">{children}</main>
-          <footer className="border-t mt-8 px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
-            <span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
-            <a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
-              className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
-              dev.pivoine.art
-            </a>
+          <footer className="border-t mt-8" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
+            <div className="max-w-[1200px] mx-auto px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]">
+              <span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
+              <a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
+                className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
+                dev.pivoine.art
+              </a>
+            </div>
           </footer>
         </AppApolloProvider>
       </body>

components/nav.tsx

@@ -40,9 +40,10 @@ export function Nav() {
   return (
     <>
       <nav
-        className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5"
+        className="fixed top-0 left-0 right-0 z-50 h-[60px]"
         style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
       >
+      <div className="max-w-[1200px] mx-auto px-7 h-full flex items-center">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
           {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -85,6 +86,7 @@ export function Nav() {
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
         </button>
+      </div>
       </nav>
 
       {/* Mobile menu overlay */}