feat: differentiated hero + GSAP motion for aigate marketing site

[murilopmachado]

What changed

The five AxeForge marketing sites built this session shared one template: same topbar, same "kicker / h1 / lede / two buttons" hero on the left, same terminal-window demo on the right. This PR gives aigate's site its own hero, grounded in its actual mechanism, while keeping the brand system (tokens, topbar, footer, SEO) untouched.

New hero concept: a sandbox boundary diagram

Replaced the text-left/terminal-right layout with a stacked hero: copy on top, then a full-width CSS/SVG diagram below that draws aigate's kernel-enforced isolation directly instead of describing it in a fake terminal log.

The diagram shows an "AI agent process" box inside a sealed boundary with three gates — FILE, EXEC, NETWORK — matching the product's real deny_read / deny_exec / allow_net rule types. Small dots represent syscalls leaving the process toward a gate: allowed ones pass through to an external host pill (api.anthropic.com), blocked ones bounce back inside the boundary. The five example events are the same ones the old hero's simulated feed already used (cat ~/.ssh/id_rsa, curl ifconfig.me, connect evil-exfil.com:443, connect api.anthropic.com, kubectl delete pods), just made visible instead of logged as text.

GSAP motion (3.12.5 + ScrollTrigger, via CDN)

• Hero entrance: kicker → h1 → lede → ctas → trust line → diagram, staggered on load.
• Boundary "sealing": the perimeter draws itself in via stroke-dashoffset (length from getTotalLength()), then corner brackets, the process box, the three gates, and the destination pill pop in, then a pair of syscall dots start looping across the gates on a timer.
• Scroll reveals: each section (isolation, platforms, commands, usecases, install) fades + rises in, staggered across its cards, once per section via ScrollTrigger.

Reduced motion: a single prefers-reduced-motion check at the top of the script short-circuits everything before any element is hidden — the page is progressive enhancement (default CSS = fully visible), not "hide then reveal via JS", so a failed CDN load or reduced-motion preference both degrade to the same fully-visible static page. Verified with a real --force-prefers-reduced-motion browser emulation, not just by reading the code: screenshot shows the entire hero, diagram, and even the first feature-card section rendered immediately with zero animation.

Verification

• Served web/ locally, screenshotted at 1440×1600 and 375×1400 (plus taller captures to see the full page) and read every image.
• Confirmed no page-wide horizontal scroll: measured document.documentElement.scrollWidth vs window.innerWidth at both 375px and 1440px — no overflow at either. The diagram itself uses a contained overflow-x:auto wrapper (reusing the same pattern the platforms table already uses) with a min-width floor, so it degrades to a scrollable technical diagram on narrow phones instead of forcing page-wide scroll.
• Verified light mode (data-theme="light") renders correctly — every new color in the diagram is token-driven (var(--af-accent), var(--af-text), var(--af-surface), etc.) except the two pre-existing hardcoded warn/info hex values already used elsewhere on this page.
• Re-ran impeccable/scripts/detect.mjs --json — same pre-existing advisory-only findings as before my changes (grid-background pattern, single-font, em-dash count), no new findings.

Impeccable score: 20/20 (all 5 dimensions held at 4/4, none needed a fix)

Dimension	Score	Notes
Accessibility	4/4	SVG has role="img" + a real <title> describing the mechanism; reduced-motion verified via real emulation, not assumption; tone is never color-only (always paired with text in the readout/legend).
Performance	4/4	Only new network cost is the two mandated GSAP CDN scripts; diagram is inline SVG (no new image assets); animations use opacity/transform except two small SVG circles' cx/cy.
Theming	4/4	Every new color is a brand token except the two hex values already present in the file pre-change; verified in both dark (default) and light (data-theme="light") mode.
Responsive	4/4	No page-wide horizontal scroll at 375px or 1440px (measured, not assumed); wide diagram degrades via the same contained-scroll pattern the platforms table already uses.
Implementation Integrity	4/4	Removed all now-dead CSS from the old terminal-box hero; kept the classes still shared with the feature cards; no leftover debug code; detect.mjs shows zero new findings.

Test plan

• python3 -m http.server in web/, screenshot at 1440×1600 and 375×1400
• Re-ran detect.mjs --json — no new findings
• Verified reduced-motion final state via --force-prefers-reduced-motion
• Verified light theme via data-theme="light"
• Measured scrollWidth vs innerWidth at 375px/1440px — no horizontal overflow

[github-actions]

✅ PR title follows the required format

Current title: feat: differentiated hero + GSAP motion for aigate marketing site