Create a full-viewport dark SaaS hero section for a fictional product called "Lumen". Deliver one self-contained HTML file with plain CSS (no frameworks), plus the same section as a React + Tailwind component.

Palette and type
- Background #07070c, text #f4f4f8, muted text #a1a1b5, hairlines rgba(255,255,255,0.10).
- Aurora colors: violet #7c3aed, cyan #22d3ee, emerald #10b981, pink #f472b6.
- Fonts from Google Fonts: "Inter Tight" 600 for the logo and headline, "Inter" 400/500 for everything else.

Background (three layers, back to front)
1. Aurora: four absolutely positioned circles, each 55vmax wide, filled with a radial-gradient of one aurora color fading to transparent at ~60%. mix-blend-mode: screen, opacity 0.5-0.75. Put them in a container that extends past the viewport (inset -20% -10% 10% -10%) with filter: blur(70px) saturate(140%) and a radial mask (ellipse 70% 60% at 50% 35%) so the glow fades out before the edges. Each blob drifts with its own keyframes (translate by 12-22vw / 6-12vh, rotate 25-45deg, scale 0.9-1.25) over 22s, 26s, 30s and 24s, ease-in-out, infinite alternate, so the motion never visibly repeats.
2. A faint 72px grid (1px lines at rgba(255,255,255,0.045)) masked with a radial gradient so it only shows near the center.
3. Film grain: a full-size ::after overlay using an inline SVG feTurbulence (fractalNoise, baseFrequency 0.9, 3 octaves, stitchTiles) as a background image, opacity 0.07, mix-blend-mode overlay, pointer-events none.

Layout
- Nav, max-width 1200px, padding 28px 32px: logo on the left (22px conic-gradient dot using the four aurora colors with a violet glow, then "Lumen"), links Product / Pricing / Changelog / Docs centered in 14px muted text, and on the right a muted "Sign in" link plus a "Get started" pill with a 1px hairline border and rgba(255,255,255,0.06) fill.
- Centered content: a pill badge (hairline border, 4% white fill, backdrop blur) containing a small "New" chip with a cyan-to-emerald gradient and the text "Lumen 2.0 — realtime sync is here →".
- Headline "Build at the / speed of light." with a line break after "the": clamp(44px, 7.2vw, 100px), line-height 1.02, letter-spacing -0.045em. The words "of light." use gradient text (100deg, #c4b5fd → #22d3ee → #6ee7b7).
- Lede, 18px muted, max-width 560px: "Lumen turns your product ideas into production-ready interfaces. Design, ship and iterate in one calm workspace."
- Two 52px-tall pill CTAs, 14px apart: primary "Start building — free →" (white fill, #0b0b12 text, cyan glow shadow 0 10px 40px -8px rgba(34,211,238,0.55); on hover lift 2px, stronger glow, arrow slides 3px right) and secondary "Watch the demo" with a small play icon (1px rgba(255,255,255,0.14) border, 4% white fill, backdrop blur, brighter fill on hover).
- Small note under the buttons: "No credit card required · 14-day Pro trial" in 13px #6f6f85.
- A logo row 72px below: tiny uppercase "Trusted by teams at" (letter-spacing 0.14em) above five text wordmarks (Northwind, Acme Co, Globex, Umbrella, Initech) in Inter Tight 600, #8a8aa0.

Motion
- Staggered reveal on load: the badge, each headline word, the lede, the CTA row, the note and the logo row each start at opacity 0, translateY(0.45em), blur(10px) and animate to their resting state over 1s with cubic-bezier(0.16, 1, 0.3, 1). Delay = 200ms + index × 90ms, using a --i custom property per element (badge 0, words 1-6, lede 8, CTAs 10, note 11, logos 13).
- Respect prefers-reduced-motion: stop the aurora and show all text immediately.
- Mobile (<760px): hide the nav links and "Sign in", tighten the logo row.