[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-644-Revolut-Billboard-Fintech":3},"# BUILD PROMPT — LANDING PAGE: \"REVOLUT BILLBOARD FINTECH\"\n\nYou 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.\n\n---\n\n## PROJECT BRIEF & THEME SPECIFICATION — \"REVOLUT BILLBOARD FINTECH\"\n\n**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.**\n\n**Design language (translated from source spec):**\n- **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.\n- **Binary palette:** near-black (#191c1f) and white as the two alternating section backgrounds; depth comes only from color contrast.\n- **Universal pill buttons:** 9999px radius, generous padding (14px 32px).\n- **Zero shadows:** flat design everywhere; no `box-shadow`, `text-shadow`, or `drop-shadow` on any element in any mode.\n- **Body typography:** Inter with positive tracking (+0.16px to +0.24px).\n- **Hover language:** all interactive elements fade to `opacity: 0.85`.\n- **Semantic color system:** a rich `--rui-*` namespace reserved for product-level semantics.\n- **Alternating dark\u002Fwhite sections** that must survive dark mode.\n\n**Color system (mandatory token table — light \u002F dark values):**\n\n| Token | Light | Dark | Notes |\n|---|---|---|---|\n| `--primary` | `#494fdf` | `#737cf6` | Blue \"Azul\" accent; interactive\u002Ftext accent |\n| `--secondary` | `#00a87e` | `#00a87e` | Teal; icons, checkmarks, borders, large text only |\n| `--bg-primary` | `#ffffff` | `#191c1f` | \"A\" surface of alternation |\n| `--bg-secondary` | `#f4f4f4` | `#22262b` | \"B\" surface; also default card background |\n| `--bg-inverse` | `#191c1f` | `#101215` | Billboard sections (Hero, Final CTA, Footer); goes deeper near-black in dark mode to stay distinct |\n| `--bg-card` | `#f4f4f4` | `#22262b` | Override per section context (see 2.2) |\n| `--text-primary` | `#191c1f` | `#fefefe` | On primary\u002Fsecondary surfaces |\n| `--text-secondary` | `#545c64` | `#a9b1ba` | AA-tuned derivative of Gray `#8d969e`; raw `#8d969e` only for ≥24px text, icons, decoration |\n| `--text-inverse` | `#fefefe` | `#fefefe` | On inverse surfaces (both are dark backgrounds) |\n| `--text-success` | `#00805c` | `#3ddbad` | Text-safe teal |\n| `--text-error` | `#cc2f3d` | `#ff7080` | Text-safe red |\n| `--text-warning` | `#9a5b00` | `#ffb066` | Text-safe orange |\n| `--border-default` | `#e5e7e9` | `#31363b` | Card\u002Fdivider borders |\n| `--border-strong` | `#191c1f` | `#fefefe` | Outline buttons, dividers on inverse sections |\n| `--border-error` \u002F `--border-success` | `#e23b4a` \u002F `#00a87e` | same | Brand hues reserved for borders\u002Ficons |\n| `--danger` \u002F `--warning` | `#e23b4a` \u002F `#ec7e00` | same | Brand hues; large text, borders, icons only |\n| `--focus-ring` | `#494fdf` | `#737cf6` | Focus outlines only — never box-shadow |\n\n**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`.\n\n**Typography scale (define as utility classes in CSS):**\n\n| Class | Font | Size | Weight | Tracking | Line-height |\n|---|---|---|---|---|---|\n| `.display-hero` | `--font-display` | `clamp(3rem, 9.5vw, 8.5rem)` (136px max) | 500 | `-0.02em` (= -2.72px at 136px) | 1.00–1.02 |\n| `.display-1` (h2) | `--font-display` | `clamp(2.5rem, 5.5vw, 4.5rem)` | 500 | `-0.02em` | 1.05 |\n| `.display-2` (h3) | `--font-display` | `clamp(1.375rem, 2.5vw, 1.75rem)` | 500 | `-0.01em` | 1.15 |\n| `.text-lg` | `--font-base` | `1.125rem` | 400 | `0.01em` (+0.18px) | 1.65 |\n| `.text-body` | `--font-base` | `1rem` | 400 | `0.015em` (+0.24px) | 1.6 |\n| `.eyebrow` | `--font-base` | `0.8125rem`, uppercase | 500 | `0.12em` (positive tracking amplified for label hierarchy) | 1.2 |\n\nDefine tracking in `em` units so it scales fluidly across the `clamp()` range.\n\n**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).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css`. **The `style=\"...\"` attribute is forbidden in all HTML.**\n- Target everything via class or ID selectors (BEM classes, Section 5). No element-selector styling except base resets and typography defaults.\n- HTML must remain semantic and style-agnostic: re-skinning the page must only ever require editing `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n- 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`.\n- **Shape:** `--radius-sm: 12px`, `--radius-md: 20px`, `--radius-lg: 32px`, and `--radius-pill: 9999px` (universal button radius).\n- **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.\n- **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)`.\n- **Stacking:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.\n- **Fonts:** `--font-display` and `--font-base` (Section 1.6).\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa, in **both** modes. Verify every text\u002Fbackground 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\u002Ficons) if a pairing fails. Set `color-scheme: light` on `:root` and `color-scheme: dark` on `.dark`.\n- **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.\n\n**1.3 Mandatory Dark Mode Support**\n- Provide dark tokens **both** under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>` (class takes precedence when present).\n- Switching must be pure token remapping — zero HTML\u002FDOM restructuring, zero inline styles.\n- **Persistence:** store the user's choice in `localStorage` (key: `rui-theme`); on first visit with no stored value, fall back to `prefers-color-scheme`.\n- **Toggle control:** a visible header button with a Material Symbol icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Exception clause (theme bootstrap):** inline `\u003Cscript>` is normally forbidden; a single 3–5 line inline script in `\u003Chead>` that reads `localStorage` and applies the `.dark` class **before first paint** is permitted solely to prevent theme flash. No other inline script may exist.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- 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).\n- Mobile-first: card\u002Fstep\u002Ftier 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.**\n- Page container: `max-width: 75rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem)`.\n\n**1.5 Framework & Naming**\n- Use clean, hand-written custom CSS in `style.css` (the permitted \"clean custom CSS\" path). Vanilla JS only — no jQuery, Alpine, or other libraries.\n- 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.**\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load fonts via Google Fonts `\u003Clink>` 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`.\n- **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.\n- 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`.\n- **Raw inline SVGs and local icon files are explicitly forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`)**\n- **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)`.\n- **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).\n- **Hover:** `opacity: 0.85` (theme standard), `cursor: pointer`.\n- **Focus:** `:focus-visible` → `outline: 2px solid var(--focus-ring); outline-offset: 3px;` **never box-shadow.**\n- **Active:** `transform: scale(0.97)`.\n- **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.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styles driven by `--text-success` \u002F `--text-error` with a matching `check_circle` \u002F `error` icon — never color alone.\n\n**2.2 Card Component (`.card`)**\n- **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)`.\n- **Hover:** `transform: translateY(-2px)` + border-color shift to `--primary` (zero-shadow elevation substitute), `transition: var(--transition-fast) var(--ease-standard)`.\n- **Focus-within:** border highlights to `--primary` when a child link\u002Fbutton receives focus.\n- **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`.\n- **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.\n\n**2.3 Form & Input (`.input-group` \u002F `.field`)**\n- **Structure:** a flex container wrapping `\u003Clabel class=\"field__label\">`, `\u003Cinput class=\"field__input\">`, and a dedicated error feedback element `\u003Cp class=\"field__error\" id=\"...\">` (announced via `aria-live=\"polite\"`); input uses `aria-describedby` pointing at the error element.\n- **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.\n- The email capture row uses `align-items: stretch` (justified exception) and stacks to a column below 640px.\n\n**2.4 Modal \u002F Overlay Policy**\n- **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\u002FOpen\u002FLoading\u002FSuccess\u002FError\u002FClosing states via `transition: var(--transition-normal)`, Material Symbol close button, keyboard focus trapping, `Esc` and overlay-click closing, `z-index: var(--z-modal)`.\n\n**2.5 FAQ Accordion (`.faq-item`)**\n- Structure: `\u003Ch3>\u003Cbutton class=\"faq-item__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\" id=\"faq-trigger-N\">Question\u003C\u002Fbutton>\u003C\u002Fh3>` + `\u003Cdiv class=\"faq-item__panel\" id=\"faq-panel-N\" role=\"region\" aria-labelledby=\"faq-trigger-N\">` containing an inner content wrapper.\n- Open\u002Fclose 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.\n- 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\u002FSpace operability.\n\n**2.6 Header, Navigation & Theme Toggle**\n- 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.\n- Theme toggle per 1.3; hamburger (`menu` icon) below 768px toggles a dropdown panel (`--z-dropdown`) listing nav links + CTA; `aria-expanded`\u002F`aria-controls` on the button, closes on `Esc`, link click, and outside click, returns focus to the toggle on close.\n- 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.\n\n**2.7 How-It-Works Stepper (`.step`)**\n- Three steps in a wrapping flex row (column on mobile): each step has a 56px circular badge (2px `--border-strong` border, display font \"01\u002F02\u002F03\"), 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.\n\n**2.8 Testimonial (`.testimonial`)**\n- Built on the 2.2 card base. Semantic `\u003Cfigure>` → `\u003Cblockquote>` + `\u003Cfigcaption>`.\n- 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\u002Frating without an accessible equivalent.\n- Avatar: 48px circle (`--bg-secondary` context token, `--text-secondary` icon) containing a `person` Material Symbol, `aria-hidden=\"true\"`; visible name + role in `figcaption`.\n\n**2.9 Pricing Tier (`.tier`)**\n- 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).\n- Each tier: plan name (`.eyebrow`), price in display font (e.g., `$0` with a small `\u002Fmonth` 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\u002FMetal, `.btn--inverse` for the featured tier.\n\n**2.10 Toast \u002F Live Feedback (`.toast`)**\n- Fixed, bottom-centered pill (`translateX(-50%)`), bg `--bg-inverse` with `--text-inverse` (light mode) \u002F `#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.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints at 640\u002F768\u002F1024px, no horizontal overflow at 320px, all touch targets ≥44x44px.\n- **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.\n- **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.\n- **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.\n- **Accessibility:** WCAG AA contrast in both modes for all pairings; never rely on color alone (pair every error\u002Fsuccess 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\u002Ffocus order; full keyboard operability for every interactive element; `aria-live` regions for form errors, the toast, and loading status.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change — no silent interactions.\n- **Destructive actions:** none in scope, but `.btn--danger` (2.1) must be defined and remain distinct in both themes.\n\n---\n\n## 4. PAGE COMPOSITION — SECTION-BY-SECTION REQUIREMENTS\n\nWrite real, confident, concise fintech copy in English. **No lorem ipsum.** Section background mapping — the alternation rhythm must survive in dark mode via token remapping:\n\n| Order | Section | Light surface | Dark surface |\n|---|---|---|---|\n| 1 | Header | `--bg-primary` | `--bg-primary` |\n| 2 | Hero | `--bg-inverse` | `--bg-inverse` |\n| 3 | Features | `--bg-primary` | `--bg-primary` |\n| 4 | How It Works | `--bg-secondary` | `--bg-secondary` |\n| 5 | Testimonials | `--bg-primary` | `--bg-primary` |\n| 6 | Pricing | `--bg-secondary` | `--bg-secondary` |\n| 7 | FAQ | `--bg-primary` | `--bg-primary` |\n| 8 | Final CTA | `--bg-inverse` | `--bg-inverse` |\n| 9 | Footer | `--bg-inverse` + `1px` divider border | `--bg-inverse` + divider |\n\n**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)`.\n\n**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\u002F7 fraud monitoring.\n\n**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.\n\n**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.\n\n**4.5 Pricing** — `.eyebrow` \"Pricing\", `h2` **\"Pick a plan. Change anytime.\"** Three `.tier`s (2.9): **Standard $0\u002Fmonth** — fee-free FX allowance, virtual card, instant transfers between users, budgeting tools, 24\u002F7 support. **Premium $9.99\u002Fmonth** (featured, \"Most popular\") — everything in Standard, higher fee-free FX limits, overseas medical insurance, fee-free ATM withdrawals abroad, priority support. **Metal $16.99\u002Fmonth** — 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.\"\n\n**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.\n\n**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.\n\n**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.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **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 `\u003Chead>` (1.3).\n- **HTML head:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` (\"Revolut — Your money, without borders\"), meta description, `theme-color`, Google Fonts preconnects + stylesheets (Onest, Inter, Material Symbols Rounded).\n- **Naming:** strict BEM (`block__element--modifier`) throughout — e.g., `.btn`, `.btn--primary`, `.hero__title`, `.faq-item__trigger`, `.tier--featured`, `.field__error`, `.is-loading`\u002F`.is-visible` state classes. One convention, zero mixing.\n- **`script.js` scope (vanilla, ~7 responsibilities):** theme toggle + persistence + `aria` sync; mobile menu disclosure; FAQ accordion; email validation + loading\u002Fsuccess\u002Ferror + toast; smooth anchor scrolling (only under `prefers-reduced-motion: no-preference`); optional entrance reveals; close-on-outside-click\u002F`Esc` handling.\n- **QA definition of done:** no `style=` attributes, no inline SVGs, zero occurrences of `box-shadow`\u002F`text-shadow`\u002F`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.\n",1791954990436]