Cloudform

You are a senior designer for a premium wellness studio. Build a complete one-page site with real, calm copy for a fictional breathwork studio called Cloudform ("Ten minutes to somewhere quieter."). No lorem ipsum.

ART DIRECTION — soft dimensional night. Background deep blue-black #0E1420. The signature element: ORBS — spheres built purely from layered radial gradients (a bright off-center highlight, a mid tone, a dark rim) in moonlight blue #8FB8FF and dawn peach #F4C6A8, each with a soft ellipse shadow beneath (a blurred, squashed pseudo-element) so they sit IN the space rather than on it. One large hero orb breathes: scale 1 → 1.06 → 1 on an 8-second loop, its glow (a blurred duplicate behind it) breathing in sync. Cards are pillowy dark neumorphism: #131A29 with a soft dark outer shadow below-right and a faint light inner edge above-left, radius 22px. Text #EAF0F9, muted #8B96AB. Fonts via Google Fonts: "Fraunces" 500/600 (soft optical serif) for headings, "Inter" for body. Mood: planetarium calm.

LAYOUT, top to bottom:
1. Minimal nav — wordmark, two links, one soft-pill CTA ("Book a session").
2. Hero — centered. The breathing orb sits behind a two-line serif headline (clamp 40–68px) and a one-line subhead; a small "scroll to breathe" hint below. Two smaller orbs drift at the edges.
3. "The practice" — three pillowy cards (Breathe, Ground, Sleep), each with a small orb of its own color and two calm lines.
4. Session band — a wide card containing the sphere timer: a mid-size orb with a thin SVG progress ring around it and "4 · 7 · 8" phase labels; the ring draws through one demo cycle when scrolled into view.
5. Guides — two instructor cards (initial-monogram discs, not photos), one line of credentials each.
6. Schedule — a simple week strip of six session chips with times; one chip marked "Full" in peach.
7. Quiet pricing — two options (drop-in, monthly), pillowy cards, honest inclusions.
8. Booking form — name, email, preferred session; labeled fields; note it needs connecting. Footer with a single small orb as the mark.

MOTION: orb breathing loops (8s, ease-in-out); edge orbs drift ±12px over 20s; cards rise 18px + fade on IntersectionObserver reveal with 70ms stagger; the timer ring animates stroke-dashoffset once. Buttons brighten their inner edge on hover — no lifts here, everything settles rather than pops. Respect prefers-reduced-motion: orbs static, ring shown complete, instant reveals.

RULES: responsive at 375 / 768 / 1280 (hero orb scales down behind the headline, never overlaps text illegibly — add a subtle dark scrim behind hero text). Semantic HTML, labeled form fields, focus-visible rings, body contrast at least 4.5:1. All art is CSS gradients and inline SVG — no images, no libraries. Content complete without JavaScript.