[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-518-Wealth-Video-Hero":3},"# System Prompt: Build \"Wealth Video Hero\" Landing Page (Fintech Premium)\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single attempt. **Theme:** \"Wealth Video Hero\" — a premium fintech landing page with a full-screen cinematic video background, glassmorphism components, and full dark\u002Flight mode support. All user-facing copy must be written in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- Target all design properties, layout rules, and states exclusively via class or ID selectors.\n- Keep HTML semantic and clean; the visual theme must be swappable by editing only CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` and theme classes:\n- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- Map the palette: Deep Black `#000000`, Pure White `#FFFFFF`, Dark Gray `#1A1A1A`, Medium Gray `#888888`, Translucent Glass `rgba(0,0,0,0.7)`, Subtle Border `rgba(255,255,255,0.1)`, Light Gray `#CCCCCC`, Soft Black `#111111`.\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in both themes.\n- **Light mode:** do not use pure white backgrounds; use `#fefefe` where a near-white surface is required. The light variant must preserve the premium mood (soft black `#111111` surfaces with light glass overlays are acceptable).\n- Radius\u002Fshadows: `--radius-sm`, `--radius-md`, `--radius-lg`, plus `--radius-pill: 9999px` for pill badges\u002Fbuttons and `--radius-card: 16px` for glass cards. Shadows: `--shadow-sm`, `--shadow-md`.\n- Spacing\u002Ftransitions: `--spacing-gap`, `--transition-fast: 200ms`, `--transition-normal`, `--ease-standard`.\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`, plus `--z-video-bg` below all content.\n\n**1.3 Mandatory Dark Mode**\n- Dark mode is the **default presentation** for this theme; light mode must also be fully defined.\n- Provide tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class selector; switching themes must not require HTML restructuring.\n- Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible theme toggle with correct `aria-pressed` and `aria-label` states.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n- All layouts must be mobile-responsive out of the box: the 4-column bottom feature grid, pricing tiers, and testimonial rows must collapse to single columns on small viewports. No horizontal scrolling at any width.\n\n**1.5 Framework**\nUse Tailwind CSS (via CDN or build) with custom CSS in `@layer` \u002F `@apply` directives mapping utilities to CSS variables and reusable classes (`.btn`, `.card`, `.glass-card`, `.pill-badge`, `.input-group`). One consistent naming convention throughout — never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts (e.g., Inter or Poppins) via `\u003Clink>`\u002F`@import` and bind to `--font-base`.\n- Use Google Material Symbols for all icons. **Raw inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. SECTION & COMPONENT SPECIFICATIONS\n\n**2.0 Hero (Video Background)**\n- Full-screen `\u003Cvideo>` background: `autoplay`, `loop`, `muted`, `playsinline`, `object-fit: cover`, scaled to **150%** with `transform-origin: top left` for an immersive zoom effect. Use a cinematic dark\u002Fgold-toned financial\u002Fcorporate stock video URL (e.g., abstract financial charts, digital coins, or night skyline with bokeh). Include a dark gradient overlay for text legibility.\n- Transparent navbar over the video with glassmorphic styling on scroll.\n- Centered hero content: translucent **pill badge** (`border-radius: 9999px`, glass background, subtle white border), massive white headline, subtle gray subtitle, and a white pill CTA button with `transform: scale(1.05)` on hover (`transition: transform 200ms`).\n- Bottom floating glassmorphic card: `background: rgba(0,0,0,0.7)`, `backdrop-filter: blur(24px)`, `border: 1px solid rgba(255,255,255,0.1)`, `border-radius: 16px`, containing a **4-column feature grid** (icon + short label each), collapsing to 2 columns on tablet and 1 on mobile.\n\n**2.1 Buttons**\nAll states via CSS classes:\n- Default: flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min touch target 44×44px.\n- Hover: brightness\u002Fshadow shift plus `scale(1.05)` per theme spec, `cursor: pointer`.\n- Focus: distinct focus ring via CSS variables for keyboard navigation.\n- Active: `transform: scale(0.97)`.\n- Loading: disables interaction, prevents double-clicks, renders an animated Google Icon spinner without distorting dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n- `.btn-danger` (if used) must be visually distinct in both themes.\n\n**2.2 Cards (Features, How It Works, Testimonials, Pricing)**\n- Default: flexible flexbox layout, glassmorphic styling (`--bg-secondary`, `backdrop-filter: blur(24px)`, subtle border, `--radius-card`).\n- Hover: elevation shift or `transform: translateY(-2px)`.\n- Focus-within: border highlight when a child link\u002Fbutton receives focus.\n- Loading: CSS shimmer skeleton animation with no layout jumps.\n- Empty state: Google Icon plus clear guidance text (e.g., FAQ fallback).\n\n**2.3 Forms & Inputs (Final CTA \u002F newsletter, FAQ search if applicable)**\n- States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n\n**2.4 Modals (FAQ answers or pricing details, if interactive)**\n- States: opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.\n\n---\n\n## 3. REQUIRED SECTIONS\n\n1. **Hero** — video background, pill badge, headline, subtitle, CTA, floating 4-column glass feature grid (per 2.0).\n2. **Features** — 3 glassmorphic cards with Google Icons.\n3. **How It Works** — 3 numbered steps with connecting visual flow.\n4. **Testimonials** — 3 glass cards with avatar placeholder, quote, name, role.\n5. **Pricing** — 3 tiers; middle tier visually elevated\u002Fhighlighted; each with CTA button.\n6. **FAQ** — accessible accordion (semantic buttons, `aria-expanded`, keyboard operable).\n7. **Final CTA** — full-width glass section with headline and pill CTA.\n8. **Footer** — secondary links, social icons (Google Material Symbols), copyright.\n\n**Global UX rules:** fluid responsive sizing with no horizontal overflow; CSS transitions on all state changes using `--transition-normal`, respecting `prefers-reduced-motion`; WCAG-sufficient contrast in both modes; never rely on color alone for state; semantic HTML5, correct ARIA roles\u002Flabels, logical focus order, full keyboard operability; `aria-live` regions for dynamic feedback; every click\u002Fhover\u002Fsubmission triggers visible feedback.\n\n---\n\n## 4. DELIVERABLES\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond one deferred entry-point reference. No inline CSS.\n- **Naming:** one consistent convention (BEM or fixed utility set) across the entire deliverable.\n- **Copy:** all user-facing copy in English, realistic fintech\u002Fwealth-management content — no lorem ipsum.\n- **Exception clause:** the background video must be embedded via a hosted `\u003Cvideo>` source URL; if no suitable stock video URL is available, use a CSS-animated dark\u002Fgold gradient fallback — never an inline SVG or local file.\n",1791954988581]