Aether Landing Page — SaaS Dashboard

# Aether Landing Page — SaaS Dashboard

## Design Direction: Futuristic Dark

**Vibe**: Deep space, neural networks, fluid intelligence. Feels like controlling a spacecraft.

## Color System
- Background: #060A0F (near-black with blue tint)
- Surface: #0D1117 (dark gray-blue)
- Primary Glow: #00D4FF (electric cyan)
- Secondary Glow: #7B2FFF (deep violet)
- Text Primary: #E6F1FF
- Text Secondary: #8892A4

## Key Visual Elements

### Hero Section
Full-viewport height. Centered content with massive heading (text-7xl, font-weight: 800).
Background: animated particle field (subtle floating dots, opacity 0.3).
Headline uses gradient text: from-[#00D4FF] to-[#7B2FFF] bg-clip-text text-transparent.

### Glassmorphism Cards
background: rgba(255,255,255,0.03)
border: 1px solid rgba(255,255,255,0.08)
backdrop-filter: blur(20px)
border-radius: 16px

### Neon CTA Button
background: linear-gradient(135deg, #00D4FF, #7B2FFF)
box-shadow: 0 0 30px rgba(0,212,255,0.4)
On hover: box-shadow increases to 0 0 60px rgba(0,212,255,0.6), scale(1.02)

### Dashboard Preview
16:10 aspect ratio. Glassmorphism background. Shows a mock analytics UI with:
- Sidebar (12% width, solid dark surface)
- Metric cards with neon border-glow on hover
- Area chart with gradient fill from #00D4FF to transparent

## Animations
- Hero text: stagger in from Y+30, opacity 0→1, delay 0.1s per element
- Cards: fade-in with slight upward float on scroll
- Particle field: requestAnimationFrame loop, each particle moves at 0.1-0.5px/frame
- Gradient orbs: position: absolute, 600px diameter, blur-[120px], animate-pulse-slow (6s)