[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-581-Agency-Viral-Videos-Reels-Hero":3},"# BUILD SPECIFICATION — LANDING PAGE: \"AGENCY VIRAL VIDEOS & REELS HERO\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below on the first attempt. Follow every rule in this document exactly; where a rule and a habit of yours conflict, the rule wins.\n\n---\n\n## 0. PROJECT BRIEF & VISUAL DIRECTION\n\n**0.1 Product & Theme**\nA single-page marketing site for a viral short-form video agency (brand wordmark: **VIRALREEL**). Style: *Full-Screen Video, Transparent Nav, Liquid Glass Badge, Corner Accents, Sharp CTA* — 2025–2026 agency\u002Fcreative aesthetic. Cinematic, monochrome (white\u002Fblack), sharp-edged, with a dual-font headline system.\n\n**0.2 Page Sections (in this exact order)**\n1. Transparent Navbar (fixed, with theme toggle)\n2. Hero — full-screen video background\n3. Features — 3 cards\n4. How It Works — 3 steps\n5. Testimonials — 3 quotes\n6. Pricing — 3 tiers (middle tier featured)\n7. FAQ — accordion\n8. Final CTA — email capture\n9. Footer — secondary link columns\n\n**0.3 Color Palette (translated from source spec — all copy and tokens in English)**\n- Pure White `#FFFFFF` (primary text on dark), White 75% `rgba(255,255,255,0.75)` (secondary text on dark), Off-White `#f8f8f8` (CTA surface), Text Black `#171717` (CTA text \u002F light-mode text)\n- White\u002F10 `rgba(255,255,255,0.1)` (borders, hover washes), White\u002F90 `rgba(255,255,255,0.9)` (badge inner pill), transparent navbar\u002Foverlays\n- The palette is strictly monochrome. Do not introduce brand hues; `--text-success` \u002F `--text-error` tokens exist only for form feedback states.\n\n**0.4 Typography (Google Fonts, mandatory)**\n- **Barlow** (weights 300, 400, 500, 600) — all UI\u002Fbody text → `--font-base`\n- **Instrument Serif** (400, italic) — poetic emphasis only → `--font-accent`, applied via a reusable `.accent-font` class (`font-family: var(--font-accent); font-style: italic;`)\n- Load both via Google Fonts `\u003Clink>` tags with `preconnect`. Headline: Line 1 in Barlow Light, Line 2 in Instrument Serif Italic (see 4.2).\n\n**0.5 Signature Visual Effects (must all be present)**\n- Full-screen hero video: `autoplay, loop, muted, playsInline`, `object-fit: cover`, **no color overlays, no filters**\n- Navbar: fully transparent, no background fill, no border strokes (default state)\n- \"Featured in Fortune\" badge: liquid glass — outer ring `rgba(255,255,255,0.1)` + `backdrop-filter: blur(4px)`, inner pill `rgba(255,255,255,0.9)` + `backdrop-filter: blur(8px)`\n- Sharp buttons: `border-radius: 2px`, off-white `#f8f8f8` background, `#171717` Barlow-medium text\n- Four solid white **7×7px squares** at the four corners of the hero content container\n- `transition-colors` (smooth color transitions) on all interactive elements\n- `padding-bottom: 250px` on the hero content container\n\n**0.6 Fixed Copy (use verbatim) & Copywriting Rules**\n- Badge: `Featured in Fortune`\n- Headline Line 1: `Agency that makes your` (Barlow Light, white)\n- Headline Line 2: `videos & reels viral` (Instrument Serif Italic, white)\n- Sub-headline (write in this spirit, max ~2 sentences): agency turns raw footage into scroll-stopping, algorithm-engineered short-form video.\n- Hero CTAs: `Start Going Viral` (→ `#pricing`) and `See How It Works` (→ `#how-it-works`)\n- **All user-facing copy must be written in English.** Write realistic, concise, on-brand copy for every section (full suggested copy is provided in Section 4). **Lorem ipsum is forbidden.**\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`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target everything via class or ID selectors. HTML stays semantic and styling-agnostic: changing the look must never require markup edits.\n- No inline `\u003Cstyle>` blocks. No inline `\u003Cscript>` blocks — exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens as CSS variables. Dark is the **native\u002Fdefault theme** of this design; light is a full override. Every light background token must pair with dark text and vice versa — enforce the pairing in both themes.\n\n```css\n:root { \u002F* DARK — default *\u002F\n  color-scheme: dark;\n  --bg-primary: #0a0a0a;\n  --bg-secondary: #171717;\n  --text-primary: #ffffff;\n  --text-secondary: rgba(255,255,255,0.75);\n  --text-success: #4ade80;\n  --text-error: #f87171;\n  --primary: #f8f8f8;        \u002F* action surface (CTA) *\u002F\n  --primary-hover: #ffffff;\n  --on-primary: #171717;     \u002F* text on action surface *\u002F\n  --secondary: rgba(255,255,255,0.1); \u002F* subtle fill \u002F hover wash *\u002F\n  --border-default: rgba(255,255,255,0.1);\n  --border-success: rgba(74,222,128,0.6);\n  --border-error: rgba(248,113,113,0.6);\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);\n  --shadow-md: 0 10px 30px rgba(0,0,0,0.55);\n  --z-nav: 900; --z-dropdown: 1000; --z-modal: 1050; --z-toast: 1100;\n}\nhtml.light { \u002F* LIGHT *\u002F\n  color-scheme: light;\n  --bg-primary: #fefefe;      \u002F* never #ffffff *\u002F\n  --bg-secondary: #f4f4f2;\n  --text-primary: #171717;\n  --text-secondary: rgba(23,23,23,0.68);\n  --text-success: #15803d;\n  --text-error: #b91c1c;\n  --primary: #171717;         \u002F* inverted for contrast pairing *\u002F\n  --primary-hover: #000000;\n  --on-primary: #fefefe;\n  --secondary: rgba(23,23,23,0.08);\n  --border-default: rgba(23,23,23,0.12);\n  --border-success: rgba(21,128,61,0.6);\n  --border-error: rgba(185,28,28,0.6);\n  --shadow-sm: 0 1px 2px rgba(23,23,23,0.08);\n  --shadow-md: 0 10px 30px rgba(23,23,23,0.12);\n}\n:root { \u002F* shared, theme-independent *\u002F\n  --font-base: 'Barlow', sans-serif;\n  --font-accent: 'Instrument Serif', serif;\n  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px;\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n- The sharp design language means buttons, inputs, and cards all use `--radius-sm` (2px). The badge pill is the single rounded exception (`border-radius: 999px`) because the spec calls it a pill.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode is the default theme; a full light theme must also be implemented via the `html.light` token override above.\n- **Theme switching must be seamless** — only CSS variables change; no HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage` (key `preferred-theme`, values `dark`\u002F`light`); on first visit fall back to `prefers-color-scheme`; if the OS expresses no preference, default to dark. The theme-init logic must be the first statement in `script.js`.\n- **Visible toggle** in the navbar: a 44×44px button with Google Material Symbols (`light_mode` \u002F `dark_mode`), correct `aria-pressed` state (true = dark active), and an `aria-label` that updates (\"Switch to light theme\" \u002F \"Switch to dark theme\").\n- **Hero exception (explicit):** the hero is media-driven and does **not** switch themes — its white-on-video treatment is fixed in both themes. All other sections switch tokens.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless a sub-rule below documents an explicit exception (e.g., text-left card columns).\n- Mobile-first: all multi-column flex rows collapse to `flex-direction: column` at small breakpoints. **No horizontal scrolling at any viewport ≥ 320px.** Fluid type via `clamp()`.\n\n**1.5 Styling Approach**\n- Hand-authored custom CSS in `style.css` (the source spec provides raw custom CSS; no CSS framework CDN or build step). Organize the file with comment section dividers (Tokens, Base, Components, Sections, Utilities, Motion).\n- Reusable component classes required: `.btn`, `.btn-cta`, `.btn-ghost`, `.card`, `.input-group`, `.section-head`, `.accent-font`, `.sr-only`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Google Fonts `\u003Clink>` for Barlow (300;400;500;600) and Instrument Serif (400 italic), plus the Material Symbols Rounded stylesheet loaded **with the FILL axis available** so filled icons (testimonial stars) are possible via `font-variation-settings: 'FILL' 1`.\n- Icons are Google Material Symbols only, e.g. `\u003Cspan class=\"material-symbols-rounded\">bolt\u003C\u002Fspan>`. **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\nAll states styled via CSS classes; base `.btn` is `display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.875rem 1.75rem; font: 500 1rem var(--font-base); border-radius: var(--radius-sm); cursor: pointer;` with `transition: background-color\u002Fcolor\u002Fborder-color var(--transition-fast) var(--ease-standard)`.\n- **Default:** `.btn-cta` = `background: var(--primary); color: var(--on-primary);` (dark theme: `#f8f8f8` bg \u002F `#171717` text per spec; light theme auto-inverts via tokens). `.btn-ghost` = transparent bg, `1px solid var(--border-default)`, text `var(--text-primary)`.\n- **Hover:** `.btn-cta` shifts `var(--primary)` → `var(--primary-hover)` (dark: `#f8f8f8` → `#ffffff` per spec). `.btn-ghost` gains `background: var(--secondary)`.\n- **Focus:** `:focus-visible` ring — `outline: 2px solid var(--text-primary); outline-offset: 2px;` — visible in both themes and over the video.\n- **Active\u002Fpressed:** `transform: scale(0.97)` with a fast transform transition.\n- **Loading:** `.btn.is-loading` — `pointer-events: none` (prevents double-clicks); label swaps to a rotating Material Symbol `progress_activity` spinner; button dimensions must not change (give the submit button a `min-width` equal to its resting width).\n- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` tinted via `--text-success` \u002F `--text-error` tokens, always paired with an icon (`check` \u002F `error`) — never color alone.\n- **Danger:** define `.btn-danger` (distinct red treatment, readable in both themes) even though this page may not use it.\n\n**2.2 Cards**\n- **Default:** Flexbox column; `background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2rem;` *Documented alignment exception:* content columns use `align-items: flex-start` for left-aligned text, or `center` where the section spec calls for centered cards.\n- **Hover:** `transform: translateY(-2px); box-shadow: var(--shadow-md);` border brightens — transition with `var(--transition-normal)`.\n- **Focus-within:** border-color shifts to `var(--text-primary)` when a child link\u002Fbutton is focused.\n- **Loading (skeleton):** define `.skeleton` shimmer styles (gradient sweep keyframes, `--radius-sm`) in CSS, ready for async content.\n- **Empty state:** define a `.card--empty` pattern (Material Symbol `videocam_off` + short guidance text), even if not rendered by default.\n\n**2.3 Forms & Inputs**\nUsed by the Final CTA email capture (4.8). Structure: `.input-group` flex column wrapping a `\u003Clabel>`, the field, and a dedicated feedback container `\u003Cp class=\"input-group__feedback\" aria-live=\"polite\">`.\n- **States:** empty; focused (`border-color: var(--text-primary)` + `box-shadow: 0 0 0 3px var(--secondary)` ring); filled; valid (`--border-success` + `check` icon); invalid (`--border-error`, error icon, error message in `--text-error` inside the aria-live region); disabled (`opacity: 0.5; cursor: not-allowed`); read-only.\n- Input: `background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); min-height: 48px;` Label is programmatically associated via `for`\u002F`id` (may be visually hidden with `.sr-only`, never removed).\n\n**2.4 FAQ Accordion (component)**\n- Each item: `\u003Ch3>\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"…\" aria-labelledby pairing\">` + panel with `role=\"region\"`.\n- Open\u002Fclose animated in pure CSS via the `grid-template-rows: 0fr → 1fr` technique with `transition: grid-template-rows var(--transition-normal) var(--ease-standard)` (this is an animation technique, not page layout).\n- Chevron Material Symbol `expand_more` rotates 180° when open. Fully keyboard operable (native `\u003Cbutton>`); items toggle independently.\n\n**2.5 Overlays**\nNo modal\u002Fpopup is required for this build — do not add one. (If one is ever introduced later, it must follow focus-trap, `Esc`, backdrop-click, and `--z-modal` rules.)\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n**3.1 Responsive by Default**\nFluid `clamp()` typography, flex wrap\u002Fcolumn collapse at breakpoints, `scroll-margin-top: 96px` on all anchored sections, zero horizontal overflow.\n\n**3.2 Motion**\n- All state changes transition via the tokens (`transition-colors` behavior per the spec: background-color\u002Fcolor\u002Fborder-color with `--transition-fast`).\n- `prefers-reduced-motion: reduce` disables transitions, animations, shimmer, and smooth scrolling — **and the JS pauses the hero video** (poster\u002Ffallback remains).\n\n**3.3 Accessibility**\n- WCAG AA contrast in both themes. Semantic HTML5 throughout (`header`, `nav`, `main`, `section`, `figure`, `footer`); correct ARIA on the accordion, mobile menu, and theme toggle; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and loading.\n- **Never rely on color alone** — every error\u002Fsuccess pairs color with icon + text.\n\n**3.4 Mandatory Visual Feedback**\nEvery hover, click, focus, and submission produces a visible state change.\n\n**3.5 Video Overlay Exception (explicit)**\nThe spec forbids color overlays\u002Ffilters on the hero video — preserve this. **Accessibility exception:** select a stock clip that is predominantly dark in its upper\u002Fcentral region (rays glow from bottom center), and a subtle `text-shadow: 0 1px 2px rgba(0,0,0,0.35)` on hero text is permitted solely to guarantee legible white text.\n\n---\n\n## 4. PAGE SECTION BUILD REQUIREMENTS\n\n**4.1 Transparent Navbar**\n- `\u003Cheader class=\"nav\">` fixed top, `z-index: var(--z-nav)`; inner container max-width 1200px, flex, `align-items: center`, `justify-content: space-between`, height 76px.\n- **Default state (over hero):** `background: transparent; border: none;` — logo and all links pure white in both themes. Links: Barlow 400, 15px; hover gains `background: rgba(255,255,255,0.1)` (per spec), `border-radius: var(--radius-sm)`, padding `0.5rem 0.75rem`.\n- Links: Features, How It Works, Testimonials, Pricing, FAQ. Logo wordmark `VIRALREEL` (Barlow 600, uppercase, letter-spacing 0.12em). Right cluster: theme toggle (2.1\u002F1.3), a small `.btn-cta` \"Start Now\" → `#pricing` (desktop), and a mobile menu button (`menu` icon, visible ≤ 820px).\n- **Scrolled state — explicit exception:** the \"no background\" rule applies to the hero state. Once the user scrolls past the hero (IntersectionObserver on the hero section), add `.nav--scrolled`: theme-aware glass backdrop (`rgba` of `--bg-primary` at ~85% + `backdrop-filter: blur(12px)`), `border-bottom: 1px solid var(--border-default)`, links switch to `var(--text-primary)`, hover wash becomes `var(--secondary)` (white\u002F10 on dark, black\u002F10 on light).\n- **Mobile menu:** button toggles a glass dropdown panel (`--z-dropdown`), `aria-expanded` + `aria-controls`; closes on `Esc` and outside click; focus returns to the menu button.\n\n**4.2 Hero**\n- `\u003Csection class=\"hero\">`: `min-height: 100svh; position: relative; overflow: hidden; background: #0a0a0a;` (fallback if video fails).\n- **Video:** `\u003Cvideo class=\"hero__video\">` — `position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;` attributes `autoplay loop muted playsinline preload=\"metadata\" poster=\"…\" aria-hidden=\"true\"`; **no overlays, no filters.** Source: a **direct royalty-free MP4 URL** (Coverr \u002F Pexels Videos \u002F Pixabay; search terms: \"glowing rays\", \"light rays dark\", \"blurry lasers abstract\", \"god rays\") showing glowing rays emanating from bottom center on a dark field; include a matching dark poster frame.\n- **Content container** `.hero__content`: `position: relative; max-width: 960px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; padding: 9rem 2rem 250px;` — the **250px bottom padding is mandatory on desktop**; reduce to ~120px at ≤ 640px (explicit responsive exception).\n- **Corner accents:** four `.hero__corner` spans — `width: 7px; height: 7px; background: #ffffff; position: absolute;` pinned to the container's four corners (top-left, top-right, bottom-left, bottom-right, offset 0).\n- **Badge:** `.hero__badge-outer` — `display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); backdrop-filter: blur(4px);` containing `.hero__badge-inner` — `display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); color: #171717; font: 500 0.8125rem var(--font-base);` with a filled `stars` icon + text `Featured in Fortune`.\n- **Headline:** `\u003Ch1>` with two lines — Line 1 `Agency that makes your`: Barlow, `font-weight: 300`, `font-size: clamp(2.5rem, 6.5vw, 4rem)` (64px desktop), `#ffffff`, line-height 1.05. Line 2 `videos & reels viral`: `.accent-font`, same clamp size, `#ffffff`.\n- **Sub-headline:** `max-width: 36rem; color: rgba(255,255,255,0.75); font-size: 1.0625rem; line-height: 1.6;` realistic 1–2 sentence copy.\n- **CTAs:** `.hero__actions` flex row (column ≤ 480px), gap 1rem: `.btn-cta` \"Start Going Viral\" → `#pricing`; `.btn-ghost` \"See How It Works\" → `#how-it-works`. **Hero-scoped override:** inside `.hero`, ghost buttons are white text with `rgba(255,255,255,0.3)` border and `rgba(255,255,255,0.1)` hover fill in both themes (the hero never switches).\n- Smooth anchor scrolling via `html { scroll-behavior: smooth; }` with the reduced-motion override.\n\n**4.3 Features** (`#features`)\nReusable `.section-head` (centered): overline (Barlow 500, 13px, uppercase, letter-spacing 0.18em, `var(--text-secondary)`), `\u003Ch2>` in Barlow 500 `clamp(2rem, 4.5vw, 3rem)` with one `.accent-font` italic word, one-sentence sub in `var(--text-secondary)`.\n- Overline `WHAT WE DO`; H2: `Engineered to stop the \u003Cem class=\"accent-font\">scroll\u003C\u002Fem>`.\n- 3 `.card`s, flex row with wrap (`flex: 1 1 300px`), gap `var(--spacing-gap)`; column on mobile. Centered content (documented exception: column + `align-items: center`). Each: 44px circular icon chip (`background: var(--secondary)`, Material Symbol in `var(--text-primary)`), Barlow 600 title, `var(--text-secondary)` body. All card states per 2.2.\n- Copy: `bolt` **Hook Engineering** — \"Your first three seconds are engineered to stop the scroll — tested hooks, pattern interrupts, and openings built for retention.\" · `movie` **Platform-Native Editing** — \"Cuts, captions, pacing, and sound tailored to how TikTok, Reels, and Shorts actually rank content.\" · `trending_up` **Trend Intelligence** — \"We monitor sounds, formats, and trends daily so your videos ride the algorithm instead of chasing it.\"\n\n**4.4 How It Works** (`#how-it-works`)\n- Overline `THE PROCESS`; H2: `From raw footage to \u003Cem class=\"accent-font\">viral\u003C\u002Fem> in three steps`.\n- 3 steps, flex row → column. Each `.step`: index `01\u002F02\u002F03` in `.accent-font` italic ~3rem, Material Symbol icon, Barlow 600 title, secondary body.\n- Copy: `01` `upload` **Send Your Brief** — \"Drop your footage, goals, and brand voice. We handle everything after that.\" · `02` `tune` **We Edit & Optimize** — \"Hooks, captions, sound, pacing — every frame is built and tested for the algorithm.\" · `03` `rocket_launch` **You Go Viral** — \"Publish, watch the metrics climb, and iterate with weekly performance reviews.\"\n\n**4.5 Testimonials**\n- Overline `PROOF`; H2: `Brands that \u003Cem class=\"accent-font\">broke the internet\u003C\u002Fem>`.\n- 3 `.card`s (left-aligned content — documented exception). Each: five **filled** `star` icons in `var(--text-primary)` (monochrome — no gold); `\u003Cfigure>\u003Cblockquote>` quote set in `.accent-font` italic ~1.25rem; `\u003Cfigcaption>` with a 40px initial-letter avatar circle (`background: var(--secondary)`), Barlow 600 name, `var(--text-secondary)` role\u002Fcompany.\n- Copy: **Maya Chen, CMO, Nova Fitness** — \"12M organic views in our first month. Our old agency took a year to hit that.\" · **Diego Alvarez, Founder, GlowSkin Co.** — \"One reel did 4.2M views and sold out our serum twice. The hooks are unreal.\" · **Priya Nair, Head of Content, TechTonic** — \"They rebuilt our entire format. Retention went from 21% to 68% in six weeks.\"\n\n**4.6 Pricing** (`#pricing`)\n- Overline `PLANS`; H2: `Pick your \u003Cem class=\"accent-font\">velocity\u003C\u002Fem>`.\n- 3 `.pricing-card`s, flex row → column. Featured middle card `.pricing-card--featured`: `border-color: var(--text-primary)`, `box-shadow: var(--shadow-md)`, absolute pill badge `MOST POPULAR` (`background: var(--primary); color: var(--on-primary)`, Barlow 600, 12px, radius 999px).\n- Price: Barlow 300, large (e.g., 2.75rem) with a smaller `\u002Fmonth` suffix in `var(--text-secondary)`. Feature lists: `check` icons in `var(--text-primary)` (monochrome palette; success tokens are reserved for feedback states).\n- Copy: **Starter $1,490\u002Fmo** — 8 short-form videos\u002Fmonth · 1 platform · Hook research & scripting · Monthly performance report. **Growth $3,490\u002Fmo (featured)** — 20 short-form videos\u002Fmonth · 3 platforms · A\u002FB tested hooks & thumbnails · Weekly analytics & iteration · Dedicated editor. **Viral — \"Let's talk\"** — Unlimited video scope · Full production & creators · Trend team on retainer · Slack access & daily reports.\n- CTAs: featured uses `.btn-cta` \"Start Going Viral\"; others `.btn-ghost` (\"Choose Starter\" \u002F \"Book a Call\") — all `href=\"#cta\"`, full button states per 2.1.\n\n**4.7 FAQ** (`#faq`)\n- Overline `FAQ`; H2: `Questions, \u003Cem class=\"accent-font\">answered\u003C\u002Fem>`. Container `max-width: 760px`, centered. Accordion per 2.4.\n- Copy (6 items): **How fast is the turnaround?** — \"Most videos are delivered within 48–72 hours of receiving your footage. Rush delivery is available on Growth and Viral plans.\" · **Which platforms do you cover?** — \"TikTok, Instagram Reels, YouTube Shorts, and Facebook — each edit is formatted and optimized per platform.\" · **Do you write the scripts and hooks?** — \"Yes. Every video ships with a researched hook, script, and caption written for your niche and audience.\" · **How many revisions do I get?** — \"Two structured revision rounds per video are included on every plan — most clients need zero.\" · **Do you guarantee views?** — \"No honest agency can guarantee virality. What we guarantee is a data-driven process: tested hooks, proven formats, and transparent weekly reporting.\" · **How do we get started?** — \"Send your brief through the form below. We reply within 24 hours with a plan and a kickoff call.\"\n\n**4.8 Final CTA** (`#cta`)\n- Centered `.cta-panel`: `max-width: 900px; position: relative; background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 4rem 2rem;` — **echo the corner-accent motif** with four 7×7px squares in `var(--text-primary)` at its corners.\n- H2: `Ready to go \u003Cem class=\"accent-font\">viral\u003C\u002Fem>?` + one supporting sentence. Email capture per 2.3: label \"Work email\" (`.sr-only`), input `type=\"email\"` placeholder `you@company.com`, `.btn-cta` submit \"Get My Viral Plan\" (fixed `min-width` for loading stability). Layout: flex row (input `flex: 1` + button) → column on mobile.\n- **JS flow:** validate email on submit → invalid: error border + icon + \"Please enter a valid work email address.\" in the `aria-live` region; valid: button enters loading (spinner, ~1.2s) → success state (`check` icon + \"Request Sent\") + live message \"Thanks — we'll reply within 24 hours.\" Every state change is visible and announced.\n\n**4.9 Footer**\n- `background: var(--bg-secondary); border-top: 1px solid var(--border-default); padding: 4rem 0 2rem;`\n- Top area (flex, wrap): brand block (VIRALREEL wordmark + tagline \"Short-form video engineered to go viral.\") + three link columns — **Company:** About, Case Studies, Careers, Contact · **Resources:** Blog, Hook Library, Press Kit · **Legal:** Privacy Policy, Terms of Service. Column headings: Barlow 600, 13px, uppercase; links `var(--text-secondary)` → hover `var(--text-primary)` with `transition-colors`. Internal anchors where possible; otherwise `href=\"#\"` with full hover\u002Ffocus feedback.\n- Social text links (Instagram, TikTok, YouTube, X) and a bottom bar: `© \u003Ccurrent year> VIRALREEL. All rights reserved.` (year injected by JS) + a \"Back to top\" anchor with `arrow_upward` icon.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n**5.1 Files**\n- Exactly three files: `index.html`, `style.css`, `script.js`. `index.html` includes `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` (\"VIRALREEL — The Agency That Makes Your Videos & Reels Viral\"), meta description, the Google Fonts\u002FMaterial Symbols links, and a **single** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline styles, no inline scripts, no `style` attributes.\n- `script.js` (vanilla, minimal): theme init\u002Ftoggle\u002Fpersistence (first statement), nav scrolled state, mobile menu disclosure, FAQ accordion, email form validation + simulated loading→success, reduced-motion video pause, footer year. No JS for styling.\n\n**5.2 Naming Convention**\n- **BEM only** (`block__element--modifier`), e.g. `.hero__badge-outer`, `.pricing-card--featured`, `.faq__trigger` — one convention across all files; never mix conventions.\n\n**5.3 Copy**\n- All user-facing copy in **English**, realistic and final — the hero copy verbatim from 0.6, the remaining sections per Section 4. No lorem ipsum, no TODO markers, no unrequested placeholder content.\n\n**5.4 Acceptance Checklist (self-verify before delivering)**\n- [ ] Hero video autoplays (muted, looped, `playsinline`, covered, overlay-free) with a working royalty-free MP4 URL and poster\n- [ ] Transparent navbar over hero; scrolled glass state; mobile menu fully keyboard\u002FARIA compliant\n- [ ] Liquid-glass badge, dual-font 64px headline, 2px-radius CTAs, four 7×7px corner squares, 250px hero bottom padding — all present\n- [ ] Dark default + full light theme; toggle with `aria-pressed`\u002F`aria-label`; `localStorage` persistence; `prefers-color-scheme` fallback\n- [ ] Every button\u002Finput\u002Fcard state from Section 2 implemented and reachable\n- [ ] Form flow shows empty → focus → valid\u002Finvalid → loading → success with `aria-live` announcements\n- [ ] Full keyboard pass, visible focus rings, AA contrast in both themes, `prefers-reduced-motion` honored (video pauses)\n- [ ] No horizontal scroll from 320px up; all 9 sections present in order\n",1791954989521]