Remix Headroom's design.

Build a landing page for **[YOUR PRODUCT]**, [WHAT IT DOES, ONE LINE], for [WHO IT'S FOR].

Design it in the style of **Headroom's homepage (headroom.com)**: borrow its structure, typography, rhythm and signature moves, but use my product, copy and visuals. Don't copy their text, logo, illustrations or the running figure.

**Feel:** one bold colour, one sentence, one button. A cinematic, story-driven page: the hero is a wall of electric blue, then the page goes quiet and tells a "day in the life" story as you scroll.

**Type**
- Headlines: a tight grotesk at **700 weight** (Headroom uses TWK Lausanne; use **Instrument Sans 700** or **Inter Tight 700** as a free match). Hero ~88px desktop / 44px mobile, line-height 1.0, tracking -0.02em, centred.
- Body: **Inter**, 13–17px, line-height 1.55.
- Two-tone headlines: the second line is semi-transparent white (70% opacity) except the product name, which is full white ("You built your business by hand. / We'll help you run it with **[Product]**.").

**Colour**
- Hero: full-bleed electric blue `#123BFF`, white text.
- Rest of the page: off-white `#FBFBF8` and white, near-black text, with blue `#123BFF` only for small accents and links.
- CTA: a white pill on blue with blue text (6px radius or full pill), 48px tall, plus a "→" arrow.

**Layout, top to bottom**
1. **Floating pill nav**, centred at the top: a small white pill ~300px wide holding the logo (left) and "≡ Menu" (right). Nothing else.
2. Hero (100vh, blue): two-line centred headline, a white pill CTA, and a small text link under it ("Watch a [customer]'s Friday ↓").
3. **Signature move:** behind and around the headline, a **3D curved tunnel of translucent blue UI panels** curving away into the distance, like standing inside a cylinder of app screens. Each panel shows real-looking product moments (task names, "Reply drafted", "Updated", some old values in strikethrough next to new ones). At the vanishing point in the centre is a small pixel-art character or your product mark. Use CSS 3D transforms (perspective plus panels rotated around the Y axis) and let it rotate very slowly.
4. Bottom-right floating "Scroll ↓" pill.
5. Off-white story section: a phone lock screen pinned in the centre with stacked notifications, captioned in a centred two-line headline ("Now rewind that Friday, / with [Product] running it.").
6. A horizontal **timeline scrubber**: a thin line with time stops, a black chip showing the current time ("9:00 AM"), and a red "now" marker at the end. As you scroll, the time advances.
7. Centred one-liners with a bold second half, one per screen, each paired with a single small white UI card (a notification, an email, a calendar change) that animates in: "Your client changes the plan, and **[Product] updates everything.**"
8. End on the blue again: one headline and the same white pill CTA.

**Details:** huge whitespace; only one UI card visible at a time in the story; subtle shadows on cards (0 10px 30px rgba(0,0,0,.08)); 16px card radius.

**Motion:** slow tunnel rotation in the hero; scroll-driven story (sticky phone plus advancing timeline); cards slide up and fade in, one at a time.

**Avoid:** purple gradients, glassmorphism, emoji icons, feature grids, testimonial carousels. This page sells with one story, not a list.

Responsive: on mobile the tunnel becomes a gentle vertical drift of panels behind the headline; the story stacks naturally.