Nebula

You are a senior product designer shipping a launch-ready SaaS landing page. Build a complete one-page site with real, confident copy for a fictional analytics product called Nebula ("See every signal."). No lorem ipsum anywhere.

ART DIRECTION — dark glassmorphism. Background #05060A. Two soft aurora blobs (radial gradients, heavily blurred) in #6D5DF6 and #22D3EE with a hint of #F472B6, drifting slowly behind everything. Panels are frosted glass: rgba(255,255,255,0.04) with a 1px rgba(255,255,255,0.08) border and backdrop-blur. Text #EDF1F7, muted #9AA3B2. Accent gradient: #6D5DF6 to #22D3EE. Fonts via Google Fonts link in the head: "Space Grotesk" 600/700 for headings, "Inter" 400/500 for body. Mood: cosmic, precise, premium.

LAYOUT, top to bottom:
1. Sticky glass nav — wordmark left, four anchor links, gradient "Start free" pill.
2. Hero — centered. Small uppercase eyebrow, one huge two-line headline (clamp 44–84px), one-sentence subhead, primary gradient CTA + ghost secondary, then a glass dashboard mock built in pure HTML/CSS (sidebar, three stat cards with animated counters, a line chart drawn as an SVG path).
3. Logo strip — five fictional customer names in muted small caps.
4. Three feature cards — glass, icon drawn as inline SVG, title + two lines each.
5. Wide product panel — split layout, feature checklist left, second CSS-built UI mock right.
6. Metrics band — four big animated numbers (counts up on scroll into view).
7. Pricing — three glass tiers, middle tier lifted with the gradient border, honest feature lists.
8. Short FAQ (four items, native details/summary styled) and a compact footer.

MOTION: hero elements rise 24px and fade in with an 80ms stagger, cubic-bezier(0.22,1,0.36,1); aurora blobs loop a 30s drift; cards lift 4px and brighten their border on hover; every section below the fold reveals once via IntersectionObserver (16px rise + fade). Counters animate only when visible. Respect prefers-reduced-motion: disable drift and reveals, show everything.

RULES: fully responsive at 375 / 768 / 1280 (hero stacks, nav collapses to a simple menu). Semantic HTML, visible focus states, body-text contrast at least 4.5:1. All artwork is CSS gradients or inline SVG — no external images or libraries. Content must be visible even if JavaScript never runs; motion is an enhancement, not a dependency.