## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/airpods-5/0db86e09-94cf-4830-8c9a-1751c9bb478c-1789106585230-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/airpods-5/0db86e09-94cf-4830-8c9a-1751c9bb478c-1789106581845.webp
- Design on Kage: https://kage.design/designs/airpods-5-landing-page

## Before you start
Ask the user what product or feature they are launching, who the audience is, and what brand assets exist (name, colours, type, product imagery). Wait for the answers before writing code. Apply the language below to their product, not to any reference brand.

## Page structure
Build a long-scroll product landing page in this order:

1. **Local notice bar** — thin, dark, centred utility text at the very top (region/availability note), optional.
2. **Hero** — full-bleed cinematic image or gradient scene with dark product-centred photography; bottom-left aligned: small product name, a 2-line semibold headline ("Discover the magic of ___."), availability sub-line, and on the right a "Starting at $X" label plus a solid rounded CTA pill. Beneath the hero, a small play + dot-paginated media control strip.
3. **Highlights** — large left-aligned section headline ("Get the highlights.") with a small "Watch the film" link on the right; below, a full-width rounded-corner feature card with overlaid copy, horizontally scrollable to siblings.
4. **Closer look** — left-aligned headline, then a carousel of light-grey product shots on cards, each with a tiny two-part caption (bold lead-in + description) and prev/next arrows.
5. **Feature act: ANC** — full-bleed coloured gradient scene: small white eyebrow label, huge centred white headline, silhouette imagery; then below on white, a narrow centred paragraph, then a 3-column icon feature trio (icon, bold name, short copy).
6. **Feature act: audio** — same act pattern with a contrasting gradient (magenta/purple), plus a horizontal card carousel of 3–4 cards, each with imagery on top, bold lead-in + short copy below; one card may be pure gradient with a text-only title.
7. **Feature act: ecosystem** — warm gradient act with centred headline, a large centred device mockup with a play control, a caption paragraph, then a card carousel (dark card with quoted command text, white icon card, screenshot card).
8. **Feature act: charging** — teal/green gradient act with centred headline, product image, then a stats trio: three bold "Up to N hours" figures in accent colour with supporting copy, followed by two half-width white cards for charging options.
9. **Services band** — white section, left-aligned large headline ("Why ___ is the best place to buy ___") with a link on the right, then a 3-card row of icon-led services; finish with a centred outlined "Compare all models" pill button.
10. **Comparison / buy** — left-aligned headline, then a two-column side-by-side product comparison table on light cards: product image, name, description, price, badge, and a shared row-by-row spec list (icons + labels) aligned across columns.

## Design language
- Rhythm: alternate immersive full-bleed coloured acts with quiet white editorial sections; each act = eyebrow + big centred headline + supporting paragraph + evidence (cards, stats, imagery).
- Hierarchy: only two type tiers — very large semibold display headings (~48–80px) and small 14–17px supporting copy; use eyebrow labels (small semibold) instead of subheads inside acts.
- Colour: white (#fff) and near-black (#1d1d1f) base; each act owns a vivid gradient — e.g. orange→blue (#ff9a3d→#1a5cd6), magenta (#e040fb→#7b1fa2), teal→green (#00b8a9→#1db954). Text on gradients is white.
- Type: a single humanist sans (SF-style) family at two weights (semibold display, regular body); tight tracking on large sizes, generous line-height on small copy.
- Cards: large radii (~28px), no visible borders, flat colours or soft grey (#f5f5f7) fills; carousels use snap-scroll with circular prev/next arrow buttons.
- Stats: bold numeric statements in the act's accent colour, short supporting line beneath.
- Motion: static screenshots suggest scroll-reveal of acts and scrollable carousels; keep transitions soft and short.
- Buttons: small pill-shaped solid blue CTA (#0071e3) with white text; secondary links in blue text with a chevron.
- Density: sparse — lots of whitespace between sections; evidence lives in bounded cards, never cluttered paragraphs.

## Never
Do not copy Apple product names, AirPods imagery, the "Discover the magic" headline, Siri/Apple icons, or any Apple photography, illustrations, or icon sets. Never present the result as Apple's product.