Aurora

Build a SaaS product landing page using the "Aurora" theme — Midnight gradients and glass panels for a product that feels expensive.

## Art direction
Deep midnight canvas with a soft violet-to-cyan aurora glow blooming behind the hero and fading to nothing by the second section. Panels are frosted glass — a translucent surface fill, a 1px lighter hairline, and a wide diffuse shadow — so they read as floating above the glow rather than sitting on it. Generous negative space; the page should feel unhurried and expensive.

## Colour palette (use these exact values)
- Background: #0B0A1F
- Surface / cards: #16143A
- Primary text: #F5F3FF
- Secondary text: #A9A3D6
- Accent (buttons, links, active state): #7C5CFF
- Text on accent: #FFFFFF
- Borders / dividers: #2A2560
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: Geist, "Inter", system-ui, sans-serif
- Body: Geist, "Inter", system-ui, sans-serif
- Tight display scale — 60px hero headline at -0.03em tracking, 600 weight; body at 16/1.7 in the muted tone so the headline keeps all the contrast.

## Page structure
1. Sticky translucent top bar: wordmark left, five nav links centred, a ghost 'Sign in' and a solid accent 'Start free' right.
2. Hero split 55/45 — eyebrow chip, a two-line headline, one supporting sentence, a primary and a ghost CTA, and a trust line of logo placeholders drawn as monochrome wordmarks.
3. Hero visual on the right: a glass panel showing an abstract product UI (sidebar, list rows, one chart) drawn entirely in CSS.
4. Three-up feature row: icon in an accent-tinted rounded square, a short title, two lines of copy.
5. A single alternating deep-dive — screenshot panel left, copy right — repeated twice with the sides flipped.
6. Metrics band: three oversized numbers with a label beneath each, on a slightly lighter surface strip.
7. Testimonial trio in glass cards, each with a quote, an avatar circle drawn as initials, a name and a role.
8. Pricing: three tiers, the middle one raised with an accent border and a 'Most popular' chip.
9. FAQ accordion, six questions.
10. Closing CTA band over the aurora gradient, then a four-column footer.

## Components and detailing
Buttons are 44px tall with a 10px radius; the primary is a solid accent fill with a subtle inner top highlight, the secondary is a 1px border on transparent. Cards use a 16px radius, `background: rgba(255,255,255,0.04)`, a 1px `#2A2560` border and `backdrop-filter: blur(12px)`. Inputs match the card treatment. Icons are 20px line icons at 1.5px stroke, never filled.

## Motion
Sections fade up 12px on scroll-in, staggered 60ms apart, once only. Cards lift 2px with a brightening border on hover over 150ms. The aurora glow drifts on a very slow 20s loop — subtle enough that you notice it only if you stare.

## Copy and imagery
Confident and specific, never breathless: name the job the product does and the time it saves. Headline is a claim, subhead is the proof. All imagery is CSS-drawn abstraction — gradient meshes, UI mockups, geometric shapes — no stock photography anywhere.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.