Soma.

# Build a website in the "Soma" 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, The five, Texture, Routine, Faces, Subscribe, Footer) and rename each section for this business

## Design: Soma (beauty)
An airy sage skincare landing page with a calm light-weight sans headline and one serif accent word.

A pale sage page where a light Figtree headline carries one word in Gloock, a short brand statement sits opposite it, and a large product photo rests in a soft rounded frame below. A floating pill nav, quiet list rows and rounded sage panels keep the whole page calm and unhurried.

Theme: light. Palette: background #eef0e8, text #1c2019, secondary text #555c4f, accent #4f5e3b. Typefaces: Figtree + Gloock.

Overall: light sage page #eef0e8, raised surface #f8f9f4, text #1c2019, muted text #555c4f, single accent moss #4f5e3b (buttons, serif accent words, small labels). Hairlines are rgba(28,32,25,.14). Body Figtree 400 at 17px, display Figtree 300 with tight tracking (-0.04em), and Gloock used sparingly: one accent word per headline, numerals, the wordmark and the pull quote. Content column max 1240px with 28px gutters.

Nav: fixed floating pill centred at the top, translucent surface with blur, hairline border and soft shadow. Wordmark "Soma" in Gloock, four text links, and a moss "Order now" pill. Below 820px it collapses into a round menu button that opens the links inside the pill.

Hero: two column grid (1.35fr / 1fr, bottom aligned). Left: Figtree 300 headline at clamp(50px, 7.4vw, 112px), line-height .98, ending in the Gloock word "settles." in moss; under it a trust row with four overlapping initial avatars (sage tints) and "3,100+ quiet converts". Right: a 26px light statement ("We took things out until only the five that work were left.") with a moss pill button. Below, a full-width photo frame with 36px radius and height clamp(340px, 44vw, 620px), image object-fit cover, plus a small translucent caption chip bottom-left.

The five: eyebrow, headline, and a hairline-ruled list. Each row is a six column grid: Gloock numeral, product name (24px, 500), one sentence of what it does, size, price, and an outlined Add toggle that turns moss and reads Added. Hover lifts the row onto the surface colour and nudges it 12px right. A summary line updates as products are added.

Texture: a #f8f9f4 panel with 48px radius holding a square image (30px radius, slow 1.4s zoom on hover) and, at right, a headline, lead, and a ruled ingredient list with percentage and a 3px moss bar.

Routine: two rounded cards (surface and a deeper sage #dfe4d2), each with a Gloock title, duration and four numbered steps separated by hairlines.

Faces: 5:6 grid with a 4:5 portrait and a large Gloock quote, attribution, and three light stat numbers. Subscribe: a full-width moss block with 48px radius, light headline, and a white pill email form with a dark button (preventDefault, inline confirmation). Footer: wordmark, two link columns, legal line.

Motion: hero entrance staggers headline, statement, trust row and photo with a 30px rise over 1.1s using cubic-bezier(.22,1,.36,1), and the photo settles from 1.08 to 1 scale over 2.2s. Otherwise motion is only hover and toggle feedback. prefers-reduced-motion disables it.

Responsive: at 1000px rows reflow into a three column grid and the image sections stack; at 820px the hero stacks and the menu button appears; at 480px stats become two columns and forms stack.

## 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.