# Customization Guide — Hero Section 07 (Cinematic Video Hero)

This guide explains how to customize the assets, styling, and content of the Cinematic Video Hero Section (`Hero-07`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Brandmark:** Edit the text `Vertice` or replace the inline SVG icon with your own signature or company logo:
  ```html
  <a href="#" class="logo-link">
    <span class="logo-icon"><!-- Insert company SVG here --></span>
    Vertice
  </a>
  ```
- **Navigation Links:** Modify nav links inside `<nav class="main-nav">` in `index.html`. Make sure to sync edits to `<nav class="mobile-nav">`.

---

## 2. Text Content & Typography
The typography styles use **Syne** (for headlines) and **Inter** (for body copy) loaded via Google Fonts.
- **Headline:** Update the `h1` tag inside the `.hero-content` container. The `.gradient-text` class applies a dual-layer purple-to-blue linear color mask:
  ```html
  <h1 class="hero-title">
    Build <br>
    Something <br>
    <span class="gradient-text">Extraordinary.</span>
  </h1>
  ```
- **Introduction:** Locate `.hero-description` and update the paragraph.

---

## 3. Changing the Background Video
The hero uses a local video player at `assets/videos/hero-video.mp4`.
Search for the `<video>` element inside `index.html`:
```html
<video autoplay muted loop playsinline class="hero-video" poster="assets/images/poster.jpg">
  <source src="assets/videos/hero-video.mp4" type="video/mp4">
</video>
```
- Swap the source `src="assets/videos/hero-video.mp4"` with your own MP4 video.
- Optimize the video for web delivery (compress using Handbrake or ffmpeg, keep it under 3-5MB, resolve fast buffering parameters).
- Set `poster="assets/images/poster.jpg"` to a static JPG capture of your video. This serves as a graceful fallback while loading or on devices where video autoplay is turned off.

---

## 4. Customizing Theme Colors
All colors, card backgrounds, and gradient glows are mapped to CSS custom variables in `:root` scope of `style.css`:
```css
:root {
  --color-bg: #050505;                 /* Obsidian background */
  --color-card-bg: rgba(17, 17, 17, 0.7); /* Floating cards background fill */
  --color-text: #ffffff;               /* White text color */
  --color-text-muted: #8e8e93;         /* Muted Gray text color */
  --color-accent: #2563eb;             /* Electric Blue accent */
  --color-secondary: #a855f7;          /* Purple accent */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 5. Modifying Floating Cards
- **Stats Cards:** You can edit the text values (`100K+ Users`, stars rating, "Best Digital Experience" Nominee) directly in the HTML.
- **Micro-Interactions Parallax:** Custom cursor coordinate translations slide the badges. You can adjust the sensitivity speed by editing the `data-parallax-speed` attributes on card divs in `index.html`.
  - For example, `data-parallax-speed="-0.15"` shifts the card opposite to the cursor movement at 15% rate.
