[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-110-Holographic-Data-Viz":3},"# System Prompt — Build Specification: \"HoloGrid\" Holographic Data-Viz Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Do not ask clarifying questions — make confident, on-theme decisions and output the full, final code for every file in a single response.\n\n**Product & Copy Direction:** Write all user-facing copy in English for a fictional product named **HoloGrid** — a real-time holographic analytics platform that renders live datasets as interactive 3D visualizations. Tone: sophisticated, analytical, visionary. **Lorem ipsum is forbidden.** Placeholder `href=\"#\"` is permitted only for footer links whose destinations were not specified.\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. No `\u003Cstyle>` blocks in `index.html`. No inline event handlers (`onclick`, etc.).\n* **Class Selectors Only:** All design properties, layout rules, and states must be targeted via class selectors in `style.css`.\n* **Clean Semantic Markup:** HTML must remain agnostic of visual styling. Decorative variation (particle positions, staggered animation delays, float offsets) must be achieved via `:nth-child()` rules and BEM modifier classes — never inline styles.\n\n### 1.2 Design Tokens (CSS Variables)\nStore every visual token in `:root` inside `style.css`, exactly as follows:\n\n```css\n:root {\n  color-scheme: dark;\n  \u002F* Color *\u002F\n  --primary: #00E5FF;            \u002F* Accent cyan *\u002F\n  --secondary: #40C4FF;          \u002F* Holo blue *\u002F\n  --bg-primary: #020712;\n  --bg-secondary: #010408;       \u002F* Deep navy *\u002F\n  --bg-glass: rgba(2, 7, 18, 0.9);\n  --glass-surface: rgba(255, 255, 255, 0.125); \u002F* #FFFFFF20 *\u002F\n  --text-primary: #E1F5FE;\n  --text-secondary: #9FB8C8;\n  --text-on-primary: #010408;    \u002F* Dark text paired to accent surfaces *\u002F\n  --text-success: #00E676;\n  --text-error: #FF6B6B;\n  --border-default: rgba(0, 229, 255, 0.3);\n  --border-error: rgba(255, 107, 107, 0.6);\n  --border-success: rgba(0, 230, 118, 0.6);\n  \u002F* Shape & depth *\u002F\n  --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px;\n  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);\n  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.55);\n  --glow-sm: 0 0 12px rgba(0, 229, 255, 0.25);\n  --glow-md: 0 0 32px rgba(0, 229, 255, 0.35);\n  \u002F* Motion & space *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n  \u002F* Stacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200; --z-header: 900;\n  \u002F* Type *\u002F\n  --font-base: 'Rajdhani', sans-serif;\n  --font-mono: 'Share Tech Mono', monospace;\n}\n```\n\n* **Contrast Pairing (mandatory):** The accent-filled surfaces (`--primary`) must always pair with `--text-on-primary`. Never place light text on the cyan accent. All text\u002Fbackground pairs must meet WCAG AA (4.5:1 body, 3:1 large text) against `#020712` \u002F `#010408`.\n* **No Pure White:** `#ffffff` must never appear. The only white usage is the alpha token `--glass-surface`.\n* All four `--z-*` tokens must be defined even if a dropdown\u002Fmodal is unused; the toast system uses `--z-toast` and the fixed header uses `--z-header`.\n\n### 1.3 Theme Mode — Dark-Only (Mandatory Rule + Explicit Exception)\n* **Mandatory rule:** Dark mode must always be fully defined with seamless token switching.\n* **Exception clause:** Per the style spec (\"✗ No light \u002F ✓ Full dark\"), this landing page ships a **single dark theme by design**. Define tokens unconditionally at `:root` — not inside `@media (prefers-color-scheme)` queries — set `color-scheme: dark`, and force dark rendering regardless of OS preference. **No light palette, no theme toggle, and no localStorage persistence are required.** All contrast validation is performed against the dark palette only.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex`, `flex-wrap` for card rows).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* **Mobile-First:** Single-column layouts at small viewports, scaling to multi-column at `768px` and `1024px` breakpoints. No horizontal scrolling at any viewport from 320px up. Apply `scroll-margin-top` to all anchored sections to offset the fixed header.\n\n### 1.5 CSS Methodology\n* **Framework-free, clean custom CSS** organized in native cascade layers: `@layer tokens, base, layout, components, effects, utilities;`\n* **BEM naming exclusively** (`.hero__title`, `.card--featured`, `.faq__item`, `.input-group__error`). Never mix conventions. Any generic reusable class (`.btn`, `.card`, `.input-group`) must live in the components layer.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load via Google Fonts `\u003Clink>` in `\u003Chead>`: **Rajdhani** (weights 400\u002F500\u002F600\u002F700) bound to `--font-base`, and **Share Tech Mono** bound to `--font-mono` (used for HUD eyebrows, stats, prices, badges, data labels).\n* **Icons:** Google Material Symbols (Outlined) via `\u003Clink>`. Usage: `\u003Cspan class=\"material-symbols-outlined\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`.\n* **Forbidden:** raw inline SVGs, local icon files, emoji used as icons, and any other icon font. All holographic decorative visuals must be CSS-constructed (see Section 6).\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;` Rajdhani 600, uppercase, letter-spaced. Minimum touch target 44×44px. `--radius-md`.\n* **Primary variant:** background `--primary`, color `--text-on-primary`. **Ghost variant:** transparent background, `1px solid --border-default`, color `--primary`.\n* **Hover:** brightness shift + `--glow-sm`, `cursor: pointer`.\n* **Focus:** `:focus-visible` ring using `outline: 2px solid --primary; outline-offset: 3px` (distinct and visible on both variants).\n* **Active:** `transform: scale(0.97)`.\n* **Loading (`.btn--loading`):** disables pointer events, prevents double-clicks, renders a CSS spinner (animated border ring using `currentColor`) or the `progress` Material Symbol — button dimensions must not change.\n* **Disabled:** `opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed;` no hover transforms.\n* **Success\u002FError (`.btn--success`, `.btn--error`):** temporary feedback states driven by `--text-success`\u002F`--text-error` with a `check_circle`\u002F`error` Material Symbol; revert automatically after ~2.5s.\n\n### 2.2 Cards (`.card` system)\n* **Default:** Flexbox column layout, `background: var(--bg-glass)`, `backdrop-filter: blur(5px)` (with an `@supports` fallback to solid `--bg-secondary`), `1px solid var(--border-default)`, `--radius-lg`, `--shadow-sm`.\n* **Hover (interactive variants):** `transform: translateY(-2px)`, border brightens toward `--primary`, `--glow-md`.\n* **Focus-within:** border-color `--primary` when a child control receives focus.\n* **Skeleton (`.card--skeleton`):** shimmer animation (translating linear-gradient) with reserved `min-height` to prevent layout shift.\n* **Empty (`.card--empty`):** centered Material Symbol + short guidance text.\n* **Featured (`.card--featured`):** accent border + `--glow-md` + a \"Most Popular\" badge (mono font) positioned at the top edge.\n\n### 2.3 Forms & Inputs (`.input-group`)\n* **Structure:** Flex column wrapping a visible `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error container `.input-group__error` with reserved `min-height` (no layout jump).\n* **States:** Empty; **Focused** (border `--primary` + `box-shadow: 0 0 0 3px rgba(0,229,255,0.2)` ring); Filled; **Valid** (`.is-valid`: `--border-success` + `check_circle` icon); **Invalid** (`.is-invalid`: `--border-error`, `error` icon, and a text message — never color alone); Disabled (`opacity: 0.5`); Read-only.\n* **A11y:** input receives `aria-invalid=\"true\"` on error and is linked to the message via `aria-describedby`; the error container has `aria-live=\"polite\"`.\n\n### 2.4 FAQ Accordion (`.faq__item`)\n* **Semantics:** `\u003Ch3>` wrapping a full-width `\u003Cbutton aria-expanded aria-controls>`; panel is a `\u003Cdiv role=\"region\" aria-labelledby>`. First item open by default; multiple items may be open.\n* **Visuals:** Flex row (question + `expand_more` icon rotating 180° when open). Animate height with the `grid-template-rows: 0fr → 1fr` technique + `overflow: hidden`, transitioned with `var(--transition-normal)`. No JS height math.\n* **States:** hover background tint, visible `:focus-visible` ring, full keyboard operability (native button behavior).\n\n### 2.5 Toast Notifications (`.toast`)\n* Fixed bottom-center (bottom-right ≥768px) flex container at `--z-toast`, glass styling, `role=\"status\"` region with `aria-live=\"polite\"` in the markup.\n* **Variants:** `.toast--success` \u002F `.toast--error` with Material Symbol + message text. Entrance: slide-up + fade via CSS; auto-dismiss after 4s. Under `prefers-reduced-motion`, appear\u002Fdisappear instantly.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid type and spacing; no horizontal overflow at any breakpoint.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes. **`prefers-reduced-motion: reduce` must disable all float, particle, scanline, shimmer, and reveal animations** (content remains fully visible and functional).\n* **Accessibility:** Semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a visually hidden skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-hidden=\"true\"` + `pointer-events: none` on all decorative layers; never communicate state by color alone (always pair with icon and\u002For text); all interactive targets ≥44px.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change (button loading → success, toast, accordion motion, card glow).\n* **Destructive Actions:** None exist in scope; if any were introduced, they must use a distinct danger style in this theme.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate, complete, and runnable by opening `index.html`. Only a single `\u003Cscript src=\"script.js\" defer>` reference in the HTML; no inline script blocks.\n* **Naming:** BEM throughout, ASCII class names, one consistent convention — never mixed.\n* **No Unrequested Placeholders:** All copy is real, on-theme English. `href=\"#\"` allowed only for footer links without specified destinations. The `placeholder` attribute on the email input is permitted.\n* Output the full contents of all three files in one response. Do not output partial code or explanations between files beyond minimal section comments.\n\n---\n\n## 5. PAGE SECTION SPECIFICATIONS\n\n**Global chrome (required):** Fixed glass header — hexagon logo mark + \"HOLOGRID\" wordmark, anchor links (Features, How It Works, Pricing, FAQ), and a compact `.btn--primary` CTA. Glass blur background, `1px` bottom border `--border-default`, `--z-header`. Shrinks subtly on scroll (optional).\n\n### 5.1 Hero\n* Full-viewport glass composition: mono-font eyebrow (`\u002F\u002F\u002F REAL-TIME HOLOGRAPHIC ANALYTICS`), H1 headline, supporting subline, and two CTAs — primary \"Launch Free Console\" and ghost \"See How It Works\" (anchor to `#how-it-works`).\n* **Stats row:** three stats (e.g., \"12B+ data points\u002Fday\", \"99.99% uptime\", \"40ms render latency\") in `--font-mono` with count-up animation on scroll into view.\n* **Decorative centerpiece (behind content, `aria-hidden`):** CSS-built floating isometric glass panels with fake data bars\u002Fsparklines (gradients), orbiting rings, particle stream, and a wireframe \"neural core\" motif (see Section 6).\n* Primary CTA click → `.btn--loading` (1.5s) → `.btn--success` + success toast.\n\n### 5.2 Features (3 cards)\nReusable `.section-head` pattern (mono eyebrow, H2, support line). Three `.card` items in a wrapping flex row (1 → 3 columns): hexagonal icon container (`clip-path` hexagon, accent glow) with Material Symbols (`view_in_ar`, `psychology`, `security`), title, description, and a mini CSS sparkline flourish that animates on hover. Card hover\u002Ffocus-within states per 2.2.\n\n### 5.3 How It Works (3 steps)\nThree steps with hexagonal numbered badges (`01\u002F02\u002F03`, mono font), Material Symbols (`database`, `hub`, `insights`), titles and copy (Connect sources → Render live 3D model → Explore & share insights). A luminous connecting line (horizontal ≥1024px, vertical on mobile) built with CSS.\n\n### 5.4 Testimonials (3 cards)\nThree `.card` items: `format_quote` icon, quote text, 5-star rating (`star` symbols with `aria-label=\"Rated 5 out of 5\"`), author avatar (hexagon with initials), name, role, and fictional company. **On load, render the `.card--skeleton` shimmer for ~800ms, then fade in real content** (skip the delay under reduced motion).\n\n### 5.5 Pricing (3 tiers)\nThree `.card` items: **Scout** (Free), **Operator** ($49\u002Fmo, `.card--featured` with \"Most Popular\" badge), **Commander** (Custom). Each: tier name, mono-font price, description, 5–6 differentiated features with `check_circle` icons, and a CTA (primary on featured, ghost on others). CTA click → loading (1.2s) → success state + toast. Billing note under prices.\n\n### 5.6 FAQ\nAccordion per 2.4, with six real on-theme Q&As (security, integrations, latency, pricing, on-prem, support), each answered in 2–3 sentences.\n\n### 5.7 Final CTA\nLarge `.card--hud` glass panel with radial accent glow: headline, subline, and an email-capture `.input-group` + primary submit button. Full form state flow per 2.3: validate on submit → invalid shows error icon + message; valid → button loading (1.5s) → success state + toast, then input resets. Secondary \"Talk to sales\" ghost link.\n\n### 5.8 Footer\nLink columns: **Product** (Features, Pricing, FAQ — in-page anchors), **Resources** (Documentation, API Reference, Changelog — `#`), **Company** (About, Careers, Contact — `#`), **Legal** (Privacy, Terms — `#`). All links get hover glow-underline and focus rings. Bottom bar: © 2025 HoloGrid line, tagline, and a back-to-top control (`arrow_upward`, smooth scroll respecting reduced motion).\n\n---\n\n## 6. HOLOGRAPHIC EFFECTS SYSTEM (CSS-Only Construction)\n\n* **Glass surfaces:** `background: var(--bg-glass); backdrop-filter: blur(5px); border: 1px solid var(--border-default);` per the supplied CSS technicals, with `@supports` fallback.\n* **Isometric floating panels:** parent `perspective`, children `rotateX\u002FrotateY` + `translateZ`, float keyframes (`translateY ±10px`, 6–8s ease-in-out infinite alternate) with staggered `:nth-child` delays.\n* **Particle streams:** a `.particles` container with ~24 child `.particle` dots (accent color, `--glow-sm`), each animated along keyframe paths; per-child position\u002Fdelay\u002Fduration\u002Fsize via `:nth-child()` rules only. Cap count for performance.\n* **Hexagons:** `clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%)`.\n* **Wireframe motif:** Material Symbol (`psychology` or `hub`) rendered as outline via transparent color + accent text-stroke\u002Ftext-shadow glow, or a CSS node network (dots + 1px connecting lines).\n* **Ethereal gradients & scanlines:** low-opacity radial accent glows behind sections; slow-drifting `repeating-linear-gradient` scanline overlay.\n* **HUD details:** corner brackets on `.card--hud` via pseudo-elements; mono-font data labels.\n* All decorative layers: `aria-hidden=\"true\"`, `pointer-events: none`, positioned behind content, and fully disabled under `prefers-reduced-motion`.\n\n---\n\n## 7. JAVASCRIPT REQUIREMENTS (`script.js`)\n\n* Vanilla JS only, no libraries or CDNs beyond Google Fonts. `'use strict'`, `addEventListener` only, progressive enhancement — the page must be fully readable and complete without JS.\n* Implement: FAQ accordion toggle; email form validation (regex, error injection into the dedicated container, `aria-invalid`, simulated async submit with loading → success → toast, double-submit prevention); pricing CTA loading simulation; hero stat count-up (IntersectionObserver, instant final values under reduced motion); testimonial skeleton → content swap; scroll-reveal (IntersectionObserver adds `.is-visible`; hidden state applied only when JS is active); toast utility; smooth anchor scrolling respecting reduced motion.\n",1791954981696]