# Customization Guide — Hero Section 04 (Bento Grid SaaS)

This guide explains how to customize the assets, styling, grid cards, and layout ratios of the Bento Grid Hero Section (`Hero-04`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Brandmark:** Edit the text `Nexus` or replace it with your own company mark:
  ```html
  <a href="#" class="logo-group">
    <div class="logo-icon"><!-- Insert company SVG here --></div>
    <span class="logo-text">YourBrand</span>
  </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/headers) and **Inter** (for body copy) loaded via Google Fonts.
- **Headline:** Update the `h1` tag inside the `.hero-left` container. The `.gradient-text` class applies a dual-layer purple-to-blue linear color mask:
  ```html
  <h1 class="hero-title">
    Manage your SaaS <br>
    <span class="gradient-text">with Nexus Core.</span>
  </h1>
  ```
- **Description:** Locate `.hero-description` and update the paragraph.

---

## 3. Theme Colors
All colors, card backgrounds, and metric indicators are mapped to CSS custom variables in `:root` scope of `style.css`:
```css
:root {
  --color-bg: #050505;                 /* Main background (Obsidian black) */
  --color-card-bg: #111111;            /* Bento card background fill */
  --color-primary: #2563eb;            /* Electric Blue accent */
  --color-secondary: #a855f7;          /* Purple accent */
  --color-success: #10b981;            /* Emerald Green status accent */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 4. Customizing the Bento Grid
The Bento Grid uses CSS Grid inside `.bento-grid`. The grid is configured to map columns and rows dynamically on desktop.

### Spans & Ordering
To adjust the size or layout position of any card, edit the `grid-column` and `grid-row` spans in `style.css` under the corresponding class (e.g. `.card-preview`, `.card-revenue`, `.card-calendar`).
For example, to make the Revenue Card wider:
```css
.card-revenue {
  grid-column: span 3; /* Changed from span 2 */
}
```

---

## 5. Adjusting dialogue chat logs
The chat dialogue inside the AI Assistant Card is driven by an array inside `script.js`. Find `initChatWidget()` in `script.js` and edit the message objects:
```javascript
const chatSteps = [
  { sender: 'user', text: 'Generate revenue reports for Q2.' },
  { sender: 'ai', text: 'Analyzing database records... ⚙' },
  { sender: 'ai', text: '✓ Done! Revenue is up by +18.4% this quarter.' }
];
```
- You can add, remove, or modify dialogue items. The widget will type them out sequentially and auto-scroll to the bottom of the screen.

---

## 6. Adjusting Statistics & Counters
- **Statistics Grid:** The numbers in the statistics grid count up automatically. Edit the target numbers in the `data-count` attribute in `index.html`:
  ```html
  <span class="stat-value" data-count="120">0</span>
  ```
  The script will parse this number on viewport entry and count up cleanly.
