# Unioklíma Product Website — Phase 1 Architecture
**Status:** Approved — Phase 2 in progress  
**Prepared:** 2026-06-26  
**Approved:** 2026-06-26

---

## 1. PROJECT SUMMARY

A clean, fast, SEO-first static HTML product catalogue for **BlueBox by Swegon** HVAC equipment distributed by **Unió Klíma Kft.** in Hungary.

The site is a **product catalogue, not a shop.** No cart, no pricing, no ordering, no wishlist, no comparison tools, no configurator. The user journey is simple:

**Category → Product → Enquiry**

**Technology:** HTML5 / CSS3 / Vanilla JavaScript only  
**Language:** Hungarian  
**Total pages:** 52

---

## 2. DATA SOURCE

**Primary source: CSV export** (`wc-product-export-26-6-2026-1782460998873.csv`)

The CSV contains all structured product data. Nothing is recreated manually.

| CSV field | Used for |
|---|---|
| `Név` | Product name (page H1, title tag) |
| `Rövid leírás` | Short introduction (product hero section) |
| `Leírás` | Full product description (cleaned HTML) |
| `Kategória` | Category mapping, navigation, breadcrumbs |
| `Képek` | Product images (hosted on unioklima.hu) |
| `Meta: rank_math_description` | Meta description (use as-is or improve) |
| `Meta: rank_math_focus_keyword` | Primary SEO keyword per product |

All 39 products confirmed in CSV. All have image URLs. 36 of 39 have pre-written meta descriptions.

---

## 3. WEBSITE ARCHITECTURE

```
HOME (index.html)
│
├── FŰTÉSI-HŰTÉSI MEGOLDÁSOK (futesi-hutesi-megoldasok.html) — Category L1
│   ├── Free-cooling rendszerek (free-cooling.html) — 10 products
│   ├── Levegőhűtéses folyadékhűtők (levegohuteses-folyadekhuok.html) — 10 products
│   ├── Levegőhűtéses multifunkciós hőszivattyúk (multifunkcios-hoszivattyu.html) — 3 products
│   ├── Rooftop klímaberendezések (rooftop.html) — 1 product
│   └── Vízhűtéses folyadékhűtők (vizhuteses-folyadekhuok.html) — 8 products
│
├── IT HŰTÉSI MEGOLDÁSOK (it-hutesi-megoldasok.html) — Category L1
│   ├── Precíziós perimeter hűtés (precizios-perimeter-hutes.html) — 4 products
│   └── Sorba telepíthető hűtőegységek (in-row-hutes.html) — 3 products
│
├── CÉGÜNKRŐL (cegunkrol.html)
├── KAPCSOLAT (kapcsolat.html)
└── 404 (404.html)
```

**Maximum depth to any product: 3 clicks from Homepage**

---

## 4. COMPLETE SITEMAP (52 pages)

### Core pages (4)
| File | Hungarian title |
|---|---|
| `index.html` | Kezdőlap |
| `cegunkrol.html` | Cégünkről |
| `kapcsolat.html` | Kapcsolat és ajánlatkérés |
| `404.html` | Az oldal nem található |

### Category pages (9)
| File | Title | Products |
|---|---|---|
| `futesi-hutesi-megoldasok.html` | Fűtési-hűtési megoldások | 32 |
| `free-cooling.html` | Free-cooling rendszerek | 10 |
| `levegohuteses-folyadekhuok.html` | Levegőhűtéses folyadékhűtők és hőszivattyúk | 10 |
| `multifunkcios-hoszivattyu.html` | Levegőhűtéses multifunkciós hőszivattyúk | 3 |
| `rooftop.html` | Rooftop klímaberendezések | 1 |
| `vizhuteses-folyadekhuok.html` | Vízhűtéses folyadékhűtők és hőszivattyúk | 8 |
| `it-hutesi-megoldasok.html` | IT Hűtési megoldások | 7 |
| `precizios-perimeter-hutes.html` | Precíziós perimeter hűtés | 4 |
| `in-row-hutes.html` | Sorba telepíthető (in-row) hűtőegységek | 3 |

### Product pages (39)
Full inventory in Section 5.

---

## 5. COMPLETE PRODUCT INVENTORY

All 39 products. Data sourced from CSV export.

---

### A. FREE-COOLING RENDSZEREK (10 products)
*Category page: `free-cooling.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox KAPPA Rev FC | `kappa-rev-fc.html` | BlueBox KAPPA Rev FC moduláris free-cooling folyadékhűtő nagy rendszerekhez. |
| BlueBox KAPPA Sky FC | `kappa-sky-fc.html` | BlueBox KAPPA Sky FC free-cooling folyadékhűtő inverteres csavarkompresszorral. |
| BlueBox SIGMA Sky FC/NG | `sigma-sky-fc-ng.html` | BlueBox SIGMA Sky FC/NG free-cooling folyadékhűtő 46–674 kW teljesítménnyel. |
| BlueBox TETRIS 2 FC | `tetris-2-fc.html` | BlueBox TETRIS 2 FC levegőhűtéses free cooling chiller 122–518 kW teljesítménnyel. |
| BlueBox TETRIS Sky FC | `tetris-sky-fc.html` | BlueBox TETRIS Sky FC moduláris free cooling chiller 220–480 kW teljesítménnyel. |
| BlueBox TETRIS Sky R7 | `tetris-sky-r7.html` | BlueBox TETRIS Sky R7 levegőhűtéses chiller és hőszivattyú 200–750 kW. |
| BlueBox TETRIS W Rev FC/NG | `tetris-w-rev-fc-ng.html` | BlueBox TETRIS W Rev FC/NG free-cooling vízhűtéses chiller 39–640 kW. |
| BlueBox TITAN Sky Hi R0 FC | `titan-sky-hi-r0-fc.html` | BlueBox TITAN Sky Hi R0 FC free-cooling chiller R290 természetes hűtőközeggel. |
| BlueBox TITAN Zero Hi FC | `titan-zero-hi-fc.html` | BlueBox TITAN Zero Hi FC free-cooling chiller R290 hűtőközeggel. |
| BlueBox ZETA Rev HE FC | `zeta-rev-he-fc.html` | BlueBox ZETA Rev HE FC free-cooling chiller 36–152 kW tartományban. |

---

### B. LEVEGŐHŰTÉSES FOLYADÉKHŰTŐK ÉS HŐSZIVATTYÚK (10 products)
*Category page: `levegohuteses-folyadekhuok.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox BETA Rev | `beta-rev.html` | *(no meta in CSV — to be written in Phase 5)* |
| BlueBox EPSILON Sky R7 | `epsilon-sky-r7.html` | BlueBox EPSILON Sky R7 levegőhűtéses folyadékhűtő és hőszivattyú 6–45 kW. |
| BlueBox GEYSER Sky R0 | `geyser-sky-r0.html` | BlueBox GEYSER Sky R0 levegő-víz hőszivattyú R290 hűtőközeggel. 20–30 kW, akár 78°C. |
| BlueBox KAPPA Rev | `kappa-rev.html` | BlueBox KAPPA Rev moduláris folyadékhűtő és hőszivattyú. 296–1983 kW. |
| BlueBox KAPPA Sky | `kappa-sky.html` | BlueBox KAPPA Sky levegőhűtéses folyadékhűtő csavarkompresszorral. 260–1360 kW. |
| BlueBox TAU Sky Hi HP | `tau-sky-hi-hp.html` | BlueBox TAU Sky Hi HP levegő-víz hőszivattyú 6–19 kW. Inverteres, R32. |
| BlueBox TETRIS 2 | `tetris-2.html` | BlueBox TETRIS 2 moduláris levegőhűtéses chiller és hőszivattyú 84–913 kW. |
| BlueBox TITAN Zero | `titan-zero.html` | BlueBox TITAN Zero inverteres chiller és hőszivattyú R290 természetes hűtőközeggel. |
| BlueBox ZETA Rev HP XT | `zeta-rev-hp-xt.html` | BlueBox ZETA Rev HP XT levegő-víz hőszivattyú extrém körülmények között is. |
| BlueBox ZETA Sky | `zeta-sky.html` | BlueBox ZETA Sky levegőhűtéses chiller és hőszivattyú kereskedelmi és ipari alkalmazásokhoz. |

---

### C. LEVEGŐHŰTÉSES MULTIFUNKCIÓS HŐSZIVATTYÚK (3 products)
*Category page: `multifunkcios-hoszivattyu.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox OMICRON Sky S4 R5 | `omicron-sky-s4-r5.html` | BlueBox OMICRON Sky S4 R5 multifunkciós hőszivattyú 40–880 kW. |
| BlueBox OMICRON Zero S4 | `omicron-zero-s4.html` | BlueBox OMICRON Zero S4 multifunkciós hőszivattyú R290 hűtőközeggel. 50–240 kW. |
| BlueBox OMICRON Zero S4 (variant) | `omicron-zero-s4-v2.html` | *(duplicate name in CSV — see open item #1)* |

> ⚠️ **Open item #1:** Two CSV rows share the name "BlueBox OMICRON Zero S4" with identical meta descriptions. Placeholder filename `omicron-zero-s4-v2.html` assigned. Requires clarification from Unió Klíma before product page copy is written.

---

### D. ROOFTOP KLÍMABERENDEZÉSEK (1 product)
*Category page: `rooftop.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox LAMBDA Sky | `lambda-sky.html` | BlueBox LAMBDA Sky rooftop klímaberendezés hűtésre és fűtésre. 20–300 kW, inverteres. |

---

### E. VÍZHŰTÉSES FOLYADÉKHŰTŐK ÉS HŐSZIVATTYÚK (8 products)
*Category page: `vizhuteses-folyadekhuok.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox MU Echos A | `mu-echos-a.html` | BlueBox MU Echos A kompakt vízhűtéses folyadékhűtő és hőszivattyú 6–46 kW. |
| BlueBox OMEGA Sky | `omega-sky.html` | BlueBox OMEGA Sky vízhűtéses folyadékhűtő csavarkompresszorral. 431–1564 kW. |
| BlueBox OMEGA Sky Xi | `omega-sky-xi.html` | BlueBox OMEGA Sky Xi vízhűtéses folyadékhűtő inverteres csavarkompresszorral. |
| BlueBox SIGMA Sky OH TB R6 | `sigma-sky-oh-tb-r6.html` | BlueBox SIGMA Sky OH TB R6 temperature booster hőszivattyú akár 80°C. 70–260 kW. |
| BlueBox SIGMA Sky R7 | `sigma-sky-r7.html` | BlueBox SIGMA Sky R7 vízhűtéses chiller és hőszivattyú 38–650 kW. R32. |
| BlueBox SIGMA Zero | `sigma-zero.html` | BlueBox SIGMA Zero természetes hűtőközeges (R290) chiller és hőszivattyú 20–290 kW. |
| BlueBox TETRIS W Rev | `tetris-w-rev.html` | BlueBox TETRIS W Rev vízhűtéses moduláris chiller és hőszivattyú 38–615 kW. |
| BlueBox TETRIS W Rev OH TB | `tetris-w-rev-oh-tb.html` | BlueBox TETRIS W Rev OH TB Temperature Booster hőszivattyú akár 80°C melegvízzel. |

---

### F. PRECÍZIÓS PERIMETER HŰTÉS — IT Cooling (4 products)
*Category page: `precizios-perimeter-hutes.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox DATATECH BTD | `datatech-btd.html` | Precíziós perimeter hűtés adatközpontokhoz 6–220 kW tartományban. |
| BlueBox DATATECH BTD PFW | `datatech-btd-pfw.html` | Nagy teljesítményű adatközpont hűtés álpadlós rendszerekhez. |
| BlueBox DATATECH BTD Sky R7 | `datatech-btd-sky-r7.html` | DATATECH BTD Sky R7 precíziós klíma adatközpontokhoz. 7–28 kW. |
| BlueBox DATATECH+ BTD | `datatech-plus-btd.html` | DATATECH+ BTD precíziós klíma adatközpontokhoz. Inverteres, 7–100 kW. |

---

### G. SORBA TELEPÍTHETŐ (IN-ROW) HŰTŐEGYSÉGEK — IT Cooling (3 products)
*Category page: `in-row-hutes.html`*

| Product name | File | Meta description (from CSV) |
|---|---|---|
| BlueBox COOLBLADE BTD | `coolblade-btd.html` | COOLBLADE BTD in-row hűtési megoldás adatközpontokhoz. 12–35 kW. |
| BlueBox COOLBLADE BTD Sky R7 | `coolblade-btd-sky-r7.html` | In-row adatközpont hűtés 13–27 kW teljesítménnyel. COOLBLADE BTD Sky R7. |
| BlueBox COOLBLADE in Rack BTD | `coolblade-in-rack-btd.html` | Rackbe építhető adatközpont hűtés 8–30 kW teljesítménnyel. COOLBLADE in Rack BTD. |

---

**Total: 39 products ✓**

---

## 6. URL STRUCTURE

Flat file structure. All HTML files at root level.

```
/index.html
/cegunkrol.html
/kapcsolat.html
/404.html
/futesi-hutesi-megoldasok.html
/free-cooling.html
/levegohuteses-folyadekhuok.html
/multifunkcios-hoszivattyu.html
/rooftop.html
/vizhuteses-folyadekhuok.html
/it-hutesi-megoldasok.html
/precizios-perimeter-hutes.html
/in-row-hutes.html
/[product-slug].html  (39 files)
```

---

## 7. NAVIGATION

### Desktop header
```
[Logo: Unió Klíma]    Termékek ▾    Cégünkről    Kapcsolat    [Érdeklődöm →]
                      │
                      ├─ Fűtési-hűtési megoldások
                      │    ├─ Free-cooling rendszerek
                      │    ├─ Levegőhűtéses folyadékhűtők
                      │    ├─ Multifunkciós hőszivattyúk
                      │    ├─ Rooftop klímaberendezések
                      │    └─ Vízhűtéses folyadékhűtők
                      └─ IT Hűtési megoldások
                           ├─ Precíziós perimeter hűtés
                           └─ Sorba telepíthető hűtőegységek
```

### Mobile
- Hamburger → full-screen overlay
- Termékek accordion expands subcategories
- Sticky header, shrinks on scroll

### Breadcrumb (all pages)
```
Kezdőlap  ›  Fűtési-hűtési megoldások  ›  Free-cooling rendszerek  ›  BlueBox KAPPA Sky FC
```
- Implemented as `<nav aria-label="breadcrumb">` with BreadcrumbList schema

---

## 8. PAGE TEMPLATES

### Template 1 — Homepage

```
HEADER (sticky)
────────────────────────────────────────────
HERO
  Headline + subheadline
  Two CTAs: Termékeink / Kapcsolat
  Background: hero image
────────────────────────────────────────────
CATEGORIES (2 cards)
  Fűtési-hűtési megoldások / IT Hűtési megoldások
────────────────────────────────────────────
SUBCATEGORIES (7 cards, icon + name + count)
────────────────────────────────────────────
ABOUT STRIP (2 col: brief company text + contact)
────────────────────────────────────────────
CTA BLOCK
  "Kérjen ajánlatot szakértőinktől"
────────────────────────────────────────────
FOOTER
```

---

### Template 2 — Category L1

```
HEADER
────────────────────────────────────────────
BREADCRUMB
────────────────────────────────────────────
PAGE INTRO
  H1 + 80–120 word introduction
────────────────────────────────────────────
SUBCATEGORY CARDS (with product count)
────────────────────────────────────────────
SEO TEXT (H2 sections, 200–300 words)
────────────────────────────────────────────
CTA BLOCK
────────────────────────────────────────────
FOOTER
```

---

### Template 3 — Category L2

```
HEADER
────────────────────────────────────────────
BREADCRUMB
────────────────────────────────────────────
PAGE INTRO
  H1 + 80–120 word introduction
────────────────────────────────────────────
PRODUCT GRID (cards)
  Image · Name · Capacity · "Részletek →"
────────────────────────────────────────────
SEO TEXT (H2 sections, 200–300 words)
────────────────────────────────────────────
CTA BLOCK
────────────────────────────────────────────
FOOTER
```

---

### Template 4 — Product page (39 variations)

Sections in order — all sourced from CSV:

```
HEADER
────────────────────────────────────────────
BREADCRUMB
────────────────────────────────────────────
PRODUCT HERO (2 col)
  Left:  Product image (from CSV Képek field)
  Right: H1 product name
         Short introduction (Rövid leírás)
         ┌────────────────────────────────┐
         │  Érdeklődöm a termék iránt →  │
         └────────────────────────────────┘
────────────────────────────────────────────
PRODUCT DESCRIPTION
  Full description from CSV (Leírás field, HTML cleaned)
────────────────────────────────────────────
TECHNICAL SPECIFICATIONS
  Two-column spec table
  Sourced from product description H3/list sections
────────────────────────────────────────────
DOWNLOADS
  PDF placeholder section
  "Kérjen adatlapot" link if no PDF available
────────────────────────────────────────────
RELATED PRODUCTS (3–4 product cards)
  Same subcategory first, then cross-category
────────────────────────────────────────────
CTA BLOCK
  "Érdeklődöm a termék iránt"
  → links to kapcsolat.html#enquiry
────────────────────────────────────────────
FOOTER
```

---

### Template 5 — Contact

```
HEADER
────────────────────────────────────────────
PAGE INTRO (H1)
────────────────────────────────────────────
CONTACT DETAILS + ENQUIRY FORM (2 col)
  Left:  Address, phone, email, map embed
  Right: Enquiry form
────────────────────────────────────────────
FOOTER
```

---

### Template 6 — About

```
HEADER
────────────────────────────────────────────
PAGE INTRO (H1)
────────────────────────────────────────────
COMPANY DESCRIPTION
BLUEBOX / SWEGON PARTNERSHIP
────────────────────────────────────────────
CTA BLOCK
────────────────────────────────────────────
FOOTER
```

---

## 9. REUSABLE COMPONENTS

Only what is actually needed.

| Component | Description | JS needed? |
|---|---|---|
| `site-header` | Logo + nav + mobile hamburger + CTA | Yes (mobile toggle) |
| `site-footer` | Logo, nav links, company info, contact | No |
| `breadcrumb` | `<nav>` with BreadcrumbList schema | No |
| `product-card` | Image + name + short spec + link | No |
| `category-card` | Icon + name + product count + link | No |
| `hero-product` | 2-col product intro + CTA | No |
| `spec-table` | 2-col spec table, alternating rows | No |
| `cta-block` | Full-width: headline + button | No |
| `related-products` | 3–4 product cards in a row | No |
| `downloads` | Document list with type icon | No |

**10 components. JavaScript only for mobile nav toggle.**

---

## 10. SEO PLAN

### Per-page requirements
Every page must have:
- Unique `<title>` tag
- Unique `<meta name="description">` (from CSV `rank_math_description` or written)
- `<link rel="canonical">`
- Open Graph (`og:title`, `og:description`, `og:image`, `og:url`)
- `<html lang="hu">`
- Single `<h1>`, logical H2/H3 hierarchy
- BreadcrumbList schema (all pages except homepage)

### Schema.org by page type

| Schema | Pages |
|---|---|
| `Organization` | All pages (footer JSON-LD) |
| `WebSite` | `index.html` |
| `BreadcrumbList` | All pages except index |
| `Product` | All 39 product pages |
| `ItemList` | Category L1 and L2 pages |

### Title tag templates

| Page type | Template |
|---|---|
| Homepage | `Unió Klíma – BlueBox Hűtési és Hőszivattyú Rendszerek` |
| Category L1 | `[Category] \| BlueBox \| Unió Klíma` |
| Category L2 | `[Subcategory] \| BlueBox \| Unió Klíma` |
| Product | `[Product name] – BlueBox \| Unió Klíma` |
| Contact | `Kapcsolat és Ajánlatkérés \| Unió Klíma Kft.` |
| About | `Cégünkről – Unió Klíma Kft. \| BlueBox Szakdisztribútor` |

### Meta descriptions
36 of 39 products have pre-written meta descriptions in the CSV. The 3 missing will be written in Phase 5:
- BlueBox BETA Rev
- BlueBox OMICRON Zero S4 (variant — pending open item #1)

### Technical SEO
- `sitemap.xml` covering all 51 public pages (404 excluded)
- `robots.txt` with sitemap pointer
- `<meta name="robots" content="noindex">` on `404.html`

---

## 11. INTERNAL LINKING

| From | Links to |
|---|---|
| Homepage | Both L1 categories, all 7 L2 subcategories (nav + cards) |
| Category L1 | Child L2 subcategory pages, Contact |
| Category L2 | Parent L1, sibling L2 (in nav), all products, Contact |
| Product page | Breadcrumb chain (L1 → L2), 3–4 related products, Contact |
| About | Contact |

**Related product logic:** same subcategory first, then cross-category by application (e.g. IT cooling products cross-link to each other).

---

## 12. DESIGN DIRECTION

### Philosophy
Clean, technical, minimal, spacious, product-focused. No decorative elements. The product and its specifications are the design.

### Colour palette

| Role | Hex |
|---|---|
| Primary dark (header, footer) | `#0B1F3A` |
| Accent blue (links, CTAs) | `#0060B6` |
| Background | `#F5F7FA` |
| Surface (cards) | `#FFFFFF` |
| Border | `#E0E4EA` |
| Text primary | `#1A1A2E` |
| Text secondary | `#5A6478` |

### Typography
**Inter** from Google Fonts — weights 400, 500, 600, 700. `font-display: swap`.

### Spacing
8px grid: 8 / 16 / 24 / 32 / 48 / 64 / 96px

### Breakpoints
| Name | Width |
|---|---|
| Mobile | 0–767px |
| Tablet | 768–1023px |
| Desktop | 1024px+ |

---

## 13. PERFORMANCE

| Technique | Implementation |
|---|---|
| Critical CSS | Inlined in `<head>` |
| Images | `loading="lazy"` on all below-fold images |
| Image format | WebP (already used by source site) |
| Fonts | `preconnect` to Google Fonts + `font-display: swap` |
| JavaScript | Single `main.js`, loaded with `defer` |
| Compression | `.htaccess` gzip |
| Caching | `.htaccess` cache headers |

**Target:** Lighthouse Performance ≥ 90

---

## 14. COMPANY INFORMATION

| Field | Value |
|---|---|
| Company | Unió Klíma Kft. |
| Address | 1033 Budapest, Zab utca 8 |
| Phone | +36 (1) 240-2240 |
| Email | unio-klima@unio-klima.hu |
| Brand | BlueBox by Swegon |

---

## 15. OPEN ITEMS

Before Phase 5 (product pages), confirm:

1. **OMICRON Zero S4 duplicate** — Two CSV rows with identical names and descriptions. What distinguishes them? Are they two variants, or a data entry error?
2. **Downloads / datasheets** — Are PDF datasheets available? Hosted locally or linked externally?
3. **Unió Klíma logo** — SVG preferred for header and footer.
4. **Contact form** — Web3Forms (same as M-Marketing site), or a different solution?
5. **Canonical domain** — `unioklima.hu` or `www.unioklima.hu`? Affects canonical tags, .htaccess, and sitemap.

---

## 16. ADDITIONAL REQUIREMENTS (approved 2026-06-26)

### Product page section order — fixed, no exceptions
Every product page must follow this exact section order:
1. Hero (image + product name + short intro + CTA)
2. Short introduction (expanded intro paragraph)
3. Product overview (full description from CSV)
4. Key benefits (feature list)
5. Technical specifications (spec table)
6. Downloads (with placeholder if no files available)
7. Related products (3–4 cards)
8. Product enquiry CTA (full-width block)

### Downloads — always render the section
Even when no files are available, the Downloads section must always appear in the page. Placeholder state: informational text + "Kérjen adatlapot e-mailben" link. No redesign required when a PDF is later added.

### CTA — one button, one label, site-wide
Primary CTA button text: **Érdeklődöm a termék iránt**  
This button always links to the contact page with the product name pre-filled as a URL query parameter: `kapcsolat.html?termek=[product-slug]`  
JavaScript on `kapcsolat.html` reads this parameter and pre-populates the enquiry form field. If no parameter is present (e.g. user visits contact directly), the field is blank.

### Future scalability — 100+ products
Templates must be fully generic. Adding a new product = duplicate the product template HTML, replace content, add to the relevant category page product grid. No structural changes to CSS, JS, navigation, or any other page required. CSS class names are semantic and product-agnostic.

---

## PHASE 2 — IN PROGRESS

Phase 2 delivers:
- `assets/css/style.css` — complete CSS design system with custom properties
- `assets/js/main.js` — mobile nav toggle + contact form query param handling
- All 10 reusable component HTML snippets (inline reference)
