Layered Depth

Build a high-performance, agency-grade Landing Page section called "Layered Depth" in React 19, TypeScript, and Tailwind CSS with Framer Motion.

## 1. Overview & Visual Objective
Create a React + Vite + TypeScript + Tailwind CSS landing page for an architecture studio called "Qelora". The page has exactly two sections: a Hero and a Section 2. The entire site uses inline styles (no Tailwind utility classes in JSX -- Tailwind is only used for base reset). Use only `react`, `react-dom`, and `lucide-react` as dependencies (icons are all inline SVGs here, lucide is not actually used in this page).

Visual Aesthetics & Mood:
dark warm earthy palette deep brown charcoal black cream off-white accents editorial architectural minimal layered overlapping elements strong sense of depth stacked planes custom geometric display typography large expressive headings generous whitespace spacious calm muted tones understated sophisticated gallery-like quiet luxurious tactile organic natural smooth scrolling serene composition asymmetric balance refined restrained

## 2. Technical Stack & Dependencies
- Framework: React 19 + TypeScript + Vite
- Styling: Tailwind CSS v4 + Lucide React icons
- Animation Engine: Framer Motion (layout animations, spring physics, scroll-linked parallax)