# Agency v13 — Cinematic HLS hero
A modern React landing page with a full-screen HLS video background, glassmorphic navigation header, and hero content positioned in the bottom-left corner.
## Layout
- **Single viewport:** 100svh, no scroll
- **Video:** Full-bleed HLS stream covers the entire viewport, looping, muted, autoplaying
- **Navbar:** Fixed glassmorphic bar at top with logo left, links center, CTA right
- **Hero:** Bottom-left anchored — large display heading, one-line subtitle, and a glass CTA button
- **Overlays:** Subtle bottom-to-top gradient to lift text off the video
## Typography
- **Heading:** Instrument Serif, large display scale (6xl-8xl), normal weight
- **Body:** Inter, regular weight
- **Letter spacing:** -0.03em on display heading
## Color
- Dark theme (video-first)
- Foreground: `#FFFFFF`
- Background: `#000000`
- Muted foreground: `rgba(255,255,255,0.6)`
- Glass panels: `rgba(255,255,255,0.04)` + `backdrop-blur(12px)`
## Animation
- Staggered fade-rise entrance on heading (0s), subtitle (0.2s), CTA (0.4s)
- Duration: 0.8s ease-out
## Assets
- HLS video: `https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8`