Product landing page

Build a one-page marketing site for a fictional product called **Nimbus Notes** — a note-taking
app that syncs across a phone, a laptop and the web.

Everything renders from `index.html`. You may split CSS and JS into `style.css` and `app.js`.

## The page, in this order

1. **Top bar** — the product name and links to the three sections below. It stays visible while
   scrolling.
2. **Hero** — a headline, a one-sentence subhead, a primary call-to-action button and a
   secondary text link. Include a visual element you generate yourself (CSS or SVG — a mock of
   the app's interface, an abstract shape, whatever fits). Not a grey placeholder rectangle.
3. **Features** — exactly three features. Each has an icon you draw in SVG, a short title and
   two sentences of copy you write.
4. **Pricing** — three tiers: Free, Pro at $8/month, Team at $20/month. The middle tier is
   visually marked as the recommended one. Each tier lists four bullet points and has its own
   button.
5. **Footer** — a copyright line and three links.

## Requirements

- **Deliberate design.** One type scale, one spacing scale, a small colour palette you pick and
  use consistently. The page should look like one person designed all of it.
- **Responsive.** Comfortable at 1280px wide and at 375px wide. The top bar must reflow or
  collapse sensibly on a narrow screen — no horizontal scrolling at any width.
- **Interactive.** The top-bar links scroll smoothly to their sections. Buttons and links have
  visible hover *and* keyboard focus states.
- **Accessible.** Real landmarks (`header`, `nav`, `main`, `footer`), exactly one `h1`, sensible
  heading order, and body text that passes AA contrast against its background.

Write the copy yourself — no lorem ipsum.