PROMPT: Build a full-viewport cinematic movie/streaming hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font from Google Fonts. The entire page is a single full-height hero -- no scrolling, no additional sections. BACKGROUND VIDEO: A full-screen background video plays on loop, muted, autoplaying, covering the entire viewport with object-cover. The video is fixed-positioned behind everything at z-index 0. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4 BOTTOM BLUR OVERLAY (no gradient darkening): Over the video, there is a single fixed, full-screen overlay div that applies a strong backdrop-blur-xl. This div uses a CSS mask so the blur only appears at the bottom and fades to transparent toward the middle of the screen. There is NO dark gradient overlay -- only blur. The mask: mask-image: linear-gradient(to top, black 0%, transparent 45%) (with the -webkit- prefix too). This overlay is pointer-events-none and sits at z-index 1. FONT: Import Inter from Google Fonts (weights 300-700). Set font-family: 'Inter', sans-serif on the body. LIQUID GLASS EFFECT (used on multiple buttons): Create a reusable .liquid-glass CSS class with these exact properties: background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity backdrop-filter: blur(4px) (with -webkit- prefix) border: none box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1) position: relative;
……（完整源码请在站内查看）
