[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-125-Cyberpunk-Dark-Mode-Flow":3},"Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Output the full, final code in a single response — no clarifying questions, no partial deliverables.\n\n**Theme: \"Cyberpunk Dark Mode Flow\"** — Futuristic, Analytical, Sophisticated. Keywords: cyberpunk, dark mode, flow, neon, circuit, glow, tech, sleek. Era: Sleek Future. Dark-native theme (Light: ✗ No \u002F Dark: ✓ Full).\n\n**Product concept (anchor for all copy):** Invent the fictional product **\"Flow\"** — a real-time data-pipeline and analytics platform (\"route, monitor, and optimize live data streams\"). All user-facing copy must be real, on-theme English marketing copy. No lorem ipsum anywhere.\n\n**Palette (exact values):** Background `#080a12` · Panels `#1a1d26` (Dark Grey) · Text `#ffffff` · Primary Accent `#00c4fa` (Neon Blue) · Neon Green `#00ff9d` · Soft Purple `#bd00ff`.\n\n**Visual effects to implement:** glowing borders (1px neon strokes + box-shadow glow), rounded rectangular containers, faint circuit-board background patterns (CSS gradients only), smooth digital matte surfaces (flat, low-sheen panel fills — glows live on strokes and borders, not large fills), self-emitting neon strokes. Seed CSS (extend, never contradict): `background-color: #080a12; color: #ffffff; font-family: 'Sora', sans-serif; border: 1px solid #00c4fa; box-shadow: 0 0 8px #00c4fa;` — apply this exact combination to emphasis surfaces (primary buttons, featured pricing card, Final CTA panel); resting panels use the dimmer `--border-default`.\n\n**Page map (exact order):** sticky Header (logo, anchor nav, CTA) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute and `\u003Cstyle>` blocks in `index.html` are **forbidden**.\n- Target everything via class\u002FID selectors. HTML stays semantic and style-agnostic — retheming must require edits to `style.css` only.\n- `index.html` may reference only: Google Fonts `\u003Clink>` tags, the Tailwind Play CDN `\u003Cscript src>`, `style.css`, and one `\u003Cscript src=\"script.js\" defer>`. No inline JavaScript of any kind.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all visual tokens in `:root` inside `style.css` — exactly these names and values:\n\n```css\n:root {\n  \u002F* color *\u002F\n  --primary: #00c4fa;        \u002F* neon blue *\u002F\n  --secondary: #bd00ff;      \u002F* soft purple *\u002F\n  --bg-primary: #080a12;     \u002F* deep space background *\u002F\n  --bg-secondary: #1a1d26;   \u002F* dark grey panels *\u002F\n  --text-primary: #ffffff;\n  --text-secondary: #9aa8c7; \u002F* cool steel, AA on --bg-primary *\u002F\n  --text-success: #00ff9d;   \u002F* neon green *\u002F\n  --text-error: #ff2e63;     \u002F* neon magenta-red *\u002F\n  --border-default: rgba(0, 196, 250, 0.28);\n  --border-success: #00ff9d;\n  --border-error: #ff2e63;\n  \u002F* glow *\u002F\n  --glow-primary: 0 0 8px #00c4fa;\n  --glow-primary-strong: 0 0 8px #00c4fa, 0 0 28px rgba(0, 196, 250, 0.35);\n  --glow-secondary: 0 0 8px #bd00ff;\n  --glow-success: 0 0 8px #00ff9d;\n  --glow-error: 0 0 8px #ff2e63;\n  \u002F* shape & depth *\u002F\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;\n  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);\n  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);\n  \u002F* motion & space *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* elevation *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* type *\u002F\n  --font-base: 'Sora', sans-serif;\n  --font-mono: 'JetBrains Mono', monospace;\n}\n```\n\n- **Contrast pairing (mandatory):** dark backgrounds (`--bg-primary`, `--bg-secondary`) pair only with light text (`--text-primary`, `--text-secondary`); neon-filled surfaces (solid\u002Fgradient `#00c4fa` or `#00ff9d`) must use `#080a12` as their text color — never white-on-neon. `--secondary` (#bd00ff) is reserved for borders, glows, gradients, and large display type — never small body text.\n- No hardcoded hex values outside `:root`. Every color, glow, radius, shadow, and transition resolves through a variable.\n- The `#fefefe`-over-`#ffffff` light-background rule is N\u002FA — see the exception in 1.3.\n\n**1.3 Mandatory Dark Mode Support (Dark-Native Theme)**\n- Dark mode is the default and only theme. Define the full token set in `:root` and mirror it under a `.dark` class and `@media (prefers-color-scheme: dark)` so the architecture remains theme-switch-ready without any HTML restructuring.\n- `script.js` must apply `.dark` to `\u003Chtml>` on load and persist the theme key (e.g., `flow-theme`) in `localStorage`, falling back to `prefers-color-scheme`, preserving the persistence architecture.\n- **Exception (per theme spec — Light: ✗ No \u002F Dark: ✓ Full):** this is a dark-only deliverable — do not define a light palette and omit the visible light\u002Fdark toggle; the dark token set above is the single mandatory theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox (Tailwind flex utilities or `.flex` classes). Every flex container defaults to `align-items: center` unless a CSS comment justifies an exception.\n- Mobile-first: single-column stacks on small viewports; multi-column rows (Features, Pricing, Testimonials, Footer) collapse to columns at their breakpoints. Zero horizontal scrolling at any width ≥ 320px.\n- Wrap all sections in a centered container with a max width (e.g., `72rem`) and vertical rhythm built from `--spacing-gap` multiples.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS via the Play CDN (`https:\u002F\u002Fcdn.tailwindcss.com`) for structural utilities only: flex, gaps, padding, responsive prefixes. No inline `tailwind.config` script.\n- All colors, fonts, glows, radii, shadows, and transitions come from `style.css` — via reusable component classes (`.btn`, `.card`, `.input-group`, `.pricing-card`, `.step`, `.faq-item`) or `var()` arbitrary utilities. Utilities compose with component classes; they never replace them.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Text:** Google Fonts — `Sora` (400\u002F600\u002F700\u002F800) bound to `--font-base`; `JetBrains Mono` (400\u002F600) bound to `--font-mono` for eyebrow labels, stats, prices, and step numerals. Include via `\u003Clink>` tags.\n- **Icons:** Google Material Symbols (Rounded) loaded from Google Fonts. Raw inline SVGs, local icon files, and emoji-as-icons are **forbidden**.\n- Fluid type via `clamp()`; body text ≥ 16px with line-height ≥ 1.5; exactly one `\u003Ch1>` (Hero), logical h2 → h3 order per section.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-sm`, Sora 600. `.btn--primary`: neon-blue fill with `#080a12` text + `--glow-primary`. `.btn--ghost`: transparent background, `--border-default`, `--primary` text.\n- **Hover:** glow intensifies (`--glow-primary-strong`), slight brightness lift, `cursor: pointer`.\n- **Focus:** visible ring via `:focus-visible` — `outline: 2px solid var(--primary); outline-offset: 2px;` plus glow.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** pointer-events disabled, double-clicks prevented, CSS spinner (border animation) or pulsing Material Symbol; button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states styled with `--text-success`\u002F`--text-error` (+ matching glow), announced through an `aria-live` region.\n\n**2.2 Card Component Requirements** (`.card`)\n- **Default:** flexbox layout, `--bg-secondary` surface with a subtle matte top highlight (`rgba(255,255,255,0.03)` inset — no glossy fills), 1px `--border-default`, `--radius-md`, `--shadow-sm`.\n- **Hover (interactive cards):** border brightens toward `--primary`, glow to `--glow-primary`, `transform: translateY(-2px)`.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** shimmer sweep animation (animated gradient) with fixed dimensions — no layout shift.\n- **Empty state:** centered flex column with a Material Symbol and clear guidance text.\n\n**2.3 Form & Input Requirements** (`.input-group`)\n- **States:** empty, focused (neon ring: `box-shadow: 0 0 0 3px rgba(0,196,250,0.35)`; border shifts to `--primary`), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error text, `error` icon), disabled, read-only.\n- **Structure:** flex-column wrapper containing `\u003Clabel>`, `\u003Cinput>`, and a dedicated error `\u003Cp>` wired via `aria-describedby` inside an `aria-live=\"polite\"` region. Errors are never communicated by color alone.\n- **Used by:** the Final CTA email capture and the signup modal form.\n\n**2.4 Modal \u002F Popup Requirements** (`.modal`)\n- **Trigger:** the Hero \"Get Started\" CTA and every Pricing tier CTA open a \"Join the Flow\" signup modal (name + email + submit).\n- **States:** opening (fade + scale-in via CSS transition), open, loading (submit spinner), success (check icon + confirmation), error (inline error message), closing (reverse transition).\n- **UX:** centered flex overlay (`align-items: center`), backdrop `rgba(8,10,18,0.8)` with blur, Material Symbol close button (`aria-label=\"Close\"`), keyboard focus trap, `Esc` closes, overlay click closes, focus returns to the trigger, z-index `--z-modal`.\n\n**2.5 Page Section & Content Requirements**\n- **Header (sticky chrome):** fixed, `rgba(8,10,18,0.7)` + backdrop blur, bottom border `--border-default`. Text logo + Material Symbol (e.g., `hub`), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), CTA button. Mobile: Material Symbol `menu` toggles a flex-column dropdown panel (`--z-dropdown`, `aria-expanded`, keyboard operable).\n- **Hero:** `min-height: 90vh`, centered flex column. Mono eyebrow (e.g., `\u002F\u002F REAL-TIME DATA FLOW`), `\u003Ch1>` with one keyword in a `#00c4fa → #bd00ff` gradient text-clip + glow, subheadline in `--text-secondary`, primary CTA (opens modal) + ghost CTA (scrolls to Features), stats row (3 items, mono numerals: e.g., 99.99% uptime · sub-8ms latency · 12,000+ teams). Background: faint circuit grid via layered CSS gradients only, e.g. `repeating-linear-gradient(0deg, rgba(0,196,250,0.05) 0 1px, transparent 1px 48px)` plus the 90deg variant and radial node dots, plus one self-emitting neon stroke accent (animated glowing line).\n- **Features (3 cards):** reusable section header pattern (mono eyebrow + h2 + support line). Three `.card`s, flex row → column on mobile; each has a neon-ringed Material Symbol chip (rotate blue\u002Fgreen\u002Fpurple: e.g., `bolt`, `shield`, `insights`), h3, description, \"Learn more\" link. Hover: glow + lift.\n- **How It Works (3 steps):** three `.step` blocks, flex row → column; each with mono numeral chip (01\u002F02\u002F03), Material Symbol, h3, text. Connect the steps with a glowing circuit-trace line (CSS pseudo-element gradient with a traveling pulse animation). Copy angle: connect sources → route & transform → monitor & optimize.\n- **Testimonials:** three quote `.card`s, flex row → column; quote text, star rating via Material Symbol `star`, avatar as initials inside a neon-gradient ring (no external images), name + role. Hover: subtle glow.\n- **Pricing (3 tiers):** three `.pricing-card`s, flex row → column. Tiers: **Initiate** ($0), **Flow Pro** ($29\u002Fmo — featured), **Enterprise** (Custom). Featured card: \"Most Popular\" badge, `--glow-primary-strong`, slight elevation. Each card: tier name, large mono price, billing note, feature list with green `check_circle` icons, CTA (featured = `.btn--primary`, others = `.btn--ghost`; all open the modal).\n- **FAQ:** 5–6 accessible accordion items — `\u003Cbutton aria-expanded=\"false\">` + panel, CSS-animated expansion, rotating `expand_more` chevron, keyboard operable. Topics: what Flow does, security\u002Fencryption, latency, integrations, free-tier limits, cancellation.\n- **Final CTA:** large glowing `.card--cta` panel, centered flex column: h2, support line, inline email capture (`.input-group` + `.btn--primary`, flex row → column on mobile) with full validation states; on success show a toast (top-right, `--z-toast`, `aria-live=\"polite\"`, auto-dismiss, Material Symbol close button).\n- **Footer with secondary links:** top border `--border-default`; brand blurb + 3–4 link columns (Product, Company, Resources, Legal), social row using Material Symbols (e.g., `mail`, `forum`, `code`, `public`) with `aria-label`s, bottom bar with © line and small legal links. Link hover: neon text + underline glow; visible focus rings.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints ≈ 640\u002F768\u002F1024px, no horizontal overflow from 320px up.\n- **Smooth animations:** every state change transitions with `var(--transition-fast)`\u002F`var(--transition-normal)` and `--ease-standard`. Add scroll-reveal (IntersectionObserver adds `.is-visible`; staggered translateY + opacity) and the circuit pulse animations. **All motion must be disabled under `prefers-reduced-motion`** (near-zero durations), and content must remain fully visible when JavaScript is unavailable (progressive enhancement — never hide content by default).\n- **Accessibility (a11y):** WCAG AA contrast throughout the dark theme; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on the mobile menu, accordion, modal, and toasts; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading, and toasts; a skip-to-content link.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** any `.btn-danger`\u002Fdelete control must be visually distinct in the dark theme (`--text-error`\u002F`--border-error` + `--glow-error`) and never confused with primary actions.\n- **Polish:** `::selection` in `--primary` with `#080a12` text; custom dark scrollbar; smooth anchor scrolling guarded by the reduced-motion media query.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. `index.html` references only the Google Fonts links, the Tailwind Play CDN, `style.css`, and one deferred `script.js`. No inline `\u003Cscript>` code, no `\u003Cstyle>` blocks, no `style=\"...\"` attributes.\n- **Naming convention:** BEM for every custom class (`.btn`, `.btn--primary`, `.card`, `.card--featured`, `.pricing-card__price`, `.input-group__error`); Tailwind utilities for layout only. One convention across the entire deliverable — never mix.\n- **Copy & assets:** all user-facing copy in English, real and on-theme (no lorem ipsum, no placeholder images); avatars are CSS initials; all visuals are CSS gradients, glows, or Material Symbols — no external image files.\n- **`script.js` scope:** theme bootstrap + localStorage persistence (`.dark`), mobile menu, accordion, modal (open\u002Fclose\u002Ffocus trap\u002FEsc), form validation + loading\u002Fsuccess\u002Ferror states, toast, IntersectionObserver reveals, smooth scrolling. No JS libraries beyond the Tailwind CDN.\n- **Final output:** complete, runnable code for all three files in this single response — first attempt, every state above implemented, no placeholders, no follow-up questions.\n",1791954981776]