Ledgerly

You are the design lead at a modern private-banking startup. Build a complete one-page site for a fictional product called Ledgerly ("Money, kept beautifully."). Copy is calm, exact, and trustworthy — write it all, no lorem ipsum, no hype words like "revolutionary".

ART DIRECTION — editorial trust. Paper background #F7F5EF, ink #14201A, deep emerald #0B5137 for accents and fills, a restrained gold #C9A96A for hairline details only. Generous whitespace; hairline 1px rules in rgba(20,32,26,0.14) between sections. Fonts via Google Fonts: "Fraunces" (soft serif, 500/600) for headlines with tight letter-spacing, "Inter" for body and UI. Buttons: emerald fill, cream text, fully rounded. Mood: a beautifully typeset annual report.

LAYOUT, top to bottom:
1. Nav — serif wordmark, three quiet links, emerald "Open an account" pill.
2. Hero — split. Left: an eyebrow in letterspaced small caps, a large serif headline (clamp 40–72px), two-sentence subhead, CTA pair, and a row of three tiny trust notes (regulated, insured, human support). Right: a CSS-built bank card — emerald, subtle noise via layered gradients, embossed number, gold chip — tilted 6deg, floating gently.
3. A numbers row — three serif figures (assets, members, uptime) with hairline dividers.
4. Three principles — large serif numerals 01/02/03, a principle each ("Never surprise you" etc.), two lines of body.
5. Product spread — left: a clean CSS mock of an account screen (balance, three transactions with small category dots); right: four short feature lines with emerald check icons.
6. A full-width emerald band — one serif sentence of reassurance and a cream CTA.
7. Footer — two columns, fine print set small and honest.

MOTION: restrained. Hero text fades up 12px with a 60ms stagger; the card floats on a slow 6s ease-in-out loop and straightens to 0deg on hover; numbers count up once when revealed; sections fade in gently via IntersectionObserver. Nothing bounces. Respect prefers-reduced-motion.

RULES: responsive at 375 / 768 / 1280 (hero stacks, card scales down). Semantic HTML, visible focus rings in emerald, body contrast at least 7:1 on the paper background. All art is CSS/SVG — no images, no libraries. The page must feel complete with JavaScript off.