Build a single self-contained HTML file (no build step, external assets limited to fonts and icons from a CDN) that renders a marketing landing page for a fictional SaaS company called "Cadence" — a team productivity / async standup tool. Use the exact copy and content below; do not invent alternative messaging. The page must match the following specifications.
1. Overall Structure & Behavior

A single-page scrolling layout with these sections in order: sticky nav, hero, logo strip, features, how-it-works, testimonials, pricing, FAQ, final CTA, footer.
Sticky top nav that starts transparent over the hero and gains a solid white background + subtle shadow once the user scrolls past the hero (use a scroll listener or IntersectionObserver).
Smooth-scroll to anchors when nav links are clicked.
Fully responsive: desktop (≥1024px), tablet, and mobile (<640px) with a hamburger menu that toggles a mobile nav panel. No horizontal scroll at any width.

2. Navigation Bar

Left: wordmark "Cadence" with a small circular logo mark (a simple SVG circle/dot, color #5B5BD6).
Center/right links: Features, How it works, Pricing, FAQ.
Right: a ghost "Log in" button and a solid "Start free" button (#5B5BD6).
Collapses to a hamburger on mobile.

3. Hero Section

Headline: "Standups without the meeting."
Subhead: "Cadence turns daily check-ins into async updates your team actually reads. Reclaim your mornings — and your focus."
Two CTAs: primary solid "Start free — no card needed" (#5B5BD6), secondary ghost "Watch 2-min demo" with a small play icon.
Right side (or below on mobile): a stylized product mockup — a rounded "browser window" card built in pure HTML/CSS showing 3 mock standup update rows (avatar circle + name + one line of status text). Sample rows: "Maya · Shipped the billing fix 🎉", "Tom · Blocked on API keys, need review", "Priya · Writing onboarding docs today".
Background: soft gradient from #F5F3FF (top) to #FFFFFF (bottom) with a faint geometric pattern or blurred color blobs (#5B5BD6 / #9775FA at low opacity).

4. Logo Strip (social proof)

A muted line: "Trusted by fast-moving teams" followed by 5 fake company names rendered as simple styled text/SVG logos: "Northwind", "Lumen", "Patchwork", "Orbit", "Fathom". Greyscale, evenly spaced, wrapping on mobile.

5. Features Section (3-column grid)

Heading: "Everything your standup needs. Nothing it doesn't." Three feature cards, each with an icon (simple SVG or icon-font), a title, and 1–2 lines of body:

"Async by default" — "Team members post updates on their own time. No more 9am calendar collisions."
"Smart digests" — "Cadence bundles everyone's updates into one clean summary, delivered when you want it."
"Blocker alerts" — "Flagged blockers notify the right person instantly, so nothing stalls for a day."
Icon accent color #5B5BD6; cards have subtle hover lift (translateY + shadow).

6. How-It-Works Section (3 numbered steps)

Heading: "Up and running in minutes." Three horizontal steps (stack vertically on mobile), each with a large step number, title, and description:

"Connect Slack or Teams" — "One click. Cadence lives where your team already works."
"Set your cadence" — "Daily, weekly, or custom. Pick the rhythm that fits."
"Get your digest" — "Updates roll up automatically. Read in 30 seconds, stay in flow."

7. Testimonials Section

Heading: "Teams move faster with Cadence." Two or three testimonial cards, each with quote, avatar circle (use initials), name, and role:

"We cut our standup time by 90% and actually read each other's updates now." — Jordan Reyes, Eng Lead at Northwind
"The blocker alerts alone paid for the subscription in the first week." — Sana Malik, PM at Lumen
"Finally, a tool my remote team across five timezones doesn't hate." — Chris Doyle, Founder at Patchwork

8. Pricing Section (3 tiers)

Heading: "Simple pricing that scales with you." Three pricing cards; the middle one is highlighted as "Most popular" with a colored border (#5B5BD6) and a badge. Include a monthly/annual toggle that changes the displayed prices (annual = ~20% off, shown as the monthly-equivalent price).

Starter — $0/mo — "Up to 5 members" — features: Async updates, Daily digest, Slack integration. CTA: "Start free".
Pro — $8/user/mo monthly, $6.40 annual — "For growing teams" — features: Everything in Starter, Smart digests, Blocker alerts, Integrations. CTA: "Start free trial". (Highlighted.)
Business — $14/user/mo monthly, $11.20 annual — "For larger orgs" — features: Everything in Pro, SSO, Analytics, Priority support. CTA: "Contact sales".

9. FAQ Section (accordion)

Heading: "Questions? Answered." Four expand/collapse accordion items (only one open at a time, smooth height transition):

"Do I need a credit card to start?" — "No. The free plan and trial require no card."
"Which tools does Cadence integrate with?" — "Slack, Microsoft Teams, and more via our API."
"Can I change my cadence later?" — "Anytime, from your team settings."
"Is my data secure?" — "Yes — encrypted in transit and at rest, with SSO on Business plans."

10. Final CTA + Footer

Full-width CTA band with background #5B5BD6, white text: "Ready to skip your next standup?" + a white "Start free" button.
Footer on dark background #1A1B2E: 4 link columns (Product, Company, Resources, Legal) with 3–4 placeholder links each, the Cadence wordmark, and a copyright line "© 2026 Cadence, Inc."

11. Visual Design

Primary brand color #5B5BD6, secondary accent #9775FA, near-black text #1A1B2E, muted grey #6B7280, light backgrounds #F5F3FF / #FFFFFF.
Typography: a clean sans-serif from a CDN (e.g. Inter). Large bold headlines, generous line-height and section padding (≥80px vertical on desktop).
Consistent rounded corners (12–16px), soft shadows, and a coherent spacing scale.
Subtle scroll-in animations (fade + slight rise) on sections as they enter the viewport, via IntersectionObserver.

12. Constraints

Single .html file. All CSS and JS inline; only fonts/icons from a CDN.
Must run by opening directly in a browser with no console errors.
Fully responsive per the breakpoints above; verify mentally at 1280px, 768px, and 375px.
Do NOT use localStorage/sessionStorage — keep toggle state in memory only.
Code commented at each major section.

Success criteria for comparison: fidelity to the provided copy; layout and responsiveness quality across breakpoints; polish of the hero mockup and pricing toggle; quality of micro-interactions (sticky nav, accordion, scroll animations); visual coherence and clean code organization.