Pill Navbar with Hover Dropdowns

Build a transparent navbar with hover dropdowns made of pill buttons.

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.

STRUCTURE
- Header: flex, items centered, space-between. Padding 30px top/left/right (20px below 768px). position: relative, z-index 40.
- Left: text logo with a superscript ™ (0.6em, margin-left 2px), 20px semibold.
- Center nav: position absolute, left 50%, translateX(-50%). Links 14px medium, 32px gap. Hidden below 768px.
- Right: account icon button, 40×40 hit area with a 28px icon.

DROPDOWNS (CSS only — group-hover + group-focus-within)
- Each nav item is a relative "group". Its panel is absolute at top: 100% with 12px top padding, so the pointer can cross the gap without closing it.
- Center-nav panels are centered under their link. The account panel is right-aligned to the icon with 8px top padding.
- Hidden state: opacity 0, visibility hidden, pointer-events none. Open state: opacity 1, visible, pointer-events auto. Transition all 200ms.
- Card: 208px wide (192px for the account card), background #f6f6f8, 1px border #dcdde2, radius 28px, padding 8px, gap 6px, shadow-lg.
- Pills: height 40px, fully rounded, text centered, 14px medium. The first or main pill is black (#1e1e1e, white text). The rest use #edeef2.

MENU CONTENT
- Products: View all (black), Landing Pages, UI Components, Web Templates, Animations, then a disabled "Agent Skills" pill that rolls to "Coming soon" on hover (see "Coming Soon Roll Pill").
- About: Studio (black), Your-site.com, Legals.
- Contact: Form (black), then one row of three equal round pills with Instagram, LinkedIn and X icons. They open in a new tab and each has an aria-label.
- Account: Create Account (black), Sign In.

CLOSE AFTER NAVIGATION
- After a route change, blur the focused element and add a data-suppress attribute on the header. That attribute forces every panel hidden.
- Remove it on the first pointerover outside the nav groups, so a clicked dropdown doesn't stay open on the new page.

No hover color changes on any link or pill.