[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-529-Glassmorphism-Agency-Hero":3},"# SYSTEM PROMPT — CODING AGENT BUILD BRIEF\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete Landing Page on the first attempt**, strictly following this specification. Every rule below is mandatory unless an explicit exception clause is stated.\n\n---\n\n## 0. PROJECT BRIEF & DESIGN DIRECTION\n\n- **Theme Name:** Glassmorphism Agency Hero\n- **Type:** Agency, Glassmorphism, Purple-Pink Gradient, Video Mix-Blend, Infinite Slider\n- **Era:** 2024–2026 Premium Dark Agency\n- **Keywords (translated):** agency, glassmorphism, purple-pink gradient, mix-blend-screen, HLS video, infinite slider, logo cloud, Zap icon, glow effect, premium dark\n- **Color Mode:** Dark-only (see exception clause in 1.3)\n\n**AI Visual Direction (translated from source spec):**\nDesign a dark agency hero with an HLS video using `mix-blend-mode: screen`. The video sits at the bottom of the hero with a **negative top margin of -150px**, overlapping behind the headline text. Apply a gradient overlay (from `#010101` via transparent to `#010101`) on the video edges. Include a pill badge with a Zap icon inside a gradient box with glow. Use a large headline with a gradient text fill (white to purple\u002Fpink). The CTA button carries a gradient circle with an arrow. Below the hero, render an animated infinite logo slider with white inverted logos. Primary gradient: `#FA93FA` → `#C967E8` → `#983AD6`.\n\n**Video Content Description:** The HLS stream (Cloudflare Stream) must display abstract light and movement visuals in dark tones — light effects, particles, or fluid shapes that merge with the page's black background via `mix-blend-screen` (the video's black becomes transparent).\n\n**Copy Direction:** Invent a fictional premium digital agency brand (suggested name: \"Prisma Studio\" — you may improve it). Write **all user-facing copy in English** — realistic, confident agency marketing copy (brand systems, web experiences, growth marketing). **No lorem ipsum anywhere.** The only permitted placeholder is the HLS video URL constant (see 4.1).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- **No Inline CSS:** The `style=\"...\"` attribute is **forbidden** in all HTML.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors (Tailwind utilities in markup + custom classes in `style.css`).\n- **Minimal HTML Modifications:** Keep HTML semantic and agnostic of visual styling — changing the look must only require editing `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` using exactly these definitions (extend as needed, never hardcode hex values elsewhere):\n\n```css\n:root {\n  color-scheme: dark;\n  \u002F* Brand *\u002F\n  --primary: #FA93FA;            \u002F* Pink *\u002F\n  --secondary: #C967E8;          \u002F* Medium Purple *\u002F\n  --tertiary: #983AD6;           \u002F* Dark Purple *\u002F\n  --gradient-brand: linear-gradient(135deg, #FA93FA, #C967E8, #983AD6);\n  --gradient-cta: linear-gradient(135deg, #FA93FA, #C967E8); \u002F* button-safe: #010101 text passes AA on both stops *\u002F\n  \u002F* Surfaces *\u002F\n  --bg-primary: #010101;\n  --bg-secondary: rgba(28,27,36,0.15);   \u002F* dark glass surface *\u002F\n  --bg-elevated: #0a0a10;\n  --overlay-black: #010101;\n  \u002F* Text (dark bg ↔ light text pairing enforced) *\u002F\n  --text-primary: rgba(255,255,255,0.95);\n  --text-secondary: rgba(255,255,255,0.8);\n  --text-muted: rgba(255,255,255,0.55);\n  --text-success: #4ADE80;\n  --text-error: #F87171;\n  \u002F* Borders *\u002F\n  --border-default: rgba(255,255,255,0.05);\n  --border-strong: rgba(255,255,255,0.14);\n  --border-success: rgba(74,222,128,0.6);\n  --border-error: rgba(248,113,113,0.6);\n  \u002F* Radius & Shadows *\u002F\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);\n  --shadow-md: 0 8px 32px rgba(0,0,0,0.5);\n  --glow-primary: 0 0 48px rgba(201,103,232,0.35);\n  --glow-strong: 0 0 64px rgba(250,147,250,0.45);\n  \u002F* Spacing & Transitions *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* Elevation \u002F Stacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* Typography *\u002F\n  --font-display: 'Space Grotesk', sans-serif;\n  --font-base: 'Inter', sans-serif;\n}\n```\n\n- **Contrast Pairing:** Every dark background token pairs with light text tokens — enforced across the whole page. Never use pure `#ffffff` for surfaces; where white is needed, use `#fefefe`.\n- **Gradient Contrast Rule:** The full 3-stop `--gradient-brand` is reserved for decorative fills, borders, glows, and **large display text only** (≥ 3:1). Buttons use `--gradient-cta` with `#010101` text (≥ 4.5:1 on both stops).\n\n**1.3 Mandatory Dark Mode Support**\nDark Mode is the default and only fully-designed mode; all tokens are defined once in `:root` and the page renders dark with no HTML restructuring.\n**Exception (per style spec):** Light mode is explicitly *Not Recommended* for this theme — the deliverable is **dark-only**; the theme toggle and `localStorage` persistence requirement is waived because there is no second theme to switch to. Set `color-scheme: dark` so native controls and scrollbars render dark.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- **Default Alignment Rule:** Every flex container **must default to `align-items: center`** (`items-center`) unless an exception is explicitly justified. The only permitted exception: equal-height card rows may use `align-items: stretch`, applied deliberately.\n- **Mobile-Friendly First:** All rows convert to columns on small viewports; fluid `clamp()` sizing; **zero horizontal scrolling** (`overflow-x: clip` on `body`; the marquee must be fully contained).\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Load Tailwind CSS via the Play CDN `\u003Cscript>` in `\u003Chead>`. **Do not** use an inline `tailwind.config` script block — extend via CSS variables and custom classes instead.\n- Tailwind utilities in markup are for layout, spacing, and responsive behavior only. Repeated components must be reusable classes in `style.css` (`.btn`, `.btn--primary`, `.card`, `.card--glass`, `.badge-pill`, `.input-group`, `.marquee`), written in vanilla CSS driven by `var(--...)` tokens. Arbitrary values (e.g., `-mt-[150px]`) are permitted for one-off effects.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Text:** Google Fonts `\u003Clink>` (with `preconnect`) for **Space Grotesk** (display: 500–700) and **Inter** (body: 400–600), bound to `--font-display` and `--font-base`.\n- **Icons:** Google **Material Symbols Rounded** via Google Fonts `\u003Clink>`, configured with `font-variation-settings` (FILL 1). The **Zap icon maps to the `bolt` glyph**. **Raw inline SVGs and local icon files are forbidden.**\n- Decorative icons get `aria-hidden=\"true\"`; informative icons carry accessible labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nAll states styled via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**, `--radius-pill`, font-weight 600.\n- **Variants:** `.btn--primary` (background `--gradient-cta`, color `#010101`, glow on hover), `.btn--ghost` (glass background, `--border-default`, light text).\n- **Hover:** Brightness shift + `--glow-primary`, `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring — `outline: 2px solid var(--primary); outline-offset: 3px;` plus glow shadow.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** Disables interaction, prevents double-clicks, renders a rotating Material Symbol `progress_activity` spinner (or CSS border spinner) **without changing button dimensions**; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback driven by `--text-success` \u002F `--text-error` with icon + text (never color alone).\n- **CTA arrow circle:** `.btn__icon-circle` — gradient circle containing `arrow_forward`, translating on hover.\n\n**2.2 Card Component (Glassmorphism)**\n- **Default:** `.card--glass` — background `--bg-secondary`, `backdrop-filter: blur(16px) saturate(140%)`, border `1px solid var(--border-default)`, `--radius-lg`, flex layout.\n- **Hover (interactive cards only):** `transform: translateY(-2px)` + border brightens to `--border-strong` + `--glow-primary`.\n- **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a `.card--skeleton` shimmer keyframe animation to prevent layout jumps.\n- **Empty State:** Define a fallback layout (Material Symbol icon + guidance text) for any dynamic slot.\n- **Ambient glows:** Place decorative radial gradient orbs (purple\u002Fpink, low opacity, `aria-hidden`) behind card grids so the glass blur is visible against `#010101`.\n\n**2.3 Form & Input Requirements (Final CTA email capture)**\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, `\u003Cinput>`, and a dedicated `.input-feedback` container (min-height reserved to prevent layout shift, `aria-live=\"polite\"`).\n- **States:** Empty, Focused (ring via `--primary`), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red text, error icon, `aria-invalid=\"true\"`, `aria-describedby`), Disabled, Read-only.\n- **Behavior:** Client-side email validation; submit simulates async (loading ≥ 800ms → success message with icon; invalid → inline error). Never rely on color alone — pair every state with icon and text.\n\n**2.4 FAQ Accordion (Disclosure Widget)**\n- Use semantic `\u003Cdetails>` \u002F `\u003Csummary>`; summary is a flex row (`align-items: center`, `justify-content: space-between`) with a rotating `expand_more` chevron on `[open]`.\n- Animate open\u002Fclose via CSS transitions (content fade\u002Ftranslate; optional height animation via JS). Fully keyboard operable natively; multiple items may be open simultaneously.\n- **Modal note:** No modals are part of this build. If one becomes necessary, follow the standard modal spec (opening\u002Fopen\u002Fclosing states, backdrop, Material Symbol close button, focus trap, `Esc` + overlay-click close, `--z-modal`).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing, standard breakpoints, no horizontal overflow at 320px.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** — disable the marquee animation, reveal transforms, and video autoplay (pause the video); keep simple opacity fades only.\n- **Accessibility (a11y):** Verify AA contrast on dark (`--text-secondary` on `#010101`, gradient headline treated as large text ≥ 3:1). Never rely solely on color to communicate state. Use semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), a skip link, correct ARIA roles\u002Flabels on custom widgets (mobile nav `aria-expanded`\u002F`aria-controls`, duplicated marquee group `aria-hidden=\"true\"`), logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, success, loading).\n- **Mandatory Visual Feedback:** Every click, hover, or submission triggers a visible state change.\n- **Destructive Actions:** None exist on this page; if introduced, they must use `--text-error` styling and remain visually distinct on dark.\n\n---\n\n## 4. PAGE SECTION SPECIFICATIONS (BUILD ORDER)\n\n**4.0 Global Shell & Navbar**\nSticky glass navbar (`backdrop-filter`, subtle bottom border, `z-index: var(--z-dropdown)`): gradient logo mark + wordmark, anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scroll and `scroll-margin-top`, `.btn--primary` \"Start a project\", and a mobile hamburger (`menu` glyph) toggling a slide-down glass panel (accessible, `Esc` closes, focus managed).\n\n**4.1 Hero**\n- Full-viewport flex column, `align-items: center`, text-center; content stacked above the video (`z-index` layering).\n- **Pill badge:** Glass pill containing a small gradient box (`--gradient-cta`, rounded ~10px, `--glow-primary`) holding the Zap icon (`bolt`, color `#010101`) + short label text.\n- **Headline:** `\u003Ch1>`, `--font-display`, `clamp(2.75rem, 7vw, 5rem)`, **gradient text fill** white → purple\u002Fpink: `background: linear-gradient(180deg, #fefefe 15%, #C967E8 70%, #FA93FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent;` with an `@supports` solid-color fallback.\n- **Subheadline** in `--text-secondary`, max-width ~60ch; CTA row: `.btn--primary` with gradient arrow circle + `.btn--ghost`.\n- **HLS video block:** Below the CTAs — `\u003Cvideo>` with `width: 100%; height: auto; mix-blend-mode: screen; margin-top: -150px;` (negative margin pulls it up **behind** the text; hero text stays on top, video is `pointer-events: none` and `aria-hidden=\"true\"`). Add an absolutely-positioned overlay with `background: linear-gradient(to bottom, #010101, transparent, #010101)` (from `#010101` via transparent to `#010101`) to fade the video edges into the page.\n- **HLS implementation (script.js):** Load **hls.js v1 via CDN**. Define `const HLS_SOURCE = \"...\"` at the top with a public test stream (e.g., `https:\u002F\u002Ftest-streams.mux.dev\u002Fx36xhzz\u002Fx36xhzz.m3u8`) and a clearly commented note: `\u002F\u002F REPLACE with Cloudflare Stream HLS URL`. Use `Hls.isSupported()` → attach; native HLS fallback for Safari; on fatal error or no support, gracefully hide the video (the page must look complete without it). Video attributes: `muted autoplay loop playsinline`.\n- **Logo cloud (infinite slider):** Closing the hero — `.marquee` with `overflow: hidden` and an edge fade mask (transparent → visible → transparent). The track holds **two identical groups**; CSS keyframes animate `translateX(-50%)` infinitely (~35s, linear). Logos are fictional brand wordmarks (`--font-display`, letter-spaced) optionally paired with Material Symbol marks, rendered pure white via `filter: brightness(0) invert(1)`; opacity 0.7 → 1 on hover. Second group `aria-hidden=\"true\"`; pause on hover; animation disabled under reduced motion.\n\n**4.2 Features (3 cards)**\nFlex row (wrap) → column on mobile. Each `.card--glass`: icon tile (glass, gradient-tinted, Material Symbol), `\u003Ch3>`, description. Hover lift + glow. Real English copy for three agency services.\n\n**4.3 How It Works (3 steps)**\nFlex row → column on mobile. Gradient step numerals (01\u002F02\u002F03) or a gradient connector line between steps; Material Symbol icons; concise step copy.\n\n**4.4 Testimonials**\n3 glass cards: `format_quote` icon, quote copy, a 5-star row (`star` glyphs with `aria-label` such as \"Rated 5 out of 5\"), avatar as a **gradient circle with initials** (no external images), name + role.\n\n**4.5 Pricing (3 tiers)**\nFlex row → column on mobile. **Middle tier featured:** gradient border via the padding-box\u002Fborder-box technique (`background: linear-gradient(...) padding-box, var(--gradient-brand) border-box; border: 1px solid transparent;`), \"Most popular\" pill, `--glow-primary`, subtle lift. Each tier: name, price + period, feature list with `check_circle` icons, CTA (`.btn--primary` featured, `.btn--ghost` others).\n\n**4.6 FAQ**\n5–6 `\u003Cdetails>` items per spec 2.4, with realistic English Q&A copy.\n\n**4.7 Final CTA**\nLarge glass panel with ambient gradient glow orbs; `\u003Ch2>` (may use the gradient fill), supporting copy, and the email capture form per spec 2.3 with a `.btn--primary` submit and inline success\u002Ferror feedback.\n\n**4.8 Footer**\nSubtle top border; brand blurb + social row (Material Symbol glyphs such as `alternate_email`, `rss_feed`, `chat_bubble` — **no inline SVG brand marks**); secondary link columns (Company \u002F Resources \u002F Legal); copyright with dynamic year; mini logo.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` logic blocks — only a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`) plus external CDN references (Tailwind, hls.js, Google Fonts, Material Symbols).\n- **Naming Convention:** Strict **BEM** (`block__element--modifier`) for every custom class; Tailwind utilities serve as the fixed layout utility set. Never mix in any other naming style.\n- **No Unrequested Placeholders:** All user-facing copy is real English agency copy — no lorem ipsum. The **only** permitted placeholder is the `HLS_SOURCE` constant (clearly commented as replaceable).\n- **Definition of Done:** Fully working on first attempt — no horizontal scroll at 320px; complete keyboard-only navigation; every component state in Sections 2–3 implemented; the page remains visually complete if the HLS video fails to load; all animations respect `prefers-reduced-motion`.\n",1791954988640]