Mega Footer

# Mega Footer — Site Section

## Goal
Build a production-complete dark footer: CTA strip, newsletter, sitemap columns, legal row, and an oversized clipped watermark. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Top strip (optional prop): 'Ready to start?' + button, separated by border-b.
- Main: left block = logo, one-line mission, newsletter input (inline button, focus ring, success swap to '✓ Subscribed'); right = 4 link columns (Product/Company/Resources/Legal) with 13px muted links.
- Meta row: © line with auto year, locale/currency selector stub, social icons (X/GitHub/LinkedIn/YouTube) at 60% opacity → 100% on hover, green status dot + 'All systems normal' link.
- Watermark: brand wordmark at ~18vw font-size, 4% white opacity, clipped by overflow-hidden at the very bottom — half visible.
- Border-t on the whole footer; inner max-w-7xl; vertical rhythm: 64px top, 40px between zones, 32px bottom.

## Motion Spec
- Links get underline-grow on hover (scaleX from left, 200ms).
- Newsletter submit: button width animates to a circle spinner then to checkmark — 3-state morph.
- Watermark parallaxes 20px slower than scroll for depth (transform only).
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<MegaFooter columns={FooterColumn[]} onSubscribe={(email)=>Promise} showCtaStrip?: boolean />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.