[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-108-Together-Pastel-Cloud":3},"# CODING-AGENT PROMPT — \"TOGETHER PASTEL CLOUD\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page on the first attempt — full `index.html`, `style.css`, and `script.js`. Do not ask clarifying questions. Where copy is unspecified, write confident, on-theme **English** copy (never lorem ipsum, never placeholder Latin).\n\n**Project:** Marketing landing page for \"Together\" — a fictional AI infrastructure cloud (deploy, scale, and serve frontier models).\n**Design System:** \"Together Pastel Cloud\" — output category: **Glass & Soft UI**.\n**Era \u002F Mood:** 2024–2026 AI Infrastructure Cloud.\n\n**Required sections, in this exact order:**\n1. Sticky Header (nav + theme toggle)\n2. Hero (with enterprise stats: **2x, 60%, 90%**)\n3. Features — 3 cards\n4. How It Works — 3 steps (dark section)\n5. Testimonials\n6. Pricing — 3 tiers (with billing toggle)\n7. FAQ (accordion)\n8. Final CTA (dark section, email capture)\n9. Footer with secondary link columns\n\n---\n\n## 0. THEME DIRECTION — \"TOGETHER PASTEL CLOUD\"\n\n**Visual pillars (non-negotiable):**\n\n- **Pastel gradient canvas:** soft pink \u002F blue \u002F lavender radial gradients floating over a near-white canvas in light mode; the same hues glow at reduced opacity over midnight blue in dark mode.\n- **Midnight blue, never gray-black:** every dark surface is `#010120` (or a lifted variant in dark mode). No `#111`, `#1a1a1a`, or neutral grays anywhere.\n- **Sharp geometry:** 4px radius for badges, chips, and segmented-control thumbs; 8px radius for buttons, cards, inputs, and containers. Never exceed 8px radius on any UI control.\n- **Monospace technical labels:** all eyebrows, micro-labels, stat labels, and footer meta use the mono font, uppercase, 11–12px, positive tracking (+0.08em to +0.12em).\n- **Negative tracking display type:** all sans-serif text uses negative letter-spacing, scaling from −0.16px (small text) to −1.92px (64px display headlines).\n- **Enterprise stats:** \"2x\", \"60%\", \"90%\" rendered as large, tight-tracked numerals with mono uppercase labels — visually prominent in the Hero.\n- **Blue-tinted shadows:** all elevation uses the `rgba(1,1,32,0.1)` family — never neutral black shadows.\n- **Magenta & orange are illustration-only:** `#ef2cc1` and `#fc4c02` may appear only inside gradient illustrations, decorative orbs, and accent shapes — never as text, link, border, or button colors.\n- **Glass on dark:** glassmorphic fills `rgba(255,255,255,0.12)` + `backdrop-filter: blur()` for buttons, cards, and inputs sitting on midnight surfaces (in both themes).\n\n**Source palette (translated from spec):** White `#ffffff`, Black `#000000`, Midnight Blue `#010120`, Magenta `#ef2cc1`, Orange `#fc4c02`, Lavender `#bdbbff`, Glass `rgba(255,255,255,0.12)`, Border `rgba(0,0,0,0.08)`.\n\n**Reference hero gradient mesh (adapt as needed):**\n\n```css\n.hero__canvas {\n  background:\n    radial-gradient(40rem 40rem at 12% 8%, var(--pastel-pink), transparent 60%),\n    radial-gradient(36rem 36rem at 88% 18%, var(--pastel-blue), transparent 60%),\n    radial-gradient(44rem 44rem at 55% 95%, var(--pastel-lavender), transparent 65%);\n}\n```\n\n---\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. Zero exceptions.\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 styling-agnostic. Changing the site's look must require editing only `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\n\nStore every visual token in `:root` and theme overrides. All required tokens below **must** exist:\n\n| Token | Light Mode | Dark Mode | Usage |\n|---|---|---|---|\n| `--bg-primary` | `#fefefe` | `#010120` | Page canvas |\n| `--bg-secondary` | `#f7f7fc` | `#06062e` | Alternate bands, soft card fills |\n| `--bg-midnight` | `#010120` | `#06062e` | Inherently dark sections (Hero CTA band, How It Works, Final CTA, Footer) |\n| `--text-primary` | `#010120` | `#ffffff` | Headings, body |\n| `--text-secondary` | `rgba(1,1,32,0.64)` | `rgba(255,255,255,0.72)` | Supporting copy |\n| `--text-on-dark` | `#ffffff` | `#ffffff` | Text on midnight sections |\n| `--text-on-dark-secondary` | `rgba(255,255,255,0.72)` | `rgba(255,255,255,0.72)` | Supporting text on midnight sections |\n| `--primary` | `#010120` | `#ffffff` | Primary button fill |\n| `--on-primary` | `#ffffff` | `#010120` | Text on primary buttons |\n| `--secondary` | `#bdbbff` | `#bdbbff` | Lavender accents, badges (decorative on light; readable text only on midnight) |\n| `--text-success` | `#0f8a4d` | `#4ade80` | Success feedback |\n| `--text-error` | `#d92d43` | `#ff8a9a` | Error feedback |\n| `--border-default` | `rgba(0,0,0,0.08)` | `rgba(255,255,255,0.12)` | Hairlines, card borders |\n| `--border-success` | `rgba(15,138,77,0.4)` | `rgba(74,222,128,0.4)` | Valid input borders |\n| `--border-error` | `rgba(217,45,67,0.4)` | `rgba(255,138,154,0.4)` | Invalid input borders |\n| `--glass` | `rgba(255,255,255,0.12)` | `rgba(255,255,255,0.12)` | Glass fills (dark surfaces only) |\n| `--glass-border` | `rgba(255,255,255,0.2)` | `rgba(255,255,255,0.2)` | Glass edges |\n| `--accent-magenta` | `#ef2cc1` | `#ef2cc1` | **Illustrations only** |\n| `--accent-orange` | `#fc4c02` | `#fc4c02` | **Illustrations only** |\n| `--pastel-pink` | `#ffd7ec` | `#ffd7ec` | Gradient orbs |\n| `--pastel-blue` | `#d7e6ff` | `#d7e6ff` | Gradient orbs |\n| `--pastel-lavender` | `#e5e3ff` | `#e5e3ff` | Gradient orbs |\n| `--focus-ring` | `#010120` | `#ffffff` | Keyboard focus outlines |\n\n- **Geometry tokens:** `--radius-sm: 4px` (badges, chips, segmented thumbs), `--radius-md: 8px` (buttons, cards, inputs, containers), `--radius-lg: 16px` (decorative gradient orbs and illustration shapes only — never on UI controls).\n- **Shadows (blue-tinted):** `--shadow-sm: 0 2px 6px rgba(1,1,32,0.06)`, `--shadow-md: 0 4px 10px rgba(1,1,32,0.1)`, `--shadow-lg: 0 12px 32px rgba(1,1,32,0.14)`. In dark mode, deepen to `rgba(0,0,0,0.4)`-family values.\n- **Spacing & motion:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-header: 900`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200` (define all, even if unused, to prevent future overlap conflicts).\n- **Typography tokens:** `--font-display`, `--font-base` (Space Grotesk), `--font-mono` (JetBrains Mono); tracking scale `--tracking-xs: -0.16px`, `--tracking-sm: -0.32px`, `--tracking-md: -0.64px`, `--tracking-lg: -1.28px`, `--tracking-xl: -1.92px`.\n- **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes. Lavender `#bdbbff` is decorative-only on light backgrounds (insufficient contrast) but may be used as text\u002Faccent color on midnight surfaces.\n- **No pure white backgrounds:** The light canvas is `#fefefe`, never `#ffffff`. `#ffffff` is permitted only as text color on dark surfaces.\n\n### 1.3 Mandatory Dark Mode Support\n\n- **Implementation:** Define light tokens in `:root`, then apply dark tokens via both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Use this exact cascade so explicit user choice always wins over system preference: `:root { light }` → `.dark { dark }` → `@media (prefers-color-scheme: dark) { :root:not(.light) { dark } }`. Also support a `.light` forcing class. Set `color-scheme: light dark` appropriately so native controls match.\n- **Theme Switching:** Background and text variables must flip seamlessly with zero HTML restructuring. Inherently dark sections stay midnight in both themes — in dark mode they adopt `--bg-secondary` (`#06062e`) and\u002For a `rgba(255,255,255,0.08)` top border so they remain visually distinct from the page canvas. Pastel orbs remain in dark mode at reduced opacity (0.35–0.5) as glows.\n- **Persistence:** Store the user's choice in `localStorage` (key `theme`), falling back to `prefers-color-scheme` on first visit. The header must contain a visible toggle button with correct `aria-pressed` state, a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), and Material Symbols `dark_mode` \u002F `light_mode` icons.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented (the only permitted exceptions: card\u002Faccordion internal text columns use `align-items: flex-start` for editorial text alignment).\n- **Mobile-Friendly First:** Author base styles for mobile, then enhance at `min-width: 640px \u002F 768px \u002F 1024px \u002F 1280px`. Multi-column rows (hero, feature grid, pricing) collapse to single columns on small viewports. Prevent horizontal scrolling everywhere (`overflow-x: clip` on `body`; decorative orbs must never force overflow). Use a `.container` wrapper: `max-width: 1200px`, `margin-inline: auto`, `padding-inline: 1.5rem`.\n\n### 1.5 Framework Default & CSS Strategy\n\n- Use **clean custom CSS** (the permitted alternative to Tailwind for this fully token-driven design system), organized with native `@layer` cascade layers in this order: `tokens`, `base`, `layout`, `components`, `utilities`. Do not load Tailwind, Bootstrap, or any other CSS\u002FJS framework or CDN — the only external resources allowed are Google Fonts and Google Material Symbols stylesheets.\n- All utility\u002Flayout classes (`.container`, `.grid-3`, `.flex-center`, `.section`) must map back to CSS variables or generic reusable component names (`.btn`, `.card`, `.input-group`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n- **Text:** Load Google Fonts via `\u003Clink>` with `preconnect`: **Space Grotesk** (400, 500, 600, 700) for display and body, bound to `--font-base` \u002F `--font-display`; **JetBrains Mono** (400, 500, 600) bound to `--font-mono`.\n- **Exception clause:** The spec fonts 'The Future' and 'PP Neue Montreal Mono' are not distributed on Google Fonts; per the mandatory Google Fonts rule, substitute the closest equivalents — Space Grotesk and JetBrains Mono — and apply the specified negative tracking scale to preserve the intended typographic character.\n- **Tracking scale (mandatory):** body 16–18px → −0.32px; small 12–14px → −0.16px; H3 24–28px → −0.64px; H2 40–48px → −1.28px; H1\u002Fdisplay 56–64px → −1.92px. Mono labels are uppercase with +0.08em to +0.12em tracking.\n- **Icons:** Use Google Material Symbols (**Rounded** variant) via the Google Fonts stylesheet. Render as `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>` with `font-variation-settings` defined in CSS. **Raw inline SVGs, emoji icons, and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\n\nStyle all states via CSS classes on a `.btn` base:\n\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `padding: 0.75rem 1.5rem`, `border-radius: var(--radius-md)`, `font-weight: 500`, `transition: var(--transition-normal)`.\n- **Variants:** `.btn--primary` (fill `--primary`, text `--on-primary`), `.btn--ghost` (transparent, 1px `--border-default`, text `--text-primary`), `.btn--glass` (for dark\u002Fmidnight surfaces: `--glass` fill, `--glass-border`, `backdrop-filter: blur(14px)`, white text).\n- **Hover:** brightness\u002Felevation shift with `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring using `--focus-ring` (2px outline, 2px offset) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables pointer events to prevent double-clicks, sets `aria-busy=\"true\"`, and renders a CSS spinner (animated border circle) or rotating Material `progress_activity` icon without changing button dimensions.\n- **Disabled (`[disabled]`):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styling driven by `--text-success` \u002F `--text-error`, paired with an icon and an `aria-live` announcement — never color alone.\n- No destructive actions exist on this page; do not add any.\n\n### 2.2 Card Component Requirements\n\n- **Default:** flexible flexbox column (documented `align-items: flex-start` exception for text), `--bg-secondary` or `#fefefe` fill, 1px `--border-default`, `border-radius: var(--radius-md)`, `--shadow-sm`, generous padding.\n- **Glass variant (`.card--glass`):** for midnight sections — `--glass` fill, `--glass-border`, `backdrop-filter: blur(14px)`. Include an `@supports not (backdrop-filter: blur(1px))` fallback that raises fill opacity to `rgba(255,255,255,0.18)`.\n- **Hover (interactive cards):** `transform: translateY(-2px)` plus shift from `--shadow-sm` to `--shadow-md`.\n- **Focus-within:** card border highlights (lavender on dark, midnight on light) when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.skeleton` class with a shimmer `@keyframes` animation in CSS (for future dynamic content); do not apply it to static content.\n- **Empty State:** not applicable to this page — do not fabricate one.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback element (`\u003Cp>` with `aria-live=\"polite\"`).\n- **States:** empty, focused (outline ring via `--focus-ring`), filled, valid (success border + check icon), invalid (error border, `--text-error` message + error icon), disabled. Style each via classes\u002Fattributes — never inline.\n- **Glass variant (`.input--glass`):** on the midnight Final CTA — `--glass` fill, `--glass-border`, blur, white text, 8px radius, placeholder `rgba(255,255,255,0.5)`.\n- **Validation:** client-side only (email regex, on blur and on submit); all messages in English.\n\n### 2.4 FAQ Accordion Requirements (in place of a modal)\n\n- **No modals, popups, or dialogs anywhere on this page — do not add them.**\n- **Structure:** each item is `\u003Ch3>\u003Cbutton class=\"faq-item__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\">Question \u003Cspan class=\"material-symbols-rounded\">expand_more\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fh3>` followed by `\u003Cdiv class=\"faq-item__panel\" id=\"faq-panel-N\" role=\"region\">Answer\u003C\u002Fdiv>`.\n- **States:** closed → open animated via CSS (`grid-template-rows: 0fr → 1fr` technique or equivalent); chevron rotates 180°; `aria-expanded` toggled by JS; items toggle independently.\n- **Keyboard:** native `\u003Cbutton>` elements guarantee Enter\u002FSpace operability; full focus visibility required.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` typography, defined breakpoints, zero horizontal overflow at 320px viewport width.\n- **Smooth Animations:** CSS transitions on all state changes using `transition: var(--transition-normal) var(--ease-standard)`; fully respect `prefers-reduced-motion: reduce` (disable transforms, reveals, and smooth scrolling).\n- **Accessibility (a11y):** sufficient contrast in both themes (verify `--text-secondary` pairs); never rely on color alone — pair every success\u002Ferror state with an icon and text. Use semantic HTML5 (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), logical heading hierarchy (one `h1`), logical DOM\u002Ffocus order, full keyboard operability, a visually hidden skip-to-content link, `scroll-margin-top` on anchored sections, and `aria-live` regions for dynamic feedback (form errors\u002Fsuccess, billing-toggle announcements).\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** none exist on this page; keep it that way.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>`; no other script tags, no inline JS, no inline event handler attributes (all listeners via `addEventListener`).\n- **Naming Convention:** BEM exclusively (e.g., `.hero`, `.hero__title`, `.card--glass`, `.btn--primary`, `.faq-item__trigger`). Never mix conventions.\n- **No Unrequested Placeholders:** write real, specific English copy for the fictional \"Together\" AI infrastructure brand (model deployment, GPU clusters, serverless inference, global edge). Lorem ipsum is forbidden.\n- **Self-contained visuals:** no external images. Avatars are CSS pastel-gradient circles with initials; all illustrations are CSS gradients\u002Fshapes; magenta\u002Forange appear only inside them.\n- **Definition of done:** zero inline styles\u002Fhandlers, zero console errors, both themes fully styled and toggled, keyboard-only navigation pass, 44px minimum touch targets, no horizontal scroll at 320px.\n\n---\n\n## 5. PAGE SECTION BUILD SPECIFICATIONS\n\n### 5.1 Sticky Header\nSlim (64–72px) sticky header: CSS geometric logo mark (two overlapping pastel-gradient shapes) + \"Together\" wordmark in Space Grotesk with tight tracking; nav links (Features, How It Works, Pricing, FAQ) with smooth anchor scrolling; theme toggle (per 1.3); compact `.btn--primary` \"Get Started\". On scroll, add `.is-scrolled`: glass background (light: `rgba(254,254,254,0.75)` + blur + bottom hairline; dark equivalent). Mobile: hamburger (Material `menu`\u002F`close`) toggling a collapsible menu with `aria-expanded`\u002F`aria-controls`, closing on link click and `Escape`.\n\n### 5.2 Hero\nNear-white canvas with the pastel gradient mesh (reference snippet in Section 0; orbs `aria-hidden`, `pointer-events: none`). Two-column desktop layout (copy left, visual right; stacked on mobile). Copy column: mono uppercase eyebrow badge \"AI INFRASTRUCTURE CLOUD\" (4px radius, hairline border); H1 up to 64px with `--tracking-xl` (voice: \"The cloud built for frontier AI.\"); supporting subcopy (`--text-secondary`, max ~52ch); CTA row — `.btn--primary` \"Start Deploying\" + `.btn--ghost` \"View Documentation\"; enterprise stats row — **2x \u002F 60% \u002F 90%** as large tight-tracked numerals with mono labels (\"FASTER INFERENCE VS. BASELINE\", \"LOWER GPU COST AT SCALE\", \"LESS TIME ON INFRA OPS\"), separated by hairline dividers. Visual column: an 8px-radius product panel with layered pastel gradients, a magenta→orange gradient accent shape (illustration-only usage), floating glass chips with mono readouts (\"GPU CLUSTER — ONLINE\", \"LATENCY 12MS\", \"THROUGHPUT +2.1X\"), and `--shadow-lg`.\n\n### 5.3 Features — 3 Cards\n`--bg-secondary` band. Section header (mono eyebrow \"PLATFORM\" + H2 with `--tracking-lg` + subcopy). Three `.card--feature` in a responsive grid: Material icon (`bolt`, `memory`, `public`) inside a 4px-radius pastel tile (pink\u002Fblue\u002Flavender respectively, icon in midnight), mono micro-label (\"INFERENCE\", \"COMPUTE\", \"EDGE\"), H3, description. Full card state set per 2.2.\n\n### 5.4 How It Works — 3 Steps (Dark Section)\n`--bg-midnight` background, white text, subtle pastel glow. Section header (mono eyebrow + white H2). Three `.card--glass` steps in a row (column on mobile): mono step numerals \"01 \u002F 02 \u002F 03\" in lavender, white Material icon, white H3, `--text-on-dark-secondary` description. Steps: Connect (link your model\u002Frepo) → Configure (declarative scale manifest) → Deploy (global endpoints in minutes). Optional desktop hairline connector (`rgba(255,255,255,0.12)`, decorative).\n\n### 5.5 Testimonials\nLight section. Section header + three quote cards: Material `format_quote` icon in lavender, blockquote, then a flex footer row — CSS pastel-gradient avatar circle with initials, name (weight 600), role\u002Fcompany in mono uppercase 11px `--text-secondary`. Hover lift per 2.2.\n\n### 5.6 Pricing — 3 Tiers\n`--bg-secondary` band. Section header + billing toggle: a segmented control (`role=\"group\"`, `aria-label=\"Billing period\"`) with \"Monthly\" \u002F \"Annual\" buttons (8px container, 4px sliding thumb), `aria-pressed` states, a lavender \"SAVE 20%\" badge (4px radius, midnight text) on Annual, and a polite `aria-live` announcement. Three `.card--pricing` tiers: **Build** ($0\u002Fmo), **Scale** ($249\u002Fmo → $199\u002Fmo annual, featured), **Enterprise** (Custom). Featured middle card: midnight fill, white text, lavender \"MOST POPULAR\" mono badge, `--shadow-lg`, slight desktop elevation; its CTA is `.btn--glass`, others `.btn--ghost`. Each card: mono tier label, large tight-tracked price with mono \"\u002FMONTH\" caption, feature list with Material `check` icons (midnight on light cards, lavender on the featured card), CTA button.\n\n### 5.7 FAQ\nLight section, single centered column (max-width ~760px). Section header + six accordion items built exactly per 2.4 (topics: supported models, billing, data privacy, bring-your-own-cloud, SLA, scaling speed).\n\n### 5.8 Final CTA (Dark Section)\n`--bg-midnight` with pastel glow orbs behind (`aria-hidden`). Centered column: mono eyebrow \"GET STARTED\", white H2 with `--tracking-xl` (voice: \"Ship frontier AI, together.\"), `--text-on-dark-secondary` subcopy, then the email capture — inline flex row: `.input--glass` email field (flex: 1) + `.btn--glass` submit \"Request Access\". On submit: validate (per 2.3) → `.is-loading` for ~1.2s → `.is-success` with check icon and a polite `aria-live` confirmation (\"Thanks — we'll email your access details.\"). Below: secondary on-dark link \"Talk to sales\" with Material `arrow_forward`.\n\n### 5.9 Footer (Dark Section)\nContinues midnight, separated by a `rgba(255,255,255,0.12)` top hairline. Responsive grid: brand block (logo, one-line tagline, social links as mono uppercase text links — \"X \u002F GITHUB \u002F LINKEDIN\") plus four secondary link columns — **Product** (Inference, Clusters, Edge, Pricing, Changelog), **Company** (About, Careers, Blog, Press), **Resources** (Docs, API Reference, Status, Community), **Legal** (Privacy, Terms, Security, DPA). Links in `--text-on-dark-secondary`, hover to white with underline offset. Bottom bar (flex, space-between): \"© 2025 Together. All rights reserved.\" and a mono status line \"ALL SYSTEMS OPERATIONAL\" with a small success-colored dot (dot paired with text, not color-only).\n\n---\n\n## 6. JAVASCRIPT BEHAVIOR SPECIFICATION (`script.js`)\n\nWrite clean, commented (English), strict-mode JavaScript — no libraries. Implement exactly:\n\n1. **Theme manager:** read `localStorage('theme')`; apply `.dark`\u002F`.light` on `\u003Chtml>`; toggle button updates `aria-pressed`, `aria-label`, and swaps the `dark_mode`\u002F`light_mode` icon; persists choice; falls back to `prefers-color-scheme`.\n2. **Header scroll state:** toggle `.is-scrolled` past 8px scroll (passive listener).\n3. **Mobile menu:** toggle `.is-open` + `aria-expanded`, icon swap, close on link click and `Escape`, reset on resize to desktop.\n4. **FAQ accordion:** toggle `.is-open` + `aria-expanded` per item (independent items).\n5. **Billing toggle:** swap `aria-pressed`, update price text from `data-monthly`\u002F`data-annual` attributes, show\u002Fhide savings badge, announce via `aria-live`.\n6. **Email form:** prevent default, validate, show inline error + `aria-live` message on invalid; on valid, run loading → success sequence per 5.8.\n7. **Scroll reveals:** `IntersectionObserver` adding `.is-visible` to `[data-reveal]` elements; add a `js` class to `\u003Chtml>` at startup and scope initial hidden reveal styles under `.js` so content is never hidden without JavaScript; disable entirely under `prefers-reduced-motion`.\n8. **Smooth scrolling:** handled in CSS (`scroll-behavior: smooth` + `scroll-padding-top`), with `auto` under reduced motion.\n\nGenerate the complete final code now — all three files, fully styled for both light and dark themes, in one attempt.\n",1791954981688]