1Headline hierarchy

H1 is capped at 15ch on desktop so it holds two lines; the mobile board runs it full-width across three lines. Serif is used only for the wordmark, H1, card titles and the callout numerals — never for UI.

2Spacing system

Strict 8px base grid. Only two values sit off-grid, both optical: the 1.04 H1 line-height and 1px hairlines.

Card grid is 1fr / 1fr with 24px gap on desktop; it stacks to one column on mobile with the mini-visual held at 96px.

3Where real Aviwell assets land

• Hero right column. The Fig. 01 SVG is a stand-in for a captured ANETO™ mechanism graph or MonExplorer™ explorer view — same 620 × 470 slot, same rounded frame. Capture at 2× for retina.
• Card mini-visuals. 176 × 150 slots inside each glass panel; swap for cropped platform screenshots once approved, keeping the 1px left rule as the divider.
• Photography. If lab/field imagery is added later, it belongs in a band below the platform cards — not inside the hero. The hero stays instrument-led so the headline keeps full contrast.
• Wordmark. The current mark is typeset text plus a mono city line. Replace with the real logo lock-up; the sub-line drops below 920px.

4Platform cards

Glass panels at 52% surface mix (A) / 78% (B) with backdrop-filter: blur(14px) saturate(120%), a 1px border and a 16px radius. On hover the fill lifts to the stronger mix, the border takes 45% accent, the card rises 2px and the CTA underline moves to the accent — the label colour never changes.

Card tops sit at 900px on the desktop board, so the panels are cut by the artboard edge with their tops just meeting the fold; the two-column grid and glass treatment read as intentional even at 0px visible. On mobile the first card starts at 872px — a 28px tease inside the 844px window — and the cards stack to a single column.

5Motion — one mechanism, 10s

Explanation loop. The three omics ribbons drift ±1.4% and pulse 0.50 → 0.92 opacity, then the node pulses at 42% of the cycle and a pulse exits along the product branch at 60%. The loop is deliberately slower than the eye — it should read as a live instrument, not an animation.

Load. 620ms rise, 12px, staggered 60 / 440 / 660 / 880 / 1100ms — eyebrow → headline → subhead → CTAs → visual + cards.

Reduced motion. All keyframes collapse to a static frame; nothing essential is carried by motion.

8Accessibility & build contract

• Body, subhead, mono labels and button text all clear 4.5:1; borders and icons clear 3:1. Ratios are tabulated in aviwell-brand-spec.md.
• Every control has a visible :focus-visible ring in the accent. Hover never lightens foreground text — it moves fill, border or underline instead.
• CTAs are 48px minimum; the mobile hamburger is 44 × 44.
• Plain HTML + CSS with ~40 lines of JS (ribbon dismissal persisted in localStorage, language toggle, mobile menu). No framework, no build step — drops onto the existing PHP templates.
• Two accents per screen maximum: the eyebrow + primary CTA (Variant A) or the same pair in petrol (Variant B). Warm sand/coral marks outcome only.