Midnight Navy Fintech Pricing
A deep-navy, teal-accented SaaS/fintech pricing page with a sticky blurred nav, monthly/annual toggle, and a glowing 'Most popular' middle tier across three cards.
Summary
A frameless, responsive SaaS/fintech pricing page in a deep-navy dark theme with teal accents: a sticky blurred nav, a centered hero with a status pill and a monthly/annual billing toggle, a 3-tier card row where the middle 'Most popular' tier glows and lifts above the others, a 4-up trust/compliance strip, an accordion FAQ, and a multi-column footer with a legal disclaimer block. Copy the look (navy + teal, Sora/Inter, glowing highlighted tier) and the pricing structure (3 tiers, $0 / mid / high, monthly-annual toggle that swaps prices) to recreate this exact feel.
Style
Deep midnight-navy fintech dark theme with a single cool teal/mint accent, a soft faint dot/line grid plus radial teal glows in the background, fully rounded controls, and crisp two-weight typography (geometric Sora display + Inter body). High polish, low chroma: almost everything is navy/white/muted-slate, and teal is reserved for the one thing that matters (the highlighted tier, checks, and CTAs).
Layout & Structure
A single-column, frameless responsive web page that scrolls vertically: sticky translucent nav, centered hero with billing toggle, a responsive 3-card pricing grid (the key section) that reflows 3->2->1 column with the highlighted tier always emphasized, a 4-up trust strip, an accordion FAQ, and a tall footer. Everything is centered in a max-w-7xl container (FAQ narrows to max-w-3xl) with consistent horizontal padding (px-5 on mobile, sm:px-8).
Sticky top nav
Hero / headline
Pricing cards (the core section)
Trust / compliance strip
FAQ accordion
Footer
Components
Monthly/Annual billing toggle
A pill switch in the hero that flips all tier prices between monthly and annual, with a 'Save 18%' badge.
Highlighted 'Most popular' tier card
The middle pricing tier rendered as a glowing, elevated, primary-CTA card to anchor the choice.
Feature checklist rows
Consistent included-feature lists inside each tier card.
Background grid + glow texture
The signature ambient backdrop behind the hero and pricing region.
Special Notes
This is a FRAMELESS, fully responsive web page (no browser chrome / device frame): a single vertical scroll inside a max-w-7xl centered container (FAQ at max-w-3xl). The pricing grid is the centerpiece and must reflow 3->2->1 column (lg->md->mobile), the nav is sticky + blurred, and the billing toggle must actually rewrite prices via data-monthly/data-annual attributes. Pure HTML + Tailwind (CDN config extends the navy/teal palette and Sora/Inter fonts) + a small vanilla-JS toggle; icons via Iconify Phosphor set. No em-dashes in copy; use the navy+teal palette and reserve teal strictly for emphasis. Built with placeholder fintech-banking brand 'Vaultline' . swap brand, copy, and the 3 tier names/prices to repurpose.