Tally+.

# Build a website in the "Tally+" 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, Features, Split in seconds, Pricing, Testimonials, Call to action, Footer) and rename each section for this business

## Design: Tally+ (saas)
A black SaaS landing page with a glowing gradient headline split around a phone UI built in HTML and CSS.

The headline "Meet Tally+" is set huge in a pink to lilac to peach gradient and split either side of a live phone mockup, over a soft light bloom. The phone is real markup, including a semicircle gauge that animates to 80% on load, and a second phone lower down lets visitors tap names to re-split a bill.

Theme: dark. Palette: background #050507, text #f5f3f7, secondary text #a19cab, accent #b99cff. Typefaces: Plus Jakarta Sans.

Overall: near-black page (#050507), light text (#f5f3f7), muted copy #a19cab, panels #0e0e13 and #15151c with 1px rgba(255,255,255,.1) borders. Accent is a gradient #ff9ac1 > #b99cff > #ffc59a at about 100 degrees, used for the headline, primary buttons, gauge and active states. One typeface: Plus Jakarta Sans 400 to 800. Body 17px, leads 18px, tracking tightened to -0.04em on display type.

Nav: fixed floating pill centred at the top (rgba dark, backdrop blur 18px, 1px border). Brand "Tally+" with a gradient plus, links Features / About / Pricing / Blog, and a light "Sign up" pill. Under 820px the links collapse into a menu button that opens the pill downward.

Hero: full viewport. A three column grid (1fr auto 1fr): word "Meet" right-aligned at left, the phone (292x600, 44px radius, black bezel, dynamic island) in the centre, "Tally+" left-aligned at right. Words are 800 weight, clamp(76px, 11.6vw, 176px), gradient text, line-height .9. glow.jpg sits behind as a bloom (about 1500px wide, opacity .55, radial mask so edges fade to black). Below: one 18px sentence and two pills (gradient "Get Tally+ free", outlined "See how it splits"). On mobile the headline sits on one line above the phone, everything stacks.

Phone UI (pure HTML/CSS/SVG): status bar with time and icons, "Earnings" header with initials avatar, card with a 32px 800 figure, a semicircle SVG gauge (pathLength 100, 9px round stroke with gradient, track #2a2a33) that draws to 80% in 2s, a row of four 44px avatar circles (groups), a two row transaction list with green inflow, and a floating tab bar.

Features: three rounded 28px cards in a 3 column grid, each with a small abstract graphic (bars, split-mode chips, donut ring), a number, a 26px title and muted text. Hover lifts 6px and reveals a lilac glow at the bottom.

Split in seconds: two columns, text and three numbered steps on the left, a second phone on the right with a bill total and four person buttons (aria-pressed toggles). Tapping a name includes or skips that person and recalculates cent-exact shares with the remainder distributed.

Pricing: two plans, Free ($0) and Plus ($4/month, gradient border tint and "Most loved" tag), each with a gradient check list. Testimonials: three cards, 19px quote, initials avatar. CTA: another bloom, a 96px headline with one gradient phrase, an email pill form (preventDefault, inline confirmation). Footer: brand, three link columns, legal line.

Motion: hero entrance is staggered rise (translateY 34px to 0, opacity) over 1.1s with cubic-bezier(.22,1,.36,1), words at .25s and .4s, phone at .55s, copy at .85s; nav drops in at load; bloom scales in over 2.4s. Only hover and tap otherwise. prefers-reduced-motion removes animation and shows the gauge at 80%.

Responsive: breakpoints at 1000px (cards stack, split section stacks) and 820px (hero stacks, menu button), 480px (buttons full width).

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