Full-Screen Mobile Menu

Build a full-screen mobile menu, shown only below 768px.

Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4.

DESIGN SYSTEM (use exactly):
- Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2.
- Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff.
- Accents: purple #c084fc, lime #a3f207.
- Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05).
- Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px).
- When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card).
- Side gutter: 30px from 768px up, 20px on phones.
- Links and buttons never change color, background or opacity on hover.

TOGGLE BUTTON
- 40px round, background #1e1e1e, white icon. position relative, z-index 70, so it stays above the overlay. Add touch-action: manipulation.
- Icon: two 2px bars, 18px wide and 10px apart, inside a 12px-tall box.
- Open: both bars move to the middle and rotate +45° and -45° to form an ✕. Animate transform only, 300ms.
- aria-label switches between "Open menu" and "Close menu". Add aria-expanded and aria-controls.

OVERLAY
- position fixed, inset 0, z-index 60, background #edeef2, padding 20px (24px at the bottom). Flex column, overflow-y auto, overscroll-behavior contain.
- Fade with opacity only, 300ms. When closed: pointer-events none and the inert attribute.
- While open: set overflow: hidden on <html>. Close on Escape, on any link click, and when the viewport reaches 768px.

CONTENT
- Top: the text logo with superscript ™, in a 40px-tall row aligned with the toggle.
- 32px below: three link rows — Products, About, Contact. Each row:
  - 64px tall, radius 28px, background #f6f6f8, padding 0 24px.
  - Text 30px semibold, tracking -0.03em, with a 22px diagonal arrow on the right. 8px gap between rows.
- Then wrapped chips: Landing Pages, UI Components, Web Templates, Animations — 36px tall, 1px #dcdde2 border, 14px medium. Last comes a disabled "Agent Skills" chip with a dashed border and a small lime "SOON" tag (see "Coming Soon Roll Pill").
- Pushed to the bottom (margin-top auto):
  - A 2-column row: "Create Account" (black pill) and "Sign In" (#f6f6f8 pill), both 56px tall.
  - A row of three equal 56px pills with Instagram, LinkedIn and X icons.
  - 12px #8a8a8f text: "© {year} Your Studio™" on the left, "Your-site.com" and "Legals" on the right.

STAGGERED ENTRANCE
- Each block animates opacity 0→1 and translateY 12px→0, 300ms ease-out.
- When opening, block i gets transition-delay 80ms + i×40ms. When closing, delay is 0 so everything leaves together.
- Only animate opacity and transform, so it never lags.