EcoVolta V2

Create a full-screen landing page hero section with the following exact specifications:

Video Background HLS streaming video from Mux: https://stream.mux.com/02gzwandixH4J534bd00JsCvlFfw6ha101WQ00C9b3sGibM.m3u8 Video must autoplay, loop, be muted, and play inline Use hls.js library for cross-browser compatibility with the following config: capLevelToPlayerSize: false (allow quality higher than player size) maxMaxBufferLength: 30, maxBufferLength: 20, maxBufferSize: 60MB Switch to highest quality level once manifest loads Native HLS support detection for Safari/iOS Video positioned absolutely, covering full viewport with object-cover Fonts Import from Google Fonts:

Instrument Serif (Regular 400, Italic 400) Manrope (Regular 400, Medium 500, SemiBold 600) Instrument Sans (Regular 400, Medium 500, SemiBold 600) SF Pro Display Medium for main heading Layout & Positioning Full viewport height container with overflow-hidden Main content centered absolutely: left: 50%, top: calc(50% - 136.5px), transform translate(-50%, -50%) Max width 984px with 24px horizontal padding Navigation bar: absolute position at top, 20px from top, max-width 1110px, horizontally centered Hero Content (Center) Main Headline:

Text: "An AI that does your outbound while you " (regular) + "close deals." (gradient italic) Regular portion: Instrument Serif Regular, #212121, 48px mobile / 70px desktop "close deals" portion: Instrument Serif Italic with radial gradient text effect Gradient: Radial from blue (#368CFB at 0%, #5CAEFE at 30%, #85BDE0 at 47.5%, #AECDC2 at 65%, #D6DCA3 at 82.5%, #FFEB85 at 100%) SVG gradient transform: matrix(35.22 -11.4 433.41 134.85 369.8 114) Leading: 1.1 mobile, 64px desktop Max width: 722px Opacity: 0.9 Subheadline:

Text: "AI sales agent that finds leads, personalizes outreach, follows up, and books meetings — automatically." Font: Manrope Regular, 18px mobile / 20px desktop Gradient text: from rgba(37,44,50,0.7) to rgba(55,65,74,0.7) Letter spacing: -0.4px Opacity: 0.7 Max width: 510px Gap above: 24px mobile / 32px desktop CTA Button:

Text: "Get started" (Instrument Sans Medium, 16px, white) Size: 152px × 52px, rounded 12px Background: Linear gradient from #444 to #292929 Border: 1px solid black Shadows: Outer: 0px 4px 4px rgba(0,0,0,0.25), 0px 1px 2px rgba(0,0,0,0.31) Inner: inset 0px 2px 1px rgba(255,255,255,0.51), inset 1px 1px 0.25px rgba(255,255,255,0.3) Hover: opacity 90%, smooth transition Gap above: 32px mobile / 48px desktop Navigation Bar (Top) Logo (Left):

Icon: 23×23px SVG with radial gradient (blue to yellow: #368CFB → #5CAEFE → #FFEB85) Text: "closer" in Instrument Serif Regular, 26px, #212121 Gap between icon and text: 6px Nav Links (Center, hidden on mobile):

Links: "Product", "How it works", "Pricing", "Customers", "Docs" Font: Manrope Medium, 18px Gradient text: from rgba(37,44,50,0.7) to rgba(55,65,74,0.7) Gap between links: 16px mobile / 26px large screens Hidden below md breakpoint Login Button (Right):

Text: "Login" (Instrument Sans Medium, 18px, #212121) Size: 108px × 46px, rounded 12px Background: white with 1px border #dde2e4 Hover: slight gray background, smooth transition Responsive Behavior Mobile: Single column, 48px headline, 18px body, tighter gaps (24px/32px) Desktop: 70px headline, 20px body, wider gaps (32px/48px) Navigation collapses on mobile (hide center nav) Percentage-based widths with max-width constraints Leading adjustments: tighter on mobile (1.1), fixed on desktop (64px for headline) Technical Requirements React + TypeScript + Tailwind CSS v4 Install: hls.js package All elements fully responsive Smooth hover transitions (opacity, colors) Proper z-indexing (video behind, nav on top) Cross-browser video compatibility with error recovery