[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-498-Suprematism":3},"You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — produce the final, production-ready code immediately, in a single pass, following every rule in this specification.\n\n## Project Brief\n\n- **Theme:** Suprematism — Kazimir Malevich, 1913–1920s. Pure geometric abstraction floating in space: circles, rectangles, crosses, and tilted planes on a near-white ground. Limited palette (black, red, blue, ochre). Feeling over representation. Hard flat edges, zero rounding (circles are the only curve), zero shadows — forms float through position and tilt alone.\n- **Signature Move:** a solid-color rectangle tilted 8deg (`--tilt-plane`) floating behind or beside an element — repeated on the nav, cards, the featured pricing tier, the Final CTA backdrop, and as the button's own hover tilt.\n- **Sections (in order):** Sticky Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.\n- **Light\u002FDark:** the source specification does not declare modes; you must design and validate both light and dark modes before publishing.\n- **Copy:** all user-facing copy in English. No product was specified — invent one coherent fictional product\u002Fbrand that fits the Suprematist aesthetic (e.g., a geometric design\u002Fcreative tool) and write real, final copy for every section. Lorem ipsum is prohibited.\n- **Reference baseline:** the Suprematism token\u002Fcomponent CSS supplied with the request is canonical. Extend it; do not contradict it. Migrate its `--color-*` names to the mandatory token names defined in §1.2.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n\n- **No Inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** every design property, layout rule, and state must be targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain semantic and style-agnostic. The only presentational elements permitted are decorative geometric shapes: empty `\u003Cdiv>`s with dedicated classes and `aria-hidden=\"true\"` (see §2.5).\n\n### 1.2 CSS Variables & Theme Tokens\n\nAll visual tokens must live in `:root` (and the dark-mode scopes in §1.3) using these **mandatory names**. Light mode baseline:\n\n```css\n:root {\n  \u002F* backgrounds *\u002F\n  --bg-primary: #f7f7f5;         \u002F* page ground *\u002F\n  --bg-secondary: #ffffff;      \u002F* surface — theme-declared value, see exception below *\u002F\n  --bg-surface-strong: #efefec; \u002F* inset\u002Fraised surface *\u002F\n  \u002F* brand *\u002F\n  --primary: #d21f1f;           \u002F* Suprematist red *\u002F\n  --secondary: #1c4fa0;         \u002F* Suprematist blue *\u002F\n  --color-black: #16161a;\n  --color-ochre: #e0a415;\n  \u002F* text *\u002F\n  --text-primary: #16161a;\n  --text-secondary: #55555c;\n  --text-success: #1c4fa0;      \u002F* blue doubles as success within the limited palette *\u002F\n  --text-error: #d21f1f;\n  \u002F* borders *\u002F\n  --border-default: #16161a;\n  --border-success: #1c4fa0;\n  --border-error: #d21f1f;\n  \u002F* geometry — pure forms, no depth *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px;\n  --shadow-sm: none; --shadow-md: none;\n  \u002F* motion & space *\u002F\n  --spacing-gap: 1rem;\n  --transition-fast: 150ms var(--ease-standard);\n  --transition-normal: 300ms var(--ease-standard);\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* stacking *\u002F\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* type *\u002F\n  --font-base: 'Jost', 'Futura', 'Helvetica Neue', system-ui, sans-serif;\n  --font-display: 'Jost', 'Futura', 'Helvetica Neue', sans-serif;\n  \u002F* signature *\u002F\n  --tilt-plane: 8deg;\n  --focus-ring: var(--secondary);\n}\n```\n\n- **Pure White Exception:** the theme explicitly declares `surface: #ffffff`; keep that exact value for `--bg-secondary`. Any near-white not explicitly declared by the theme must use `#fefefe`, never `#ffffff`.\n- **Contrast Pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in both themes, not just the default.\n- **Success\u002FError Semantics:** within the limited four-color palette, blue (`--text-success`\u002F`--border-success`) signals success and red (`--text-error`\u002F`--border-error`) signals error. Because red is also the brand primary, error and success states must never rely on color alone — always pair with an icon and text message (§3).\n\n### 1.3 Mandatory Dark Mode Support\n\nDark mode must always be defined. The source spec does not declare modes, so you design it: a dark ground with light geometric forms is equally authentic Suprematism.\n\n- **Implementation:** define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Suggested starting values — verify WCAG AA and adjust:\n\n```css\n--bg-primary: #131316;\n--bg-secondary: #1d1d22;\n--bg-surface-strong: #26262d;\n--text-primary: #f7f7f5;\n--text-secondary: #a8a8b0;\n--border-default: #f7f7f5;   \u002F* the hard 2px black borders invert to off-white *\u002F\n--text-error: #ff7575;  --border-error: #ff7575;\n--text-success: #8ab0f0; --border-success: #8ab0f0;\n--focus-ring: #8ab0f0;\n```\n\n- **Hue Rule:** `--primary`, `--secondary`, and `--color-ochre` keep their original values for large planes and filled buttons (white text on `#d21f1f` passes AA). Any red\u002Fblue\u002Fochre used as small text, icons, or thin borders on the dark ground must use the lightened variants above.\n- **Theme Switching:** background and text variables must switch seamlessly with zero HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and apply the `.dark` class as the very first operation in `script.js` to minimize flash. Provide a visible toggle in the nav with correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\") and a Material `dark_mode`\u002F`light_mode` icon that swaps with the state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n- **Default Alignment Rule:** every flex container must default to `align-items: center` unless an exception is explicitly justified (e.g., card text columns may use `stretch` so paragraphs run full-width — state the exception in a CSS comment).\n- **Mobile-Friendly First:** all flex rows must convert to columns at ≤768px. Build styles mobile-first, then enhance upward.\n- **No Horizontal Scrolling:** the page must not scroll horizontally at any width down to 320px. Decorative tilted planes must be clipped by their relatively-positioned parent sections (`overflow: clip`); additionally set `overflow-x: hidden` on `body`.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n\n- Use Tailwind CSS (CDN or build) with component styles written via `@layer components` \u002F `@apply`, or clean custom CSS — but every utility must map back to the CSS variables above or to the generic reusable class names `.btn`, `.card`, `.input`, `.badge`, `.nav` supplied in the reference baseline. Keep and extend those base component styles; do not restyle from scratch.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n- **Text:** load Google Fonts `\u003Clink>` tags in `\u003Chead>`. **Exception:** Futura is not available on Google Fonts — load **Jost** (weights 400, 500, 700) as the geometric Futura-style primary for both `--font-base` and `--font-display`; keep `'Futura', 'Helvetica Neue'` only as local fallbacks in the stack.\n- **Icons:** use Google Material Symbols (Outlined) via the Google Fonts link. Required ligature names include: `menu`, `close`, `dark_mode`, `light_mode`, `arrow_forward`, `check`, `expand_more`, `error`, `check_circle`, `progress`. Raw inline SVGs and local icon files are explicitly forbidden.\n- **Icon Accessibility:** icons are `aria-hidden` when decorative; every icon-only button (e.g., theme toggle, social links) must carry an `aria-label`.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\n\nStyle all states via CSS classes on the `.btn` block:\n\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — bold uppercase Jost, 2px solid `--border-default` border, `--radius-md` (0px), no shadow, minimum touch target 44×44px.\n- **Hover:** the signature tilt — `transform: rotate(-1.5deg)` — plus `cursor: pointer`.\n- **Focus:** distinct keyboard ring — `:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }`.\n- **Active\u002FPressed:** `transform: scale(0.97)` with the hover rotation resetting to 0deg.\n- **Loading:** disables interaction, prevents double-clicks, and renders a CSS-only spinner — a small tilted square rotating on its axis (on-theme) or the Material `progress` icon with a spin animation — without distorting button dimensions (fix the button's width during loading) and with `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no transforms.\n- **Success\u002FError:** temporary feedback classes `.btn--success` \u002F `.btn--error` driven by `--text-success` \u002F `--text-error`, always paired with an icon or text change, never color alone.\n- **Variants:** `.btn--primary` (red ground, white text), `.btn--secondary` (surface ground, black border), and `.btn--danger` if any destructive action appears — visually distinct in both themes.\n\n### 2.2 Card Component Requirements\n\n- **Default:** flexible flexbox layout, 2px solid `--border-default` border, 0px radius, no shadow, `--bg-secondary` ground, generous padding. Keep the theme's `.card::after` — the ochre tilted bar floating off the lower-left corner.\n- **Hover:** `transform: translateY(-2px)` (an optional additional `rotate(-0.5deg)` is permitted), transitioned with `var(--transition-normal)`.\n- **Focus-within:** when a child link or button receives focus, the card border shifts to `var(--secondary)`.\n- **Loading (Skeleton):** define `.card--skeleton` with a CSS shimmer keyframe animation so future async content causes no layout jumps.\n- **Empty State:** define `.card--empty` — a structured fallback with a large Material icon and clear guidance text.\n\n### 2.3 Form & Input Requirements\n\nThe Final CTA contains an email capture form. Structure it as a flex column wrapping a `\u003Clabel>`, the `.input` field, and a dedicated error feedback container (`\u003Cp>` with `aria-live=\"polite\"`).\n\n- **States:** Empty, Focused (accent ring: border `var(--secondary)` plus `box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 25%, transparent)`), Filled, Valid (`--border-success` + `check` icon), Invalid (`--border-error` + `error` icon + message text in the error container — never color alone), Disabled, Read-only.\n- **Behavior:** on submit, validate the email in `script.js`; on failure set `aria-invalid=\"true\"` and populate the live error container; on success show the button's loading state (simulated 600–900ms), then its success state plus a confirmation toast (§2.5).\n\n### 2.4 Modal \u002F Popup Requirements\n\nNo modal is required for this landing page — do not add one. If any overlay is ever introduced, it must follow: animated opening\u002Fclosing via CSS transitions, centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, and closing via `Esc` or overlay click, layered at `--z-modal`.\n\n### 2.5 Section-by-Section Requirements\n\n- **Nav (sticky):** `.nav` per the baseline — flex, `align-items: center`, 2px border, surface ground, and its `::before` red tilted square. Contents: brand (a CSS-composed geometric mark — black square with a small red circle — `aria-hidden`, plus wordmark text), links to Features \u002F How It Works \u002F Testimonials \u002F Pricing \u002F FAQ, the theme toggle (§1.3), and a compact `.btn--primary` CTA. At ≤768px collapse links behind a `menu` icon button toggling an absolutely-positioned dropdown panel (`--z-dropdown`, surface ground, 2px border), with `aria-expanded`, `Esc` to close, and managed focus.\n- **Hero:** two-column flex (column on mobile). Left: `.badge` kicker, `\u003Ch1>` in display Jost (uppercase, tight leading, `clamp()` sizing), subcopy, and a CTA row (`.btn--primary` + `.btn--secondary`). Right: the floating composition — a large tilted black square (homage to Malevich's \"Black Square\"), a red rectangle, a blue bar or cross, an ochre plane, and one circle — pure CSS shapes as empty `aria-hidden` classed divs (`.geo-square`, `.geo-circle`, etc.), gently floating via staggered translate\u002Frotate keyframes (6–8s), `pointer-events: none`, clipped by the section, never overlapping text or buttons.\n- **Features:** section header (kicker, `\u003Ch2>`, intro line) then 3 `.card` components in a wrapping flex row (equal `flex-basis`, column on mobile). Each card: a Material icon inside a geometric tile (alternating black square \u002F red circle), `\u003Ch3>`, paragraph; ochre `::after` bar; hover lift.\n- **How It Works:** 3 steps in a flex row (column on mobile). Each step: its numeral inside a tilted square (step 1 black, step 2 red, step 3 blue, rotated ±`--tilt-plane`), `\u003Ch3>`, text. An optional thin black connecting line on desktop is decorative and `aria-hidden`.\n- **Testimonials:** 3 `.card` components, each with a `\u003Cblockquote>`, an initials avatar (colored circle — the only permitted curve — black\u002Fred\u002Fblue grounds with white initials), and name + role.\n- **Pricing:** 3 tiers. The featured middle tier uses `.card--featured`: a red tilted plane floating behind it via `::before` (rotated `--tilt-plane`, `z-index: -1`) plus a `.badge` \"Most Popular\" (pill radius, blue ground, white text). Each tier: name, large display price, feature list (one Material `check` icon per line), and a CTA (featured: `.btn--primary`; others: `.btn`).\n- **FAQ:** an accordion of 5–6 items. Each item: `\u003Ch3>\u003Cbutton class=\"faq__trigger\" aria-expanded=\"...\" aria-controls=\"...\">` with a rotating `expand_more` icon (180deg when open), and a matching panel animated via `grid-template-rows: 0fr → 1fr` (or `max-height`) with `var(--transition-normal)`. Fully keyboard operable via native buttons; if JS enforces one-open-at-a-time, keep all `aria-expanded` values in sync.\n- **Final CTA:** full-width band with 2–3 large tilted planes (black\u002Fred\u002Fochre) flanking — never sitting under — the text, clipped by the section. Contains `\u003Ch2>`, a supporting line, and the email capture form per §2.3. Success triggers a toast: fixed bottom, `--z-toast`, `role=\"status\"`, `aria-live=\"polite\"`, Material `check_circle` icon, auto-dismiss.\n- **Footer:** inverted ground — light mode: `--color-black` ground with `--bg-primary` text; dark mode: `--bg-surface-strong` ground with `--text-primary` (it must remain distinct from the page background in both modes). Contents: brand block (geometric mark + one-line description), four columns of secondary links (Product \u002F Company \u002F Resources \u002F Legal), social icon buttons (Material icons, each with `aria-label`, 44px targets), and a copyright line. Links show visible hover feedback (underline offset or color shift to `--primary`).\n- **Decorative Geometry (global):** every shape is `aria-hidden=\"true\"`, `pointer-events: none`, text-free, positioned inside a relatively-positioned, overflow-clipped parent, and never stacked above interactive elements.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` typography and flex wrapping from 320px to wide desktop with zero horizontal overflow.\n- **Smooth Animations:** every state change transitions with `var(--transition-fast)` or `var(--transition-normal)`; under `prefers-reduced-motion: reduce`, disable float keyframes, rotations, and transitions while keeping instant state changes.\n- **Accessibility (a11y):** a skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section`, `footer`); exactly one `\u003Ch1>` with logical heading order; visible `:focus-visible` rings everywhere; logical DOM\u002Ffocus order; full keyboard operability with no mouse-only interactions; WCAG AA contrast in both modes (4.5:1 body text, 3:1 large text and UI boundaries); state never communicated by color alone; `aria-live` regions for form errors and toasts.\n- **Mandatory Visual Feedback:** every hover, click, and submission triggers a visible state change (tilt, lift, ring, spinner, toast).\n- **Destructive Actions:** any `.btn--danger` must be visually distinct in both light and dark themes.\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>`; no inline script blocks. Google Fonts (Jost) and Material Symbols `\u003Clink>` tags in `\u003Chead>`. No other local assets.\n- **Naming Convention:** BEM only (`block__element--modifier`: `.btn--primary`, `.nav__link`, `.card--featured`, `.faq__trigger`, `.geo-square`). The baseline blocks `.btn`, `.card`, `.input`, `.badge`, `.nav` are the blocks. Never mix conventions.\n- **Script Scope:** `script.js` contains only — theme init\u002Ftoggle\u002Fpersistence (§1.3), mobile menu, FAQ accordion, form validation with simulated async submit and toast, and smooth anchor scrolling that respects reduced motion. No libraries, no other behavior.\n- **Copy:** final English copy for the invented coherent product across all sections; no lorem ipsum; no unrequested placeholders.\n- **Definition of Done:** zero inline styles; zero inline SVGs; dark mode complete with persisted toggle; all button states (default, hover, focus, active, loading, disabled, success\u002Ferror) implemented; card hover\u002Ffocus-within\u002Fskeleton\u002Fempty styles defined; all form states implemented; keyboard pass over every interactive element; contrast verified in both modes; no horizontal scroll at 320px; reduced motion honored.\n\nGenerate the complete final code for all three files now, in one attempt.\n",1791954988168]