[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-394-Mesh-Gradient":3},"# CODING-AGENT SYSTEM PROMPT — \"MESH GRADIENT\" LANDING PAGE (GLASS & SOFT UI)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — a single-page marketing site for a fictional but coherent SaaS product (invent a believable product name and keep it consistent across every section).\n\n**Theme:** Mesh Gradient — multi-point smooth gradients blending many hues; organic, cloud-like color transitions; glassmorphic translucent surfaces with `backdrop-filter` blur; soft, diffused elevation. Output category: **Glass & Soft UI**.\n\n**Sections to build (in order):** Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n**Language:** All user-facing copy (headlines, body text, labels, button text, FAQ answers, footer links, form messages) must be written in **English**. No lorem ipsum — write realistic, polished marketing copy.\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.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — changing the site's look must only require editing the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nAdopt the canonical token sheet below **verbatim** as your foundation, then extend it. Additionally, map the palette onto the required semantic aliases inside `:root`:\n\n```css\n:root {\n  \u002F* required semantic aliases *\u002F\n  --primary: var(--color-primary);        \u002F* #7c6bff *\u002F\n  --secondary: var(--color-accent);       \u002F* #ff8fd6 *\u002F\n  --bg-primary: var(--color-bg);          \u002F* #0b0b16 *\u002F\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: #34d399;\n  --text-error: #ff7a8a;\n  --border-default: var(--color-border);\n  --border-success: rgba(52, 211, 153, 0.55);\n  --border-error: rgba(255, 122, 138, 0.55);\n  \u002F* required motion + layout tokens *\u002F\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --spacing-gap: var(--space-6);\n  \u002F* required elevation\u002Fstacking tokens *\u002F\n  --z-dropdown: 1000;\n  --z-modal: 2000;\n  --z-toast: 3000;\n}\n```\n\nCanonical foundation (adopt verbatim; the base classes `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` are mandatory starting points — extend them, never rename or duplicate them):\n\n```css\n\u002F* Mesh Gradient — design tokens *\u002F\n\u002F* 2021–present | Popularized by design tools (Mesh Gradient generators, Figma plugins) *\u002F\n:root {\n  --color-bg: #0b0b16;\n  --color-surface: rgba(255, 255, 255, 0.06);\n  --color-surface-strong: rgba(255, 255, 255, 0.11);\n  --color-border: rgba(255, 255, 255, 0.14);\n  --color-text: #f5f4fb;\n  --color-text-muted: rgba(245, 244, 251, 0.70);\n  --color-primary: #7c6bff;\n  --color-accent: #ff8fd6;\n  --color-mesh-a: #4f46e5;\n  --color-mesh-b: #06b6d4;\n  --color-mesh-c: #f472b6;\n  --color-mesh-d: #fbbf24;\n  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px; --radius-pill: 999px;\n  --shadow-sm: 0 4px 14px rgba(0,0,0,0.30);\n  --shadow-md: 0 10px 30px rgba(0,0,0,0.36);\n  --shadow-lg: 0 22px 56px rgba(0,0,0,0.42);\n  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n  --font-display: 'Space Grotesk', 'Inter', sans-serif; \u002F* substituted — see 1.6 *\u002F\n  --font-mono: 'JetBrains Mono', ui-monospace, monospace;\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;\n  --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;\n  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --ease-entrance: cubic-bezier(0, 0, 0, 1);\n  --mesh-field: radial-gradient(at 12% 18%, var(--color-mesh-a) 0px, transparent 55%),\n    radial-gradient(at 82% 12%, var(--color-mesh-b) 0px, transparent 50%),\n    radial-gradient(at 88% 78%, var(--color-mesh-c) 0px, transparent 55%),\n    radial-gradient(at 15% 85%, var(--color-mesh-d) 0px, transparent 50%),\n    radial-gradient(at 50% 50%, #1b1830 0px, transparent 70%);\n  --mesh-field-soft: radial-gradient(at 20% 20%, rgba(79,70,229,0.55) 0px, transparent 60%),\n    radial-gradient(at 80% 80%, rgba(244,114,182,0.45) 0px, transparent 60%);\n}\nbody { margin: 0; color: var(--color-text); font-family: var(--font-sans);\n  background: var(--mesh-field), var(--color-bg); background-attachment: fixed; min-height: 100vh; }\n.nav { display: flex; gap: var(--space-4); align-items: center;\n  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);\n  background: var(--mesh-field-soft), var(--color-surface); border: 1px solid var(--color-border);\n  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-sm); }\n.btn { font: 600 var(--text-base)\u002F1 var(--font-sans); color: var(--color-text);\n  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);\n  background: var(--color-surface-strong); border: 1px solid var(--color-border);\n  cursor: pointer; transition: transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard); }\n.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }\n.btn:active { transform: translateY(0); }\n.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }\n.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }\n.btn--primary { background: linear-gradient(120deg, var(--color-mesh-a), var(--color-mesh-c));\n  border-color: transparent; color: #fff; }\n.card { background: var(--mesh-field-soft), var(--color-surface); border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6);\n  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }\n.input { width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-sans);\n  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);\n  background: var(--color-surface); border: 1px solid var(--color-border); }\n.input::placeholder { color: var(--color-text-muted); }\n.input:focus { outline: none; border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--text-xs);\n  padding: .3em .8em; border-radius: var(--radius-pill);\n  background: linear-gradient(120deg, var(--color-mesh-b), var(--color-mesh-d)); color: #08131a; }\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .nav, .card { background: #17162a; }\n}\n@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } }\n\u002F* Reference specification: references\u002F00-flagship-implementation-specs\u002Fmesh-gradient.md *\u002F\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in **both** themes.\n* **Light Mode Background:** Never pure white; use a theme-fitting tinted near-white. If a near-white is genuinely required, use `#fefefe`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode Support\n* The Mesh Gradient palette is dark-native: **dark is the canonical default theme**. However, the source spec does not declare modes — you must define a full **light theme** and validate the design in both light and dark before considering it done.\n* **Implementation:** Define the dark palette as the `:root` default and mirror it under a `.dark` class; define light overrides under a `.light` class on `\u003Chtml>` and under `@media (prefers-color-scheme: light)` for no-JS first visits. Theme switching must work purely by swapping CSS variables — zero HTML restructuring.\n* **Light theme derivation (required starting point; tune only to improve contrast):** `--color-bg: #f4f3fb`, `--color-surface: rgba(11,11,22,0.05)`, `--color-surface-strong: rgba(11,11,22,0.09)`, `--color-border: rgba(11,11,22,0.12)`, `--color-text: #16152a`, `--color-text-muted: rgba(22,21,42,0.70)`, `--color-primary: #5b4ef0`, `--color-accent: #e0559f`; mesh anchors keep their hues at reduced opacity over a light base anchor (`#ecebfa`). Redefine `--mesh-field` and `--mesh-field-soft` for light mode so the cloud remains visible against the light background.\n* **Persistence:** Store the user's choice in `localStorage` (e.g., key `theme`), falling back to `prefers-color-scheme` on first visit. Apply the stored theme before first paint to prevent a flash of the wrong theme.\n* **Toggle Control:** A visible theme toggle in the nav — `.btn`-styled with a Material Symbol icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and an `aria-label` that updates (e.g., \"Switch to light mode\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build layout structures with **Flexbox** (CSS Grid permitted only for 2D card grids). Every flex container **must default to `align-items: center`** unless there is an explicitly justified exception (e.g., stretch for equal-height card grids).\n* **Mobile-friendly first:** all flex layouts responsive out of the box — rows convert to columns on small viewports, and there is **no horizontal scrolling at any width from 320px up**.\n\n### 1.5 Framework & Naming Convention\n* Use **plain, hand-written custom CSS** in `style.css` — the provided token sheet and base classes are the requested architecture. No Tailwind, no frameworks, no build step.\n* Enforce **one consistent naming convention: BEM** (`block__element--modifier`), matching the provided `.btn--primary` pattern. Never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* Load via Google Fonts `\u003Clink>`: **Inter** (400\u002F500\u002F600\u002F700), **JetBrains Mono** (400\u002F500), and **Space Grotesk** (500\u002F700).\n* **Exception clause:** the reference spec lists `Cabinet Grotesk` for `--font-display`, but it is not available on Google Fonts — substitute **Space Grotesk** and keep the fallback chain (`'Space Grotesk', 'Inter', sans-serif`).\n* Icons: **Google Material Symbols (Rounded style)** via the official stylesheet. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.** Decorative icons get `aria-hidden=\"true\"`; never rely on an icon alone to convey meaning.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nAll states via CSS classes; base = provided `.btn` (flex, `align-items: center; justify-content: center; gap: 0.5rem`, pill radius, minimum touch target 44×44px):\n* **Default:** glass surface (`--color-surface-strong`), 1px `--color-border`.\n* **Hover:** `translateY(-1px)` + `--shadow-sm`; the primary variant gains a soft gradient glow. `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring — 2px `--color-primary` outline, 2px offset.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.btn--loading` — `pointer-events: none`, `aria-busy=\"true\"`, a CSS spinner (border-based) or rotating Material Symbol `progress` that does not distort button dimensions; prevents double-clicks\u002Fdouble submits.\n* **Disabled:** `opacity: 0.5`, desaturated, `cursor: not-allowed`, no transforms.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA submit flow).\n* Variants required: `.btn` (glass ghost), `.btn--primary` (mesh gradient per the sheet). `.btn--danger` only if a destructive action exists — it must read as distinct in both themes.\n\n### 2.2 Cards\nBase = provided `.card` (mesh-soft surface, `backdrop-filter: blur(20px)`, `--radius-lg`, `--shadow-md`):\n* **Default:** flexible flexbox column layout, `--space-6` padding.\n* **Hover (interactive cards — Features, Pricing):** `translateY(-2px)` + `--shadow-lg`, transitioned with `var(--transition-normal) var(--ease-standard)`.\n* **Focus-within:** border brightens toward `--color-primary` when a child link\u002Fbutton receives focus.\n* **Skeleton\u002FEmpty:** define a `.card--skeleton` shimmer keyframe only if dynamic content is added; otherwise not required.\n* Keep the provided `@supports not (backdrop-filter…)` fallback and extend it to every glass surface, with a light-theme equivalent.\n\n### 2.3 Forms & Inputs (Final CTA email capture)\n* **Structure:** flex `.input-group` wrapping a visible `\u003Clabel>`, the provided `.input` field, and a dedicated error\u002Fsuccess feedback element with `aria-live=\"polite\"`.\n* **States (all class-driven):** empty, focused (per the sheet: primary border + 3px `color-mix` ring), filled, **valid** (`.input--valid`: `--border-success` + trailing `check_circle` icon in `--text-success`), **invalid** (`.input--invalid`: `--border-error`, error icon, error message in `--text-error` — never color alone; icon + message), disabled, read-only.\n* Validate in `script.js` on submit and on blur after first interaction. Success path: button → loading (~900ms simulated) → success state with a confirmation message announced via `aria-live`.\n\n### 2.4 FAQ Accordion (no modals on this page)\n* Do **not** add modals or popups. Pricing CTAs and nav links are smooth-scroll anchors to sections; the Final CTA form is the single conversion point.\n* Each FAQ item: a real `\u003Cbutton>` trigger with `aria-expanded` + `aria-controls`, and a panel with `role=\"region\"` + `aria-labelledby`. Animate open\u002Fclose with a CSS-only height technique (`grid-template-rows` or `max-height`) over `var(--transition-normal)`; a chevron Material Symbol rotates 180° on open. Fully keyboard operable (Enter\u002FSpace), visible focus ring, and closed panels must remain accessible to screen readers. Disable the animation under `prefers-reduced-motion`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography (hero display scales up to `--text-5xl` on desktop, never overflowing); breakpoints ~640px and ~1024px; grids use `auto-fit` + `minmax` and stack to one column on mobile.\n* **Animated mesh field:** the hero uses `--mesh-field` full-bleed with a slow organic drift (20–30s ease-in-out infinite — e.g., shifting `background-position` or a scaled pseudo-element) so the cloud feels alive; echo `--mesh-field-soft` at low opacity on nav and cards. Under `prefers-reduced-motion: reduce`, freeze all mesh drift, hover transforms, and accordion motion (extend the provided media query). On iOS\u002Fsmall screens, avoid `background-attachment: fixed` jank — render the fixed mesh via a positioned pseudo-element instead.\n* **Accessibility (a11y):** maintain ≥4.5:1 text contrast in **both** light and dark modes — where text sits over vivid mesh anchors, add a subtle scrim behind hero content. Never rely on color alone to communicate state. Use semantic HTML5 (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), a skip-to-content link, a single `h1`, logical heading\u002FDOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form results, pricing toggle changes).\n* **Mandatory visual feedback:** every hover, click, focus, and submission triggers a visible state change (nav link states, button transforms, accordion motion, form states).\n* **Destructive actions:** none expected; if any appear, `.btn--danger` must be visually distinct in both themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cstyle>` blocks; no inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n* **Naming convention:** BEM everywhere — one convention, never mixed.\n* **Copy:** realistic English marketing copy for the invented product; placeholders only where content was genuinely unspecified — lorem-ipsum-only submissions are prohibited.\n* **Assets:** no external or local images; all visuals come from CSS mesh gradients, glass surfaces, and Material Symbols. Avatars are gradient circles with initials.\n\n## 5. PAGE ARCHITECTURE & SECTION REQUIREMENTS\n\n1. **Skip link + floating glass nav** (`.nav` pill, sticky, `--z-dropdown`): logo (Material Symbol + wordmark), anchor links to Features \u002F How It Works \u002F Pricing \u002F FAQ, theme toggle (per 1.3), primary CTA. On mobile: a Material Symbol `menu` hamburger toggles a glass dropdown panel — `aria-expanded`, `aria-controls`, animated, closes on Esc, link click, or overlay tap.\n2. **Hero:** full-viewport animated `--mesh-field` background; `.badge` announcement pill; display headline in `--font-display` with one gradient-text accent word; subhead in `--text-secondary`; two CTAs (`.btn--primary` + glass `.btn`); subtle scroll cue. Centered flex column, `align-items: center`.\n3. **Features:** section header (eyebrow, `h2`, lede) + 3 `.card`s in a responsive grid; each card has a Material Symbol icon in a mesh-gradient rounded tile, an `h3` title, and a description. Hover per 2.2.\n4. **How It Works:** 3 numbered steps (`01\u002F02\u002F03` in `--font-mono` with gradient numerals), each with icon, title, and short text; steps connected by a gradient line on desktop, stacked on mobile.\n5. **Testimonials:** 3 `.card`s — 5-star rating (Material Symbol `star`, with `aria-label` \"Rated 5 out of 5\"), quote, author row (initials avatar on a mesh-gradient circle + name + role).\n6. **Pricing:** 3 tiers in `.card`s; the middle tier is featured (`.card--featured`: `--color-surface-strong`, gradient border or glow, `.badge` \"Most popular\", slight elevation on desktop). Each tier: name, price, feature list with `check` icons, and a CTA that smooth-scrolls to the Final CTA. Include a **monthly\u002Fyearly segmented toggle** (two `aria-pressed` buttons in a pill container): prices cross-fade and the change is announced via `aria-live`.\n7. **FAQ:** 5–6 realistic Q&As in the accordion pattern (per 2.4), inside a narrow centered container.\n8. **Final CTA:** full-width glass panel echoing `--mesh-field-soft`; headline + subhead + the email capture form (per 2.3) — input and submit inline on desktop, stacked on mobile; on success, the form area is replaced by a confirmation (icon + message).\n9. **Footer:** brand block (logo + one-line tagline), 2–3 secondary link groups (Product, Company, Resources — real labels), a social icon row (Material Symbols in glass circles, one `aria-label` per link), and a copyright line with a dynamic year. Multi-column flex on desktop, stacked on mobile.\n\n**Definition of done:** the page renders correctly from 320px to 1920px, in both light and dark themes, with zero horizontal scroll, zero inline styles, keyboard-complete navigation, and every interactive state defined in Sections 2–3 fully implemented.\n",1791954986140]