Windows Aero Glass demo
Windows Aero Glass

Translucent frosted-glass surfaces with blurred backgrounds, glossy highlights, and blue-tinted gradients inspired by Windows Vista and Windows 7 Aero.
Category: Glass & Soft UI
Era: 2000s Glossy
Prompt: 24.8 KB · 3194 words
# SYSTEM PROMPT — Build the "Windows Aero Glass" Landing Page (Single-Attempt, Production-Ready)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page specified below in one pass, fully finished — no stubs, no revisions requested. Write **all user-facing copy in English**.

**Mission:** Ship a marketing landing page that authentically recreates the Windows Vista/7 Aero Glass aesthetic (2006–2012) — translucent window chrome with Gaussian blur, colored glass tint with a reflective specular sheen, rounded window corners with glow, and Flip 3D-style depth — while meeting modern responsive, theming, and accessibility standards.

---

## 0. PROJECT BRIEF & THEME DIRECTION

**0.1 Theme Essence (source keywords, translated to English):** Translucent window chrome with Gaussian blur; colored glass tint with reflective sheen; rounded window corners and glow; live thumbnails / Flip 3D; Windows Vista/7 title bars and taskbar. **Signature move:** a glossy top-half specular sheen (`--glass-sheen`) layered over translucent blue-tinted glass (`--glass-fill`), finished with a bright 1px inner highlight edge (`--shadow-inset-hi`). This exact recipe repeats across the nav (title bar), cards (window panels), and buttons (glossy pills).

**0.2 Required Sections (in this order):** Hero; Features (exactly 3 cards); How It Works (exactly 3 steps); Testimonials; Pricing (exactly 3 tiers); FAQ; Final CTA; Footer with secondary links.

**0.3 Product Concept (write all copy around this):** A single, coherent fictional SaaS product named **AeroDesk** — *"the translucent multi-window workspace that keeps every app, doc, and chat visible at a glance."* Write real, specific marketing copy for every section. No lorem ipsum, no TODOs, no filler.

**0.4 Theme-Mode Note (translated from source spec):** The source spec declares no light/dark modes — you must design, implement, and validate **both** a dark theme (Aero night — the provided default) and a light theme (daylight frosted glass) before delivering.

**0.5 Authoritative Design Tokens:** The source references `references/00-flagship-implementation-specs/aero-glass.md`, which is not available to you — the tokens below are the authoritative source. Place them in `:root`:

```css
:root {
  /* Mandatory semantic tokens (dark Aero = default) */
  --primary: #3d8eeb;
  --secondary: #8fd7ff;
  --bg-primary: #0d2a4a;
  --bg-secondary: rgba(173, 216, 255, 0.22);
  --text-primary: #f3faff;
  --text-secondary: rgba(243, 250, 255, 0.78);
  --text-success: #7ce8a4;
  --text-error: #ff9aa8;
  --border-default: rgba(255, 255, 255, 0.55);
  --border-success: rgba(124, 232, 164, 0.75);
  --border-error: rgba(255, 154, 168, 0.8);

  /* Aero-specific supplementary tokens */
  --surface-strong: rgba(173, 216, 255, 0.35);
  --bg-image: radial-gradient(120% 100% at 50% -20%, #1f5794 0%, #0d2a4a 55%, #071829 100%);
  --glass-fill: linear-gradient(180deg, rgba(210,235,255,0.4) 0%, rgba(173,216,255,0.15) 45%, rgba(120,170,220,0.1) 100%);
  --glass-sheen: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 70%);
  --blur-backdrop: 12px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4), 0 0 12px rgba(141,206,255,0.3);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45), 0 0 24px rgba(141,206,255,0.35);
  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.7);

  --spacing-gap: 24px;
  --transition-fast: 120ms; --transition-normal: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;

  --font-base: 'Open Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'Roboto Mono', Consolas, ui-monospace, monospace;

  /* Type scale */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;

  /* Space scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
}
```

**0.6 Base Component Layer:** Implement these classes exactly (tokens renamed to the mandatory set above; font shorthands decomposed into `font-size`/`font-family`/`font-weight`/`line-height` properties), then extend them per Sections 2 and 5:

```css
body {
  margin: 0; min-height: 100vh;
  color: var(--text-primary); font-family: var(--font-base); font-size: var(--text-base);
  background: var(--bg-image); background-attachment: fixed;
}
/* iOS Safari: where `background-attachment: fixed` is unreliable, render the gradient
   on a position-fixed ::before layer behind all content instead. */

.nav { /* Aero title bar */
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-lg);
  background: var(--glass-sheen), var(--glass-fill);
  backdrop-filter: blur(var(--blur-backdrop)); -webkit-backdrop-filter: blur(var(--blur-backdrop));
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md), var(--shadow-inset-hi);
}
.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; min-width: 44px;
  font-weight: 600; font-size: var(--text-base); line-height: 1; font-family: var(--font-base);
  color: var(--text-primary); text-shadow: 0 1px 1px rgba(0,0,0,0.35); /* dark theme only — see 1.2 */
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm), var(--shadow-inset-hi);
  cursor: pointer;
  transition: transform var(--transition-fast) var(--ease-standard),
              box-shadow var(--transition-fast) var(--ease-standard);
}
.btn--primary {
  background: var(--glass-sheen),
              linear-gradient(180deg, rgba(120,190,255,0.55), rgba(61,142,235,0.35));
  border-color: rgba(255,255,255,0.7);
}
.card {
  background: var(--glass-sheen), var(--glass-fill);
  backdrop-filter: blur(var(--blur-backdrop)); -webkit-backdrop-filter: blur(var(--blur-backdrop));
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--shadow-inset-hi);
  padding: var(--space-6);
}
.input {
  width: 100%; box-sizing: border-box;
  color: #0d2a4a; font-size: var(--text-base); font-family: var(--font-base);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.85); /* Vista-white field — kept in BOTH themes */
  border: 1px solid var(--border-default);
}
.input::placeholder { color: rgba(13,42,74,0.6); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61,142,235,0.35); }
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--text-xs); padding: 0.3em 0.8em; border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--border-default);
}
```

Also carry over these mandatory fallbacks, made **theme-aware** (dark solid fallback `#1c4066`; light solid fallback `#eaf4fd` via the light-theme scopes from 1.3):

```css
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .card, .btn, .badge { background: #1c4066; } /* light scope: background: #eaf4fd; */
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .card, .btn, .badge { background: #1c4066; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
```

---

## 1. STRICT RULES & ARCHITECTURE (MANDATORY)

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. Zero exceptions.
- **Class Selectors Only:** All design properties, layout rules, and states are applied via class (BEM) or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic. Changing the site's entire look must only require editing `style.css`, never the markup.

### 1.2 CSS Variables & Theme Tokens
- **Token Completeness:** `:root` must contain every mandatory token from 0.5. Components must reference tokens (`var(--...)`) — no hard-coded colors in component rules. The only permitted literal colors: the two opaque glass-fallback values (0.6), and `#0d2a4a` for the Vista-white input text/placeholder.
- **Contrast Pairing (enforced for every theme):** Light backgrounds pair with dark text tokens; dark backgrounds pair with light text tokens. Dark theme: `#f3faff` text on navy/glass. Light theme: `#0d2a4a` text on pale-sky/glass. Verify pairing holds in both themes.
- **Light-Mode Background:** Never pure white. The light theme uses a pale sky-blue mood gradient (see 1.3). Where a near-white solid is truly needed, use `#fefefe`, never `#ffffff`.
- **Theme-Conditional Decorations:** The button `text-shadow` (and any other color-dependent decoration) applies in the dark theme only; remove it in the light theme to protect contrast.

### 1.3 Mandatory Dark Mode Support
- **Mechanism:** Dark tokens are the `:root` default. Light tokens are defined twice: under `@media (prefers-color-scheme: light) { :root:not(.dark) { ... } }` (so no-JS users follow system preference) and under `:root.theme-light { ... }` (explicit override). A `.dark` class on `<html>` forces dark.
- **Light Token Values (starting points — verify ≥ 4.5:1 contrast and adjust if needed):**
  `--primary: #1e63b8; --secondary: #3d8eeb; --bg-primary: #dff0fb; --bg-secondary: rgba(255,255,255,0.5); --surface-strong: rgba(255,255,255,0.65); --text-primary: #0d2a4a; --text-secondary: rgba(13,42,74,0.75); --text-success: #146c43; --text-error: #b3261e; --border-default: rgba(255,255,255,0.85); --border-success: rgba(20,108,67,0.6); --border-error: rgba(179,38,30,0.6); --bg-image: radial-gradient(120% 100% at 50% -20%, #f4fbff 0%, #dff0fb 55%, #bcd9ee 100%); --glass-fill: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 45%, rgba(214,234,250,0.35) 100%); --glass-sheen: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 70%); --shadow-sm: 0 2px 6px rgba(13,42,74,0.18); --shadow-md: 0 8px 24px rgba(13,42,74,0.2), 0 0 12px rgba(61,142,235,0.25); --shadow-lg: 0 20px 50px rgba(13,42,74,0.25), 0 0 24px rgba(61,142,235,0.3); --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.95);`
- **Persistence:** On load, `script.js` reads `localStorage.getItem('aero-theme')`; `'light'` → add `.theme-light`; `'dark'` → add `.dark`; absent → do nothing (the media query governs). Every toggle writes the choice back. Because the CSS default already matches system preference, no flash-of-wrong-theme occurs without inline scripts.
- **Toggle Control:** A visible `.theme-toggle` button in the nav, containing Material Symbols `light_mode` / `dark_mode`, with `aria-pressed` (true when dark is active) and a dynamically updated `aria-label` ("Switch to dark theme" / "Switch to light theme"). The icon swap must not change the button's dimensions.

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Flex Everywhere:** Build all layout structures (nav, section headers, card rows, form rows, footer columns) with `display: flex`.
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment. Justified exceptions on this page: card/plan/step rows on desktop use `align-items: stretch` for equal-height panels; footer link columns use `flex-start` for top-aligned text.
- **Mobile-First:** All rows are single-column flex by default and become multi-column at `min-width: 768px` / `min-width: 1024px` breakpoints. No horizontal scrolling at any viewport down to 320px. All interactive targets ≥ 44×44px.

### 1.5 Styling Approach
- Use **clean custom CSS** in a single `style.css`, organized with native CSS `@layer` in this order: `tokens`, `base`, `layout`, `components`, `states`, `utilities`. Do not load Tailwind or any CSS framework, and do not mix styling conventions.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load **Open Sans** (weights 400, 600, 700, 800) and **Roboto Mono** (400, 700) via Google Fonts `<link>` tags (with `preconnect`), bound to `--font-base`, `--font-display`, and `--font-mono`.
- **Icons:** Use **Google Material Symbols (Rounded variant)** via its stylesheet, invoked with ligature names (e.g., `<span class="material-symbols-rounded" aria-hidden="true">speed</span>`). Raw inline SVGs and local icon files are forbidden.
- **Exception (Segoe UI):** The source theme requests Segoe UI/Tahoma/Consolas, which are OS-local fonts not hosted on Google Fonts — they may appear only as fallbacks inside the font stacks in 0.5; the primary fonts must be the Google Fonts above (Open Sans approximates Segoe UI; Roboto Mono approximates Consolas).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--lg`)
- **Default:** Flex per 0.6; pill radius; glass fill + sheen + inset highlight; `gap: 0.5rem`; min 44×44px.
- **Hover:** `transform: translateY(-1px)`; shadow escalates to `var(--shadow-md)` glow; `cursor: pointer`.
- **Focus:** `:focus-visible` gets `outline: 2px solid var(--secondary); outline-offset: 2px` plus a soft glow ring — distinct in both themes.
- **Active/Pressed:** `transform: translateY(0) scale(0.97)`.
- **Loading (`.is-loading`):** `pointer-events: none` blocks double-clicks; the label (`.btn__label`) becomes `visibility: hidden` while a spinner (`.btn__spinner`, CSS border-top spinner) is absolutely centered — button width/height must not change; the form sets `aria-busy="true"` on the button.
- **Disabled (`[disabled]`):** `opacity: 0.5; filter: saturate(0.4); cursor: not-allowed;` and no hover transform.
- **Success/Error:** `.btn--success` / `.btn--error` swap the Material icon (`check` / `error`) and tint via `--text-success` / `--text-error`, readable in both themes.

### 2.2 Card (`.card` and variants)
- **Default:** Glass panel per 0.6; internal layout is flex column, mobile-first.
- **Hover:** `transform: translateY(-2px)` and shadow escalates to `var(--shadow-lg)` (glow shift), `transition: var(--transition-normal) var(--ease-standard)`.
- **Focus-within:** When a child link/button receives focus, the card border brightens to `var(--secondary)`.
- **Loading (Skeleton):** Define `.card--skeleton` with a CSS shimmer keyframe animation (a sweeping sheen over a muted glass block sized to the card) so skeletons never cause layout jumps.
- **Empty State:** Define the `.card--empty` pattern (large Material icon + one-line guidance) for any async region; if no region is dynamic, the classes must still exist in CSS, unused.

### 2.3 Form & Input (`.input-group`)
- **Structure:** Flex container wrapping a `<label>` (visually associated via `for`/`id`), the `.input`, and a dedicated `.input-feedback` container (`role="status"`, `aria-live="polite"`) for error/success text.
- **States:** Empty; `:focus` (ring per 0.6); filled; valid (`.input--valid` — `--border-success`, trailing `check` icon, success message); invalid (`.input--invalid` — `--border-error`, trailing `error` icon, red message in the feedback container); disabled; read-only. State is never communicated by color alone — always icon + text.

### 2.4 Modal / Popup
- No modal is required for this page. **Conditional rule:** if you add any overlay (e.g., a demo dialog), it must be `role="dialog"` / `aria-modal="true"`, trap focus while open, close on `Esc` and overlay click, animate open/close via CSS transitions, layer at `var(--z-modal)`, and define opening / open / loading / success-error / closing states.

---

## 3. CORE UX & MICRO-INTERACTION RULES (GLOBAL)

- **Responsive by Default:** Fluid type (clamp headings), responsive breakpoints, zero horizontal overflow at 320px+.
- **Smooth Animations:** Apply `transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard)` (or `var(--transition-normal)` for larger surfaces) to every state change. Respect `prefers-reduced-motion: reduce` — disable float/tilt/cascade animations and `scroll-behavior: smooth`; keep instant, non-transformative state changes. Respect `prefers-reduced-transparency: reduce` per 0.6.
- **Accessibility:** Body text ≥ 4.5:1 and large text ≥ 3:1 contrast in **both** themes against the *composited* glass background — if a glass panel holds dense text, add a subtle solid scrim layer inside it via an extra background layer. Never rely on color alone. Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), exactly one `<h1>` (hero) with logical heading order, a visually-hidden-until-focused skip link to `#main`, correct ARIA on all custom widgets, logical DOM/focus order, and full keyboard operability — no mouse-only interactions anywhere. Announce dynamic feedback (form errors, loading, success) through `aria-live` regions.
- **Mandatory Visual Feedback:** Every interactive element (nav links, footer links, buttons, FAQ triggers, theme toggle, plan buttons) responds visibly to hover and focus (glow, sheen shift, underline, or transform).
- **Destructive Actions:** None exist on this page — do not invent any.
- **Anchor Navigation:** `scroll-behavior: smooth` with `scroll-margin-top` on sections to offset the sticky nav.

---

## 4. DELIVERABLES & OUTPUT FORMAT

- **File Structure:** Three files — `index.html`, `style.css`, `script.js`. The HTML contains exactly one script reference: `<script src="script.js" defer></script>`. No inline `<script>` blocks, no inline styles, no `on*` handler attributes. Document must include `lang="en"`, meta viewport, `<title>`, and a meta description.
- **Naming Convention:** Strict BEM (`block__element--modifier`) everywhere; JS state classes use an `.is-` prefix (`.is-open`, `.is-loading`, `.is-invalid`). Never mix conventions.
- **No Unrequested Placeholders:** Every heading, paragraph, testimonial, plan feature, and FAQ answer contains real English marketing copy for AeroDesk. The only permitted stubs: footer links with no matching target (Privacy, Terms) may use `href="#"`; all other footer links point to real in-page anchors.
- **Self-Contained:** Only external references are the Google Fonts and Material Symbols stylesheets. Runs by opening `index.html` directly.

---

## 5. SECTION-BY-SECTION BUILD PLAN

### 5.1 Nav — Aero Title Bar (`header > .nav`, sticky)
Glass title bar per 0.6, fixed to viewport top with `position: sticky` and `z-index: var(--z-dropdown)`. Contains: skip link, wordmark (`.nav__logo` — Material icon `blur_on` + "AeroDesk"), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with hover glow, the `.theme-toggle` (per 1.3), and a `.btn--primary` "Download" CTA. Below 768px: links collapse into a `menu` icon button (`aria-expanded`, `aria-controls`) opening a glass dropdown panel (`.nav__menu`) — closes on `Esc`, on link selection, and on outside click; focus returns to the menu button on close.

### 5.2 Hero (`section.hero`)
Flex layout: left content column, right decorative visual. Content: `<h1>` ("Every window, crystal clear."), one-sentence value proposition using `--text-secondary`, a `.btn--primary` ("Get AeroDesk — it's free") plus `.btn--ghost` ("See how it works", anchor to How It Works), and a micro-proof line ("Free forever plan · No credit card · Works offline"). Visual (`.hero__visual`): 2–3 layered `.window` mock Aero panels — each with a `.window__caption` (app title + decorative caption-button dots, all `aria-hidden="true"`, non-focusable) and a `.window__body` — arranged in a cascading **Flip 3D** perspective (`transform: perspective(900px) rotateY(-8deg) translateZ(...)`, staggered offsets) with a faint floating animation. Hovering the visual nudges the front window forward (`rotateY(-4deg)`), reduced-motion safe. An ambient glow (`--shadow-lg`) sits behind the stack.

### 5.3 Features (`section#features`, exactly 3 `.card--feature`)
Section header (`<h2>` + subtitle). Three glass cards (1-col mobile → 3-col ≥ 1024px, `align-items: stretch` justified). Each card: `.card__icon` (Material icon in a glass `.badge`), `<h3>` title, real copy. Topics: **"Blur that never lags"** (icon `speed` — real-time Gaussian blur at 120fps), **"Live window thumbnails"** (icon `grid_view` — hover-preview every workspace window), **"Flip 3D switching"** (icon `layers` — spatial depth-based window navigation). One "Learn more" link per card anchored to How It Works; card shows 2.2 hover and focus-within states.

### 5.4 How It Works (`section#how-it-works`, exactly 3 `.step`)
Glass step cards in a row (column on mobile), each with a `.step__number` glass pill (1/2/3), `<h3>`, copy: **Install & sign in** (icon `download`), **Arrange your glass workspace** (icon `dashboard`), **Switch windows in Flip 3D** (icon `view_carousel`). Desktop: a glowing connector line between steps (pure CSS, hidden on mobile).

### 5.5 Testimonials (`section#testimonials`, exactly 3 `.quote`)
Glass quote cards: `.quote__avatar` (initials in a glass circle — no images), a `format_quote` icon, realistic quote copy, a star row (five Material `star` icons `aria-hidden="true"` + visually-hidden text "Rated 5 out of 5 stars"), name (`<cite>`) and role. Fictional but plausible personas (e.g., Design Lead, CTO, Engineering Manager). Cards get the 2.2 hover/focus-within treatment; optional gentle Flip 3D tilt on hover.

### 5.6 Pricing (`section#pricing`, exactly 3 `.plan`)
Three glass plan windows: **Free** ($0), **Pro** ($12/user/month, `.plan--featured`), **Team** ($29/user/month). Featured tier: brighter border, `--shadow-lg` glow, a `.badge` "Most popular", slightly larger on desktop. Each plan: `<h3>`, `.plan__price`, a feature list with Material `check` icons (real differentiating features), and a CTA (`.btn--primary` on featured; `.btn--ghost` elsewhere) with full 2.1 state support. Optional enhancement: a monthly/yearly billing toggle (button with `aria-pressed`, prices updated in an `aria-live="polite"` region, keyboard operable).

### 5.7 FAQ (`section#faq`, 5–6 `.faq__item`)
Accordion: each item has `<h3><button class="faq__trigger" aria-expanded="false" aria-controls="faq-panel-N" id="faq-trigger-N">` and `<div class="faq__panel" id="faq-panel-N" role="region" aria-labelledby="faq-trigger-N">`. JS toggles `.is-open` (one panel open at a time); the `expand_more` chevron rotates 180°; height animates via the `grid-template-rows: 0fr → 1fr` technique (no JS measuring). Topics: blur performance, offline support, platform availability, refund policy, accessibility, keyboard shortcuts — real answers.

### 5.8 Final CTA (`section.cta`)
Full-width glass window (`.card` with `--radius-lg`) with sheen and glow: `<h2>`, supporting line, and a `.input-group` email form (`<label>` "Work email", `type="email"` `.input`, `.btn--primary` "Request early access"). Full state machine: idle → invalid (`--border-error`, `error` icon, message in the `aria-live` feedback container) → loading (`.is-loading` spinner per 2.1, submission simulated with a ~900ms timeout, double-clicks blocked) → success (`--border-success` on input, button switches to `.btn--success` with a `check` icon and "You're on the list", announcement in the live region).

### 5.9 Footer — Aero Taskbar (`footer.footer`)
Taskbar-style glass bar (recipe per 0.6, bottom of page): `.footer__brand` (logo + one-line tagline), four `.footer__nav` link groups (Product / Company / Resources / Legal — the required secondary links; product links point to real section anchors), a `.footer__bottom` row with dynamic copyright year (JS) and a "Back to top" link. All links show hover/focus glow feedback.

---

## 6. FINAL ACCEPTANCE CHECKLIST (verify before output)

- Zero `style="..."` attributes; zero inline scripts; single deferred `script.js` reference.
- All mandatory tokens from 1.2 exist; components reference tokens only.
- Both dark and light themes render correctly; toggle persists via `localStorage`; `aria-pressed`/`aria-label` correct; system-preference fallback works with JS disabled.
- Contrast ≥ 4.5:1 for body text in **both** themes; no color-only state communication.
- Every button has default/hover/focus/active/loading/disabled/(success|error) styles; loading never changes button dimensions.
- Cards have hover, focus-within, skeleton, and empty styles; inputs have all 2.3 states with a live feedback region.
- Complete keyboard pass: skip link, nav, menu (Esc/close), FAQ, form, theme toggle, footer — all operable without a mouse; focus always visible.
- No horizontal scroll at 320px; all flex containers default to `align-items: center` except the two commented exceptions.
- `@supports` blur fallback, `prefers-reduced-transparency` fallback, and `prefers-reduced-motion` handling all present.
- Google Fonts + Material Symbols only (no SVGs); BEM naming consistent; all copy is real English — no lorem ipsum.

Generate the complete `index.html`, `style.css`, and `script.js` now.