Revolut Billboard Fintech demo
Revolut Billboard Fintech

A bold Revolut-inspired fintech landing style featuring billboard-scale typography, dark backgrounds, and vibrant gradient accents for neobank and digital banking brands.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 24.8 KB · 3491 words
# BUILD PROMPT — LANDING PAGE: "REVOLUT BILLBOARD FINTECH"

You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described in this document on the first attempt. Deliver full, final code — no stubs, no partial files, no clarifying questions. Every detail not explicitly specified is decided by the rules below.

---

## PROJECT BRIEF & THEME SPECIFICATION — "REVOLUT BILLBOARD FINTECH"

**Product:** A Revolut-inspired digital banking landing page. Brand wordmark: **"Revolut"** (text-only, display font). **Era:** 2024–2026 digital banking. **All user-facing copy must be written in English.**

**Design language (translated from source spec):**
- **Billboard typography:** stadium-scale display type at 136px, weight 500, letter-spacing -2.72px (-0.02em), line-height 1.00 — typography is the hero of the page.
- **Binary palette:** near-black (#191c1f) and white as the two alternating section backgrounds; depth comes only from color contrast.
- **Universal pill buttons:** 9999px radius, generous padding (14px 32px).
- **Zero shadows:** flat design everywhere; no `box-shadow`, `text-shadow`, or `drop-shadow` on any element in any mode.
- **Body typography:** Inter with positive tracking (+0.16px to +0.24px).
- **Hover language:** all interactive elements fade to `opacity: 0.85`.
- **Semantic color system:** a rich `--rui-*` namespace reserved for product-level semantics.
- **Alternating dark/white sections** that must survive dark mode.

**Color system (mandatory token table — light / dark values):**

| Token | Light | Dark | Notes |
|---|---|---|---|
| `--primary` | `#494fdf` | `#737cf6` | Blue "Azul" accent; interactive/text accent |
| `--secondary` | `#00a87e` | `#00a87e` | Teal; icons, checkmarks, borders, large text only |
| `--bg-primary` | `#ffffff` | `#191c1f` | "A" surface of alternation |
| `--bg-secondary` | `#f4f4f4` | `#22262b` | "B" surface; also default card background |
| `--bg-inverse` | `#191c1f` | `#101215` | Billboard sections (Hero, Final CTA, Footer); goes deeper near-black in dark mode to stay distinct |
| `--bg-card` | `#f4f4f4` | `#22262b` | Override per section context (see 2.2) |
| `--text-primary` | `#191c1f` | `#fefefe` | On primary/secondary surfaces |
| `--text-secondary` | `#545c64` | `#a9b1ba` | AA-tuned derivative of Gray `#8d969e`; raw `#8d969e` only for ≥24px text, icons, decoration |
| `--text-inverse` | `#fefefe` | `#fefefe` | On inverse surfaces (both are dark backgrounds) |
| `--text-success` | `#00805c` | `#3ddbad` | Text-safe teal |
| `--text-error` | `#cc2f3d` | `#ff7080` | Text-safe red |
| `--text-warning` | `#9a5b00` | `#ffb066` | Text-safe orange |
| `--border-default` | `#e5e7e9` | `#31363b` | Card/divider borders |
| `--border-strong` | `#191c1f` | `#fefefe` | Outline buttons, dividers on inverse sections |
| `--border-error` / `--border-success` | `#e23b4a` / `#00a87e` | same | Brand hues reserved for borders/icons |
| `--danger` / `--warning` | `#e23b4a` / `#ec7e00` | same | Brand hues; large text, borders, icons only |
| `--focus-ring` | `#494fdf` | `#737cf6` | Focus outlines only — never box-shadow |

**Exception clause (pure white):** The near-white rule normally requires `#fefefe` instead of `#ffffff`; this theme explicitly mandates `#ffffff` as one half of its binary section palette, so `#ffffff` is permitted **only** for `--bg-primary` in light mode. Every other near-white surface must use `#f4f4f4` or `#fefefe`.

**Typography scale (define as utility classes in CSS):**

| Class | Font | Size | Weight | Tracking | Line-height |
|---|---|---|---|---|---|
| `.display-hero` | `--font-display` | `clamp(3rem, 9.5vw, 8.5rem)` (136px max) | 500 | `-0.02em` (= -2.72px at 136px) | 1.00–1.02 |
| `.display-1` (h2) | `--font-display` | `clamp(2.5rem, 5.5vw, 4.5rem)` | 500 | `-0.02em` | 1.05 |
| `.display-2` (h3) | `--font-display` | `clamp(1.375rem, 2.5vw, 1.75rem)` | 500 | `-0.01em` | 1.15 |
| `.text-lg` | `--font-base` | `1.125rem` | 400 | `0.01em` (+0.18px) | 1.65 |
| `.text-body` | `--font-base` | `1rem` | 400 | `0.015em` (+0.24px) | 1.6 |
| `.eyebrow` | `--font-base` | `0.8125rem`, uppercase | 500 | `0.12em` (positive tracking amplified for label hierarchy) | 1.2 |

Define tracking in `em` units so it scales fluidly across the `clamp()` range.

**Page inventory (build in this order):** Header (sticky nav + theme toggle) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials (3) → Pricing (3 tiers) → FAQ (6 items) → Final CTA (email capture) → Footer (secondary links).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. **The `style="..."` attribute is forbidden in all HTML.**
- Target everything via class or ID selectors (BEM classes, Section 5). No element-selector styling except base resets and typography defaults.
- HTML must remain semantic and style-agnostic: re-skinning the page must only ever require editing `style.css`.

**1.2 CSS Variables & Theme Tokens**
- Store **all** visual tokens in `:root` and remap them in a `.dark` class — exactly the table in the Project Brief. Mandatory names: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--bg-inverse`, `--bg-card`, `--text-inverse`, `--text-warning`, `--border-strong`, `--focus-ring`.
- **Shape:** `--radius-sm: 12px`, `--radius-md: 20px`, `--radius-lg: 32px`, and `--radius-pill: 9999px` (universal button radius).
- **Shadows:** `--shadow-sm: none` and `--shadow-md: none` — both tokens **must be declared and must be `none`**. Nothing may ever override them. Elevation is achieved exclusively through background-token contrast between surfaces.
- **Spacing & motion:** `--spacing-gap: 1.5rem`, `--spacing-section: clamp(4rem, 10vw, 8rem)`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Stacking:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.
- **Fonts:** `--font-display` and `--font-base` (Section 1.6).
- **Contrast pairing:** every light background token pairs with a dark text token and vice versa, in **both** modes. Verify every text/background pairing meets WCAG AA (4.5:1 normal text, 3:1 large text and UI components); adjust the derivative tokens (never the brand hues used for borders/icons) if a pairing fails. Set `color-scheme: light` on `:root` and `color-scheme: dark` on `.dark`.
- **Semantic alias namespace:** additionally expose `--rui-accent`, `--rui-success`, `--rui-danger`, `--rui-warning` defined purely as `var()` references to core tokens. The `--rui-*` namespace must never introduce new hex values.

**1.3 Mandatory Dark Mode Support**
- Provide dark tokens **both** under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>` (class takes precedence when present).
- Switching must be pure token remapping — zero HTML/DOM restructuring, zero inline styles.
- **Persistence:** store the user's choice in `localStorage` (key: `rui-theme`); on first visit with no stored value, fall back to `prefers-color-scheme`.
- **Toggle control:** a visible header button with a Material Symbol icon (`dark_mode` / `light_mode`), correct `aria-pressed` state, and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").
- **Exception clause (theme bootstrap):** inline `<script>` is normally forbidden; a single 3–5 line inline script in `<head>` that reads `localStorage` and applies the `.dark` class **before first paint** is permitted solely to prevent theme flash. No other inline script may exist.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in this document (one exception: the Final CTA input row uses `align-items: stretch` so the pill button matches the input height).
- Mobile-first: card/step/tier rows are `display: flex; flex-wrap: wrap; gap: var(--spacing-gap)` with children `flex: 1 1 min(100%, 22rem)`, collapsing to single columns below 768px. **No horizontal scrolling at any width down to 320px.**
- Page container: `max-width: 75rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem)`.

**1.5 Framework & Naming**
- Use clean, hand-written custom CSS in `style.css` (the permitted "clean custom CSS" path). Vanilla JS only — no jQuery, Alpine, or other libraries.
- If any Tailwind utility is used at all, it must map back to the CSS variables and the reusable component classes (`.btn`, `.card`, `.input-group`). **Never mix utility-first and BEM conventions in the same deliverable.**

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load fonts via Google Fonts `<link>` tags with `preconnect` to `fonts.googleapis.com` and `fonts.gstatic.com`: **Onest** (weights 400, 500) for `--font-display` and **Inter** (weights 400, 500, 600) for `--font-base`, with `display=swap`.
- **Exception clause (Aeonik Pro):** Aeonik Pro is a commercially licensed font unavailable on Google Fonts; per the Google Fonts mandate, substitute **Onest 500** as the display font and preserve the exact Aeonik metrics defined in the type scale. Do not self-host, `@font-face`, or hotlink Aeonik Pro. `system-ui` stacks appear only as final fallbacks in the `font-family` chain.
- Icons: **Google Material Symbols Rounded**, loaded via Google Fonts stylesheet with `display=block` (prevents ligature-text flash). Configure in CSS: `font-family: 'Material Symbols Rounded'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;` and an `.icon--fill` variant with `'FILL' 1`.
- **Raw inline SVGs and local icon files are explicitly forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — `border-radius: var(--radius-pill)` — `padding: 14px 32px` — Inter 500, `1rem`, tracking `0.01em` — `min-height: 48px` (exceeds the 44x44px touch minimum) — `transition: var(--transition-fast) var(--ease-standard)`.
- **Variants:** `.btn--primary` (bg `--bg-inverse`, text `--text-inverse`; on light sections) · `.btn--inverse` (bg `#fefefe`, text `#191c1f`; on inverse sections) · `.btn--secondary` (bg `#f4f4f4`, text `#191c1f`) · `.btn--outline` (transparent bg, `2px solid` border in `--border-strong`, text matches section) · `.btn--accent` (bg `#494fdf`, white text — 6.1:1, both modes) · `.btn--danger` (bg `#cc2f3d`, white text, `1px solid #e23b4a` border; must remain visually distinct in **both** themes even though this page contains no destructive action).
- **Hover:** `opacity: 0.85` (theme standard), `cursor: pointer`.
- **Focus:** `:focus-visible` → `outline: 2px solid var(--focus-ring); outline-offset: 3px;` **never box-shadow.**
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disable interaction and prevent double submission (`aria-busy="true"`); render a 18px CSS spinner (2px `currentColor` border, transparent top border, 0.8s linear rotation) or animated Material Symbol; **button dimensions must not change** — reserve label width so layout is stable.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback styles driven by `--text-success` / `--text-error` with a matching `check_circle` / `error` icon — never color alone.

**2.2 Card Component (`.card`)**
- **Default:** Flexbox column layout, `padding: clamp(1.5rem, 3vw, 2rem)`, `background: var(--bg-card)`, `1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, **no shadow**. Context overrides: on tinted sections `--bg-card: #ffffff`; on inverse sections `--bg-card: rgba(254,254,254,0.05)` with `border-color: rgba(254,254,254,0.14)`.
- **Hover:** `transform: translateY(-2px)` + border-color shift to `--primary` (zero-shadow elevation substitute), `transition: var(--transition-fast) var(--ease-standard)`.
- **Focus-within:** border highlights to `--primary` when a child link/button receives focus.
- **Loading (`.card--skeleton`):** define a shimmer utility in CSS (animated `linear-gradient` background-position sweep, 1.2s) sized to prevent layout jumps; static under `prefers-reduced-motion`.
- **Empty state (`.card--empty`):** centered fallback layout — 48px Material Symbol + short title + one line of guidance text — defined in CSS for any dynamic card region.

**2.3 Form & Input (`.input-group` / `.field`)**
- **Structure:** a flex container wrapping `<label class="field__label">`, `<input class="field__input">`, and a dedicated error feedback element `<p class="field__error" id="...">` (announced via `aria-live="polite"`); input uses `aria-describedby` pointing at the error element.
- **States:** Empty (border `--border-default`) · Focused (`outline: 2px solid var(--focus-ring); outline-offset: 2px` — no shadow) · Filled · Valid (`.is-valid`: `--border-success` + `check_circle` icon) · Invalid (`.is-invalid`: `--border-error` border, `--text-error` message, `error` icon, `aria-invalid="true"`) · Disabled (reduced opacity, not-allowed) · Read-only.
- The email capture row uses `align-items: stretch` (justified exception) and stacks to a column below 640px.

**2.4 Modal / Overlay Policy**
- **No modal exists in this page's scope — do not add one.** If an overlay ever becomes required by the user, it must be: centered flex container (`align-items: center`), backdrop overlay, animated Opening/Open/Loading/Success/Error/Closing states via `transition: var(--transition-normal)`, Material Symbol close button, keyboard focus trapping, `Esc` and overlay-click closing, `z-index: var(--z-modal)`.

**2.5 FAQ Accordion (`.faq-item`)**
- Structure: `<h3><button class="faq-item__trigger" aria-expanded="false" aria-controls="faq-panel-N" id="faq-trigger-N">Question</button></h3>` + `<div class="faq-item__panel" id="faq-panel-N" role="region" aria-labelledby="faq-trigger-N">` containing an inner content wrapper.
- Open/close animated in pure CSS: panel `display: grid; grid-template-rows: 0fr` → `1fr` when open, with the inner wrapper `overflow: hidden; min-height: 0` — smooth height animation, no measurement JS.
- Trigger shows an `expand_more` icon rotating 180° when open; hover `opacity: 0.85`; focus ring per 2.1. JS toggles `aria-expanded`, collapses siblings (one open at a time). Native button = Enter/Space operability.

**2.6 Header, Navigation & Theme Toggle**
- Sticky header, 72px, solid `var(--bg-primary)` with `1px solid var(--border-default)` bottom border (flat — no blur, no shadow). Flex row: logo wordmark (display font, 500) · nav links · theme toggle · CTA pill.
- Theme toggle per 1.3; hamburger (`menu` icon) below 768px toggles a dropdown panel (`--z-dropdown`) listing nav links + CTA; `aria-expanded`/`aria-controls` on the button, closes on `Esc`, link click, and outside click, returns focus to the toggle on close.
- First element in the DOM: a visually hidden **skip link** ("Skip to main content") that appears on focus. Apply `scroll-padding-top: 88px` and `scroll-margin-top` on anchored sections so the sticky header never covers targets.

**2.7 How-It-Works Stepper (`.step`)**
- Three steps in a wrapping flex row (column on mobile): each step has a 56px circular badge (2px `--border-strong` border, display font "01/02/03"), a `.display-2` title, and body copy. Connect steps with a 1px pseudo-element rule line on desktop only (hide below 768px). Steps are non-interactive — no hover state.

**2.8 Testimonial (`.testimonial`)**
- Built on the 2.2 card base. Semantic `<figure>` → `<blockquote>` + `<figcaption>`.
- Rating: a row of five `star` icons (`.icon--fill`) marked `aria-hidden="true"` plus visually hidden text "Rated 5 out of 5 stars" — never color/rating without an accessible equivalent.
- Avatar: 48px circle (`--bg-secondary` context token, `--text-secondary` icon) containing a `person` Material Symbol, `aria-hidden="true"`; visible name + role in `figcaption`.

**2.9 Pricing Tier (`.tier`)**
- Three tiers on the 2.2 card base; the middle tier is `.tier--featured`: `background: var(--bg-inverse)`, text `--text-inverse`, **`2px solid var(--primary)`** border (zero-shadow emphasis), and a `--radius-pill` badge "Most popular" (bg `#494fdf`, white text).
- Each tier: plan name (`.eyebrow`), price in display font (e.g., `$0` with a small `/month` suffix), a 5-item feature list using `check` icons (`--secondary` teal; `--primary` blue inside the featured card for contrast), fine print, and a CTA: `.btn--outline` for Standard/Metal, `.btn--inverse` for the featured tier.

**2.10 Toast / Live Feedback (`.toast`)**
- Fixed, bottom-centered pill (`translateX(-50%)`), bg `--bg-inverse` with `--text-inverse` (light mode) / `#fefefe` with `#191c1f` text (dark mode) — pair per 1.2 — `1px solid var(--border-default)`, `border-radius: var(--radius-pill)`, `z-index: var(--z-toast)`, `role="status" aria-live="polite"`, entry `translateY` animation, auto-dismiss after 4s with a `close` icon button. Shown on successful email capture.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing, breakpoints at 640/768/1024px, no horizontal overflow at 320px, all touch targets ≥44x44px.
- **Smooth animations:** every state change transitions with `var(--transition-fast)` (micro) or `var(--transition-normal)` (panels). Global hover language: `opacity: 0.85` on all interactive elements.
- **Reduced motion:** under `@media (prefers-reduced-motion: reduce)` — disable the shimmer, entrance reveals, spinner rotation, smooth scrolling (`scroll-behavior: auto`), and collapse transitions to near-zero duration. Opacity feedback states remain.
- **Entrance reveals:** optional IntersectionObserver adding `.reveal` (opacity 0 → 1 + `translateY(8px)` → 0) at 15% visibility, unobserved after firing, fully disabled under reduced motion. Never shadow-based.
- **Accessibility:** WCAG AA contrast in both modes for all pairings; never rely on color alone (pair every error/success with an icon and text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby` pointing to their `h2`, `footer`); exactly one `h1` (Hero) and a strictly ordered heading hierarchy; logical DOM/focus order; full keyboard operability for every interactive element; `aria-live` regions for form errors, the toast, and loading status.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change — no silent interactions.
- **Destructive actions:** none in scope, but `.btn--danger` (2.1) must be defined and remain distinct in both themes.

---

## 4. PAGE COMPOSITION — SECTION-BY-SECTION REQUIREMENTS

Write real, confident, concise fintech copy in English. **No lorem ipsum.** Section background mapping — the alternation rhythm must survive in dark mode via token remapping:

| Order | Section | Light surface | Dark surface |
|---|---|---|---|
| 1 | Header | `--bg-primary` | `--bg-primary` |
| 2 | Hero | `--bg-inverse` | `--bg-inverse` |
| 3 | Features | `--bg-primary` | `--bg-primary` |
| 4 | How It Works | `--bg-secondary` | `--bg-secondary` |
| 5 | Testimonials | `--bg-primary` | `--bg-primary` |
| 6 | Pricing | `--bg-secondary` | `--bg-secondary` |
| 7 | FAQ | `--bg-primary` | `--bg-primary` |
| 8 | Final CTA | `--bg-inverse` | `--bg-inverse` |
| 9 | Footer | `--bg-inverse` + `1px` divider border | `--bg-inverse` + divider |

**4.1 Hero** — Inverse billboard: `.eyebrow` ("The global money app"), `h1.display-hero` — headline: **"Your money, without borders."** — `.text-lg` subcopy (max ~34ch): open a multi-currency account in minutes, spend in 160+ countries, move money instantly. Two pills: `.btn--inverse` "Get started" and `.btn--outline` "See how it works" (anchor to `#how-it-works`). Below, a stat strip of three display-font stats: "45+ currencies", "35M+ customers", "160+ countries". Centered flex column, `align-items: center`, `padding-block: var(--spacing-section)`.

**4.2 Features** — Section header (`.eyebrow` "Features", `h2.display-1` **"Everything your money does. One app."**). Three `.card`s, each: icon badge (48px pill, `--bg-card` context background) + `h3.display-2` + `.text-body` copy — ① `credit_card` "Multi-currency accounts": hold and exchange 45+ currencies at interbank rates; ② `bolt` "Instant global transfers": send money to 160+ countries in seconds; ③ `verified_user` "Bank-grade security": biometrics, instant card freeze, and 24/7 fraud monitoring.

**4.3 How It Works** — `.eyebrow` "How it works", `h2` **"Up and running in three steps."** Three `.step`s (2.7): 01 "Download & sign up" — create an account in under 3 minutes, no paperwork; 02 "Add your money" — top up by card or bank transfer and order a card; 03 "Spend & save globally" — pay like a local everywhere and automate round-up savings.

**4.4 Testimonials** — `.eyebrow` "Customers", `h2` **"35 million people already switched."** Three `.testimonial`s (2.8): ① "I travel every month and haven't paid an exchange fee in two years." — Amara Chen, Product Designer, Singapore; ② "Invoicing clients in four currencies used to be a nightmare. Now it's one tap." — Daniel Okafor, Founder, Lagos; ③ "The round-ups quietly saved me €1,200 last year without me noticing." — Sofia Marques, Software Engineer, Lisbon.

**4.5 Pricing** — `.eyebrow` "Pricing", `h2` **"Pick a plan. Change anytime."** Three `.tier`s (2.9): **Standard $0/month** — fee-free FX allowance, virtual card, instant transfers between users, budgeting tools, 24/7 support. **Premium $9.99/month** (featured, "Most popular") — everything in Standard, higher fee-free FX limits, overseas medical insurance, fee-free ATM withdrawals abroad, priority support. **Metal $16.99/month** — everything in Premium, metal card, cashback on card spend, dedicated concierge, highest fee-free FX limits. Include one line of fine print: "Cancel anytime. Prices shown for illustration."

**4.6 FAQ** — `.eyebrow` "FAQ", `h2` **"Answers, upfront."** Six `.faq-item`s (2.5): Is my money safe? · How fast are transfers? · Which currencies are supported? · How do I get a card? · Can I cancel a paid plan anytime? · Does opening an account cost anything? Write one- to two-sentence, plausible fintech answers in English.

**4.7 Final CTA** — Inverse billboard: `h2.display-1` **"Ready to live without borders?"** + `.text-lg` support line + the email capture (2.3): a single email field ("you@example.com" placeholder, `autocomplete="email"`, `inputmode="email"`) + `.btn--inverse` "Get early access", followed by fine print "No credit card required. Cancel anytime." On submit: validate → loading state → `.is-success` + toast + `aria-live` announcement; on invalid email: `.is-invalid` + inline error message + focus returned to the field.

**4.8 Footer** — On `--bg-inverse` with a divider border. Flex column: brand wordmark + one-line tagline, then a wrapping row of four link columns — **Product** (Features, Pricing, FAQ → real in-page anchors), **Company** (About, Careers, Press), **Resources** (Help center, Community, Status), **Legal** (Privacy, Terms, Licenses). For genuinely unspecified destinations, `href="#"` placeholders are permitted — do not invent fake external URLs. Social presence as small text pill links (e.g., "X", "Instagram", "LinkedIn") — Material Symbols contains no brand logos, so **do not** substitute unrelated icons. Every link: hover `opacity: 0.85`, visible focus ring. Bottom row: "© 2026 Revolut concept. All rights reserved." + a note that this is a design demonstration.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — three separate files, delivered complete in a single response, each preceded by a filename comment. `script.js` is referenced once with `defer`; the only other script is the permitted 3–5 line theme bootstrap in `<head>` (1.3).
- **HTML head:** `lang="en"`, viewport meta, descriptive `<title>` ("Revolut — Your money, without borders"), meta description, `theme-color`, Google Fonts preconnects + stylesheets (Onest, Inter, Material Symbols Rounded).
- **Naming:** strict BEM (`block__element--modifier`) throughout — e.g., `.btn`, `.btn--primary`, `.hero__title`, `.faq-item__trigger`, `.tier--featured`, `.field__error`, `.is-loading`/`.is-visible` state classes. One convention, zero mixing.
- **`script.js` scope (vanilla, ~7 responsibilities):** theme toggle + persistence + `aria` sync; mobile menu disclosure; FAQ accordion; email validation + loading/success/error + toast; smooth anchor scrolling (only under `prefers-reduced-motion: no-preference`); optional entrance reveals; close-on-outside-click/`Esc` handling.
- **QA definition of done:** no `style=` attributes, no inline SVGs, zero occurrences of `box-shadow`/`text-shadow`/`drop-shadow`; both themes pass AA contrast on every pairing; full keyboard walkthrough works (skip link → header → all sections → footer) with visible focus everywhere; FAQ and mobile menu fully operable by keyboard; no horizontal scroll at 320px; reduced motion honored; every button either scrolls, submits, or toggles — no dead interactions; no lorem ipsum anywhere; all copy in English.