# Apexcel Global Solutions Website Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build the complete production-ready, 6-page Apexcel Global Solutions static website (HTML/Tailwind/vanilla JS + GSAP/Lenis/Swiper), with brand-accurate custom visuals and full QA.

**Architecture:** A small Node build step (no framework) compiles Tailwind CSS and assembles final static HTML pages from page templates + shared header/footer partials via simple string-replace includes. A separate dev-only script calls the Gemini API to generate the site's visual assets ahead of time; the shipped site never calls Gemini at runtime.

**Tech Stack:** HTML5, Tailwind CSS (CLI build), vanilla ES module JS, GSAP + ScrollTrigger, Lenis, Swiper.js, Node.js (build tooling only).

**Spec:** `docs/superpowers/specs/2026-08-16-apexcel-website-design.md`

**Content source (do not deviate without checking this file):** `/Users/amitprajapati/Downloads/Final_Website_Apexcel Global Solutions LLP.docx` — full text already extracted verbatim in this plan's task content blocks below; do not invent facts beyond it.

**Logo source:** `/Users/amitprajapati/Downloads/apexcel-logo-v2.png` and `.svg`.

## Global Constraints

- Colors (from logo SVG): navy `#0E3362` (primary), teal `#0C7C82` (secondary), gold `#C19C57` (accent), warm white `#FAF9F6`, charcoal `#1E2328`. Avoid neon/purple/cyan overpowering these.
- Fonts: Plus Jakarta Sans (headings/display, weights 500/600/700/800), Inter (body/UI, weights 400/500/600). Load via `@font-face`/Google Fonts `<link>` with `font-display: swap`.
- No invented statistics, testimonials, clients, awards, team names, or social links. Only these verified facts may be used: 50,000+ candidate database, top 5% shortlist rate, 10–14 business day shortlist turnaround, 90-day replacement guarantee, post-placement check-ins at 30/60/90 days.
- Contact info (only these, nowhere else): `info@apexcelglobal.com`, `+91 9611658883`, Bangalore, Karnataka, India.
- 6 pages only: `index.html`, `about.html`, `process.html`, `industries.html`, `why-us.html`, `contact.html`.
- Motion: prefer `transform`/`opacity`; wrap all non-essential motion (parallax, pointer-tracking, hero rotation, magnetic buttons) in a `prefers-reduced-motion: reduce` guard.
- No Three.js/WebGL. CSS 3D (`perspective`, `preserve-3d`, `translateZ`) + GSAP only.
- Every `<img>`: explicit width/height or aspect-ratio box, `alt` text, `loading="lazy"` below the fold, and an `onerror` branded-fallback handler (never a broken-image icon).
- Gemini key lives only in `.env` (already gitignored) and is read only by `scripts/generate-assets.mjs` (Node, build-time). Never reference `process.env.GEMINI_API_KEY` from any file under `js/`.
- Commit after each task with a descriptive message.

---

## File Structure

```
apexcel-website/                     (repo root: /Users/amitprajapati/Dev/testing/ApexcelGlobal)
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── .env                             (GEMINI_API_KEY — already present, gitignored)
├── .gitignore                       (already present)
├── src/
│   ├── css/input.css                (Tailwind directives + custom layer: 3D/glass utilities, keyframes)
│   └── pages/
│       ├── index.html               (template with {{HEADER}}/{{FOOTER}} placeholders)
│       ├── about.html
│       ├── process.html
│       ├── industries.html
│       ├── why-us.html
│       └── contact.html
├── components/
│   ├── header.html
│   └── footer.html
├── scripts/
│   ├── build-pages.mjs              (assembles src/pages/* + components/* → root *.html)
│   └── generate-assets.mjs          (dev-only; calls Gemini, writes assets/images/*)
├── assets/
│   ├── logo/apexcel-logo.svg, apexcel-logo.png
│   ├── images/                      (generated visuals land here)
│   └── icons/                       (inline-SVG icon set, no external icon font)
├── css/styles.css                   (Tailwind build output — gitignored, generated)
├── js/
│   ├── main.js                      (image-fallback util, Lenis init, page bootstrap)
│   ├── animations.js                (GSAP/ScrollTrigger reveal helpers, reduced-motion guard)
│   ├── navigation.js                (header scroll state, mobile menu overlay)
│   ├── sliders.js                   (Swiper instances: industries selector)
│   └── forms.js                     (contact form validation + success/error UI)
├── index.html, about.html, process.html, industries.html, why-us.html, contact.html  (BUILD OUTPUT — generated by build-pages.mjs, committed since this is the "ready-to-run" deliverable)
├── sitemap.xml
├── robots.txt
└── README.md
```

**Interfaces summary (cross-task contracts):**
- `js/animations.js` exports `revealOnScroll(selector, opts)`, `initLenis()`, `prefersReducedMotion()` (boolean) — every page-specific animation file imports these, never re-implements scroll-trigger boilerplate.
- `js/main.js` exports `attachImageFallback()` (call once per page, delegated `error` listener on `img[data-fallback]`).
- `js/navigation.js` exports `initNavigation()` — called once per page from that page's inline `<script type="module">` bootstrap.
- `components/header.html` / `components/footer.html` contain the literal `<header>...</header>` / `<footer>...</footer>` markup; `build-pages.mjs` replaces `{{HEADER}}` and `{{FOOTER}}` tokens in each `src/pages/*.html` with this content verbatim.

---

### Task 1: Project scaffold & Tailwind build pipeline

**Files:**
- Create: `package.json`
- Create: `tailwind.config.js`
- Create: `postcss.config.js`
- Create: `src/css/input.css`
- Create: `scripts/build-pages.mjs`
- Create: `src/pages/index.html` (minimal placeholder page for pipeline verification only — full content in Task 5)
- Create: `components/header.html`, `components/footer.html` (minimal stub markup — full content in Task 3)
- Modify: `.gitignore` (add `node_modules/`, `css/styles.css`, `*.log` — `.env` already present)

**Interfaces:**
- Produces: `npm run build` (runs Tailwind build then `node scripts/build-pages.mjs`), `npm run dev` (Tailwind `--watch` in background + a static file server note in README).
- Produces: `css/styles.css` (Tailwind output consumed by every page's `<link>` tag).

- [ ] **Step 1: Init npm and install dependencies**

```bash
cd /Users/amitprajapati/Dev/testing/ApexcelGlobal
npm init -y
npm install -D tailwindcss@^3 postcss autoprefixer
npm install gsap lenis swiper
```

- [ ] **Step 2: Write Tailwind config with brand tokens**

`tailwind.config.js`:
```js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/pages/**/*.html", "./components/**/*.html", "./js/**/*.js"],
  theme: {
    extend: {
      colors: {
        navy: { DEFAULT: "#0E3362", 900: "#082853", 700: "#113564", 500: "#1C3E6A" },
        teal: { DEFAULT: "#0C7C82", 600: "#0B6C72", 400: "#43999E", 200: "#DFEEEF" },
        gold: { DEFAULT: "#C19C57", 600: "#A9843F", 200: "#EAD9B0" },
        warm: { DEFAULT: "#FAF9F6" },
        charcoal: { DEFAULT: "#1E2328" },
      },
      fontFamily: {
        display: ["'Plus Jakarta Sans'", "sans-serif"],
        body: ["Inter", "sans-serif"],
      },
      perspective: { "1200": "1200px", "1800": "1800px" },
    },
  },
  plugins: [],
};
```

- [ ] **Step 3: Write PostCSS config and Tailwind input**

`postcss.config.js`:
```js
export default { plugins: { tailwindcss: {}, autoprefixer: {} } };
```

`src/css/input.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html { scroll-behavior: auto; } /* Lenis handles smooth scroll; avoid double-smoothing */
  body { @apply bg-warm text-charcoal font-body antialiased; }
  h1, h2, h3, h4 { @apply font-display; }
}

@layer utilities {
  .preserve-3d { transform-style: preserve-3d; }
  .glass { @apply bg-white/60 backdrop-blur-md border border-white/40; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
```

- [ ] **Step 4: Write the page-assembly build script**

`scripts/build-pages.mjs`:
```js
import { readFileSync, writeFileSync, readdirSync } from "node:fs";
import { join, basename } from "node:path";

const root = process.cwd();
const pagesDir = join(root, "src/pages");
const header = readFileSync(join(root, "components/header.html"), "utf8");
const footer = readFileSync(join(root, "components/footer.html"), "utf8");

for (const file of readdirSync(pagesDir)) {
  if (!file.endsWith(".html")) continue;
  let html = readFileSync(join(pagesDir, file), "utf8");
  html = html.replace("{{HEADER}}", header).replace("{{FOOTER}}", footer);
  writeFileSync(join(root, basename(file)), html);
  console.log(`built ${file}`);
}
```

- [ ] **Step 5: Add npm scripts**

`package.json` (merge into the generated file's `"scripts"` key):
```json
{
  "scripts": {
    "build:css": "tailwindcss -i ./src/css/input.css -o ./css/styles.css --minify",
    "build:pages": "node scripts/build-pages.mjs",
    "build": "npm run build:css && npm run build:pages",
    "watch:css": "tailwindcss -i ./src/css/input.css -o ./css/styles.css --watch"
  }
}
```

- [ ] **Step 6: Create minimal placeholder page + component stubs to prove the pipeline**

`components/header.html`: `<header><nav>Apexcel</nav></header>`
`components/footer.html`: `<footer><p>&copy; 2026 Apexcel Global Solutions</p></footer>`
`src/pages/index.html`:
```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Apexcel Global Solutions</title><link rel="stylesheet" href="css/styles.css"></head>
<body>
{{HEADER}}
<main><h1 class="text-navy font-display text-4xl p-8">Apexcel Global Solutions</h1></main>
{{FOOTER}}
</body>
</html>
```

- [ ] **Step 7: Run the build and verify output**

```bash
npm run build
cat index.html | grep -c "Apexcel Global Solutions"
```

Expected: `index.html` exists at repo root, contains both the header/footer stub text and the h1, and `css/styles.css` is a non-empty compiled Tailwind file.

- [ ] **Step 8: Commit**

```bash
git add package.json package-lock.json tailwind.config.js postcss.config.js src/ components/ scripts/ .gitignore
git commit -m "Add Tailwind build pipeline and page-assembly script"
```

---

### Task 2: Global CSS layer — 3D/glass/motion utilities and typography scale

**Files:**
- Modify: `src/css/input.css`

**Interfaces:**
- Produces CSS utility classes consumed by every later page task: `.card-3d`, `.card-3d:hover` lift, `.orbit-line`, `.section-eyebrow`, `.btn-primary`, `.btn-ghost`, responsive heading classes `.h-hero`, `.h-section`.

- [ ] **Step 1: Add responsive typography scale using `clamp()`**

Append to `src/css/input.css` `@layer base`:
```css
.h-hero { font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.h-section { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); line-height: 1.1; letter-spacing: -0.01em; }
.h-sub { font-size: clamp(1.125rem, 1vw + 0.75rem, 1.375rem); line-height: 1.4; }
.section-eyebrow { @apply uppercase tracking-[0.2em] text-xs font-semibold text-teal; }
```

- [ ] **Step 2: Add button and card component classes**

```css
@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-full bg-navy text-warm px-6 py-3 font-medium
           transition-all duration-300 ease-out hover:bg-navy-700 hover:shadow-lg hover:shadow-navy/20;
  }
  .btn-ghost {
    @apply inline-flex items-center gap-2 rounded-full border border-navy/20 text-navy px-6 py-3 font-medium
           transition-all duration-300 ease-out hover:border-teal hover:text-teal;
  }
  .card-3d {
    @apply relative rounded-2xl bg-white border border-navy/10 shadow-[0_8px_30px_-12px_rgba(14,51,98,0.25)]
           transition-transform duration-500 ease-out preserve-3d;
  }
  .card-3d:hover {
    transform: translateY(-6px) translateZ(10px) rotateX(2deg);
    @apply shadow-[0_20px_45px_-15px_rgba(14,51,98,0.35)];
  }
  .orbit-line {
    @apply absolute rounded-full border border-teal/30;
  }
}
```

- [ ] **Step 3: Rebuild CSS and verify classes compile**

```bash
npm run build:css
grep -c "card-3d" css/styles.css
```

Expected: non-zero count (class present in compiled output).

- [ ] **Step 4: Commit**

```bash
git add src/css/input.css css/styles.css
git commit -m "Add typography scale and 3D card/button utility classes"
```

---

### Task 3: Shared header, footer, mobile nav, and core JS utilities

**Files:**
- Modify: `components/header.html`
- Modify: `components/footer.html`
- Create: `js/navigation.js`
- Create: `js/animations.js`
- Create: `js/main.js`

**Interfaces:**
- Consumes: nothing (foundation layer).
- Produces: `initNavigation()`, `initLenis()`, `revealOnScroll(selector, opts)`, `prefersReducedMotion()`, `attachImageFallback()` — all later page tasks import from `js/animations.js` and `js/main.js`.

- [ ] **Step 1: Write header markup (desktop nav + mobile trigger)**

`components/header.html`:
```html
<header id="site-header" class="fixed top-0 inset-x-0 z-50 transition-all duration-300" data-scrolled="false">
  <div class="mx-auto max-w-7xl flex items-center justify-between px-6 lg:px-10 py-4">
    <a href="index.html" class="flex items-center" aria-label="Apexcel Global Solutions home">
      <img src="assets/logo/apexcel-logo.svg" alt="Apexcel Global Solutions" class="h-10 w-auto" />
    </a>
    <nav class="hidden lg:flex items-center gap-8 font-medium text-navy" aria-label="Primary">
      <a href="index.html" class="nav-link">Home</a>
      <a href="about.html" class="nav-link">About</a>
      <a href="process.html" class="nav-link">Our Process</a>
      <a href="industries.html" class="nav-link">Industries</a>
      <a href="why-us.html" class="nav-link">Why Us</a>
      <a href="contact.html" class="nav-link">Contact</a>
    </nav>
    <a href="contact.html" class="hidden lg:inline-flex btn-primary">Let's Talk</a>
    <button id="mobile-menu-btn" class="lg:hidden" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
      <span class="block w-6 h-0.5 bg-navy mb-1.5"></span>
      <span class="block w-6 h-0.5 bg-navy mb-1.5"></span>
      <span class="block w-6 h-0.5 bg-navy"></span>
    </button>
  </div>
  <div id="mobile-menu" class="lg:hidden fixed inset-0 z-40 bg-warm translate-x-full transition-transform duration-500 ease-out">
    <nav class="flex flex-col items-start gap-6 px-8 pt-28 text-2xl font-display text-navy" aria-label="Mobile">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="process.html">Our Process</a>
      <a href="industries.html">Industries</a>
      <a href="why-us.html">Why Us</a>
      <a href="contact.html">Contact</a>
      <a href="contact.html" class="btn-primary mt-4">Let's Talk</a>
    </nav>
    <button id="mobile-menu-close" class="absolute top-6 right-6" aria-label="Close menu">&times;</button>
  </div>
</header>
```

Add `.nav-link { @apply relative py-1 after:absolute after:left-0 after:-bottom-1 after:h-0.5 after:w-0 after:bg-teal after:transition-all after:duration-300 hover:after:w-full; }` to `src/css/input.css` `@layer components`.

- [ ] **Step 2: Write footer markup**

`components/footer.html`:
```html
<footer class="bg-navy text-warm">
  <div class="mx-auto max-w-7xl px-6 lg:px-10 py-16 grid gap-10 lg:grid-cols-4">
    <div class="lg:col-span-2">
      <img src="assets/logo/apexcel-logo.svg" alt="Apexcel Global Solutions" class="h-10 w-auto brightness-0 invert mb-4" />
      <p class="max-w-sm text-warm/70">A trusted recruitment and talent acquisition partner, connecting exceptional talent with ambitious organisations across India and international markets.</p>
    </div>
    <div>
      <h3 class="font-display font-semibold mb-4">Navigate</h3>
      <ul class="space-y-2 text-warm/70">
        <li><a href="index.html" class="hover:text-teal">Home</a></li>
        <li><a href="about.html" class="hover:text-teal">About</a></li>
        <li><a href="process.html" class="hover:text-teal">Our Process</a></li>
        <li><a href="industries.html" class="hover:text-teal">Industries</a></li>
        <li><a href="why-us.html" class="hover:text-teal">Why Us</a></li>
        <li><a href="contact.html" class="hover:text-teal">Contact</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-display font-semibold mb-4">Contact</h3>
      <ul class="space-y-2 text-warm/70">
        <li><a href="mailto:info@apexcelglobal.com" class="hover:text-teal">info@apexcelglobal.com</a></li>
        <li><a href="tel:+919611658883" class="hover:text-teal">+91 9611658883</a></li>
        <li>Bangalore, Karnataka, India</li>
      </ul>
    </div>
  </div>
  <div class="border-t border-warm/10 py-6 text-center text-sm text-warm/50">
    &copy; <span id="year"></span> Apexcel Global Solutions. All rights reserved.
  </div>
</footer>
```

- [ ] **Step 3: Write navigation JS**

`js/navigation.js`:
```js
export function initNavigation() {
  const header = document.getElementById("site-header");
  const menuBtn = document.getElementById("mobile-menu-btn");
  const menuClose = document.getElementById("mobile-menu-close");
  const menu = document.getElementById("mobile-menu");

  window.addEventListener("scroll", () => {
    const scrolled = window.scrollY > 40;
    header.dataset.scrolled = String(scrolled);
    header.classList.toggle("bg-warm/90", scrolled);
    header.classList.toggle("backdrop-blur-md", scrolled);
    header.classList.toggle("shadow-sm", scrolled);
  });

  const openMenu = () => {
    menu.classList.remove("translate-x-full");
    menuBtn.setAttribute("aria-expanded", "true");
    document.body.classList.add("overflow-hidden");
  };
  const closeMenu = () => {
    menu.classList.add("translate-x-full");
    menuBtn.setAttribute("aria-expanded", "false");
    document.body.classList.remove("overflow-hidden");
  };

  menuBtn?.addEventListener("click", openMenu);
  menuClose?.addEventListener("click", closeMenu);
  menu?.querySelectorAll("a").forEach((a) => a.addEventListener("click", closeMenu));

  const yearEl = document.getElementById("year");
  if (yearEl) yearEl.textContent = String(new Date().getFullYear());
}
```

- [ ] **Step 4: Write animation utilities**

`js/animations.js`:
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger);

export function prefersReducedMotion() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

export function initLenis() {
  if (prefersReducedMotion()) return null;
  const lenis = new Lenis({ duration: 1.1, smoothWheel: true });
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);
  lenis.on("scroll", ScrollTrigger.update);
  return lenis;
}

export function revealOnScroll(selector, opts = {}) {
  if (prefersReducedMotion()) return;
  const els = gsap.utils.toArray(selector);
  els.forEach((el, i) => {
    gsap.from(el, {
      opacity: 0,
      y: opts.y ?? 32,
      duration: opts.duration ?? 0.8,
      ease: "power3.out",
      delay: (opts.stagger ?? 0) * i,
      scrollTrigger: { trigger: el, start: opts.start ?? "top 85%" },
    });
  });
}
```

- [ ] **Step 5: Write main bootstrap + image fallback util**

`js/main.js`:
```js
export function attachImageFallback() {
  document.querySelectorAll("img[data-fallback]").forEach((img) => {
    img.addEventListener("error", () => {
      img.src = img.dataset.fallback;
      img.classList.add("bg-navy/5");
    }, { once: true });
  });
}
```

- [ ] **Step 6: Wire bootstrap into the placeholder page and verify in-browser**

Add before `</body>` in `src/pages/index.html`:
```html
<script type="module">
  import { initNavigation } from "./js/navigation.js";
  import { initLenis } from "./js/animations.js";
  import { attachImageFallback } from "./js/main.js";
  initNavigation();
  initLenis();
  attachImageFallback();
</script>
```

Run:
```bash
npm run build
npx serve . -l 4500 &
```
Then use the browser tool: navigate to `http://localhost:4500`, confirm the mobile menu button appears at a narrow viewport and toggles the overlay, and check `read_console_messages` for zero errors.

- [ ] **Step 7: Commit**

```bash
git add components/ js/ src/pages/index.html
git commit -m "Add header/footer partials, mobile nav, and core JS utilities"
```

---

### Task 4: Gemini asset-generation script and initial visual assets

**Files:**
- Create: `scripts/generate-assets.mjs`
- Create: `assets/images/` (generated files)
- Modify: `assets/logo/` (copy in `apexcel-logo.svg`, `apexcel-logo.png` from `~/Downloads/apexcel-logo-v2.*`)

**Interfaces:**
- Produces: `assets/images/hero-network.png` (or `.jpg`), `assets/images/process-journey.png`, `assets/images/industries-bg.png`, `assets/images/why-apexcel.png`, `assets/images/cta-globe.png` — filenames referenced by page tasks below. Each is optimized (resized/compressed) for its section before being referenced by HTML.

- [ ] **Step 1: Copy logo assets into the repo**

```bash
mkdir -p assets/logo assets/images assets/icons
cp "/Users/amitprajapati/Downloads/apexcel-logo-v2.svg" assets/logo/apexcel-logo.svg
cp "/Users/amitprajapati/Downloads/apexcel-logo-v2.png" assets/logo/apexcel-logo.png
```

- [ ] **Step 2: Write the Gemini generation script**

`scripts/generate-assets.mjs` (reads `.env` via Node's built-in `--env-file`, never hardcodes the key):
```js
import { writeFileSync, mkdirSync } from "node:fs";
import { GoogleGenAI } from "@google/genai";

const apiKey = process.env.GEMINI_API_KEY;
if (!apiKey) throw new Error("GEMINI_API_KEY not set — run with: node --env-file=.env scripts/generate-assets.mjs");

const ai = new GoogleGenAI({ apiKey });
mkdirSync("assets/images", { recursive: true });

const BRAND = "Color palette strictly: deep navy #0E3362, teal #0C7C82, elegant gold #C19C57, warm white #FAF9F6. Premium, corporate, abstract, sophisticated, international business aesthetic. No text, no logos, no readable words, no human faces close-up, no fabricated brand marks.";

const assets = [
  { file: "hero-network", prompt: `Abstract 3D visualization of a glowing navy globe with teal and gold orbital connection lines linking floating geometric nodes, soft studio lighting, dark navy background, subtle depth of field, premium corporate tech illustration. ${BRAND}` },
  { file: "process-journey", prompt: `Abstract layered geometric pathway of glass-like panels ascending in a gentle arc, teal and gold accent lighting on navy background, representing a structured multi-step journey, premium 3D render. ${BRAND}` },
  { file: "industries-bg", prompt: `Abstract geometric cityscape-like arrangement of translucent navy and teal panels at varying depths with soft gold rim lighting, wide aspect ratio, premium editorial background texture. ${BRAND}` },
  { file: "why-apexcel", prompt: `Abstract composition of interlocking glass and brushed-metal panels forming a stable structure, gold accent line running through, navy and teal lighting, symbolizing partnership and precision. ${BRAND}` },
  { file: "cta-globe", prompt: `Minimal abstract navy globe outline with a single glowing gold-to-teal orbital arc, atmospheric soft gradient background, lots of negative space for text overlay, premium closing visual. ${BRAND}` },
];

for (const { file, prompt } of assets) {
  console.log(`generating ${file}...`);
  const res = await ai.models.generateImages({ model: "imagen-4.0-generate-001", prompt, config: { numberOfImages: 1, aspectRatio: "16:9" } });
  const img = res.generatedImages[0].image.imageBytes;
  writeFileSync(`assets/images/${file}.png`, Buffer.from(img, "base64"));
  console.log(`saved assets/images/${file}.png`);
}
```

Install the SDK: `npm install @google/genai`.

- [ ] **Step 2b: Note on model/SDK verification**

Before running, check the installed `@google/genai` package's README/types for the current image-generation method name and model id (this API surface changes) — adjust `generateImages`/model id in the script to match if the installed version differs. Do not guess silently; if the call fails, read the error and fix the script rather than falling back to a placeholder without saying so.

- [ ] **Step 3: Run generation and review each asset as a creative director**

```bash
node --env-file=.env scripts/generate-assets.mjs
```

For each generated PNG: open with the Read tool, check against the "FINAL QUALITY STANDARD" bar (premium, on-brand, not generic/artificial, no stray text/logos). If any fails, edit its prompt in the script to be more specific and re-run generation for just that asset.

- [ ] **Step 4: Optimize for web**

```bash
npm install -D sharp
node -e "
import('sharp').then(async ({ default: sharp }) => {
  const files = ['hero-network','process-journey','industries-bg','why-apexcel','cta-globe'];
  for (const f of files) {
    await sharp(\`assets/images/\${f}.png\`).resize(1920).webp({ quality: 82 }).toFile(\`assets/images/\${f}.webp\`);
  }
});
"
```

- [ ] **Step 5: Commit**

```bash
git add assets/ scripts/generate-assets.mjs package.json package-lock.json
git commit -m "Add logo assets and Gemini-generated brand visuals"
```

---

### Task 5: Home page — Hero + Trust/Positioning section

**Files:**
- Modify: `src/pages/index.html`
- Create: `js/home.js`

**Interfaces:**
- Consumes: `revealOnScroll`, `initLenis`, `prefersReducedMotion` from `js/animations.js`; `initNavigation` from `js/navigation.js`; `attachImageFallback` from `js/main.js`; `assets/images/hero-network.webp`.

- [ ] **Step 1: Replace the placeholder hero with the full editorial hero section**

Content (from source doc, `EXTRA writeup` + About intro, adapted per master prompt §6):
```html
<section id="hero" class="relative min-h-screen flex items-center pt-32 pb-20 overflow-hidden bg-warm">
  <div class="mx-auto max-w-7xl w-full px-6 lg:px-10 grid lg:grid-cols-2 gap-12 items-center">
    <div>
      <p class="section-eyebrow mb-4" data-reveal>Global Talent. Strategic Growth.</p>
      <h1 class="h-hero text-navy mb-6" data-reveal>Connecting Exceptional Talent With Ambitious Organisations.</h1>
      <p class="h-sub text-charcoal/70 max-w-lg mb-8" data-reveal>
        A trusted recruitment and talent acquisition partner, combining deep industry expertise
        with a human-first approach to matching the right people with the right opportunities —
        across India and international markets.
      </p>
      <div class="flex flex-wrap gap-4" data-reveal>
        <a href="why-us.html" class="btn-primary">Explore Our Solutions</a>
        <a href="contact.html" class="btn-ghost">Talk to Our Team</a>
      </div>
    </div>
    <div class="relative" id="hero-visual-wrap" style="perspective:1200px">
      <div id="hero-visual" class="preserve-3d rounded-3xl overflow-hidden shadow-2xl shadow-navy/20">
        <img src="assets/images/hero-network.webp" data-fallback="assets/logo/apexcel-logo.svg"
             alt="Abstract global talent network visualization" class="w-full h-auto object-cover" />
      </div>
      <span class="orbit-line w-64 h-64 -top-8 -right-8 hidden lg:block"></span>
    </div>
  </div>
</section>

<section id="trust-statement" class="py-24 lg:py-32 bg-navy text-warm">
  <div class="mx-auto max-w-5xl px-6 lg:px-10 text-center">
    <h2 class="h-section mb-6" data-reveal>Recruitment that goes beyond the resume.</h2>
    <p class="text-warm/70 text-lg max-w-2xl mx-auto" data-reveal>
      We invest time to understand your culture, business strategy, and growth ambitions —
      ensuring every placement creates lasting value, not just a filled seat.
    </p>
  </div>
</section>
```

- [ ] **Step 2: Add hero pointer-parallax and reveal wiring (desktop only, reduced-motion safe)**

`js/home.js`:
```js
import gsap from "gsap";
import { revealOnScroll, prefersReducedMotion } from "./animations.js";

export function initHome() {
  revealOnScroll("[data-reveal]", { stagger: 0.12 });

  const wrap = document.getElementById("hero-visual-wrap");
  const visual = document.getElementById("hero-visual");
  if (wrap && visual && !prefersReducedMotion() && window.matchMedia("(min-width: 1024px)").matches) {
    wrap.addEventListener("mousemove", (e) => {
      const r = wrap.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      gsap.to(visual, { rotateY: x * 6, rotateX: -y * 6, duration: 0.6, ease: "power2.out" });
    });
    wrap.addEventListener("mouseleave", () => gsap.to(visual, { rotateY: 0, rotateX: 0, duration: 0.6 }));
  }
}
```

Add to `index.html`'s bootstrap `<script type="module">`: `import { initHome } from "./js/home.js"; initHome();`

- [ ] **Step 3: Build and visually verify**

```bash
npm run build
```
Browser tool: navigate to `http://localhost:4500`, screenshot desktop (1440) and mobile (390) widths, confirm hero heading/CTAs render, image loads (or shows fallback without layout break), and moving the mouse over the hero visual tilts it slightly. Check console for zero errors.

- [ ] **Step 4: Commit**

```bash
git add src/pages/index.html js/home.js index.html css/styles.css
git commit -m "Add home page hero and trust statement sections"
```

---

### Task 6: Home page — Company intro, Core Services, Process teaser

**Files:**
- Modify: `src/pages/index.html`
- Modify: `js/home.js`

**Interfaces:**
- Consumes: `card-3d` class from Task 2, `revealOnScroll` from Task 5's wiring.

- [ ] **Step 1: Company intro section**

```html
<section id="intro" class="py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-10 grid lg:grid-cols-2 gap-16 items-center">
    <div data-reveal>
      <p class="section-eyebrow mb-4">Who We Are</p>
      <h2 class="h-section text-navy mb-6">A human-first approach to global hiring.</h2>
      <p class="text-charcoal/70 mb-4">
        Apexcel Global Solutions is a trusted recruitment and talent acquisition partner, founded
        with a mission to redefine how organisations across India and international markets
        discover and secure talent.
      </p>
      <p class="text-charcoal/70 mb-8">
        We have partnered with companies from nimble early-stage startups to established
        enterprise brands — delivering talent solutions that go beyond the resume.
      </p>
      <a href="about.html" class="btn-ghost">Discover Apexcel</a>
    </div>
    <div class="grid grid-cols-2 gap-4" data-reveal>
      <div class="card-3d p-6"><p class="text-4xl font-display font-bold text-teal">50,000+</p><p class="text-sm text-charcoal/60 mt-2">Candidate database</p></div>
      <div class="card-3d p-6 mt-8"><p class="text-4xl font-display font-bold text-gold">Top 5%</p><p class="text-sm text-charcoal/60 mt-2">Shortlist engagement rate</p></div>
      <div class="card-3d p-6"><p class="text-4xl font-display font-bold text-teal">48–72 Hours</p><p class="text-sm text-charcoal/60 mt-2">Turn Around Time</p></div>
      <div class="card-3d p-6 mt-8"><p class="text-4xl font-display font-bold text-gold">90-day</p><p class="text-sm text-charcoal/60 mt-2">Replacement guarantee</p></div>
    </div>
  </div>
</section>
```

- [ ] **Step 2: Core services section**

```html
<section id="services" class="py-24 lg:py-32 bg-navy/[0.03]">
  <div class="mx-auto max-w-7xl px-6 lg:px-10">
    <p class="section-eyebrow mb-4" data-reveal>What We Do</p>
    <h2 class="h-section text-navy mb-14 max-w-2xl" data-reveal>Core services built around your growth.</h2>
    <div class="grid md:grid-cols-3 gap-6">
      <article class="card-3d p-8 group" data-reveal>
        <div class="w-12 h-12 rounded-full bg-teal/10 flex items-center justify-center mb-6 text-teal">
          <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
        </div>
        <h3 class="font-display font-semibold text-xl text-navy mb-3">Recruitment Solutions</h3>
        <p class="text-charcoal/70 mb-6">End-to-end recruitment support tailored to your business objectives and growth strategy.</p>
        <a href="why-us.html" class="inline-flex items-center gap-2 text-teal font-medium group-hover:gap-3 transition-all">Learn more <span aria-hidden="true">→</span></a>
      </article>
      <article class="card-3d p-8 group" data-reveal>
        <div class="w-12 h-12 rounded-full bg-gold/10 flex items-center justify-center mb-6 text-gold">
          <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h4l3 8 4-16 3 8h4"/></svg>
        </div>
        <h3 class="font-display font-semibold text-xl text-navy mb-3">Talent Acquisition</h3>
        <p class="text-charcoal/70 mb-6">Targeted, multi-channel sourcing that reaches both active and passive candidates.</p>
        <a href="process.html" class="inline-flex items-center gap-2 text-teal font-medium group-hover:gap-3 transition-all">Learn more <span aria-hidden="true">→</span></a>
      </article>
      <article class="card-3d p-8 group" data-reveal>
        <div class="w-12 h-12 rounded-full bg-navy/10 flex items-center justify-center mb-6 text-navy">
          <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg>
        </div>
        <h3 class="font-display font-semibold text-xl text-navy mb-3">Accounts &amp; Finance Services</h3>
        <p class="text-charcoal/70 mb-6">Specialist hiring support for accounts and finance functions across industries.</p>
        <a href="contact.html" class="inline-flex items-center gap-2 text-teal font-medium group-hover:gap-3 transition-all">Learn more <span aria-hidden="true">→</span></a>
      </article>
    </div>
  </div>
</section>
```

- [ ] **Step 3: Process teaser (5 numbered steps, condensed)**

```html
<section id="process-teaser" class="py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-10">
    <p class="section-eyebrow mb-4" data-reveal>How We Work</p>
    <h2 class="h-section text-navy mb-14 max-w-2xl" data-reveal>A structured, 5-step methodology.</h2>
    <ol class="grid md:grid-cols-5 gap-6">
      <li class="border-t-2 border-teal pt-4" data-reveal><span class="text-gold font-display font-bold text-2xl">01</span><p class="font-display font-semibold text-navy mt-2">Discovery &amp; Briefing</p></li>
      <li class="border-t-2 border-teal/40 pt-4" data-reveal><span class="text-gold font-display font-bold text-2xl">02</span><p class="font-display font-semibold text-navy mt-2">Targeted Talent Search</p></li>
      <li class="border-t-2 border-teal/40 pt-4" data-reveal><span class="text-gold font-display font-bold text-2xl">03</span><p class="font-display font-semibold text-navy mt-2">Rigorous Vetting &amp; Assessment</p></li>
      <li class="border-t-2 border-teal/40 pt-4" data-reveal><span class="text-gold font-display font-bold text-2xl">04</span><p class="font-display font-semibold text-navy mt-2">Curated Shortlist Presentation</p></li>
      <li class="border-t-2 border-teal/40 pt-4" data-reveal><span class="text-gold font-display font-bold text-2xl">05</span><p class="font-display font-semibold text-navy mt-2">Offer Management &amp; Onboarding</p></li>
    </ol>
    <div class="text-center mt-12" data-reveal><a href="process.html" class="btn-ghost">See the full process</a></div>
  </div>
</section>
```

- [ ] **Step 4: Build and verify**

```bash
npm run build
```
Browser tool: reload `http://localhost:4500`, use `get_page_text` to confirm "50,000+", "Top 5%", "10–14", "90-day", all 3 service names, and all 5 process step names are present verbatim. Screenshot at 768px to confirm the services grid stacks correctly.

- [ ] **Step 5: Commit**

```bash
git add src/pages/index.html js/home.js index.html
git commit -m "Add home page company intro, services, and process teaser"
```

---

### Task 7: Home page — Industries teaser, Why Apexcel, dual CTA, final CTA

**Files:**
- Modify: `src/pages/index.html`
- Modify: `js/home.js`

**Interfaces:**
- Consumes: `assets/images/why-apexcel.webp`, `assets/images/cta-globe.webp` from Task 4.

- [ ] **Step 1: Industries teaser (grid linking to full page — full interactive selector lives on industries.html per Task 10)**

```html
<section id="industries-teaser" class="py-24 lg:py-32 bg-navy text-warm">
  <div class="mx-auto max-w-7xl px-6 lg:px-10">
    <p class="section-eyebrow mb-4 text-teal" data-reveal>Where We Work</p>
    <h2 class="h-section mb-14 max-w-2xl" data-reveal>Sector depth across the industries that matter.</h2>
    <div class="flex flex-wrap gap-3" data-reveal>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Retail</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">E-commerce &amp; Quick Commerce</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Education &amp; EdTech</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">FMCG</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Consumer Durables</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Consumer Electronics</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Automotive &amp; Auto-Ancillary</span>
      <span class="px-4 py-2 rounded-full border border-warm/20 text-sm">Logistics, Healthcare &amp; More</span>
    </div>
    <div class="mt-12" data-reveal><a href="industries.html" class="btn-primary">Explore all industries</a></div>
  </div>
</section>
```

- [ ] **Step 2: Why Apexcel section**

```html
<section id="why-apexcel" class="py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-10 grid lg:grid-cols-2 gap-16 items-center">
    <div class="relative" style="perspective:1200px" data-reveal>
      <img src="assets/images/why-apexcel.webp" data-fallback="assets/logo/apexcel-logo.svg"
           alt="Abstract composition representing partnership and precision" class="rounded-3xl w-full h-auto shadow-xl" />
    </div>
    <div data-reveal>
      <p class="section-eyebrow mb-4">Why Apexcel</p>
      <h2 class="h-section text-navy mb-8">Why organisations choose Apexcel</h2>
      <ul class="space-y-4">
        <li class="flex gap-3"><span class="text-gold">—</span><span class="text-charcoal/80">Extensive candidate database and strong industry understanding</span></li>
        <li class="flex gap-3"><span class="text-gold">—</span><span class="text-charcoal/80">Faster turnaround time with a quality-focused approach</span></li>
        <li class="flex gap-3"><span class="text-gold">—</span><span class="text-charcoal/80">Professional communication and customized hiring strategies</span></li>
        <li class="flex gap-3"><span class="text-gold">—</span><span class="text-charcoal/80">Pan-India &amp; overseas hiring support with a strong talent network</span></li>
      </ul>
      <a href="why-us.html" class="btn-ghost mt-8 inline-flex">See why we're different</a>
    </div>
  </div>
</section>
```

- [ ] **Step 3: Dual CTA (employers / candidates)**

```html
<section id="dual-cta" class="py-24 lg:py-32 bg-navy/[0.03]">
  <div class="mx-auto max-w-7xl px-6 lg:px-10 grid md:grid-cols-2 gap-6">
    <div class="card-3d p-10" data-reveal>
      <h3 class="h-sub font-display font-semibold text-navy mb-4">Looking to build your next high-performing team?</h3>
      <a href="contact.html" class="btn-primary">Talk to Apexcel</a>
    </div>
    <div class="card-3d p-10" data-reveal>
      <h3 class="h-sub font-display font-semibold text-navy mb-4">Exploring your next career opportunity?</h3>
      <a href="contact.html" class="btn-ghost">Start a Conversation</a>
    </div>
  </div>
</section>
```

- [ ] **Step 4: Final CTA with orbital background visual**

```html
<section id="final-cta" class="relative py-32 bg-navy text-warm overflow-hidden">
  <img src="assets/images/cta-globe.webp" data-fallback="" alt="" aria-hidden="true"
       class="absolute inset-0 w-full h-full object-cover opacity-30" />
  <div class="relative mx-auto max-w-3xl px-6 text-center" data-reveal>
    <h2 class="h-section mb-6">Let's Build What's Next.</h2>
    <p class="text-warm/70 mb-8">
      Whether you're looking to hire, exploring a career opportunity, or simply want to learn
      more about how we work — we'd love to hear from you.
    </p>
    <a href="contact.html" class="btn-primary">Get In Touch</a>
  </div>
</section>
```

- [ ] **Step 5: Build and full-page verify**

```bash
npm run build
```
Browser tool: reload, scroll through the entire home page, screenshot at 1440/768/390. Confirm no horizontal scroll (`document.documentElement.scrollWidth <= window.innerWidth` via `javascript_tool`), zero console errors, all CTAs point to real pages.

- [ ] **Step 6: Commit**

```bash
git add src/pages/index.html js/home.js index.html
git commit -m "Complete home page: industries teaser, why-apexcel, dual CTA, final CTA"
```

---

### Task 8: About page

**Files:**
- Modify: `src/pages/about.html`

**Interfaces:**
- Consumes: same shared JS/CSS as Home; no new exports.

- [ ] **Step 1: Build the full page using this content (verbatim from source doc)**

Sections, in order: Hero ("About Apexcel"), Who We Are (paragraph 1 + 2 from "About Us"), Our Vision, Our Mission (4 bullets), Our Core Values (5 cards: Integrity, Excellence, Partnership, Speed with quality, Sector depth — each with its exact one-line description from the doc), Team/Expertise ("Our Team" paragraph from EXTRA writeup), CTA (reuse dual-CTA pattern from Task 7, linking to `contact.html`).

```html
<section class="pt-40 pb-20 bg-warm">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <p class="section-eyebrow mb-4">About Apexcel</p>
    <h1 class="h-hero text-navy">Redefining how organisations discover talent.</h1>
  </div>
</section>

<section class="py-20">
  <div class="mx-auto max-w-3xl px-6 space-y-6 text-charcoal/80" data-reveal>
    <p>Apexcel Global Solutions is a trusted recruitment and talent acquisition partner, founded with a mission to redefine how organisations across India and international markets discover and secure talent. We combine deep industry expertise with a human-first approach to matching the right people with the right opportunities.</p>
    <p>Since our founding, we have partnered with multiple companies — from nimble early-stage startups to established enterprise brands — delivering talent solutions that go beyond the resume. We invest time to understand your culture, business strategy, and growth ambitions, ensuring every placement creates lasting value.</p>
  </div>
</section>

<section class="py-20 bg-navy text-warm">
  <div class="mx-auto max-w-7xl px-6 grid md:grid-cols-2 gap-16">
    <div data-reveal>
      <h2 class="h-section mb-4">Our Vision</h2>
      <p class="text-warm/70">To become a trusted long-term hiring partner for organizations in India and overseas by consistently delivering quality talent solutions and creating long-term value for clients and candidates.</p>
    </div>
    <div data-reveal>
      <h2 class="h-section mb-4">Our Mission</h2>
      <ul class="space-y-2 text-warm/70">
        <li>To provide reliable and efficient recruitment services.</li>
        <li>To connect businesses with high-quality talent.</li>
        <li>To build long-term partnerships through professionalism and integrity.</li>
        <li>To support organizational growth through strategic hiring solutions.</li>
      </ul>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="h-section text-navy mb-14 text-center" data-reveal>Our Core Values</h2>
    <div class="grid md:grid-cols-5 gap-4">
      <div class="card-3d p-6" data-reveal><p class="font-display font-bold text-navy mb-2">Integrity</p><p class="text-sm text-charcoal/70">We build relationships on trust, transparency, and honest communication.</p></div>
      <div class="card-3d p-6" data-reveal><p class="font-display font-bold text-navy mb-2">Excellence</p><p class="text-sm text-charcoal/70">We hold ourselves to the highest standards in every search and placement.</p></div>
      <div class="card-3d p-6" data-reveal><p class="font-display font-bold text-navy mb-2">Partnership</p><p class="text-sm text-charcoal/70">We act as an extension of your team, not just a vendor.</p></div>
      <div class="card-3d p-6" data-reveal><p class="font-display font-bold text-navy mb-2">Speed with quality</p><p class="text-sm text-charcoal/70">We move fast without compromising on the rigour of our process.</p></div>
      <div class="card-3d p-6" data-reveal><p class="font-display font-bold text-navy mb-2">Sector depth</p><p class="text-sm text-charcoal/70">We speak your industry's language because we live and breathe it.</p></div>
    </div>
  </div>
</section>

<section class="py-20 bg-navy/[0.03]">
  <div class="mx-auto max-w-3xl px-6 text-center" data-reveal>
    <h2 class="h-section text-navy mb-6">Our Team</h2>
    <p class="text-charcoal/70">Our seasoned team brings extensive expertise in recruitment, talent sourcing, client relationship management, and industry hiring practices, enabling us to provide efficient and result-oriented recruitment support. Our consultative approach enables us to deliver customized recruitment solutions that not only address immediate hiring needs but also contribute to building high-performing teams and sustainable organizational success.</p>
  </div>
</section>

<section class="py-24 bg-navy text-warm text-center">
  <div class="mx-auto max-w-2xl px-6" data-reveal>
    <h2 class="h-section mb-6">Let's build your next great hire together.</h2>
    <a href="contact.html" class="btn-primary">Get In Touch</a>
  </div>
</section>
```

- [ ] **Step 2: Wire bootstrap script (same pattern as index.html) and build**

Add the standard `<script type="module">` bootstrap (nav + Lenis + fallback + `revealOnScroll("[data-reveal]")`) before `</body>`.

```bash
npm run build
```
Browser tool: navigate to `http://localhost:4500/about.html`, `get_page_text` and confirm all 5 core value names + descriptions and the Vision/Mission text appear verbatim. Screenshot at 390px.

- [ ] **Step 3: Commit**

```bash
git add src/pages/about.html about.html
git commit -m "Add About page"
```

---

### Task 9: Our Process page

**Files:**
- Modify: `src/pages/process.html`

- [ ] **Step 1: Build hero + all 5 steps in full detail (verbatim bullets from source doc)**

```html
<section class="pt-40 pb-20 text-center">
  <div class="mx-auto max-w-3xl px-6">
    <p class="section-eyebrow mb-4">Our Process</p>
    <h1 class="h-hero text-navy">A Structured Approach to Better Hiring.</h1>
    <p class="h-sub text-charcoal/70 mt-6">Great recruitment is the result of a structured, rigorous process — not luck. Our proven 5-step methodology ensures every candidate is genuinely aligned with your business, culture, and expectations.</p>
  </div>
</section>

<section class="py-10 pb-32">
  <div class="mx-auto max-w-5xl px-6 space-y-24" id="process-steps">

    <article class="grid md:grid-cols-[auto_1fr] gap-8" data-reveal data-step="1">
      <div class="text-6xl font-display font-bold text-gold/40">01</div>
      <div>
        <h2 class="font-display font-semibold text-2xl text-navy mb-3">Discovery &amp; Briefing</h2>
        <p class="text-charcoal/70 mb-4">Every successful search starts with deep understanding. Before we approach a single candidate, we invest time in a focused discovery session with your hiring stakeholders — exploring the broader business context, team dynamics, culture nuances, growth trajectory, and non-negotiables.</p>
        <ul class="grid sm:grid-cols-2 gap-2 text-sm text-charcoal/70 list-disc list-inside">
          <li>In-depth role briefing with hiring managers and HR</li>
          <li>Cultural fit assessment and employer brand understanding</li>
          <li>Market intelligence on talent availability and compensation benchmarks</li>
          <li>Agreement on process timelines, feedback cadence, and decision criteria</li>
        </ul>
      </div>
    </article>

    <article class="grid md:grid-cols-[auto_1fr] gap-8" data-reveal data-step="2">
      <div class="text-6xl font-display font-bold text-gold/40">02</div>
      <div>
        <h2 class="font-display font-semibold text-2xl text-navy mb-3">Targeted Talent Search</h2>
        <p class="text-charcoal/70 mb-4">Armed with a precise brief, our specialist consultants activate a targeted, multi-channel search strategy — engaging the passive talent market, often where the best candidates are found.</p>
        <ul class="grid sm:grid-cols-2 gap-2 text-sm text-charcoal/70 list-disc list-inside">
          <li>Active sourcing from our curated candidate database of 50,000+ profiles</li>
          <li>Passive candidate engagement through direct outreach and referral networks</li>
          <li>Industry-specific communities, associations, and events</li>
          <li>Boolean search and social media mapping for hard-to-find profiles</li>
        </ul>
      </div>
    </article>

    <article class="grid md:grid-cols-[auto_1fr] gap-8" data-reveal data-step="3">
      <div class="text-6xl font-display font-bold text-gold/40">03</div>
      <div>
        <h2 class="font-display font-semibold text-2xl text-navy mb-3">Rigorous Vetting &amp; Assessment</h2>
        <p class="text-charcoal/70 mb-4">Every candidate goes through a structured, multi-stage evaluation before reaching your shortlist. Only the top 5% of candidates we engage make it through to the shortlist stage.</p>
        <ul class="grid sm:grid-cols-2 gap-2 text-sm text-charcoal/70 list-disc list-inside">
          <li>Structured competency-based interviews by sector-specialist consultants</li>
          <li>Assessment of technical skills, leadership style, and cultural alignment</li>
          <li>Thorough reference checks with former managers and peers</li>
          <li>Background and credential verification</li>
          <li>Candidate motivation and career aspiration mapping</li>
        </ul>
      </div>
    </article>

    <article class="grid md:grid-cols-[auto_1fr] gap-8" data-reveal data-step="4">
      <div class="text-6xl font-display font-bold text-gold/40">04</div>
      <div>
        <h2 class="font-display font-semibold text-2xl text-navy mb-3">Curated Shortlist Presentation</h2>
        <p class="text-charcoal/70 mb-4">Within 10–14 business days of the briefing, you receive a carefully curated shortlist — typically 3 to 5 highly relevant, thoroughly vetted candidates, each with detailed consultant commentary.</p>
        <ul class="grid sm:grid-cols-2 gap-2 text-sm text-charcoal/70 list-disc list-inside">
          <li>Detailed candidate summary with consultant commentary on each profile</li>
          <li>Comparative analysis of shortlisted candidates</li>
          <li>Interview scheduling and coordination</li>
          <li>Preparation of candidates for your interview process</li>
        </ul>
      </div>
    </article>

    <article class="grid md:grid-cols-[auto_1fr] gap-8" data-reveal data-step="5">
      <div class="text-6xl font-display font-bold text-gold/40">05</div>
      <div>
        <h2 class="font-display font-semibold text-2xl text-navy mb-3">Offer Management &amp; Onboarding Support</h2>
        <p class="text-charcoal/70 mb-4">Our involvement doesn't end when an offer is made. We support the entire offer negotiation and acceptance process, and stay in touch post-joining to ensure a smooth onboarding transition.</p>
        <ul class="grid sm:grid-cols-2 gap-2 text-sm text-charcoal/70 list-disc list-inside">
          <li>Offer structuring guidance and salary negotiation support</li>
          <li>Resignation management and counter-offer handling</li>
          <li>Pre-joining engagement to keep candidates motivated</li>
          <li>Post-placement check-ins at 30, 60, and 90 days</li>
          <li>90-day replacement guarantee on all permanent placements</li>
        </ul>
      </div>
    </article>

  </div>
</section>
```

- [ ] **Step 2: Add a scroll-progress connecting line (desktop only)**

Append to `js/animations.js` (new export, used only by this page):
```js
export function initProcessProgress(containerSelector, stepSelector) {
  if (prefersReducedMotion()) return;
  const container = document.querySelector(containerSelector);
  if (!container) return;
  const line = document.createElement("div");
  line.className = "hidden md:block fixed left-10 top-0 w-0.5 bg-teal origin-top z-10";
  line.style.height = "0%";
  document.body.appendChild(line);
  gsap.to(line, {
    height: "100%",
    ease: "none",
    scrollTrigger: { trigger: container, start: "top center", end: "bottom center", scrub: true },
  });
}
```
Import and call `initProcessProgress("#process-steps", "[data-step]")` from `process.html`'s inline bootstrap script (add `import gsap from "gsap";` isn't needed there since it's inside `animations.js` already, which already imports gsap at module scope).

- [ ] **Step 3: Build and verify content accuracy**

```bash
npm run build
```
Browser tool: navigate to `process.html`, `get_page_text`, and diff against the bullet lists above to confirm every bullet is present with no truncation or paraphrase drift. Screenshot at 1024px and 390px (vertical stacking confirmed on mobile since it's already a single column via `md:grid-cols-[auto_1fr]`).

- [ ] **Step 4: Commit**

```bash
git add src/pages/process.html process.html js/animations.js
git commit -m "Add Our Process page with full 5-step detail and scroll progress line"
```

---

### Task 10: Industries page

**Files:**
- Modify: `src/pages/industries.html`
- Create: `js/industries.js`

**Interfaces:**
- Consumes: `assets/images/industries-bg.webp`.
- Produces: nothing consumed elsewhere (leaf page).

- [ ] **Step 1: Build hero + interactive selector markup**

Industries data (exact from source doc — 7 detailed + 1 "others" cluster):
```html
<section class="pt-40 pb-16 text-center">
  <div class="mx-auto max-w-3xl px-6">
    <p class="section-eyebrow mb-4">Industries We Serve</p>
    <h1 class="h-hero text-navy">Sector depth, not surface knowledge.</h1>
    <p class="h-sub text-charcoal/70 mt-6">Our consultants don't just recruit across industries — they specialise within them. This domain depth is what makes our shortlists sharper and our placements last longer.</p>
  </div>
</section>

<section class="pb-32">
  <div class="mx-auto max-w-7xl px-6 grid lg:grid-cols-[320px_1fr] gap-10">
    <nav id="industry-nav" class="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-2 lg:pb-0" aria-label="Industries">
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="retail" aria-pressed="true">Retail</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="ecommerce">E-commerce &amp; Quick Commerce</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="edtech">Education &amp; EdTech</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="fmcg">FMCG</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="durables">Consumer Durables</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="electronics">Consumer Electronics</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="automotive">Automotive &amp; Auto-Ancillary</button>
      <button class="industry-tab text-left px-5 py-3 rounded-xl font-medium whitespace-nowrap" data-target="others">Logistics, Healthcare, Real Estate &amp; More</button>
    </nav>

    <div class="relative">
      <img src="assets/images/industries-bg.webp" data-fallback="" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover opacity-5 rounded-3xl -z-10" />

      <div class="industry-panel" data-panel="retail">
        <h2 class="h-section text-navy mb-4">Retail</h2>
        <p class="text-charcoal/70 mb-4">From brick-and-mortar flagship stores to modern quick-commerce operations, we recruit across the full spectrum of India's evolving retail landscape — store operations, category management, buying and merchandising, retail expansion, supply chain, customer experience, and retail leadership roles.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Category Managers, Store Directors, VP Retail Operations, Chief Merchandising Officer, Head of Customer Experience</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> supermarket chains, fashion retailers, electronics retailers, specialty stores, and franchise networks</p>
      </div>

      <div class="industry-panel hidden" data-panel="ecommerce">
        <h2 class="h-section text-navy mb-4">E-commerce &amp; Quick Commerce</h2>
        <p class="text-charcoal/70 mb-4">India's e-commerce ecosystem is growing at an extraordinary pace, and the talent war is fierce. We help marketplaces, D2C brands, and quick commerce platforms hire across growth, product, technology, supply chain, category, and operations functions.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Head of Growth, Category Head, VP Supply Chain, Product Manager, Head of Last-Mile, CMO</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> horizontal and vertical marketplaces, D2C brands, q-commerce platforms, logistics tech companies</p>
      </div>

      <div class="industry-panel hidden" data-panel="edtech">
        <h2 class="h-section text-navy mb-4">Education &amp; EdTech</h2>
        <p class="text-charcoal/70 mb-4">From traditional K-12 schools and universities to cutting-edge online learning platforms, we recruit academic leaders, business professionals, and technology talent across India's education ecosystem.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Head of Sales &amp; Revenue, Product Head, Academic Director, VP Partnerships, CTO, COO</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> EdTech startups, test prep companies, K-12 chains, higher education institutions, vocational training providers</p>
      </div>

      <div class="industry-panel hidden" data-panel="fmcg">
        <h2 class="h-section text-navy mb-4">FMCG</h2>
        <p class="text-charcoal/70 mb-4">We have deep roots in India's FMCG sector, with an established track record of placing sales, marketing, supply chain, and leadership talent across food &amp; beverages, personal care, homecare, and health &amp; wellness.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> National Sales Head, Marketing Director, VP Supply Chain, Key Account Manager, CMO, GM – Trade Marketing</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> multinational FMCG companies, Indian consumer brands, private label manufacturers, distribution companies</p>
      </div>

      <div class="industry-panel hidden" data-panel="durables">
        <h2 class="h-section text-navy mb-4">Consumer Durables</h2>
        <p class="text-charcoal/70 mb-4">The consumer durables market in India is undergoing rapid premiumisation and expansion. We recruit for leading brands across product management, sales, after-sales service, channel management, and corporate functions.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Head of Channel Sales, Regional Sales Manager, Product Head, Head of Service, VP Marketing</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> white goods manufacturers, kitchen appliance brands, furniture and home décor companies, durables distributors</p>
      </div>

      <div class="industry-panel hidden" data-panel="electronics">
        <h2 class="h-section text-navy mb-4">Consumer Electronics</h2>
        <p class="text-charcoal/70 mb-4">From smartphones and audio devices to wearables and smart home products, consumer electronics demands talent with both technical acumen and commercial savvy.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Head of Business Development, Product Manager, VP Sales, Technical Sales Manager, Head of After-Sales</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> global electronics brands, Indian OEMs, B2B electronics distributors, audio and wearable companies</p>
      </div>

      <div class="industry-panel hidden" data-panel="automotive">
        <h2 class="h-section text-navy mb-4">Automotive &amp; Auto-Ancillary</h2>
        <p class="text-charcoal/70 mb-4">We serve India's automotive ecosystem comprehensively — from established OEMs and auto-ancillary manufacturers to the rapidly growing electric vehicle and mobility tech space.</p>
        <p class="text-sm text-charcoal/60"><strong class="text-navy">Key roles:</strong> Plant Head, VP Engineering, Head of EV Business, Sales Director, Chief Manufacturing Officer, Head of After-Market</p>
        <p class="text-sm text-charcoal/60 mt-2"><strong class="text-navy">Clients include:</strong> passenger and commercial vehicle OEMs, two-wheeler brands, EV startups, auto component manufacturers, mobility platforms</p>
      </div>

      <div class="industry-panel hidden" data-panel="others">
        <h2 class="h-section text-navy mb-4">Logistics, Healthcare, Real Estate &amp; More</h2>
        <p class="text-charcoal/70">Beyond our core sectors, we regularly work with clients in logistics and supply chain, healthcare and pharmaceuticals, real estate and infrastructure, hospitality, and high-growth startups across various domains. Our consultants bring flexible sector knowledge and a proven recruitment methodology to every new mandate.</p>
      </div>
    </div>
  </div>
</section>
```

Add to `src/css/input.css` `@layer components`:
```css
.industry-tab { @apply text-charcoal/60 transition-colors; }
.industry-tab[aria-pressed="true"] { @apply bg-navy text-warm; }
.industry-panel { animation: none; }
```

- [ ] **Step 2: Write the tab-switching JS**

`js/industries.js`:
```js
export function initIndustries() {
  const tabs = document.querySelectorAll(".industry-tab");
  const panels = document.querySelectorAll(".industry-panel");
  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((t) => t.setAttribute("aria-pressed", "false"));
      tab.setAttribute("aria-pressed", "true");
      panels.forEach((p) => p.classList.toggle("hidden", p.dataset.panel !== tab.dataset.target));
    });
  });
}
```

Wire `import { initIndustries } from "./js/industries.js"; initIndustries();` into `industries.html`'s bootstrap script.

- [ ] **Step 3: Build and verify all 8 tabs**

```bash
npm run build
```
Browser tool: navigate to `industries.html`, click each of the 8 tabs in sequence, and after each click `get_page_text` to confirm the corresponding panel's unique heading text is visible and the previous panel's text is gone. Screenshot the tab list at 390px to confirm it scrolls horizontally without breaking layout.

- [ ] **Step 4: Commit**

```bash
git add src/pages/industries.html industries.html js/industries.js src/css/input.css css/styles.css
git commit -m "Add Industries page with interactive sector selector"
```

---

### Task 11: Why Us page

**Files:**
- Modify: `src/pages/why-us.html`

- [ ] **Step 1: Build page with both source lists**

```html
<section class="pt-40 pb-20 text-center">
  <div class="mx-auto max-w-3xl px-6">
    <p class="section-eyebrow mb-4">Why Apexcel</p>
    <h1 class="h-hero text-navy">Why Apexcel</h1>
  </div>
</section>

<section class="py-16">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="h-section text-navy mb-10 text-center" data-reveal>Why Our Recruitment Solutions Work</h2>
    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Extensive candidate database</p></div>
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Strong industry understanding</p></div>
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Faster turnaround time</p></div>
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Quality-focused approach</p></div>
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Professional communication</p></div>
      <div class="card-3d p-6 text-center" data-reveal><p class="font-display font-semibold text-navy">Customized hiring strategies</p></div>
    </div>
  </div>
</section>

<section class="py-24 bg-navy text-warm">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="h-section mb-14 text-center" data-reveal>Why Companies Choose Apexcel</h2>
    <div class="grid md:grid-cols-2 gap-8">
      <div data-reveal>
        <h3 class="font-display font-semibold text-xl mb-2 text-teal">Industry-Focused Recruitment Expertise</h3>
        <p class="text-warm/70">We understand diverse industry requirements and deliver talent solutions aligned with business objectives.</p>
      </div>
      <div data-reveal>
        <h3 class="font-display font-semibold text-xl mb-2 text-teal">Pan-India &amp; Overseas Hiring Support</h3>
        <p class="text-warm/70">We support recruitment mandates across India and international markets.</p>
      </div>
      <div data-reveal>
        <h3 class="font-display font-semibold text-xl mb-2 text-teal">Strong Talent Network</h3>
        <p class="text-warm/70">Access to qualified professionals across multiple functions and experience levels.</p>
      </div>
      <div data-reveal>
        <h3 class="font-display font-semibold text-xl mb-2 text-teal">Fast &amp; Efficient Hiring Process</h3>
        <p class="text-warm/70">Streamlined recruitment approach ensuring timely closures and quality hiring.</p>
      </div>
      <div data-reveal class="md:col-span-2">
        <h3 class="font-display font-semibold text-xl mb-2 text-teal">Customized Recruitment Solutions</h3>
        <p class="text-warm/70">Flexible hiring models tailored to client needs.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-24 text-center">
  <div class="mx-auto max-w-2xl px-6" data-reveal>
    <h2 class="h-section text-navy mb-6">Ready to experience the difference?</h2>
    <a href="contact.html" class="btn-primary">Get In Touch</a>
  </div>
</section>
```

- [ ] **Step 2: Build and verify**

```bash
npm run build
```
Browser tool: navigate to `why-us.html`, `get_page_text`, confirm all 6 + 5 items present verbatim. Screenshot at 768px.

- [ ] **Step 3: Commit**

```bash
git add src/pages/why-us.html why-us.html
git commit -m "Add Why Us page"
```

---

### Task 12: Contact page — form, validation, success/error UI

**Files:**
- Modify: `src/pages/contact.html`
- Create: `js/forms.js`

**Interfaces:**
- Produces: nothing consumed elsewhere (leaf page). Form has no backend — `js/forms.js` must not claim submission succeeded against a real server; it validates client-side and shows a clearly-labeled "message ready" success state without asserting delivery.

- [ ] **Step 1: Build contact hero, info, and form markup**

```html
<section class="pt-40 pb-16 text-center">
  <div class="mx-auto max-w-3xl px-6">
    <p class="section-eyebrow mb-4">Contact Us</p>
    <h1 class="h-hero text-navy">Let's start a conversation.</h1>
    <p class="h-sub text-charcoal/70 mt-6">Whether you're looking to hire, exploring a career opportunity, or simply want to learn more about how we work — we'd love to hear from you.</p>
  </div>
</section>

<section class="pb-32">
  <div class="mx-auto max-w-6xl px-6 grid lg:grid-cols-[1fr_1.4fr] gap-12">
    <div class="space-y-8" data-reveal>
      <div class="card-3d p-6">
        <p class="section-eyebrow mb-2">Email</p>
        <a href="mailto:info@apexcelglobal.com" class="text-navy font-medium hover:text-teal">info@apexcelglobal.com</a>
      </div>
      <div class="card-3d p-6">
        <p class="section-eyebrow mb-2">Phone</p>
        <a href="tel:+919611658883" class="text-navy font-medium hover:text-teal">+91 9611658883</a>
      </div>
      <div class="card-3d p-6">
        <p class="section-eyebrow mb-2">Location</p>
        <p class="text-navy font-medium">Bangalore, Karnataka, India</p>
      </div>
    </div>

    <form id="contact-form" novalidate class="card-3d p-8 space-y-5" data-reveal>
      <div>
        <label for="name" class="block text-sm font-medium text-navy mb-1">Name</label>
        <input id="name" name="name" type="text" required class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
        <p class="field-error hidden text-sm text-red-600 mt-1">Please enter your name.</p>
      </div>
      <div>
        <label for="company" class="block text-sm font-medium text-navy mb-1">Company</label>
        <input id="company" name="company" type="text" class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
      </div>
      <div class="grid sm:grid-cols-2 gap-5">
        <div>
          <label for="email" class="block text-sm font-medium text-navy mb-1">Email</label>
          <input id="email" name="email" type="email" required class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
          <p class="field-error hidden text-sm text-red-600 mt-1">Please enter a valid email address.</p>
        </div>
        <div>
          <label for="phone" class="block text-sm font-medium text-navy mb-1">Phone</label>
          <input id="phone" name="phone" type="tel" class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
        </div>
      </div>
      <div>
        <label for="service" class="block text-sm font-medium text-navy mb-1">Service</label>
        <select id="service" name="service" class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal">
          <option value="recruitment">Recruitment Solutions</option>
          <option value="talent">Talent Acquisition</option>
          <option value="finance">Accounts &amp; Finance Services</option>
          <option value="other">Other</option>
        </select>
      </div>
      <div>
        <label for="message" class="block text-sm font-medium text-navy mb-1">Message</label>
        <textarea id="message" name="message" rows="4" required class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal"></textarea>
        <p class="field-error hidden text-sm text-red-600 mt-1">Please enter a message.</p>
      </div>
      <button type="submit" class="btn-primary w-full justify-center">Send Message</button>
      <p id="form-success" class="hidden text-teal font-medium text-center">Thanks — your message is ready to send. Our team will get back to you shortly.</p>
      <p id="form-error" class="hidden text-red-600 font-medium text-center">Please check the highlighted fields above.</p>
    </form>
  </div>
</section>
```

- [ ] **Step 2: Write validation JS (client-side only, honest about no backend)**

`js/forms.js`:
```js
export function initContactForm() {
  const form = document.getElementById("contact-form");
  if (!form) return;
  const successEl = document.getElementById("form-success");
  const errorEl = document.getElementById("form-error");

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    successEl.classList.add("hidden");
    errorEl.classList.add("hidden");

    let valid = true;
    const fields = [
      { id: "name", check: (v) => v.trim().length > 0 },
      { id: "email", check: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) },
      { id: "message", check: (v) => v.trim().length > 0 },
    ];

    for (const { id, check } of fields) {
      const input = document.getElementById(id);
      const errorP = input.parentElement.querySelector(".field-error");
      const ok = check(input.value);
      errorP.classList.toggle("hidden", ok);
      input.classList.toggle("border-red-500", !ok);
      if (!ok) valid = false;
    }

    if (valid) {
      successEl.classList.remove("hidden");
      form.reset();
    } else {
      errorEl.classList.remove("hidden");
    }
  });
}
```

- [ ] **Step 3: Wire and build**

Add to `contact.html` bootstrap: `import { initContactForm } from "./js/forms.js"; initContactForm();`

```bash
npm run build
```
Browser tool: navigate to `contact.html`, submit the form empty (via `computer` click on the submit button through `find`), confirm the 3 field errors appear and `#form-error` is visible; then fill name/email/message with valid values and resubmit, confirm `#form-success` appears and `#form-error` hides. Check console for zero errors.

- [ ] **Step 4: Commit**

```bash
git add src/pages/contact.html contact.html js/forms.js
git commit -m "Add Contact page with client-side form validation"
```

---

### Task 13: SEO — per-page metadata, sitemap.xml, robots.txt, structured data

**Files:**
- Modify: `src/pages/index.html`, `about.html`, `process.html`, `industries.html`, `why-us.html`, `contact.html` (`<head>` blocks)
- Create: `sitemap.xml`
- Create: `robots.txt`

- [ ] **Step 1: Add per-page `<head>` metadata**

For each `src/pages/*.html`, replace the `<head>` with (example for `index.html`; repeat with page-specific title/description for the other 5, each description drawn only from that page's real content):
```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apexcel Global Solutions | Recruitment &amp; Talent Acquisition</title>
  <meta name="description" content="Apexcel Global Solutions connects exceptional talent with ambitious organisations across India and international markets through a human-first recruitment approach." />
  <link rel="canonical" href="https://apexcelglobal.com/" />
  <meta property="og:title" content="Apexcel Global Solutions" />
  <meta property="og:description" content="A trusted recruitment and talent acquisition partner across India and international markets." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="/assets/logo/apexcel-logo.png" />
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="icon" href="assets/logo/apexcel-logo.svg" type="image/svg+xml" />
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Apexcel Global Solutions",
    "email": "info@apexcelglobal.com",
    "telephone": "+91 9611658883",
    "address": { "@type": "PostalAddress", "addressLocality": "Bangalore", "addressRegion": "Karnataka", "addressCountry": "IN" }
  }
  </script>
</head>
```

- [ ] **Step 2: Write sitemap.xml and robots.txt**

`sitemap.xml`:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://apexcelglobal.com/</loc></url>
  <url><loc>https://apexcelglobal.com/about.html</loc></url>
  <url><loc>https://apexcelglobal.com/process.html</loc></url>
  <url><loc>https://apexcelglobal.com/industries.html</loc></url>
  <url><loc>https://apexcelglobal.com/why-us.html</loc></url>
  <url><loc>https://apexcelglobal.com/contact.html</loc></url>
</urlset>
```

`robots.txt`:
```
User-agent: *
Allow: /
Sitemap: https://apexcelglobal.com/sitemap.xml
```

- [ ] **Step 3: Build and spot-check**

```bash
npm run build
grep -c "<title>" index.html about.html process.html industries.html why-us.html contact.html
```
Expected: each file reports `1`. Browser tool: view-source check (via `get_page_text` won't show head; instead use `javascript_tool` to run `document.title` and `document.querySelector('meta[name=description]').content` on each page) to confirm unique, non-empty values per page.

- [ ] **Step 4: Commit**

```bash
git add src/pages/*.html *.html sitemap.xml robots.txt
git commit -m "Add per-page SEO metadata, sitemap, robots.txt, and Organization schema"
```

---

### Task 14: Full responsive & accessibility QA pass, final polish

**Files:**
- Modify: any file where an issue is found (tracked per finding below, not pre-specified)

- [ ] **Step 1: Console-error and dead-link sweep**

Browser tool: for each of the 6 pages, navigate to it via `npx serve` and run `read_console_messages` with `onlyErrors: true`. Fix any error before continuing. Then run this link-check script:
```bash
node -e "
import { readFileSync, existsSync } from 'node:fs';
const pages = ['index.html','about.html','process.html','industries.html','why-us.html','contact.html'];
for (const p of pages) {
  const html = readFileSync(p, 'utf8');
  const hrefs = [...html.matchAll(/href=\"([^\"#][^\"]*\.html)\"/g)].map(m => m[1]);
  for (const h of hrefs) if (!existsSync(h)) console.log(\`BROKEN LINK in \${p}: \${h}\`);
}
console.log('link check done');
"
```
Expected: no `BROKEN LINK` lines.

- [ ] **Step 2: Responsive sweep at required breakpoints**

Using `resize_window` then `computer{action:"screenshot"}`, check each of the 6 pages at 375, 768, 1024, 1440 widths. For each screenshot, confirm: no horizontal overflow (also verify via `javascript_tool`: `document.documentElement.scrollWidth - window.innerWidth` should be `<= 1`), no overlapping text, mobile menu opens/closes cleanly at 375px on every page (not just Home).

- [ ] **Step 3: Reduced-motion check**

`resize_window` with `colorScheme` unrelated — instead use `javascript_tool` to verify: `window.matchMedia('(prefers-reduced-motion: reduce)').matches` path is respected by checking that `revealOnScroll` early-returns (spot check: temporarily set the OS/browser reduced-motion preference is not directly controllable from this tool set, so instead confirm code-level: `grep -n "prefersReducedMotion" js/*.js` shows every motion-adding function (`revealOnScroll`, hero parallax, `initLenis`, `initProcessProgress`) guarded by it).

```bash
grep -L "prefersReducedMotion" js/animations.js js/home.js
```
Expected: empty output (every file that adds motion imports/checks the guard).

- [ ] **Step 4: Keyboard/focus pass**

Browser tool: on `index.html`, use `computer{action:"key", text:"Tab"}` repeatedly from page load and confirm each nav link, the mobile menu button, and both hero CTAs receive a visible focus outline (Tailwind's default focus ring is present since no `outline-none` was applied without a `focus:ring-*` replacement — grep to confirm):
```bash
grep -rn "outline-none" src/pages/ components/ | grep -v "focus:ring"
```
Expected: empty (any `outline-none` usage must be paired with a `focus:ring-*` on the same element).

- [ ] **Step 5: Image fallback verification**

```bash
grep -rL "data-fallback" src/pages/*.html | xargs grep -l "<img" || echo "all img tags checked"
```
Manually confirm every `<img>` found either has `data-fallback` or is decorative (`alt=""` + `aria-hidden="true"`, which don't need a visible fallback since they're not content-bearing).

- [ ] **Step 6: Senior-creative-director design pass (master prompt §45)**

Screenshot the full scroll of each page at 1440px. For each, answer in writing (add findings to this task's commit message or fix inline): is the hero impressive, is spacing balanced, do animations feel smooth (re-check timing values against the 0.3–0.6s guidance in Global Constraints), does mobile feel intentional (not just a shrunk desktop layout — re-check Task 10's industry nav horizontal-scroll and Task 5's hero grid stacking). Fix anything that reads as generic or template-like before moving on.

- [ ] **Step 7: Second refinement pass**

Repeat Step 6 once more after fixes are applied, per the master prompt's "at least two refinement passes" requirement. Only stop when every answer in Step 6 is yes.

- [ ] **Step 8: Final build and commit**

```bash
npm run build
git add -A
git commit -m "QA pass: fix console errors, responsive issues, accessibility gaps, and design polish"
```

---

### Task 15: README and final delivery check

**Files:**
- Create: `README.md`

- [ ] **Step 1: Write README covering setup, build, and asset regeneration**

`README.md`:
```markdown
# Apexcel Global Solutions — Website

Static site: HTML5 + Tailwind CSS + vanilla JS (GSAP, Lenis, Swiper).

## Setup

npm install

## Build

npm run build   # compiles Tailwind (css/styles.css) and assembles pages from src/pages + components

## Local preview

npx serve .
# open http://localhost:3000

## Regenerating visual assets (optional, requires GEMINI_API_KEY in .env)

node --env-file=.env scripts/generate-assets.mjs

## Structure

See docs/superpowers/specs/2026-08-16-apexcel-website-design.md for the full design spec
and docs/superpowers/plans/2026-08-16-apexcel-website.md for the build plan.
```

- [ ] **Step 2: Final end-to-end verification**

```bash
npm run build
npx serve . -l 4600 &
```
Browser tool: visit all 6 pages, click every nav link (desktop and mobile menu) from every page to confirm no dead ends, confirm the logo always links home, confirm footer contact links use `mailto:`/`tel:` correctly.

- [ ] **Step 3: Commit**

```bash
git add README.md
git commit -m "Add README with setup and build instructions"
```

---

## Self-Review Notes

- **Spec coverage:** Tech stack (Task 1), design system/tokens (Task 2), header/nav/footer (Task 3), image strategy incl. Gemini + fallback (Task 4, Global Constraints), all 6 pages with verbatim source content (Tasks 5–12), SEO/sitemap/robots/schema (Task 13), full QA checklist incl. responsive/accessibility/reduced-motion/console/links (Task 14), README/delivery (Task 15). No spec section left uncovered.
- **No fabricated content:** every stat/list/contact detail in Tasks 5–12 is copied from the extracted docx text; sections with no source material (testimonials, awards, team names) are intentionally absent, matching the spec.
- **Interface consistency:** `revealOnScroll`, `initLenis`, `prefersReducedMotion`, `attachImageFallback`, `initNavigation` are defined once in Task 3 and only ever imported (never redefined) in Tasks 5–13; `initProcessProgress` is added to the same `animations.js` module in Task 9 rather than a new file, keeping the "Consumes" contracts accurate.