Dark Liquid-Glass Landing Page Hero

Build a single-page landing-page hero section using React, TypeScript, Tailwind CSS, and Lucide React icons. Follow these specifications closely.

## Background video
- Use a full-screen, muted, autoplaying video with `object-cover`, positioned absolutely behind the page content. Video URL: ${background-video-url}
- Shift the video down by 17% (`translate-y-[17%]`) so the top of the source frame is cropped and the lower portion remains visible.
- Implement seamless looping with a custom JavaScript fade system using `requestAnimationFrame`; do not use CSS transitions for the video fades.
- Fade in over 500 ms on load and at the start of each loop. Fade out over 500 ms when 0.55 seconds remain before the video ends.
- Use a `fadingOutRef` boolean to prevent repeated `timeUpdate` events from retriggering the fade-out. On `ended`, set opacity to 0, wait 100 ms, reset `currentTime` to 0, play the video, and fade it in.
- Cancel any running animation frame before starting a new fade. Resume each fade from the current opacity rather than snapping.
- The outer container should use `min-h-screen bg-black overflow-hidden`.

## Typography and liquid-glass styling
- Import the Google Font Instrument Serif in both regular and italic styles. Apply `fontFamily: "'Instrument Serif', serif"` inline to the main heading.
- Create a `.liquid-glass` class with `background: rgba(255, 255, 255, 0.01)`, `background-blend-mode: luminosity`, 4 px backdrop blur (including the WebKit-prefixed property), no border, an inset shadow of `0 1px 1px rgba(255, 255, 255, 0.1)`, `position: relative`, and `overflow: hidden`.
- Add a `::before` pseudo-element for the glass border: absolute positioning, `inset: 0`, inherited border radius, 1.4 px padding, and a vertical gradient with white opacity stops of 0.45% at 0%, 0.15% at 20%, transparent at 40% and 60%, 0.15% at 80%, and 0.45% at 100% (use the corresponding rgba alpha values 0.45, 0.15, and 0). Use the border-only mask technique with `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`, `-webkit-mask-composite: xor`, and `mask-composite: exclude`. Set `pointer-events: none`.

## Layout
Use one full-screen flex column.

### Navigation
- Place the navigation at `relative z-20` with `pl-6 pr-6 py-6`.
- Its inner container should be `rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto`.
- On the left, show a size-24 Globe icon and the white, semibold, large-text logo “Asme” with a gap of 2. Next to the logo, show “Features,” “Pricing,” and “About” links with a gap of 8. Hide these links on mobile and show them from the `md` breakpoint. Style them with white/80 text, white hover text, a color transition, small text, and medium font weight.
- On the right, show a plain white “Sign Up” text button and a liquid-glass “Login” button with rounded-full corners and `px-6 py-2`, separated by a gap of 4.

### Hero content
- Use `relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]`.
- Heading: “Built for the curious,” styled with `text-5xl md:text-6xl lg:text-7xl`, white text, `mb-8`, tight tracking, `whitespace-nowrap`, and Instrument Serif.
- Below it, create a `max-w-xl w-full space-y-4` container.
- Add a liquid-glass email signup bar with `rounded-full pl-6 pr-2 py-2 flex items-center gap-3`. Inside, use a transparent email input with placeholder “Enter your email,” white text, a white/40 placeholder, and base text size. Add a white circular submit button with `bg-white rounded-full p-3 text-black` containing a size-20 ArrowRight icon.
- Add this subtitle with `text-white text-sm leading-relaxed px-4`: “Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.”
- Add a centered liquid-glass “Manifesto” button with `rounded-full px-8 py-3`, white small medium-weight text, and a subtle `hover:bg-white/5` color transition.

### Social footer
- Add a `relative z-10 flex justify-center gap-4 pb-12` footer.
- Show three circular liquid-glass icon buttons with `rounded-full p-4`, white/80 text, white hover text, `hover:bg-white/5`, and a transition. Use size-20 Instagram, Twitter, and Globe icons from Lucide React. Give each button an appropriate `aria-label`.