# Customization Guide — Hero Section 10 (Interactive Scroll Storytelling)

This guide explains how to customize the assets, styling, and content of the Interactive Scroll Storytelling Hero Section (`Hero-10`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Brandmark:** Edit the text `Summit` or replace the inline SVG icon with your own signature or company logo:
  ```html
  <a href="#" class="logo-link">
    Summit
  </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 **Plus Jakarta Sans** (for headlines) and **Inter** (for body copy) loaded via Google Fonts.
- **Headline:** Update the `h1` tag inside the `.hero-left` container:
  ```html
  <h1 class="hero-title">
    Design <br>
    Beyond <br>
    <span class="gradient-text">Imagination.</span>
  </h1>
  ```
- **Introduction:** Locate `.hero-description` and update the paragraph.

---

## 3. Changing 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(18, 18, 20, 0.6); /* Glassmorphic card background */
  --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 */
  --color-cyan: #06b6d4;               /* Cyan accent */
  --color-emerald: #10b981;            /* soft emerald highlight */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 4. Customizing Scroll Storytelling Parameters
The scroll storytelling calculates viewport coordinates inside the scroll handler and applies scaling, rotations, and translates.
You can modify these parameter scales inside `script.js`:
- Locate `updateScrollEffects()` inside `script.js`.
- **Base Dashboard Scale:** The dashboard window scales up on scroll:
  ```javascript
  const scaleValue = 0.9 + (scrollPercent * 0.25); // Scales from 0.9 to 1.15
  ```
- **Rotate Tilt:** The X-axis tilt rotates on scroll:
  ```javascript
  const tiltX = -15 + (scrollPercent * 25); // Rotates from -15deg to +10deg
  ```
- **Floating Cards Offsets:** Adjust the translate multipliers:
  ```javascript
  card.style.transform = `translate3d(${moveX}px, ${moveY - (scrollPercent * 80)}px, 0)`;
  ```
  Adjusting the `80` multiplier will slide cards faster or slower on scroll page tracking.
