Mira.

# Build a website in the "Mira" design

You are a senior web designer and front-end engineer. Build one responsive, accessible landing page as a single self-contained HTML file (inline CSS and JavaScript, no frameworks, no build step; Google Fonts is the only allowed external request). Follow the design specification below closely: layout, type, palette, section structure and motion. Replace the demo brand with the business described here.

## The business
- Name: not given; invent a short, credible name and say so at the top of your reply
- What it offers: not given; ask one short question, or infer from the name
- Audience: not given; write for a smart, busy visitor
- Tone of voice: Confident and plain-spoken
- Sections: keep the design's own sequence (Hero, A day at home, Hands, Safety and privacy, Reserve, Footer) and rename each section for this business

## Design: Mira (robotics)
A warm, calm hero over a sunlit photograph with a glass readout card and a chapter rail.

A full-bleed lifestyle photo with a large italic serif headline in cream and warm gold, a floating frosted-glass spec card and a four-chapter rail along the bottom. The rail advances on its own with a progress line and swaps the card's caption, and each chapter can be chosen directly.

Theme: dark. Palette: background #16110c, text #f4ede3, secondary text #bcae9c, accent #d7b37a. Typefaces: Instrument Serif (italic) + Inter.

Warm, calm, humane dark page: espresso background, cream text, one gold accent, big serif.

Palette: background #16110c, alternate section #1e1710, text #f4ede3, muted #bcae9c, gold #d7b37a (gold pill with #16110c text). Hairlines rgba(244,237,227,.16). Reserve section fades from #16110c to #221a11.

Type: Instrument Serif for display (upright for headings, italic for the hero and accents), Inter 17px body, 18px lead. Hero h1 clamp(3.2rem, 7vw, 6.6rem), line-height .92, italic, two lines: "Quietly" in cream and "capable." in gold. Section h2 clamp(2.4rem, 4.8vw, 4.4rem), with the key phrase in gold italic. Eyebrows are Inter 14px, 600, uppercase, 0.12em tracking, gold.

Hero (100svh, min 700px): absolute 84px header with an italic wordmark, text links and a gold "Reserve Mira" pill. The photo is full-bleed, object-fit cover, anchored left so the subject stays centre-right. Scrims: a top gradient (0.72 dark to clear over 22%) for the nav, a left-to-right gradient (0.9 at the edge, clear by 52%) for the copy, a right gradient for the card, and a bottom gradient. Copy sits bottom-left: headline, a 38ch paragraph in #efe6d8, then a gold pill and a ghost pill ("See a day at home"). A frosted glass card sits top-right (width min(340px, 26vw), radius 24px, rgba(22,17,12,.72), backdrop blur 22px) with three serif stats (165 cm, 32 kg, 4 h) and a caption block that changes with the chapter.

Chapter rail: four tab buttons along the bottom (Presence, Motion, Vision, Hands) with numerals, each with a 2px line above. The active tab's gold line fills over 6s, finished tabs stay filled, and after the fourth it loops. Clicking or using the arrow keys jumps to a chapter and swaps the card caption. With reduced motion there is no auto-advance.

Sections: A day at home is a split (portrait photo left, 4:5, radius 22px), with a gold-dotted vertical timeline (06:40, 09:15, 13:30, 18:00) using italic serif times. Hands is mirrored on the #1e1710 surface with a 2 x 2 fact grid (large serif number, gold unit, muted caption, hairline above) and the second photo right. Safety and privacy is a headline over three rounded cards (italic gold numeral, serif title, muted paragraph). Reserve is a two-column block: copy left, form right (name, email, home select, gold submit) with prevented submit and an inline thank-you.

Motion: hero entrance staggers headline, paragraph, buttons, card, rail (1100ms, cubic-bezier(.22,1,.36,1), 120ms steps, 26px rise). Photos scale 3.5% on hover over 1.4s. Pills lift 2px. No scroll reveals.

Responsive: under 960px the nav becomes a Menu button with a dropdown. The hero becomes a flowing column: photo behind, glass card first with a 200px top margin, then copy, then the rail in a 2 x 2 grid. Splits and cards stack to one column; photos become squares.

## Images
The design uses full-bleed photography. Use placeholder <img> elements with descriptive alt text and file names under img/ (for example img/hero.jpg), sized with width and height attributes and object-fit: cover, and list every image you need at the end of the file in an HTML comment: file name, aspect ratio, and a one-line photo brief in the style of the design, so they can be shot or generated later.

## Requirements
- Copy: real, specific sentences for this business. No lorem ipsum. Short headlines, concrete claims, one clear call to action repeated at the end.
- Accessibility: WCAG AA contrast measured against the actual background (add a scrim under text on photos), body text at least 16px, visible keyboard focus, semantic landmarks, one h1, alt text, labelled form fields.
- Responsive: designed at 1440, 1024 and 390 pixels wide with no horizontal scrolling; the navigation collapses to a working menu button on small screens.
- Motion: one orchestrated hero entrance plus motion that answers the visitor; respect prefers-reduced-motion.
- Forms do not submit anywhere: prevent the default and show an inline confirmation.

## Before you answer
- Check the first screen at 1440x900 and 390x844 reads as a finished, premium page.
- Check every text colour against its background.
- Return the complete HTML file in one code block, then the image list, and nothing else.