[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-116-Futuristic-UI-Glassmorphism":3},"# SYSTEM PROMPT — BUILD SPECIFICATION: \"FUTURISTIC UI GLASSMORPHISM\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-grade Landing Page on the **first attempt** — deliver full, final, runnable code with no follow-up questions, no TODOs, and no truncated output. The design category is **Glass & Soft UI**; the theme is **Futuristic UI Glassmorphism**. Every rule in this document is **mandatory** unless explicitly marked as an exception.\n\n---\n\n## 0. PROJECT BRIEF & PAGE ARCHITECTURE\n\n**0.1 Theme Identity & Visual Direction**\n* **Name:** Futuristic UI Glassmorphism — **Type:** Futuristic, Analytical, Cinematic — **Era:** Future Glass.\n* **Keywords:** glassmorphism, futuristic, ui, glass, transparent, blur, glowing, 3d.\n* **Light\u002FDark:** ✗ No light mode \u002F ✓ Full dark mode → this is a **dark-only** experience (see explicit exception in Rule 1.3).\n* **Target look (AI Visual Direction):** \"glassmorphism landing page, futuristic glass ui, transparent panels, blur effects, glowing edges, dark background, 3d interface.\"\n* **Mandatory visual effects — all realized in pure CSS, no image files, no inline SVG:** isometric 3D rendered asset look (CSS `perspective` + `rotateX\u002FrotateY` + `transform-style: preserve-3d` compositions), glowing circuit-board traces (pseudo-elements, gradient lines, animated pulse keyframes), glass-like panels (Rule 0.2 recipe), luminous neon (accent glows, gradient-clipped headline spans), internal luminescence (inset `box-shadow` glows and radial gradients inside panels).\n\n**0.2 Visual Foundation (exact values from the style spec — do not deviate)**\n* **Palette:** Background `#020814`, Text `#FFFFFF`, Accent `#00F0FF`; Glass White `#FFFFFF10`, Border Glow `#00F0FF80`, Shadow `#000000`.\n* **Page base:** `background-color: #020814; color: #FFFFFF; font-family: 'Exo 2', sans-serif;`\n* **Core glass recipe — every glass surface combines exactly:**\n```css\nbackground: rgba(255, 255, 255, 0.05);\nbackdrop-filter: blur(10px);\nborder: 1px solid rgba(255, 255, 255, 0.1);\nborder-radius: 16px;\n```\n* Provide an `@supports not (backdrop-filter: blur(10px))` fallback that substitutes a more opaque solid fill so panels remain legible without blur support.\n\n**0.3 Product & Copy Direction**\n* Invent **one** coherent fictional product and stay consistent: a real-time analytics intelligence platform (suggested names: \"NexaFlow\", \"Lumina\", \"Aetheris\" — pick one). All user-facing copy in **English**, specific and realistic: metrics, feature names, personas, prices. **No lorem ipsum anywhere.**\n\n**0.4 Required Page Sections (build all, in this order)**\n* **0.4.1 Sticky Glass Navbar** — wordmark logo + Material Symbol, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), \"Get Started\" `.btn` (smooth-scrolls to Pricing). On scroll, the navbar gains stronger blur\u002Fborder via a class toggle. Mobile: hamburger (Material Symbol `menu`) opens a glass dropdown panel (`z-index: var(--z-dropdown)`), `aria-expanded`, closes on Esc \u002F outside click \u002F link click, focus managed.\n* **0.4.2 Hero** — full-viewport: status badge chip, single `h1` with a gradient neon accent span, subheadline, dual CTAs (`.btn--primary` \"Get Started\" → scroll to Pricing; `.btn--glass` \"Watch Demo\" → opens the Demo Modal, Rule 2.4), and a **pure-CSS isometric 3D scene**: a tilted dashboard mock of layered glass panels with floating metric chips, animated glowing circuit traces, ambient blurred glow orbs, and a faint grid backdrop. Optional stats row of 3 glass chips (e.g., \"99.99% uptime\", \"2M+ events\u002Fsec\", \"150+ integrations\"). Entrance animation (fade\u002Frise), reduced-motion safe.\n* **0.4.3 Features — 3 cards** — flex row wrapping to a column below 768px. Each `.glass-card`: Material Symbol in a glowing glass tile, title, 2–3 sentence description. Suggested: Real-Time Analytics (`monitoring`), Predictive Intelligence (`insights`), Zero-Trust Security (`shield_lock`).\n* **0.4.4 How It Works — 3 steps** — numbered 01\u002F02\u002F03 glass panels joined by glowing circuit-trace connectors (CSS pseudo-elements); horizontal ≥1024px, vertical stack with a vertical connector on mobile. Steps: Connect (`hub`) → Analyze (`monitoring`) → Deploy (`rocket_launch`).\n* **0.4.5 Testimonials — 3 cards** — glass quote cards: 5-star row (Material Symbol `star`, filled), quote, monogram avatar (initials inside a glowing glass circle — no images), name, role\u002Fcompany.\n* **0.4.6 Pricing — 3 tiers** — glass cards; middle \"Pro\" tier highlighted with `--glow` border + \"Most Popular\" badge; feature lists with `check` icons; per-tier CTA. Suggested: Starter $0, Pro $29\u002Fmo, Enterprise Custom. Include an accessible Monthly\u002FAnnual segmented toggle (`aria-pressed`, prices update with a subtle transition, \"Save 20%\" note, price region announced via `aria-live`).\n* **0.4.7 FAQ — accordion** — 5–6 realistic questions (pricing, security, integrations, data privacy, onboarding, cancellation) built per Rule 2.5.\n* **0.4.8 Final CTA** — full-width glass panel with internal luminescence (inset accent glow + gradient border): headline, supporting line, inline email-capture `.input-group` + glowing submit `.btn` exercising the full state flow (loading → success with `aria-live` confirmation).\n* **0.4.9 Footer** — brand block + tagline, secondary link columns (Product \u002F Company \u002F Resources \u002F Legal), icon links (Material Symbols with `aria-label`), bottom bar with copyright + legal links. All links carry real `href`s (section anchors).\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`. **Forbidden:** `style=\"...\"` attributes, inline `\u003Cstyle>` blocks, and inline event handlers (`onclick=` etc.).\n* Target all design properties, layout rules, and states via class\u002FID selectors only.\n* HTML remains clean, semantic, and style-agnostic: re-skinning the page must require editing CSS only, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (exact names required):\n* **Colors:** `--primary: #00F0FF; --secondary: #FFFFFF10; --bg-primary: #020814; --bg-secondary: rgba(255,255,255,0.05); --text-primary: #FFFFFF; --text-secondary: rgba(255,255,255,0.72); --text-success: #00FFA3; --text-error: #FF4D6D; --border-default: rgba(255,255,255,0.1); --border-error: rgba(255,77,109,0.5); --border-success: rgba(0,255,163,0.5);`\n* **Glass & glow:** `--glass-bg: rgba(255,255,255,0.05); --glass-bg-hover: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.1); --glow: #00F0FF80; --glow-strong: #00F0FF; --shadow-color: #000000; --blur-glass: 10px; --blur-glass-strong: 20px;`\n* **Radii & shadows:** `--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm; --shadow-md` (deep black shadows, e.g. `0 8px 32px rgba(0,0,0,0.4)`); glow shadows `--glow-sm: 0 0 12px rgba(0,240,255,0.25); --glow-md: 0 0 24px rgba(0,240,255,0.45);`\n* **Spacing & transitions:** `--spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);`\n* **Elevation\u002Fstacking:** `--z-dropdown: 100; --z-modal: 200; --z-toast: 300;`\n* **Typography:** `--font-base: 'Exo 2', sans-serif;`\n* **Contrast pairing (mandatory):** dark backgrounds pair with light text only; when the bright accent `#00F0FF` is used as a **fill**, it must pair with dark text `#020814` — never white-on-cyan. Glass fills pair with `--text-primary`\u002F`--text-secondary`.\n* If any near-white surface is ever required, use `#fefefe`, never `#ffffff`.\n\n**1.3 Mandatory Dark Mode — with explicit exception**\n* Dark mode is the canonical theme: the complete dark token set is defined directly in `:root` (the default), and all theming remains variable-driven so any future theme is achievable through CSS alone, with zero HTML restructuring.\n* **Exception clause:** the source style spec mandates a dark-only experience (\"Light\u002FDark: ✗ No \u002F ✓ Full\"); therefore no light-mode palette, no `prefers-color-scheme` light variant, no theme toggle, and no `localStorage` theme persistence are required for this deliverable.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build **all** layout structures with Flexbox (`display: flex`). Card grids are `flex-wrap` rows with flexible children (e.g., `flex: 1 1 320px`) — no CSS Grid.\n* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., top-aligned text stacks inside cards).\n* Mobile-first: base styles are single-column; enhance at ≥640px, ≥768px, ≥1024px. No horizontal scrolling at any width; no fixed pixel widths on containers.\n\n**1.5 Styling Engine**\n* Use clean, hand-written, token-driven custom CSS for this deliverable. All styles bind to the CSS variables above and to reusable component classes (`.btn`, `.glass-card`, `.input-group`); any utility classes used must map back to these tokens.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Exo 2** (weights 300–800) from Google Fonts via `\u003Clink>` in `\u003Chead>` and bind it to `--font-base`. Headings 700\u002F800 with fluid `clamp()` sizes; body 400\u002F500.\n* **All icons via Google Material Symbols (Rounded)** loaded from Google Fonts. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Suggested set: `monitoring, insights, shield_lock, hub, rocket_launch, star, check, close, expand_more, menu, arrow_forward, mail, progress_activity, error, check_circle`.\n* Decorative visuals (circuit traces, glow orbs, isometric panels) are pure CSS only.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn` + BEM modifiers)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-pill)`; Exo 2 weight 600. Variants: `.btn--primary` (fill `--primary`, text `#020814`, `--glow-md` shadow), `.btn--glass` (glass recipe, white text), `.btn--ghost` (transparent, accent text), `.btn--danger` (distinct neon-red treatment, Rule 3.5).\n* **Hover:** brightness increase + glow intensify, `cursor: pointer`, `transition: var(--transition-fast)`.\n* **Focus:** distinct visible ring via `:focus-visible` — `outline: 2px solid var(--glow)` with offset; never remove focus styles.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `pointer-events: none`, prevents double-clicks\u002Fdouble submission, swaps the icon slot to a spinner (animated Material Symbol `progress_activity` or CSS border spinner) **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback — border\u002Ftext shift to `--text-success` \u002F `--text-error` plus icon swap; used for form submission feedback.\n\n**2.2 Card (`.glass-card`)**\n* **Default:** flex column layout; exact glass recipe (Rule 0.2); `box-shadow: var(--shadow-md)`.\n* **Hover (interactive cards):** `transform: translateY(-2px)`, border shifts to `--glow`, glow shadow appears; `transition: var(--transition-normal)`.\n* **Focus-within:** card border glows accent when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** `.skeleton` shimmer (animated gradient sweep) with reserved fixed heights — zero layout shift.\n* **Empty state:** structured fallback with a centered Material Symbol and clear guidance text (define `.glass-card--empty`; apply to any dynamic area that can be empty).\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex column wrapping a `\u003Clabel>`, a glass `\u003Cinput>`, and a dedicated error\u002Ffeedback container with `aria-live=\"polite\"`.\n* **States (all class-driven):** empty, focused (accent glow ring), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` message + `error` icon — never color-only), disabled, read-only.\n* Glass input: `--glass-bg` fill, `--glass-border`, white text, placeholder at `rgba(255,255,255,0.55)` minimum; use `type=\"email\"`, `autocomplete=\"email\"`, `required`, and `novalidate` on the form so custom JS validation drives the consistent accessible error UI.\n* Submission feedback renders inline (button `.is-success` + confirmation message) or as a glass toast (`.toast`, `z-index: var(--z-toast)`, `aria-live`).\n\n**2.4 Modal \u002F Popup (`.modal`) — Demo Modal**\n* **States (all animated via CSS transitions):** opening (fade + scale 0.95→1), open, loading (skeleton shimmer while the \"demo loads\", ~800ms), success\u002Ferror variants defined, closing (reverse animation).\n* **Structure:** fixed backdrop `rgba(2,8,20,0.7)` + `backdrop-filter: blur(8px)`; centered flex container (`align-items: center; justify-content: center`); glass panel with `--blur-glass-strong`, `--glow` border, `z-index: var(--z-modal)`.\n* **Content:** after loading, reveal a pure-CSS animated dashboard preview (mini glass panels, glowing animated bars).\n* **UX\u002FA11y:** `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; Material Symbol `close` button (`aria-label`); keyboard focus trapping (Tab\u002FShift+Tab cycle); close via Esc and overlay click; focus returns to the trigger on close; body scroll locked while open.\n\n**2.5 FAQ Accordion (`.accordion`)**\n* Each item: glass panel; `\u003Cbutton aria-expanded>` wrapping the question + `expand_more` symbol (rotates 180° when open); answer in a `role=\"region\"` panel animated via the CSS `grid-template-rows: 0fr → 1fr` technique.\n* Fully keyboard operable (native buttons); height animation respects `prefers-reduced-motion`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography (H1 ≈ `clamp(2.5rem, 6vw, 4.5rem)`), fluid section spacing, wrapping flex layouts, zero horizontal overflow at every breakpoint.\n* **Smooth animations:** every state change transitions via `var(--transition-fast)` \u002F `var(--transition-normal)` with `var(--ease-standard)`. Scroll-reveal via IntersectionObserver (`.reveal` → `.is-visible`); only hide content once JS is confirmed loaded (the script sets a class on `\u003Chtml>` first) so nothing is invisible without JS. Anchor navigation uses smooth scrolling plus `scroll-margin-top` for the sticky navbar.\n* **Accessibility (a11y):** body text contrast ≥ 4.5:1 on `#020814` (white ≈ 18:1; `--text-secondary` passes; dark `#020814` text on `#00F0FF` fills passes). Never rely on color alone to communicate state. Semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), a single `h1` with logical heading order, a skip-to-content link, logical DOM\u002Ffocus order, full keyboard operability (no mouse-only interactions), and `aria-live` regions for all dynamic feedback (form errors\u002Fsuccess, demo loading, price changes).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** any `.btn--danger` or delete-style action must be visually distinct (neon-red border\u002Fglow) and legible in this dark theme.\n* **Reduced motion:** `prefers-reduced-motion` disables transforms, parallax, shimmer, and pulses (opacity-only fades allowed); the page remains fully usable.\n* **Performance:** apply `backdrop-filter` deliberately on key surfaces, avoid nesting many heavy blurs, and animate only `transform`\u002F`opacity`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and runnable by opening `index.html` directly. The HTML contains exactly one `\u003Cscript src=\"script.js\" defer>` reference; no inline scripts, no inline styles, no inline handlers. Google Fonts `\u003Clink>` tags (Exo 2 + Material Symbols) in `\u003Chead>` are expected, along with `lang=\"en\"`, viewport meta, meta description, and a descriptive `\u003Ctitle>`.\n* **Naming convention:** BEM everywhere (`.btn`, `.btn--primary`, `.glass-card`, `.accordion__item`, `.modal__panel`, `.input-group__error`…). One convention, never mixed; JS hooks use the same classes or `data-*` attributes.\n* **No unrequested placeholders:** all user-facing copy in **English**, realistic and theme-consistent per Rule 0.3 — invented brand, headlines, feature descriptions, testimonials, prices, and FAQ answers. No lorem ipsum, no placeholder images (all visuals are pure CSS), no empty sections.\n* **Completeness:** deliver the entire landing page — every section in Rule 0.4 and every component state in Section 2 — as one final output on the first attempt.\n",1791954981725]