Agency Viral Videos & Reels Hero demo
Agency Viral Videos & Reels Hero

A high-energy, full-screen hero design built for viral video and reels agencies, emphasizing bold visuals and dynamic social-media-driven impact.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 25.9 KB · 3517 words
# BUILD SPECIFICATION — LANDING PAGE: "AGENCY VIRAL VIDEOS & REELS HERO"

**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.

---

## 0. PROJECT BRIEF & VISUAL DIRECTION

**0.1 Product & Theme**
A 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/creative aesthetic. Cinematic, monochrome (white/black), sharp-edged, with a dual-font headline system.

**0.2 Page Sections (in this exact order)**
1. Transparent Navbar (fixed, with theme toggle)
2. Hero — full-screen video background
3. Features — 3 cards
4. How It Works — 3 steps
5. Testimonials — 3 quotes
6. Pricing — 3 tiers (middle tier featured)
7. FAQ — accordion
8. Final CTA — email capture
9. Footer — secondary link columns

**0.3 Color Palette (translated from source spec — all copy and tokens in English)**
- 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 / light-mode text)
- White/10 `rgba(255,255,255,0.1)` (borders, hover washes), White/90 `rgba(255,255,255,0.9)` (badge inner pill), transparent navbar/overlays
- The palette is strictly monochrome. Do not introduce brand hues; `--text-success` / `--text-error` tokens exist only for form feedback states.

**0.4 Typography (Google Fonts, mandatory)**
- **Barlow** (weights 300, 400, 500, 600) — all UI/body text → `--font-base`
- **Instrument Serif** (400, italic) — poetic emphasis only → `--font-accent`, applied via a reusable `.accent-font` class (`font-family: var(--font-accent); font-style: italic;`)
- Load both via Google Fonts `<link>` tags with `preconnect`. Headline: Line 1 in Barlow Light, Line 2 in Instrument Serif Italic (see 4.2).

**0.5 Signature Visual Effects (must all be present)**
- Full-screen hero video: `autoplay, loop, muted, playsInline`, `object-fit: cover`, **no color overlays, no filters**
- Navbar: fully transparent, no background fill, no border strokes (default state)
- "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)`
- Sharp buttons: `border-radius: 2px`, off-white `#f8f8f8` background, `#171717` Barlow-medium text
- Four solid white **7×7px squares** at the four corners of the hero content container
- `transition-colors` (smooth color transitions) on all interactive elements
- `padding-bottom: 250px` on the hero content container

**0.6 Fixed Copy (use verbatim) & Copywriting Rules**
- Badge: `Featured in Fortune`
- Headline Line 1: `Agency that makes your` (Barlow Light, white)
- Headline Line 2: `videos & reels viral` (Instrument Serif Italic, white)
- Sub-headline (write in this spirit, max ~2 sentences): agency turns raw footage into scroll-stopping, algorithm-engineered short-form video.
- Hero CTAs: `Start Going Viral` (→ `#pricing`) and `See How It Works` (→ `#how-it-works`)
- **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.**

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target everything via class or ID selectors. HTML stays semantic and styling-agnostic: changing the look must never require markup edits.
- No inline `<style>` blocks. No inline `<script>` blocks — exactly one `<script src="script.js" defer></script>` reference.

**1.2 CSS Variables & Theme Tokens**
Define all tokens as CSS variables. Dark is the **native/default 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.

```css
:root { /* DARK — default */
  color-scheme: dark;
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.75);
  --text-success: #4ade80;
  --text-error: #f87171;
  --primary: #f8f8f8;        /* action surface (CTA) */
  --primary-hover: #ffffff;
  --on-primary: #171717;     /* text on action surface */
  --secondary: rgba(255,255,255,0.1); /* subtle fill / hover wash */
  --border-default: rgba(255,255,255,0.1);
  --border-success: rgba(74,222,128,0.6);
  --border-error: rgba(248,113,113,0.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.55);
  --z-nav: 900; --z-dropdown: 1000; --z-modal: 1050; --z-toast: 1100;
}
html.light { /* LIGHT */
  color-scheme: light;
  --bg-primary: #fefefe;      /* never #ffffff */
  --bg-secondary: #f4f4f2;
  --text-primary: #171717;
  --text-secondary: rgba(23,23,23,0.68);
  --text-success: #15803d;
  --text-error: #b91c1c;
  --primary: #171717;         /* inverted for contrast pairing */
  --primary-hover: #000000;
  --on-primary: #fefefe;
  --secondary: rgba(23,23,23,0.08);
  --border-default: rgba(23,23,23,0.12);
  --border-success: rgba(21,128,61,0.6);
  --border-error: rgba(185,28,28,0.6);
  --shadow-sm: 0 1px 2px rgba(23,23,23,0.08);
  --shadow-md: 0 10px 30px rgba(23,23,23,0.12);
}
:root { /* shared, theme-independent */
  --font-base: 'Barlow', sans-serif;
  --font-accent: 'Instrument Serif', serif;
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px;
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
```
- 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.

**1.3 Mandatory Dark Mode Support**
- Dark mode is the default theme; a full light theme must also be implemented via the `html.light` token override above.
- **Theme switching must be seamless** — only CSS variables change; no HTML restructuring.
- **Persistence:** store the user's choice in `localStorage` (key `preferred-theme`, values `dark`/`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`.
- **Visible toggle** in the navbar: a 44×44px button with Google Material Symbols (`light_mode` / `dark_mode`), correct `aria-pressed` state (true = dark active), and an `aria-label` that updates ("Switch to light theme" / "Switch to dark theme").
- **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.

**1.4 Flexbox Layout & Mobile-First Alignment**
- 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).
- 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()`.

**1.5 Styling Approach**
- 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).
- Reusable component classes required: `.btn`, `.btn-cta`, `.btn-ghost`, `.card`, `.input-group`, `.section-head`, `.accent-font`, `.sr-only`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Google Fonts `<link>` 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`.
- Icons are Google Material Symbols only, e.g. `<span class="material-symbols-rounded">bolt</span>`. **Inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
All 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/color/border-color var(--transition-fast) var(--ease-standard)`.
- **Default:** `.btn-cta` = `background: var(--primary); color: var(--on-primary);` (dark theme: `#f8f8f8` bg / `#171717` text per spec; light theme auto-inverts via tokens). `.btn-ghost` = transparent bg, `1px solid var(--border-default)`, text `var(--text-primary)`.
- **Hover:** `.btn-cta` shifts `var(--primary)` → `var(--primary-hover)` (dark: `#f8f8f8` → `#ffffff` per spec). `.btn-ghost` gains `background: var(--secondary)`.
- **Focus:** `:focus-visible` ring — `outline: 2px solid var(--text-primary); outline-offset: 2px;` — visible in both themes and over the video.
- **Active/pressed:** `transform: scale(0.97)` with a fast transform transition.
- **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).
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`
- **Success/Error:** `.btn--success` / `.btn--error` tinted via `--text-success` / `--text-error` tokens, always paired with an icon (`check` / `error`) — never color alone.
- **Danger:** define `.btn-danger` (distinct red treatment, readable in both themes) even though this page may not use it.

**2.2 Cards**
- **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.
- **Hover:** `transform: translateY(-2px); box-shadow: var(--shadow-md);` border brightens — transition with `var(--transition-normal)`.
- **Focus-within:** border-color shifts to `var(--text-primary)` when a child link/button is focused.
- **Loading (skeleton):** define `.skeleton` shimmer styles (gradient sweep keyframes, `--radius-sm`) in CSS, ready for async content.
- **Empty state:** define a `.card--empty` pattern (Material Symbol `videocam_off` + short guidance text), even if not rendered by default.

**2.3 Forms & Inputs**
Used by the Final CTA email capture (4.8). Structure: `.input-group` flex column wrapping a `<label>`, the field, and a dedicated feedback container `<p class="input-group__feedback" aria-live="polite">`.
- **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.
- 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`/`id` (may be visually hidden with `.sr-only`, never removed).

**2.4 FAQ Accordion (component)**
- Each item: `<h3><button class="faq__trigger" aria-expanded="false" aria-controls="…" aria-labelledby pairing">` + panel with `role="region"`.
- Open/close 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).
- Chevron Material Symbol `expand_more` rotates 180° when open. Fully keyboard operable (native `<button>`); items toggle independently.

**2.5 Overlays**
No modal/popup 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.)

---

## 3. CORE UX & MICRO-INTERACTION RULES

**3.1 Responsive by Default**
Fluid `clamp()` typography, flex wrap/column collapse at breakpoints, `scroll-margin-top: 96px` on all anchored sections, zero horizontal overflow.

**3.2 Motion**
- All state changes transition via the tokens (`transition-colors` behavior per the spec: background-color/color/border-color with `--transition-fast`).
- `prefers-reduced-motion: reduce` disables transitions, animations, shimmer, and smooth scrolling — **and the JS pauses the hero video** (poster/fallback remains).

**3.3 Accessibility**
- 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/focus order; full keyboard operability; `aria-live` regions for form feedback and loading.
- **Never rely on color alone** — every error/success pairs color with icon + text.

**3.4 Mandatory Visual Feedback**
Every hover, click, focus, and submission produces a visible state change.

**3.5 Video Overlay Exception (explicit)**
The spec forbids color overlays/filters on the hero video — preserve this. **Accessibility exception:** select a stock clip that is predominantly dark in its upper/central 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.

---

## 4. PAGE SECTION BUILD REQUIREMENTS

**4.1 Transparent Navbar**
- `<header class="nav">` fixed top, `z-index: var(--z-nav)`; inner container max-width 1200px, flex, `align-items: center`, `justify-content: space-between`, height 76px.
- **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`.
- Links: Features, How It Works, Testimonials, Pricing, FAQ. Logo wordmark `VIRALREEL` (Barlow 600, uppercase, letter-spacing 0.12em). Right cluster: theme toggle (2.1/1.3), a small `.btn-cta` "Start Now" → `#pricing` (desktop), and a mobile menu button (`menu` icon, visible ≤ 820px).
- **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/10 on dark, black/10 on light).
- **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.

**4.2 Hero**
- `<section class="hero">`: `min-height: 100svh; position: relative; overflow: hidden; background: #0a0a0a;` (fallback if video fails).
- **Video:** `<video 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 / Pexels Videos / 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.
- **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).
- **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).
- **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`.
- **Headline:** `<h1>` 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`.
- **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.
- **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).
- Smooth anchor scrolling via `html { scroll-behavior: smooth; }` with the reduced-motion override.

**4.3 Features** (`#features`)
Reusable `.section-head` (centered): overline (Barlow 500, 13px, uppercase, letter-spacing 0.18em, `var(--text-secondary)`), `<h2>` in Barlow 500 `clamp(2rem, 4.5vw, 3rem)` with one `.accent-font` italic word, one-sentence sub in `var(--text-secondary)`.
- Overline `WHAT WE DO`; H2: `Engineered to stop the <em class="accent-font">scroll</em>`.
- 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.
- 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."

**4.4 How It Works** (`#how-it-works`)
- Overline `THE PROCESS`; H2: `From raw footage to <em class="accent-font">viral</em> in three steps`.
- 3 steps, flex row → column. Each `.step`: index `01/02/03` in `.accent-font` italic ~3rem, Material Symbol icon, Barlow 600 title, secondary body.
- 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."

**4.5 Testimonials**
- Overline `PROOF`; H2: `Brands that <em class="accent-font">broke the internet</em>`.
- 3 `.card`s (left-aligned content — documented exception). Each: five **filled** `star` icons in `var(--text-primary)` (monochrome — no gold); `<figure><blockquote>` quote set in `.accent-font` italic ~1.25rem; `<figcaption>` with a 40px initial-letter avatar circle (`background: var(--secondary)`), Barlow 600 name, `var(--text-secondary)` role/company.
- 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."

**4.6 Pricing** (`#pricing`)
- Overline `PLANS`; H2: `Pick your <em class="accent-font">velocity</em>`.
- 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).
- Price: Barlow 300, large (e.g., 2.75rem) with a smaller `/month` suffix in `var(--text-secondary)`. Feature lists: `check` icons in `var(--text-primary)` (monochrome palette; success tokens are reserved for feedback states).
- Copy: **Starter $1,490/mo** — 8 short-form videos/month · 1 platform · Hook research & scripting · Monthly performance report. **Growth $3,490/mo (featured)** — 20 short-form videos/month · 3 platforms · A/B 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.
- CTAs: featured uses `.btn-cta` "Start Going Viral"; others `.btn-ghost` ("Choose Starter" / "Book a Call") — all `href="#cta"`, full button states per 2.1.

**4.7 FAQ** (`#faq`)
- Overline `FAQ`; H2: `Questions, <em class="accent-font">answered</em>`. Container `max-width: 760px`, centered. Accordion per 2.4.
- 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."

**4.8 Final CTA** (`#cta`)
- 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.
- H2: `Ready to go <em class="accent-font">viral</em>?` + 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.
- **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.

**4.9 Footer**
- `background: var(--bg-secondary); border-top: 1px solid var(--border-default); padding: 4rem 0 2rem;`
- 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/focus feedback.
- Social text links (Instagram, TikTok, YouTube, X) and a bottom bar: `© <current year> VIRALREEL. All rights reserved.` (year injected by JS) + a "Back to top" anchor with `arrow_upward` icon.

---

## 5. DELIVERABLE & OUTPUT FORMAT

**5.1 Files**
- Exactly three files: `index.html`, `style.css`, `script.js`. `index.html` includes `lang="en"`, viewport meta, descriptive `<title>` ("VIRALREEL — The Agency That Makes Your Videos & Reels Viral"), meta description, the Google Fonts/Material Symbols links, and a **single** `<script src="script.js" defer></script>`. No inline styles, no inline scripts, no `style` attributes.
- `script.js` (vanilla, minimal): theme init/toggle/persistence (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.

**5.2 Naming Convention**
- **BEM only** (`block__element--modifier`), e.g. `.hero__badge-outer`, `.pricing-card--featured`, `.faq__trigger` — one convention across all files; never mix conventions.

**5.3 Copy**
- 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.

**5.4 Acceptance Checklist (self-verify before delivering)**
- [ ] Hero video autoplays (muted, looped, `playsinline`, covered, overlay-free) with a working royalty-free MP4 URL and poster
- [ ] Transparent navbar over hero; scrolled glass state; mobile menu fully keyboard/ARIA compliant
- [ ] Liquid-glass badge, dual-font 64px headline, 2px-radius CTAs, four 7×7px corner squares, 250px hero bottom padding — all present
- [ ] Dark default + full light theme; toggle with `aria-pressed`/`aria-label`; `localStorage` persistence; `prefers-color-scheme` fallback
- [ ] Every button/input/card state from Section 2 implemented and reachable
- [ ] Form flow shows empty → focus → valid/invalid → loading → success with `aria-live` announcements
- [ ] Full keyboard pass, visible focus rings, AA contrast in both themes, `prefers-reduced-motion` honored (video pauses)
- [ ] No horizontal scroll from 320px up; all 9 sections present in order