A phone that folds on screen.

Create a single-file premium landing page for a fictional flagship smartphone called "Aether Fold".

Output ONE file named index.html — all CSS inline in a <style> tag, all JS inline in a <script> tag at the end of <body>. No external dependencies, no build step, no frameworks (no React/Vue/Tailwind CDN etc), no external images or fonts. Plain HTML + CSS + vanilla JS only.

## Product to market (invent reasonable specs/copy, keep it internally consistent):
- Name: Aether Fold — a book-style folding flagship
- Positioning: premium launch page energy, the register Apple and Samsung use
- Invent 5-6 headline features (foldable display, camera system, chip, battery/charging, hinge engineering, build material) with real ad copy for each — punchy marketing prose, never "Lorem ipsum" or "Feature description here"
- Invent a price, storage tiers, and **four** finishes with names (the reference register: "Lavender", "Graphite", "Cream", "Pistachio")

## The phone rendering — the centrepiece, and the hardest part

You have no 3D engine. Build the phone out of nested `<div>`s and CSS 3D transforms (`perspective`, `rotateX/rotateY`, `translateZ`), layered gradients, inset highlights and box-shadows.

**Required structure — build it from this skeleton, then design the details yourself:**
- A **body** with real thickness: use at least three stacked layers on different `translateZ` values (back panel, mid-frame/edge, screen glass). Rotating it must reveal a side wall, not two flat rectangles with a gap.
- A **screen** inset inside the frame, with a visible bezel of a few pixels and a glossy specular highlight — a diagonal light sweep, not a flat fill.
- A **camera module**: a raised rounded-rectangle plateau on the back holding **three** lenses of different sizes plus a flash dot. Each lens needs concentric rings (outer barrel, inner glass, a small bright reflection) — a plain dark circle is not a lens.
- A **hinge seam** down the middle of the body, visible as a distinct vertical line, since this is a folding phone.
- Correct **proportions**: a closed phone is roughly 2:1 tall, the unfolded screen roughly 1:1. A square or a wildly wrong aspect ratio reads as a placeholder.

Design freedom is yours for colour, materials, lighting and finish — but the parts above must exist as separate elements you can inspect in devtools.

**Fold interaction (the headline check):** a control that folds and unfolds the phone. The screen must animate its width between the closed and open aspect ratios, with the two halves visibly hinging about the seam — a CSS transition on real geometry, not a swap between two static images or an opacity crossfade.

## Required sections (in order)
1. **Sticky top nav** — wordmark, 3-4 anchor links that smooth-scroll to their sections, a "Buy" button. Must add a shadow/background only after the page is scrolled (a scroll listener that toggles a class).
2. **Hero** — headline, subhead, the phone rendering, primary CTA.
3. **Feature sections** — one per headline feature, alternating text-left/visual-right and text-right/visual-left, each with its own CSS/SVG visual. No photos.
4. **Finish picker** — four swatches. Clicking one must recolour **the actual phone rendering** (body, frame and camera plateau), update the finish name shown, and mark the active swatch. Recolouring only the swatch border is a fail.
5. **A "colours" lineup row** — the same phone rendered at small scale in **all four** finishes side by side, as in a real launch page. These must be real instances of the same markup, generated in a loop from the finish data — not four hand-written copies, and not four flat rectangles.
6. **Specs table** — display sizes (folded and unfolded), chip, battery, storage tiers, weight, price.
7. **Final CTA** with pricing and a "Pre-order" button.
8. **Footer** with a few link columns.

## SEO — must be real, not decorative
- A unique `<title>` under 60 characters and a `<meta name="description">` between 120 and 160 characters, both about this product.
- Open Graph tags: `og:title`, `og:description`, `og:type`, `og:url`, and `og:image`.
- `<html lang="en">` and a `<meta name="viewport">`.
- Exactly **one** `<h1>` on the page. Section headings must descend in order — no `<h3>` before an `<h2>` has appeared.
- A **JSON-LD `<script type="application/ld+json">`** block using schema.org `Product`, including `name`, `description`, `brand`, and an `offers` object with `price` and `priceCurrency`. It must parse as valid JSON.
- Semantic landmarks: `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`. Every interactive control reachable by keyboard, every icon-only button carrying an `aria-label`.

## Mobile — must actually work at 375px
- Responsive down to **375px wide with no horizontal scrolling at any width**. This is the check that catches fixed-pixel layouts.
- The nav collapses into a hamburger below ~768px, and the menu opens and closes on tap (real JS).
- Feature sections stack to one column on mobile; the alternating left/right layout applies only on wide screens.
- Tap targets at least 44×44px.
- The phone rendering scales down rather than overflowing — size it in relative units, not a hardcoded pixel width.

## Style
Dark, premium, high-contrast (dark background, light text, one vivid accent colour used consistently). Large confident typography, system font stack, generous spacing. Scroll-triggered fade-ins using `IntersectionObserver` — real observers on real elements, never a `setTimeout` chain.

Write only index.html. Do not create any other files. Do not add commentary — just create the file.