Build a React application called "Livespan". This is a high-end longevity and bio-hacking health tracker. The app has a unique dual-layout architecture: it starts as a responsive marketing landing page, but when the user "logs in", it transforms into a simulated mobile app interface (even on desktop).

Here are the specific requirements and design systems:

1. Tech Stack

• Framework: React (Vite)
• Styling: Tailwind CSS
• Icons: Lucide-React
• Charts: Recharts
• Fonts: Inter (Google Fonts)

2. Design System (The "Vibe")

• Theme: Ultra-dark, futuristic, premium health-tech.
• Colors:
  • Backgrounds: Black (#000000) and Zinc-950/900 (#09090b).
  • Primary Accent: Emerald Green (#10b981) - used for glowing effects, positive trends, and primary buttons.
  • Secondary Accent: Violet/Purple - used for subtle gradients.
• Aesthetics: Heavy use of backdrop blur, rounded corners (xl/2xl), thin borders (zinc-800), and subtle glowing animations.

3. Architecture: The "Dual Mode" Layout

The App.tsx must handle two distinct view states:

State A: Landing Page (Default)

• Full-width, full-height, responsive web layout.
• Allows natural scrolling.

State B: App Mode (Mobile Simulator)

• Triggered when the user clicks "Start" or "Launch App" from the landing page.
• On Desktop: The app must render inside a fixed-width container (approx 400px wide, 844px high) centered on the screen. It should look like a phone, complete with a "notch" at the top and rounded corners. The background outside the phone should be dark.