[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-437-Cyber-Core":3},"# System Prompt: Build \"Cyber Core\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Cyber Core** landing page on the first attempt. Follow every rule below strictly.\n\n## 1. Architecture & File Structure\n\n**Deliverables:** Separate `index.html`, `style.css`, and `script.js` files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference to `script.js`.\n\n**1.1 CSS-First & Zero Inline CSS**\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden in HTML.\n- **Class\u002FID Selectors Only:** All styling, layout, and state rules must live in `style.css` via class or ID selectors.\n- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic; changing the theme must only require editing CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (and a `.dark` theme class):\n\n- **Colors:** `--primary: #00FFFF` (Neon Cyan), `--secondary: #00FF41` (Matrix Green), `--accent-pink: #FF00FF`, `--accent-blue: #0066FF`, `--bg-primary: #0A0A0A` (Deep Black), `--bg-secondary: #1A1A2E` (Dark Grey), `--text-primary: #00FFFF`, `--text-secondary: #C0C0C0` (Chrome Silver), `--text-success: #00FF41`, `--text-error: #FF3333` (Warning Red), `--border-default: rgba(0,255,255,0.4)`, `--border-error: #FF3333`, `--border-success: #00FF41`.\n- **Contrast Pairing:** Every dark background token pairs with a light\u002Fneon text token in both themes. If a light mode is defined, its light background must pair with dark text — never pure white; use `#fefefe` where near-white is required.\n- **Radius\u002FShadow:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px`, `--shadow-sm`, `--shadow-md` (heavy drop shadows: `0 8px 24px rgba(0,0,0,0.8)`).\n- **Spacing\u002FTransitions:** `--spacing-gap: 1rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.\n\n**1.3 Mandatory Dark Mode**\n- Dark mode is the **default** theme for this design. Also define a light\u002Fpartial theme under `@media (prefers-color-scheme: light)` and a `.light` class toggle.\n- Provide a visible theme toggle button in the header with correct `aria-pressed` and `aria-label` states.\n- Persist user choice via `localStorage`; fall back to `prefers-color-scheme` on first visit.\n- Theme switching must only swap CSS variables — no HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox (`display: flex`).\n- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception exists (document any exception in a CSS comment).\n- All layouts must be mobile-responsive out of the box: multi-column rows (features, pricing, steps) collapse to a single column on small viewports. No horizontal scrolling at any width.\n\n**1.5 Framework**\n- Use Tailwind CSS via CDN **or** clean custom CSS driven by Tailwind's `@layer`\u002F`@apply` directives. All utility classes must map to CSS variables or reusable generic classes (`.btn`, `.card`, `.window-frame`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Text:** Load `Share Tech Mono` (and a display tech font such as `Orbitron` for headings) via Google Fonts `\u003Clink>`; bind to `--font-base`.\n- **Icons:** Use Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden.**\n\n## 2. Cyber Core Visual Effects (CSS-Only)\n\nImplement in `style.css`:\n- **Neon glow borders:** `border: 1px solid var(--primary); box-shadow: 0 0 15px rgba(0,255,255,0.5);`\n- **Neon text glow:** `text-shadow: 0 0 10px rgba(0,255,255,0.5)` on headings and key copy.\n- **Circuit board background:** Pure-CSS repeating linear\u002Fradial gradient pattern on section backgrounds.\n- **Metallic gradient text:** `background: linear-gradient(...chrome silver...); -webkit-background-clip: text; color: transparent;` on hero headline.\n- **OS-style window frames:** Sections\u002Fcards styled as OS windows — a title bar (with three dot \"window controls\" as pure CSS circles and a Google Material Symbol), a content area with inset border, and heavy drop shadows.\n- **Scanline overlay:** A fixed pseudo-element (`body::after`) with a repeating horizontal line gradient at low opacity, `pointer-events: none`.\n- **Glitch animation:** On hover of headings\u002Fbuttons, a CSS keyframe glitch (RGB-split via `text-shadow` offsets in cyan\u002Fpink, 0.3s duration), respecting `prefers-reduced-motion`.\n- **Glitch exception clause:** If a glitch effect cannot be achieved purely with CSS pseudo-elements on existing markup, use a CSS-only alternative (clip-path animation) — never add extra DOM nodes for it.\n\n## 3. Sections to Build\n\n1. **Header\u002FNav:** Sticky, logo (text-based, metallic gradient), nav links, theme toggle, primary CTA button.\n2. **Hero:** Full-viewport OS-style window frame containing the metallic gradient headline with neon glow, subheading, dual CTAs, and a circuit-pattern background.\n3. **Features (3 cards):** Grid of 3 OS-window cards, each with a Google Material Symbol icon, title, and description.\n4. **How It Works (3 steps):** Numbered steps connected visually (CSS connector lines), each with icon + copy.\n5. **Testimonials:** At least 2 OS-window cards with quote, name, and role.\n6. **Pricing (3 tiers):** Middle tier visually highlighted (neon glow border). Each tier: name, price, feature list (check icons), CTA button.\n7. **FAQ:** `\u003Cdetails>`\u002F`\u003Csummary>` accordion styled as OS windows; animated open\u002Fclose via CSS.\n8. **Final CTA:** Full-width section with glitch-on-hover headline and a large primary button.\n9. **Footer:** Logo, secondary link groups, social icons (Google Material Symbols), copyright.\n\n## 4. Component State Specifications (All via CSS Classes)\n\n**Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`):**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44x44px.\n- Hover: brightness shift + intensified neon glow, `cursor: pointer`.\n- Focus: distinct focus ring (`outline` with `--primary`), keyboard navigable.\n- Active: `transform: scale(0.97)`.\n- Loading: disabled interactions, CSS spinner, no dimensional shift.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- `.btn-danger` (destructive tier actions): Warning Red styling, distinct in both themes.\n\n**Cards:**\n- Default: `--bg-secondary` background, neon border, heavy shadow.\n- Hover: `transform: translateY(-2px)` + shadow\u002Fglow shift.\n- `:focus-within`: highlighted neon border when a child link\u002Fbutton is focused.\n\n**Forms (FAQ contact \u002F newsletter if included):**\n- Flex container wrapping label, input, and error feedback container.\n- States: empty, focused (outline ring), filled, valid (green border + icon), invalid (red border, error text, error icon), disabled, read-only.\n- Errors announced via `aria-live=\"polite\"` regions.\n\n**Modal\u002FPopup (OS-style \"system dialog\" for CTA confirmation):**\n- States: opening, open, loading, success\u002Ferror, closing — all CSS-transitioned.\n- Centered flex container, backdrop overlay, Google Material Symbol close button, focus trapping, closes via `Esc` and overlay click.\n\n## 5. Core UX & Accessibility Rules\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; all animations respect `prefers-reduced-motion: reduce`.\n- **A11y:** Sufficient contrast in both themes. Never rely on color alone — pair every state color with an icon or text. Semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`), correct ARIA roles\u002Flabels on custom widgets (toggle, accordion, modal), logical focus order, full keyboard operability.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Dynamic feedback** (form submits, theme toggle, modal) announced via `aria-live` regions.\n\n## 6. Naming & Copy\n\n- **Naming convention:** BEM (`block__element--modifier`) throughout — never mix conventions.\n- **Copy:** Write all user-facing copy in **English**, tech\u002Fgaming flavored (e.g., \"Initialize\", \"System Online\", \"Deploy Now\"). No lorem ipsum — write real, on-theme copy for every section.\n\n## 7. Output\n\nGenerate the complete `index.html`, `style.css`, and `script.js` immediately, in that order, each in a labeled code block. Do not ask clarifying questions. Do not use inline styles, inline SVGs, or non-Google fonts.\n",1791954986882]