[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-470-Silicon-Dreams":3},"# System Prompt: Build \"Silicon Dreams\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. The theme is **Silicon Dreams** — dark glossy tech futurism (2005–2012 era, Frutiger Metro \u002F corporate keynote aesthetic) with circuitry grids, electric-blue glow, glass sheen, and HUD hints.\n\n**Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. Architecture Rules (Mandatory)\n\n**1.1 CSS-First & Zero Inline CSS**\n- All styling lives in `style.css`. **No `style=\"...\"` attributes in HTML.**\n- Target everything via class\u002FID selectors only. HTML stays semantic and style-agnostic.\n- No inline `\u003Cscript>` blocks beyond one deferred `\u003Cscript src=\"script.js\" defer>` entry point.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` exactly as specified:\n\n```css\n--color-bg: #050b14; --color-surface: #0d1b2a; --color-surface-strong: #132840;\n--color-border: #234a6b; --color-text: #eaf4ff; --color-text-muted: #8fb3d1;\n--color-primary: #2fb8ff; --color-accent: #6ee7ff; --color-glow: rgba(47,184,255,0.55);\n--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;\n--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);\n--shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px var(--color-glow);\n--shadow-lg: 0 18px 44px rgba(0,0,0,0.55), 0 0 32px var(--color-glow);\n--font-sans: 'Frutiger', 'Segoe UI', system-ui, sans-serif;\n--font-display: 'Frutiger', 'Eurostile', 'Segoe UI', sans-serif;\n--font-mono: 'Consolas', ui-monospace, monospace;\n--text-xs … --text-5xl; --space-1 … --space-24;\n--ease-standard: cubic-bezier(0.2, 0, 0, 1);\n--circuit-grid: (faint blue grid, 24px cells, rgba(47,184,255,0.06));\n--glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);\n--z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n--transition-fast: 150ms; --transition-normal: 250ms;\n```\n\n**Signature moves (repeat throughout):** the faint `--circuit-grid` on the page background paired with an electric-blue outer glow (`--shadow-md`\u002F`--shadow-lg`) on raised surfaces (nav, cards, primary buttons, input focus), plus `--glass-sheen` overlays on glossy panels.\n\n**1.3 Mandatory Light + Dark Mode**\n- The source spec's default palette is dark. **You must also define a light mode** with a background that fits the theme's mood (never pure white; use `#fefefe` or a cool near-white like `#eef4fa` if appropriate), pairing light backgrounds with dark text and dark backgrounds with light text.\n- Implement via `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`.\n- Provide a visible theme toggle button in the nav with correct `aria-pressed` and `aria-label` (\"Switch to light mode\" \u002F \"Switch to dark mode\").\n- Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit.\n- Validate contrast in **both** modes before finishing.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless a section explicitly justifies otherwise (e.g., feature card body copy top-aligned).\n- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width; fluid type via `clamp()` where useful.\n\n**1.5 Framework**\n- Use Tailwind CSS via CDN **or** clean custom CSS driven by `@layer`\u002F`@apply` — pick one and stay consistent. All utilities must map back to the CSS variables above and reusable generic classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: Google Fonts `\u003Clink>` (e.g., **Inter** or **Chakra Petch** for the display face to evoke Eurostile\u002FFrutiger futurism) bound to `--font-sans`\u002F`--font-display`. Keep the fallback stacks from the token spec.\n- Icons: **Google Material Symbols** only. Explicitly forbidden: raw inline SVGs, local icon files, emoji icons.\n- All user-facing copy in **English**.\n\n---\n\n## 2. Component Specifications\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--ghost`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; glossy `--glass-sheen` over `--color-surface-strong`; border `--color-border`.\n- `.btn--primary`: gradient `linear-gradient(180deg, #3fc4ff, #1782c4)`, dark text `#041220`, `--shadow-md` blue glow.\n- Hover: `--shadow-md` glow lift + `translateY(-1px)`, `cursor: pointer`.\n- Focus-visible: `outline: 2px solid var(--color-accent); outline-offset: 2px;`\n- Active: `transform: scale(0.97)`.\n- Loading: `.btn--loading` disables pointer events, shows an animated Material Symbols spinner icon (CSS rotation), preserves button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transform.\n- Success\u002FError feedback states using `--text-success`\u002F`--text-error` tokens (define them).\n\n**2.2 Cards (`.card`)**\n- Default: `--color-surface` + `--glass-sheen`, `--radius-lg`, `1px solid --color-border`, `--shadow-md` glow, `--space-6` padding.\n- Hover (interactive cards): `--shadow-lg` + `translateY(-2px)`.\n- Focus-within: border highlights `--color-accent` when a child link\u002Fbutton is focused.\n- Skeleton: shimmer animation class for loading states.\n- Empty state pattern: Material Symbol icon + guidance text.\n\n**2.3 Forms & Inputs (`.input`)**\n- States: empty, focused (blue glow ring via `--shadow-md` + `--color-primary` border), filled, valid (success border + check icon), invalid (error border, error text, error icon), disabled, read-only.\n- Structure: flex `.input-group` wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**2.4 FAQ Accordion \u002F Modal-like patterns**\n- FAQ uses `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant buttons with `aria-expanded`; animated open\u002Fclose via CSS transitions; keyboard operable.\n- Any modal\u002Fpopup (e.g., newsletter success): centered flex overlay, backdrop, Material Symbols close button, focus trapping, `Esc` and overlay-click closing, opening\u002Fclosing transitions, `--z-modal` stacking.\n\n---\n\n## 3. Global UX & Micro-Interactions\n\n- **Responsive by default** — fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; respect `prefers-reduced-motion: reduce` (disable transforms\u002Ftransitions).\n- **Accessibility:** WCAG-sufficient contrast in **both light and dark modes**; never rely on color alone (pair error red with icons\u002Ftext); semantic HTML5 (`\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`); logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n- **Mandatory visual feedback:** every click\u002Fhover\u002Fsubmit triggers a visible state change.\n- **Destructive\u002Fdanger actions:** `.btn-danger` visually distinct in both themes.\n- **HUD hints:** use `--font-mono` for small uppercase labels\u002Fbadges (e.g., \"SYS.01 \u002F\u002F FEATURES\") to reinforce the HUD\u002Fcircuitry aesthetic; decorative glow text on hero headline via `text-shadow: 0 0 24px var(--color-glow)`.\n\n---\n\n## 4. Deliverables & Output Format\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate files, one deferred script entry point.\n- **Naming:** one consistent convention (BEM: `.btn--primary`, `.card__title`, `.faq__item`) across the entire deliverable. Never mix conventions.\n- **Content:** write realistic, on-theme English marketing copy for a fictional tech product (e.g., a next-gen compute\u002Fcloud platform). No lorem ipsum — invent plausible copy matching the Silicon Dreams corporate-futurist tone.\n- **Section coverage:** Hero (headline, subcopy, primary + secondary CTA, HUD-style decorative elements), Features (3 cards with Material Symbols icons), How It Works (3 numbered steps), Testimonials (3 quotes with avatars-as-initials), Pricing (3 tiers, middle tier highlighted as \"recommended\"), FAQ (5–6 items), Final CTA band, Footer with secondary links + legal + social icon links.\n- **No unrequested placeholders** beyond what is genuinely unspecified.\n\nBuild the complete landing page now, on the first attempt, following every rule above.\n",1791954987697]