[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-334-Neon-Cyber":3},"**ROLE & OBJECTIVE**\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality **\"Neon Cyber\"** landing page on the first attempt. Theme: futuristic, techy, confident, neon — Era 2024–2026 Cyber Future. Required sections: Sticky Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. Write all user-facing copy in **English** with a confident, tech-forward tone: invent one cohesive fictional tech product identity and keep the brand name, headlines, feature copy, testimonials, pricing tiers, and FAQ answers consistent with it. No lorem ipsum.\n\n---\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 is **forbidden anywhere in the HTML** — including particle positioning, which must be varied via `nth-child` selectors or modifier classes in CSS.\n* All design properties, layout rules, and states are targeted via class\u002FID selectors only. HTML stays semantic and style-agnostic so a reskin requires editing `style.css` only.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (with `color-scheme: dark`):\n* **Colors:** `--primary: #00ffcc` (Cyan Accent), `--secondary: #ff00aa` (Magenta), `--bg-primary: #0a0f1c` (Deep Navy), `--bg-secondary: #0d1a3a` (Dark Blue), `--text-primary: #ffffff`, `--text-secondary: #9aa7c7` (muted cool slate, ≥4.5:1 on both backgrounds), `--text-success: #00ffcc`, `--text-error: #ff4d6d`, `--border-default: rgba(0,255,204,0.15)`, `--border-success: #00ffcc`, `--border-error: #ff4d6d`. Extended accents: `--accent-purple: #8b00ff`, `--accent-blue: #0066ff`.\n* **Contrast pairing:** dark surfaces pair with light text only. The only light fills permitted (e.g., the cyan primary button) must pair with `--bg-primary` text (`#0a0f1c` on `#00ffcc`). Magenta (`#ff00aa`, ≈5.3:1 on deep navy) is reserved for accents, badges, and large display text — never small body copy.\n* **Radius\u002FShadows:** `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md` (neon-tinted).\n* **Spacing\u002FTransitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 200ms` (spec-mandated), `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`. The sticky header and mobile nav must use `--z-dropdown`.\n* **Fonts:** `--font-display: 'Clash Display'`, `--font-base: 'Satoshi'`.\n\n**1.3 Mandatory Dark Mode — Dark-Only Exception**\nDark mode is mandatory and natively satisfied: this theme ships **dark-only** (Light: ✗ No \u002F Dark: ✓ Full). Define the full dark palette as the default and only theme in `:root` with `color-scheme: dark`. **Exception:** per the explicit theme specification, no light-mode variant, no theme toggle, and no `localStorage` persistence logic are required for this build.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., stretched card columns).\n* Mobile-first: multi-column rows (features, steps, pricing, footer columns) collapse to a single column below ~768px via `flex-wrap`\u002F`flex-basis`. No horizontal scrolling at any viewport; apply `overflow: hidden` to particle\u002Fglow containers.\n\n**1.5 Framework Default — Tailwind CSS**\nUse Tailwind CSS (Play CDN acceptable) for layout utilities only (flex, gap, padding, responsive variants). Every visual decision lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.neon-text`, `.neon-box`, `.grid-bg`, `.particle`) bound to CSS variables — utilities must never hardcode hex values.\n\n**1.6 Typography & Icons**\n* **Text:** Clash Display (headings) and Satoshi (body) are explicitly mandated by the theme spec — load both via the Fontshare CDN as the **sole permitted exception** to the Google Fonts rule, with generic sans-serif fallbacks. Any additional or fallback text face must come from Google Fonts.\n* **Icons:** Google Material Symbols (Rounded) exclusively, loaded via the Google Fonts CDN with ligature markup. Raw inline SVGs, emoji icons, and local icon files are **forbidden**.\n\n**1.7 Canonical Neon Effect Recipes (implement exactly, colors bound to variables)**\n* `.neon-text { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary); }` plus a `.neon-text--magenta` variant using `var(--secondary)`.\n* `.neon-box { box-shadow: 0 0 15px rgba(0,255,204,0.3), inset 0 0 15px rgba(0,255,204,0.1); }`\n* `.grid-bg { background-image: linear-gradient(rgba(0,255,204,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,204,0.05) 1px, transparent 1px); background-size: 40px 40px; }`\n* `.particle { position: absolute; width: 2px; height: 2px; background: var(--primary); border-radius: 50%; animation: float 6s infinite; }` — particles are **CSS-only**; no canvas, no JS particle libraries.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — all states via CSS classes; flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`); minimum 44×44px touch target:\n* `.btn--primary`: cyan fill, deep-navy text, `--glow-cyan-soft`; hover brightens the glow; `:focus-visible` shows a distinct 2px offset outline ring (magenta or white); `:active` applies `transform: scale(0.97)`.\n* `.btn--ghost`: transparent, 1px cyan border, cyan text; hover fills with neon glow.\n* `.btn--danger`: `#ff4d6d` treatment, visually distinct from brand magenta.\n* `.btn--loading`: CSS border-ring spinner in cyan that does not change button dimensions; disables pointer events to prevent double-clicks.\n* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* Success\u002FError: temporary feedback classes driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component Requirements** (`.card` — features, testimonials, pricing):\n* Default: `--bg-secondary` surface, 1px `--border-default`, `--radius-lg`, subtle inner glow.\n* Hover: `transform: translateY(-2px)` plus intensified neon border\u002Fglow.\n* `:focus-within`: border highlights when a child link\u002Fbutton receives focus.\n* Define `.card--skeleton` (shimmer animation, stable dimensions) and `.card--empty` (Material icon + guidance text) so the states exist even if unused.\n\n**2.3 Form & Input Requirements** (Final CTA email capture):\n* `.input-group` flex container wrapping a `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error `\u003Cp>` wired to `aria-live=\"polite\"`.\n* States: empty, focused (cyan ring glow), filled, valid (cyan border + check icon), invalid (`--border-error`, red text, error icon), disabled, read-only.\n\n**2.4 FAQ Accordion Requirements:**\n* `\u003Cdetails>\u002F\u003Csummary>` or button + region with `aria-expanded`\u002F`aria-controls`; fully keyboard operable; smooth 200ms expand animation; rotating chevron Material icon; neon `:focus-visible` ring; state never communicated by color alone.\n\n**2.5 Modal \u002F Popup Requirements (apply only if a dialog is implemented):**\n* Opening\u002FOpen\u002FClosing states animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material icon close button; keyboard focus trapping; closes via `Esc` or overlay click; layered at `--z-modal`.\n\n**2.6 Section-by-Section Build Specification:**\n* **Sticky Nav:** deep-navy translucent bar with backdrop blur, logo in Clash Display (glow on hover), anchor links, `.btn--primary` CTA, accessible hamburger (Material `menu`) disclosure for mobile at `--z-dropdown`.\n* **Hero:** `min-height: ~90vh`; layered CSS backgrounds — `.grid-bg` + 12–18 `.particle` dots (2px, cyan\u002Fmagenta mix, varied position\u002Fdelay\u002Fduration via `nth-child` only) + radial cyan\u002Fmagenta glow orbs via pseudo-elements. H1 in Clash Display with `.neon-text` glow on the key word and a magenta-glow accent word; subhead in `--text-secondary`; dual CTAs (`.btn--primary` + `.btn--ghost`).\n* **Features:** section header (cyan uppercase eyebrow, H2, subtitle) + 3 `.card` items (flex row → column on mobile), each with a Material icon in a neon-ringed circle (alternating cyan\u002Fmagenta), H3, copy, and a \"Learn more\" link. Hover per 2.2.\n* **How It Works:** 3 steps with oversized neon-glow numerals (01\u002F02\u002F03, Clash Display), connected by a cyan→magenta gradient line (horizontal on desktop, vertical on mobile), each with icon, title, description.\n* **Testimonials:** 3 `.card` quotes with Material `format_quote` icon, star ratings (Material `star`, cyan), avatar as initials in a circle with a cyan→magenta gradient ring, name plus role in `--text-secondary`.\n* **Pricing:** 3 `.card--pricing` tiers; middle tier `.card--featured`: elevated, stronger magenta glow, \"Most Popular\" badge (magenta pill with glow). Each tier: name, large Clash Display price, feature list with cyan Material `check` icons, CTA (featured: `.btn--primary`; others: `.btn--ghost`).\n* **FAQ:** centered `max-width: ~48rem`, 5–6 items per 2.4.\n* **Final CTA:** full-width band with `.grid-bg` + radial glow, H2 with `.neon-text`, supporting copy, `.input-group` email capture + `.btn--primary` wired in `script.js`: submit → loading spinner (~1s) → success state + `aria-live` announcement; invalid email → error state per 2.3.\n* **Footer:** flex columns (brand + tagline; 2–3 secondary link groups; icon links with `aria-label`s), cyan→magenta gradient top hairline, bottom bar with copyright + Privacy\u002FTerms links.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth animations:** every state transition uses 200ms with `--ease-standard`. Ambient loops only — `@keyframes float` (particle drift + opacity), `pulse` (neon glow intensity), `shimmer` (skeleton). Under `prefers-reduced-motion: reduce`, disable float\u002Fpulse\u002Fshimmer and minimize transitions.\n* **Accessibility (a11y):** WCAG AA contrast throughout (cyan ≈14.7:1, white ≈18:1, magenta ≈5.3:1 — magenta for accents\u002Flarge text only); never rely on color alone (glow + icon + text); semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`); logical `h1→h3` hierarchy; skip-to-content link; full keyboard operability; visible `:focus-visible` rings on every interactive element; correct ARIA on the accordion and mobile nav; `aria-live` regions for all dynamic form feedback.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct from brand magenta in this dark theme.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and runnable. The HTML contains zero inline styles and exactly one deferred entry point (`\u003Cscript src=\"script.js\" defer>`); no other inline `\u003Cscript>` blocks. `script.js` handles only: mobile nav disclosure, FAQ accordion enhancement (if not native `\u003Cdetails>`), and the CTA form's loading\u002Fsuccess\u002Ferror simulation — all via `addEventListener`, no inline handlers, no JS for particles.\n* **Naming convention:** BEM for all custom classes (`.hero__title`, `.card--featured`, `.btn--primary`); Tailwind utilities permitted only for layout primitives; never mix in ad-hoc one-off class names.\n* **Copy:** original English copy in a confident, techy voice with one consistent fictional product identity; no lorem ipsum and no unrequested placeholder content.\n",1791954985179]