Our Sollar System

Recreate this exact high-performance, single-page web experience — pixel-perfect match.

═══════════════════════════════════════
1. TECH STACK & EXECUTION SCOPE
═══════════════════════════════════════
- Framework & Stack: React + Vite, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons
- Icons: lucide-react (Play, ArrowUpRight, Menu, X, Check, Star, Sparkles, Layers)
- Page Layout: Full-viewport responsive single-page (`w-full min-h-screen overflow-x-hidden`)
- Target Category: Media & Publication
- Main Title: "Our Sollar System"

═══════════════════════════════════════
2. FONTS & DESIGN TOKENS (EXACT)
═══════════════════════════════════════
Google Fonts / Imports:
1) Heading Font: 'Outfit', serif/display (Headlines, Hero title, Key Stats)
2) Body & UI Font: 'Space Grotesk', sans-serif (Buttons, Nav, Body copy, Badges)

Color Palette Tokens:
- Page Background: `#2e2e2e` (Deep slate obsidian)
- Primary Brand Accent: `#580061` (Electric brand highlight)
- Secondary Ambient Glow: `#850081` (Glow overlay & active states)
- Surface Cards: `bg-white/5 backdrop-blur-md border border-white/10 text-white`
- Visual Style Theme: Dark Glassmorphism

═══════════════════════════════════════
3. COMPONENT HIERARCHY & LAYOUT STRUCTURE
═══════════════════════════════════════
Outer Wrapper: `relative min-h-screen w-full bg-[#2e2e2e] text-white overflow-x-hidden`

── SECTION A: NAVIGATION BAR ──
- Sticky Glass Header: `sticky top-0 z-50 backdrop-blur-xl bg-black/40 border-b border-white/10`
- Left: Brand Logo & Title ("Our Sollar System")
- Center: Desktop Nav Links (About, Features, Showcase, Pricing, FAQ)
- Right: Action Buttons (Theme Toggle, Live Demo, Action CTA)

── SECTION B: HERO CANVAS & HEADLINE ──
- High-impact Hero Pill Badge: `px-4 py-1.5 rounded-full bg-[#580061]/10 border border-[#580061]/30 text-[#580061] text-xs uppercase tracking-widest`
- Giant Typography Headline: Font 'Outfit', responsive size (48px mobile -> 110px desktop), `-0.04em` letter-spacing, line-height 0.9
- Dual Action CTAs: Primary Button (`bg-[#580061] hover:opacity-90`) + Secondary Demo Button (`border border-white/20 hover:bg-white/10`)

── SECTION C: REQUIRED SECTIONS & CONTENT BLOCK ──
1. **Hero 3D Solar System Canvas**
2. **Particle Starfield & Glass Nav**
3. **Planetary Explorer Bento Grid**
4. **Orbital Motion Showcase**
5. **Space News Article Slider**
6. **Astronomical Data Visualization**
7. **Publication Glass Modal**
8. **Cosmic Particle CTA**

── SECTION D: FOOTER & MARQUEE ──
- Multi-column layout with quick links, newsletter form, social icons, and animated scrolling marquee text.

═══════════════════════════════════════
4. ANIMATIONS & MOTION PHYSICS
═══════════════════════════════════════
- Motion Spec: High Energy (3D Canvas & Particle)
- Keyframe Animations:
  * `wordReveal`: `from { opacity: 0; transform: translateY(100%); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); }`
  * `fadeUp`: `from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }`
  * `scaleIn`: `from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); }`
- Hover States: Cards scale `1.02x` with `#850081` border glow and spring easing `cubic-bezier(0.16, 1, 0.3, 1)`.

═══════════════════════════════════════
5. STRICT CONSTRAINTS (DO NOT)
═══════════════════════════════════════
- DO NOT use generic plain colors or browser defaults; stick to the specified token palette.
- DO NOT omit responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`).
- DO NOT use placeholder text where specific section copy can be generated cleanly.
- DO NOT break visual hierarchy; preserve dark obsidian theme with crisp typography contrast.