[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-297-Fluent-Design-2-Fluent-2":3},"**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — fully functional, accessible, and polished, with nothing left unstyled or broken.\n\n- **Landing Page Theme:** Fluent Design 2 (Fluent 2) — Microsoft's Windows 11 design language.\n- **Output Category:** Glass & Soft UI.\n- **Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Design DNA to express everywhere:** Fluent 2's five fundamentals — **light, depth, motion, material, scale**. Materials: **Solid**, **Mica** (tints long-lived surfaces with the base\u002Fdesktop color, subtle blur), **Acrylic** (transient surfaces: strong backdrop blur + translucency + hairline stroke), **Smoke** (scrims\u002Fbackdrops). Signature moves: **reveal highlight** on interactive surfaces, subtle depth via layered soft shadows, rounded corners (4\u002F8\u002F12px), flat-platform clarity softened with glass translucency.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. No `\u003Cstyle>` blocks in `index.html`.\n- **Class\u002FID Selectors Only:** Every design property, layout rule, and state must be applied via class or ID selectors defined in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing the CSS file, never the markup.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nAll visual tokens live in `:root` (light) and are overridden for dark (see 1.3). Use exactly this Fluent 2 token foundation, extended with the mandatory semantic aliases:\n\n```css\n:root {\n  \u002F* color — light *\u002F\n  --color-bg: #f3f3f3;\n  --color-surface: rgba(255,255,255,0.70);\n  --color-mica: rgba(243,243,243,0.85);\n  --color-acrylic: rgba(252,252,252,0.60);\n  --color-text: #1b1b1b;\n  --color-text-muted: #616161;\n  --color-primary: #0f6cbd;\n  --color-accent: #005fb8;\n  --color-stroke: rgba(0,0,0,0.10);\n  \u002F* mandatory semantic aliases (map — never duplicate raw values) *\u002F\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --border-default: var(--color-stroke);\n  --text-success: #0f7b0f;\n  --text-error: #c43131;\n  --border-success: #0f7b0f;\n  --border-error: #c43131;\n  \u002F* radius *\u002F\n  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;\n  \u002F* shadow *\u002F\n  --shadow-sm: 0 2px 4px rgba(0,0,0,0.14);\n  --shadow-md: 0 8px 16px rgba(0,0,0,0.14);\n  --shadow-lg: 0 32px 64px rgba(0,0,0,0.19);\n  --shadow-card-stroke: inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.10);\n  \u002F* blur *\u002F\n  --blur-acrylic: 30px; --blur-acrylic-thin: 60px;\n  \u002F* font *\u002F\n  --font-sans: 'Segoe UI Variable', 'Segoe UI', 'Open Sans', system-ui, sans-serif;\n  --font-display: 'Segoe UI Variable Display', 'Segoe UI', 'Open Sans', sans-serif;\n  --font-mono: 'Cascadia Code', 'Roboto Mono', ui-monospace, monospace;\n  \u002F* text scale *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --spacing-gap: var(--space-4);\n  \u002F* motion *\u002F\n  --transition-fast: 120ms; --transition-normal: 240ms;\n  --ease-standard: cubic-bezier(0.33, 0, 0.67, 1);\n  --ease-decel: cubic-bezier(0.1, 0.9, 0.2, 1);   \u002F* entrances *\u002F\n  --ease-accel: cubic-bezier(0.7, 0, 1, 0.5);     \u002F* exits *\u002F\n  \u002F* elevation *\u002F\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n  \u002F* signature *\u002F\n  --reveal-highlight: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.35), transparent 60%);\n  --acrylic-noise: 0.02;\n}\n```\n\n- **Contrast Pairing:** Every light background token must pair with dark text tokens, and every dark background token with light text tokens — enforced in every theme, not just the default.\n- **Light Mode Background:** Base is `#f3f3f3`, never pure white; where a near-white is genuinely needed, use `#fefefe`, not `#ffffff`.\n- **Fluid Type:** Use `clamp()` for display sizes (e.g., hero headline scales from `--text-3xl` on mobile to `--text-5xl` on desktop).\n\n### 1.3 Mandatory Dark Mode Support\nThe source style does not declare explicit modes — you must define and validate both light and dark before considering the work complete.\n- **Implementation:** Define dark tokens under BOTH `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Use exactly:\n  - `--color-bg: #1b1b1b; --color-surface: rgba(255,255,255,0.06); --color-mica: rgba(32,32,32,0.85); --color-acrylic: rgba(58,58,58,0.60); --color-text: #ffffff; --color-text-muted: #c8c8c8; --color-primary: #479ef5; --color-accent: #60cdff; --color-stroke: rgba(255,255,255,0.10);`\n  - Deepen shadows in dark mode (e.g., `--shadow-md: 0 8px 16px rgba(0,0,0,0.36)`) and soften the reveal highlight (e.g., `rgba(255,255,255,0.12)`).\n  - Re-tune `--text-success` \u002F `--text-error` for AA contrast on dark backgrounds.\n- **Theme Switching:** Variables must swap seamlessly with no HTML restructuring and no duplicated markup.\n- **Persistence:** Store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a visible toggle button (Material Symbols `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Contrast Verification:** White text on `#0f6cbd` (light) and on `#479ef5` (dark) must pass WCAG AA at the sizes used; if a pair fails, introduce a dedicated button-fill token that passes — never ship a failing pair.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structure with Flexbox (CSS Grid permitted only for the card\u002Fpricing grids where it reduces complexity).\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Mobile-Friendly First:** Single-column stacks below 768px, multi-column above; fluid sizing; zero horizontal overflow at a 320px viewport.\n\n### 1.5 Styling Framework\n- The supplied raw CSS token architecture is the requested framework: write clean, custom, token-driven CSS. If you use Tailwind, it may only be via `@layer` \u002F `@apply`, with every utility mapping back to the tokens above — never raw hardcoded values.\n- Reusable component classes: `.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.card`, `.nav`, `.input`, `.badge`, extended with BEM modifiers per section.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load **Open Sans** (weights 400\u002F600\u002F700) from Google Fonts via `\u003Clink>` with `preconnect`. **Exception clause:** Fluent 2 natively specifies Segoe UI Variable, which is not a Google Font — therefore the font stacks must begin with `'Segoe UI Variable', 'Segoe UI'` (native Windows rendering) and fall back to the Google Font Open Sans on all other platforms, then `system-ui`. Bind the stacks to `--font-sans` \u002F `--font-display`. If monospace is used, load **Roboto Mono** from Google Fonts behind `'Cascadia Code'`.\n- **Icons:** Google Material Symbols — use the **Rounded** variant (matches Fluent 2's rounded geometry) via the official `\u003Clink>`. **Explicitly forbidden:** raw inline SVGs, local icon files, and emoji used as icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\nStyle all states via CSS classes only:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-md)` (or `--radius-pill` for hero CTAs); Fluent elevation (`--shadow-sm`); `--font-display` at `--text-base`, weight 600.\n- **Variants:** `.btn--primary` (filled `--color-primary`, white text), `.btn--secondary` (Acrylic surface: translucent background + `backdrop-filter: blur(var(--blur-acrylic))` + hairline `--color-stroke` inset), `.btn--danger` (visually distinct in both themes), `.btn--ghost` (transparent, subtle hover fill).\n- **Hover:** `filter: brightness(1.05)`, shadow shift to `--shadow-md`, reveal-highlight glow; `cursor: pointer`.\n- **Focus:** `:focus-visible` ring — `outline: 2px solid var(--color-accent); outline-offset: 2px;` for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** `.is-loading` — disables interaction (`pointer-events: none`), prevents double submits, renders a CSS spinner (border-based) or animated Material Symbol in place of the label without changing button dimensions (reserve the space).\n- **Disabled:** `opacity: 0.5`, desaturated, `cursor: not-allowed`, no transforms.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` temporary feedback using `--text-success` \u002F `--text-error`, always paired with an icon and text — never color alone.\n\n### 2.2 Card Component\n- **Default:** Flexbox layout, `background: var(--color-surface)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-card-stroke), var(--shadow-sm)`, `padding: var(--space-6)`.\n- **Materials:** Long-lived surfaces (nav, footer band) use **Mica** (`--color-mica`, tinted with the base color, subtle `backdrop-filter: blur() saturate(1.5)`); transient surfaces (modals, flyouts, mobile menu) use **Acrylic** (`--color-acrylic` + `backdrop-filter: blur(var(--blur-acrylic)) saturate(1.5)` + hairline stroke); **Smoke** for scrims (`rgba(0,0,0,0.4)` with optional slight blur). An optional noise overlay may be applied strictly as a `background-image` data-URI texture for material authenticity — never as icons.\n- **Hover:** `transform: translateY(-2px)` with elevation to `--shadow-md`\u002F`--shadow-lg`; reveal highlight follows the pointer via `--x`\u002F`--y` custom properties (JS `pointermove`; CSS-only fallback: centered).\n- **Focus-within:** Border\u002Foutline highlight when a child link or button receives focus.\n- **Loading (Skeleton):** Shimmer animation class (gradient sweep) preserving exact dimensions — no layout jumps.\n- **Empty State:** Structured fallback with a Material Symbol icon and clear guidance text.\n\n### 2.3 Form & Input Requirements\nUsed in the Final CTA email capture (and any other field):\n- **States:** Empty, focused (2px `--color-primary` outline ring), filled, valid (`--border-success` + check Material Symbol), invalid (`--border-error`, error icon, error text in `--text-error`), disabled, read-only.\n- **Structure:** Flex `.input-group` wrapping a `\u003Clabel>` (explicitly bound with `for`), the `.input` field, and a dedicated error feedback element (`role=\"alert\"`, `aria-live=\"polite\"`); set `aria-invalid` and `aria-describedby` on the input.\n- **Behavior:** Client-side validation in `script.js` with visible, announced feedback; the submit button demonstrates loading → success states.\n\n### 2.4 Modal \u002F Popup Requirements\nIf any dialog is used (e.g., plan details):\n- **States:** Opening (fade + scale 0.96→1, `--ease-decel`, ~200ms), open, loading, success\u002Ferror, closing (faster, `--ease-accel`, ~150ms) — all animated via CSS transitions.\n- **UX Features:** Centered flex overlay (`align-items: center; justify-content: center`), Smoke backdrop, Acrylic panel at `--z-modal`, Material Symbol close button (`aria-label=\"Close\"`), keyboard focus trap, focus returns to the trigger on close, closes via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n\n---\n\n## 3. SECTION-BY-SECTION PAGE SPECIFICATIONS\n\nAll user-facing copy must be written in **English**. Invent one coherent fictional product (e.g., a modern team productivity platform) and write specific, realistic copy — no lorem ipsum.\n\n- **Sticky Navigation:** Mica material bar — logo, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA. On mobile: hamburger button (Material Symbol) opening an Acrylic flyout with `aria-expanded`, `aria-controls`, full keyboard support, at `--z-dropdown`.\n- **Hero:** Mica-tinted backdrop with a soft accent gradient; display headline (fluid `clamp()` from `--text-3xl` → `--text-5xl`, `--font-display`); subhead in `--text-secondary` at `--text-lg`; two CTAs (`.btn--primary` filled + `.btn--secondary` acrylic); a CSS-built hero visual (layered translucent glass cards, gradients, Material Symbols — no binary image assets). Staggered entrance animations (fade-up, `--ease-decel`), disabled under reduced motion.\n- **Features (3 cards):** Responsive grid (1 column mobile → 3 columns ≥768px). Each card: Material Symbol icon inside a tinted rounded square (`--radius-md`), title, description. Reveal highlight + elevation on hover.\n- **How It Works (3 steps):** Numbered 01\u002F02\u002F03 with a CSS connecting line on desktop; vertical stack on mobile. Each step: Material Symbol, title, short text.\n- **Testimonials:** 3 quote cards in a static grid (no carousel). Each: CSS initials avatar (rounded, tinted), quote, name, role, 5-star rating via Material Symbols with `aria-label=\"Rated 5 out of 5 stars\"`.\n- **Pricing (3 tiers):** Middle tier highlighted — `.badge` \"Most popular\", accent border, `--shadow-lg`, slight elevation. Each card: tier name, price with billing period, feature list with check Material Symbols, CTA (`.btn--primary` on the featured tier, `.btn--secondary` elsewhere). Optional monthly\u002Fannual toggle — if included, it must be a real `role=\"switch\"` with `aria-checked` that visibly updates prices.\n- **FAQ:** Accessible accordion — `\u003Cdetails>`\u002F`\u003Csummary>` or button + region pattern with `aria-expanded`\u002F`aria-controls`; chevron Material Symbol rotates on open; animated expansion (CSS grid-rows or max-height, `--ease-decel`); independent toggles; fully keyboard operable.\n- **Final CTA:** Acrylic panel over a subtle accent gradient; headline, supporting line, email capture form (per 2.3) whose submit button demonstrates loading → success; an `aria-live` status region announces the outcome.\n- **Footer:** Mica\u002Fsolid band; brand + tagline, secondary link groups (Product, Company, Resources, Legal), social links (Material Symbols with `aria-label`), copyright line, \"Back to top\" link. All links have hover and `:focus-visible` states.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and breakpoints without horizontal overflow; verify at 320px, 768px, 1024px, and 1440px.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; entrances use `--ease-decel`, exits `--ease-accel`; fully respect `prefers-reduced-motion: reduce` (disable transforms, reveal highlight, shimmer, smooth scrolling).\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for dynamic feedback (form errors, toasts, loading states).\n- **Mandatory Visual Feedback:** Every click, hover, and submission must trigger a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n- **Fluent Motion Feel:** 150–300ms durations; connected, physical, purposeful — no bounce, no gratuitous parallax.\n- **Smooth anchor scrolling** via `scroll-behavior: smooth` (guarded by reduced motion) with a sticky-nav scroll offset.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). No inline CSS, no `\u003Cstyle>` blocks.\n- **Naming Convention:** BEM throughout (`.card`, `card__title`, `card--pricing`, `btn--primary`, `faq__item`) — one consistent convention, never mixed.\n- **No Unrequested Placeholders:** All copy is real, English, and product-specific; placeholders are permitted only where content was genuinely left unspecified.\n- **Definition of Done (first attempt):** Theme toggle persists and works; the mobile nav flyout works; the FAQ accordion works; the form validates with announced feedback; all component states (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fsuccess\u002Ferror) are styled; both themes pass AA contrast; zero console errors; zero horizontal scroll.\n",1791954984599]