diff --git a/.gitignore b/.gitignore
index f773e52..848b0dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
 .DS_Store
 .vercel
 node_modules
+.next
+out
+*.tsbuildinfo
+.env*.local
diff --git a/styles.css b/app/globals.css
similarity index 98%
rename from styles.css
rename to app/globals.css
index 14175c8..54df9c9 100644
--- a/styles.css
+++ b/app/globals.css
@@ -54,12 +54,12 @@ body::before {
   z-index: 0;
 }
 /* theme variants — applied via body[data-theme] */
-body[data-theme="helm"] {
+[data-theme="helm"] {
   --accent: #7ec5ff;
   --accent-soft: rgba(126, 197, 255, 0.12);
   --accent-glow: rgba(126, 197, 255, 0.35);
 }
-body[data-theme="agency"] {
+[data-theme="agency"] {
   --accent: #7892bd;
   --accent-soft: rgba(120, 146, 189, 0.13);
   --accent-glow: rgba(120, 146, 189, 0.38);
@@ -117,12 +117,12 @@ body.ready .spotlight { opacity: 1; }
 }
 /* Denim brand mark for 42nights — used on /, and as the parent-brand mark on pulse/helm navs */
 .brand-mark.denim,
-body[data-theme="agency"] .brand-mark {
+[data-theme="agency"] .brand-mark {
   background: linear-gradient(135deg, #88a3cd 0%, #5a7bb0 100%);
   color: #f5f7fb;
   box-shadow: 0 0 0 1px rgba(120, 146, 189, 0.35), 0 0 24px -2px rgba(120, 146, 189, 0.45);
 }
-body[data-theme="helm"] .brand-mark:not(.denim) {
+[data-theme="helm"] .brand-mark:not(.denim) {
   background: linear-gradient(135deg, #b6dcff 0%, #5a9adc 100%);
   color: #07101c;
   box-shadow: 0 0 0 1px rgba(126, 197, 255, 0.32), 0 0 24px -2px rgba(126, 197, 255, 0.45);
@@ -310,11 +310,6 @@ body[data-theme="helm"] .brand-mark:not(.denim) {
   box-shadow: 0 0 0 1px rgba(205, 251, 83, 0.5), 0 6px 20px -4px var(--accent-glow);
   transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
 }
-body[data-phase="pe"] .pt-indicator {
-  background: var(--helm);
-  box-shadow: 0 0 0 1px rgba(126, 197, 255, 0.5), 0 6px 20px -4px rgba(126, 197, 255, 0.35);
-}
-
 /* hero-stage holds both phases stacked */
 .hero-stage {
   position: relative;
@@ -837,14 +832,10 @@ body[data-phase="pe"] .pt-indicator {
   position: absolute; left: 16px; top: 50%;
   width: 0;
   height: 1px;
-  background: linear-gradient(90deg, var(--accent), rgba(205,251,83,0.7));
+  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
   box-shadow: 0 0 10px var(--accent-glow);
   transform: translateY(-50%);
 }
-body[data-phase="pe"] .rm-progress {
-  background: linear-gradient(90deg, var(--helm), rgba(126,197,255,0.7));
-  box-shadow: 0 0 10px rgba(126,197,255,0.4);
-}
 .rm-dot {
   position: relative; z-index: 2;
   width: 32px; height: 32px;
diff --git a/app/helm/page.tsx b/app/helm/page.tsx
new file mode 100644
index 0000000..a22e99a
--- /dev/null
+++ b/app/helm/page.tsx
@@ -0,0 +1,404 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import GsapClient from '@/components/GsapClient';
+import Nav from '@/components/Nav';
+import Footer from '@/components/Footer';
+import Marquee from '@/components/Marquee';
+import Terminal from '@/components/Terminal';
+
+export const metadata: Metadata = {
+  title: 'Helm — the portfolio operating cockpit',
+  description:
+    'KPI roll-ups across portcos, variance flags, board-pack agent. On infrastructure you control. Built on Recon, deployed by 42nights.',
+  alternates: { canonical: '/helm' },
+  openGraph: {
+    type: 'website',
+    url: '/helm',
+    title: 'Helm — portfolio cockpit on your infra',
+    description:
+      'KPI roll-ups, variance flags, DD workspace, board-pack agent. Built on Recon, deployed by 42nights.',
+    siteName: '42nights',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Helm — portfolio cockpit on your infra',
+    description:
+      'KPI roll-ups, variance flags, DD workspace, board-pack agent. Built on Recon, deployed by 42nights.',
+  },
+};
+
+export const viewport = { themeColor: '#7ec5ff' };
+
+const ArrowSm = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="13"
+    height="13"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+export default function HelmPage() {
+  return (
+    <div data-theme="helm">
+      <Nav active="helm" />
+
+      {/* HERO */}
+      <section className="hero" id="top">
+        <div className="hero-grid" aria-hidden="true" data-parallax="0.4" />
+        <div className="hero-orb" aria-hidden="true" data-parallax="0.7" />
+        <div className="hero-bg-word" aria-hidden="true" data-parallax="0.25">
+          helm
+        </div>
+
+        <div className="container hero-inner">
+          <div className="hero-badge" data-reveal>
+            <span className="ping" />
+            <span>Helm · Built on Recon · Deployed by 42nights</span>
+          </div>
+
+          <h1 className="hero-title">
+            <span className="line">
+              <span className="word">A</span> <span className="word italic">portfolio</span>
+            </span>
+            <span className="line">
+              <span className="word">cockpit</span> <span className="word">for</span>
+            </span>
+            <span className="line">
+              <span className="word italic">holdcos</span> <span className="word">&amp;</span>{' '}
+              <span className="word">PE.</span>
+            </span>
+          </h1>
+          <p className="hero-sub" data-reveal>
+            KPI roll-ups across portcos, variance flags, DD workspace, board-pack agent. On
+            infrastructure you control. Deployed by{' '}
+            <Link className="inline-link" href="/">
+              42nights
+            </Link>{' '}
+            in four weeks.
+          </p>
+          <p className="hero-audience" data-reveal>
+            Operating partners · COOs · Holdcos · Family offices · LP teams
+          </p>
+
+          <div className="hero-cta" data-reveal>
+            <a className="btn btn-primary" href="#cta" data-magnetic>
+              <span>Book a Helm deploy</span>
+              <ArrowSm />
+            </a>
+            <Link className="btn btn-ghost" href="/recon">
+              <span>See the platform</span>
+            </Link>
+          </div>
+
+          <div className="hero-stats" data-reveal>
+            <div className="stat">
+              <span className="stat-num" data-counter="100">
+                0
+              </span>
+              <span className="stat-label">% on your own infra</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="6">
+                0
+              </span>
+              <span className="stat-label">PE skill packs</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="4">
+                0
+              </span>
+              <span className="stat-label">week deploy</span>
+            </div>
+          </div>
+        </div>
+
+        <Marquee
+          items={[
+            'QuickBooks',
+            'Xero',
+            'NetSuite',
+            'Stripe',
+            'Plaid',
+            'Rippling',
+            'Gusto',
+            'HubSpot',
+            'Salesforce',
+            'Carta',
+            'Drive · Box · Docsend',
+            'Notion',
+          ]}
+        />
+      </section>
+
+      {/* CAPABILITIES */}
+      <section className="section" id="capabilities">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          01
+        </div>
+        <div className="container">
+          <div className="section-head section-head-narrow">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              What Helm does
+            </div>
+            <h2 className="section-title" data-split>
+              From portco<br />
+              <em>to board pack.</em>
+            </h2>
+          </div>
+
+          <div className="cap-grid" data-stagger>
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="10" y="58" width="14" height="22" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="30" y="44" width="14" height="36" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="50" y="62" width="14" height="18" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="70" y="36" width="14" height="44" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="90" y="50" width="14" height="30" rx="2" fill="rgba(126,197,255,0.55)" />
+                <text x="57" y="92" className="cap-label" textAnchor="middle">portcos</text>
+                <line x1="120" y1="58" x2="148" y2="58" stroke="var(--accent)" strokeWidth="1.4" />
+                <polyline points="142,53 148,58 142,63" stroke="var(--accent)" fill="none" strokeWidth="1.4" />
+                <rect x="158" y="20" width="44" height="60" rx="5" fill="rgba(126,197,255,0.22)" stroke="var(--accent)" />
+                <text x="180" y="92" className="cap-label" textAnchor="middle">holdco</text>
+              </svg>
+              <h3>KPI roll-ups</h3>
+              <p>Portcos in. Dashboard out.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <line x1="10" y1="46" x2="210" y2="46" stroke="rgba(255,255,255,0.15)" strokeDasharray="2 4" />
+                <text x="14" y="14" className="cap-label">plan</text>
+                <text x="14" y="80" className="cap-label">actual</text>
+                <path d="M 20 40 L 60 38 L 100 42 L 140 56 L 180 60 L 210 65" stroke="var(--accent)" strokeWidth="1.6" fill="none" />
+                <circle cx="140" cy="56" r="5" fill="none" stroke="rgba(255,140,140,0.85)" strokeWidth="1.6" />
+                <line x1="135" y1="51" x2="145" y2="61" stroke="rgba(255,140,140,0.85)" strokeWidth="1.5" />
+                <line x1="145" y1="51" x2="135" y2="61" stroke="rgba(255,140,140,0.85)" strokeWidth="1.5" />
+                <text x="148" y="40" className="cap-label-out" fill="rgba(255,140,140,0.9)">flag</text>
+              </svg>
+              <h3>Variance vs plan</h3>
+              <p>Flagged. Drafted. Reviewed.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="0" y="6" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="36" y="17" className="cap-label">data room</text>
+                <rect x="0" y="26" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="36" y="37" className="cap-label">CIM</text>
+                <rect x="0" y="46" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="36" y="57" className="cap-label">model</text>
+                <rect x="0" y="66" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="36" y="77" className="cap-label">notes</text>
+                <path d="M 110 6 L 110 86" stroke="rgba(255,255,255,0.1)" strokeDasharray="2 3" />
+                <rect x="120" y="14" width="92" height="20" rx="4" fill="rgba(126,197,255,0.16)" stroke="var(--accent)" />
+                <text x="166" y="28" className="cap-label-out" textAnchor="middle">DD workspace</text>
+                <rect x="120" y="42" width="64" height="14" rx="3" fill="rgba(255,255,255,0.05)" />
+                <text x="124" y="53" className="cap-label">checklist</text>
+                <rect x="120" y="62" width="80" height="14" rx="3" fill="rgba(255,255,255,0.05)" />
+                <text x="124" y="73" className="cap-label">risk flags</text>
+              </svg>
+              <h3>DD workspace generator</h3>
+              <p>Per-deal. Auto-tagged.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="6" y="10" width="80" height="72" rx="4" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)" />
+                <line x1="14" y1="22" x2="78" y2="22" stroke="rgba(255,255,255,0.15)" />
+                <line x1="14" y1="32" x2="60" y2="32" stroke="rgba(255,255,255,0.15)" />
+                <line x1="14" y1="42" x2="74" y2="42" stroke="rgba(255,255,255,0.15)" />
+                <line x1="14" y1="52" x2="50" y2="52" stroke="rgba(255,255,255,0.15)" />
+                <line x1="14" y1="62" x2="68" y2="62" stroke="rgba(255,255,255,0.15)" />
+                <line x1="14" y1="72" x2="56" y2="72" stroke="rgba(255,255,255,0.15)" />
+                <text x="46" y="92" className="cap-label" textAnchor="middle">notes</text>
+                <line x1="92" y1="46" x2="124" y2="46" stroke="var(--accent)" strokeWidth="1.4" />
+                <polyline points="118,41 124,46 118,51" stroke="var(--accent)" fill="none" strokeWidth="1.4" />
+                <rect x="130" y="10" width="84" height="72" rx="4" fill="rgba(126,197,255,0.12)" stroke="var(--accent)" />
+                <text x="172" y="38" className="cap-label-out" textAnchor="middle">BOARD</text>
+                <text x="172" y="52" className="cap-label-out" textAnchor="middle">PACK</text>
+                <text x="172" y="92" className="cap-label" textAnchor="middle">board ready</text>
+              </svg>
+              <h3>Board-pack agent</h3>
+              <p>Notes in. Pack out.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      {/* ROADMAP */}
+      <section className="section section-narrow" id="roadmap">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          02
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Roadmap
+            </div>
+            <h2 className="section-title" data-split>
+              Five phases<br />
+              <em>per deployment.</em>
+            </h2>
+          </div>
+
+          <div className="rm-timeline" data-active-phase="0">
+            <div className="rm-track">
+              <div className="rm-line" />
+              <div className="rm-progress" />
+              <button className="rm-dot active" data-phase-idx="0" aria-label="Phase 1">
+                <span>01</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="1" aria-label="Phase 2">
+                <span>02</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="2" aria-label="Phase 3">
+                <span>03</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="3" aria-label="Phase 4">
+                <span>04</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="4" aria-label="Phase 5">
+                <span>05</span>
+              </button>
+            </div>
+
+            <div className="rm-stage">
+              <div className="rm-panels active" data-roadmap-panel="helm">
+                <div className="rm-panel active" data-phase-idx="0">
+                  <span className="rm-tag">Phase 1 · Helm</span>
+                  <h4>Multi-entity foundation</h4>
+                  <p>
+                    Workspace-as-portfolio-company. HoldCo workspace aggregating read-only views.
+                    Entities: Company, People, Contracts, KPIs, Reporting periods.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="1">
+                  <span className="rm-tag">Phase 2 · Helm</span>
+                  <h4>Operating cadence</h4>
+                  <p>
+                    QuickBooks / Xero / NetSuite, Stripe, HRIS, Hub/Salesforce ingest. Auto-populated
+                    monthly &amp; quarterly templates with variance flags.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="2">
+                  <span className="rm-tag">Phase 3 · Helm</span>
+                  <h4>Diligence &amp; deal flow</h4>
+                  <p>
+                    Deal pipeline as a first-class object. Per-deal DD workspace generator.
+                    Data-room ingest with auto-tagging and risk flag agents.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="3">
+                  <span className="rm-tag">Phase 4 · Helm</span>
+                  <h4>Portfolio agents</h4>
+                  <p>
+                    Operating-partner agent per portco. Cross-portfolio benchmarking on margin, CAC
+                    payback, NRR percentiles. Talent-network agent.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="4">
+                  <span className="rm-tag">Phase 5 · Helm</span>
+                  <h4>LP &amp; governance</h4>
+                  <p>
+                    LP reporting view (capital account, IRR/MOIC). Board-pack generator from
+                    operating-partner output. SOC2-ready audit trail.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* PLATFORM REFERENCE */}
+      <section className="section section-narrow platform-ref">
+        <div className="container">
+          <div className="ref-card" data-reveal>
+            <div className="ref-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Built on Recon
+              </div>
+              <h3>Same gateway. Same vault. Same audit log.</h3>
+              <p>
+                Helm is a thin Next.js app over the Recon substrate. Each portco is a scoped
+                workspace; the holdco view is a read-only roll-up. Same security posture, same audit
+                trail.
+              </p>
+              <Link className="btn btn-ghost" href="/recon">
+                <span>See the Recon platform</span>
+                <ArrowSm />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="section cta-sec" id="cta">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          03
+        </div>
+        <div className="container">
+          <div className="cta-card" data-reveal>
+            <div className="cta-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Get Helm deployed
+              </div>
+              <h2 className="section-title" data-split>
+                Four weeks to<br />
+                <em>a holdco cockpit.</em>
+              </h2>
+              <p className="section-lede">
+                42nights deploys Helm inside your perimeter — one workspace per portco, holdco view
+                rolling up. Discovery to running in four weeks.
+              </p>
+              <div className="hero-cta">
+                <a
+                  className="btn btn-primary"
+                  href="mailto:jerry@xiao.sh?subject=Helm%20deploy"
+                  data-magnetic
+                >
+                  <span>Book a deploy</span>
+                  <ArrowSm />
+                </a>
+                <Link className="btn btn-ghost" href="/">
+                  <span>About 42nights</span>
+                </Link>
+              </div>
+            </div>
+
+            <Terminal
+              title="helm · pinemark-holdco"
+              lines={[
+                { prompt: '$', cmd: 'recon up --variant=helm' },
+                { prompt: '', out: '▲ holdco workspace ready · 7 portcos scoped', outClass: 'ok' },
+                { prompt: '$', cmd: 'helm ingest --kpi --portco=northstar' },
+                { prompt: '', out: '✓ QB · Stripe · HRIS · 14 KPIs synced' },
+                { prompt: '$', cmd: 'helm variance --period=Q2 --vs=plan' },
+                { prompt: '', out: '◇ 3 portcos flagged · 12 commentary drafts' },
+                { prompt: '$', cmd: 'helm board-pack --period=Q2 --portco=all' },
+                { prompt: '', out: '◇ pack drafted · 38 pages · awaiting review', outClass: 'muted' },
+              ]}
+            />
+          </div>
+        </div>
+      </section>
+
+      <Footer variant="product" productName="Helm" />
+      <GsapClient />
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..a549382
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,41 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://42nights.dev'),
+  title: { default: '42nights', template: '%s · 42nights' },
+  description: '42nights deploys AI operating layers inside your perimeter.',
+  icons: { icon: '/favicon.svg' },
+};
+
+export const viewport = {
+  themeColor: '#7892bd',
+};
+
+const fontHref =
+  'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link rel="stylesheet" href={fontHref} />
+      </head>
+      <body>
+        <div className="grain" aria-hidden="true" />
+        <div className="spotlight" aria-hidden="true" />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..66e45b0
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,481 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import GsapClient from '@/components/GsapClient';
+import Nav from '@/components/Nav';
+import Footer from '@/components/Footer';
+import Marquee from '@/components/Marquee';
+import Terminal from '@/components/Terminal';
+
+export const metadata: Metadata = {
+  title: '42nights — engineering studio · SF',
+  description:
+    'An in-person engineering studio. We embed for four weeks, ship Recon (or Pulse, or Helm) on your infrastructure, and hand the keys to your team.',
+  alternates: { canonical: '/' },
+  openGraph: {
+    type: 'website',
+    url: '/',
+    title: '42nights — engineering studio · SF',
+    description:
+      'We embed for four weeks and ship the operating layer that runs your business — inside your perimeter.',
+    siteName: '42nights',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: '42nights — engineering studio · SF',
+    description:
+      'We embed for four weeks and ship the operating layer that runs your business — inside your perimeter.',
+  },
+};
+
+export const viewport = { themeColor: '#7892bd' };
+
+const ArrowSm = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="13"
+    height="13"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+export default function StudioPage() {
+  return (
+    <div data-theme="agency">
+      <Nav active="studio" />
+
+      {/* HERO */}
+      <section className="hero studio-hero" id="top">
+        <div className="hero-grid" aria-hidden="true" data-parallax="0.4" />
+        <div className="hero-orb" aria-hidden="true" data-parallax="0.7" />
+        <div className="hero-bg-word" aria-hidden="true" data-parallax="0.25">
+          42n
+        </div>
+
+        <div className="container hero-inner studio-inner">
+          <div className="hero-badge" data-reveal>
+            <span className="ping" />
+            <span>Engineering studio · SF + on-site · est. ’24</span>
+          </div>
+
+          <h1 className="hero-title studio-title">
+            <span className="line">
+              <span className="word">We</span> <span className="word italic">embed</span>
+            </span>
+            <span className="line">
+              <span className="word">inside</span> <span className="word">your</span>{' '}
+              <span className="word">team</span>
+            </span>
+            <span className="line">
+              <span className="word">and</span> <span className="word">ship</span>{' '}
+              <span className="word">the</span>
+            </span>
+            <span className="line">
+              <span className="word italic">operating</span>{' '}
+              <span className="word italic">layer</span>
+            </span>
+            <span className="line">
+              <span className="word">that</span> <span className="word">runs</span>{' '}
+              <span className="word">your</span> <span className="word">business.</span>
+            </span>
+          </h1>
+
+          <p className="hero-sub studio-sub" data-reveal>
+            42nights is a four-week, on-site engineering studio. We deploy{' '}
+            <Link className="inline-link" href="/recon">
+              Recon
+            </Link>{' '}
+            — and its variants{' '}
+            <Link className="inline-link" href="/pulse">
+              Pulse
+            </Link>{' '}
+            for revenue teams and{' '}
+            <Link className="inline-link helm-link" href="/helm">
+              Helm
+            </Link>{' '}
+            for portfolio teams — inside your perimeter, then hand the keys to your operators.
+          </p>
+
+          <div className="hero-cta" data-reveal>
+            <a className="btn btn-primary" href="#contact" data-magnetic>
+              <span>Book a discovery</span>
+              <ArrowSm />
+            </a>
+            <a className="btn btn-ghost" href="#approach">
+              <span>How we work</span>
+            </a>
+          </div>
+
+          <div className="hero-stats studio-stats" data-reveal>
+            <div className="stat">
+              <span className="stat-num" data-counter="4">
+                0
+              </span>
+              <span className="stat-label">week engagement</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="100">
+                0
+              </span>
+              <span className="stat-label">% on your infra</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="3">
+                0
+              </span>
+              <span className="stat-label">products deployed</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="90">
+                0
+              </span>
+              <span className="stat-label">day post-deploy support</span>
+            </div>
+          </div>
+        </div>
+
+        <Marquee
+          items={[
+            'Holding companies',
+            'Series B → late-stage',
+            'RevOps',
+            'Operating partners',
+            'Family offices',
+            'Holdcos',
+            'Sales leadership',
+            'COOs',
+            'Studio of three',
+            'SF + on-site',
+          ]}
+        />
+      </section>
+
+      {/* APPROACH */}
+      <section className="section section-narrow" id="approach">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          01
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Approach
+            </div>
+            <h2 className="section-title" data-split>
+              Four weeks. <em>On site.</em>
+              <br />
+              Then it&apos;s yours.
+            </h2>
+            <p className="section-lede" data-reveal>
+              We don&apos;t write a deck and disappear. We sit at your desk, watch your operators
+              work, and ship the system that fits — then we leave.
+            </p>
+          </div>
+
+          <ol className="process-list" data-stagger role="list">
+            <li className="process-row">
+              <span className="pr-week">W1</span>
+              <div className="pr-body">
+                <h3>Discovery on the ground.</h3>
+                <p>
+                  One week shadowing your team. We map workflows, identify which pieces of Recon
+                  (or Pulse / Helm) fit, and write the deployment plan with you.
+                </p>
+              </div>
+              <span className="pr-out">scope &amp; plan</span>
+            </li>
+            <li className="process-row">
+              <span className="pr-week">W2</span>
+              <div className="pr-body">
+                <h3>Deploy the substrate.</h3>
+                <p>
+                  Recon goes inside your VPC, on-prem, or air-gapped — whichever your security
+                  review demands. Identity, vault, gateway, audit log, all live by end of week.
+                </p>
+              </div>
+              <span className="pr-out">platform live</span>
+            </li>
+            <li className="process-row">
+              <span className="pr-week">W3</span>
+              <div className="pr-body">
+                <h3>Ship the surface.</h3>
+                <p>
+                  Pulse for revenue, Helm for portfolio, or a custom variant. Your data is wired,
+                  your skills are tuned, your operators are running real workflows by Friday.
+                </p>
+              </div>
+              <span className="pr-out">surface running</span>
+            </li>
+            <li className="process-row">
+              <span className="pr-week">W4</span>
+              <div className="pr-body">
+                <h3>Hand off.</h3>
+                <p>
+                  Train your team, document the deploy, transfer source escrow, set up the 90-day
+                  support cadence. We leave on Friday. The platform stays.
+                </p>
+              </div>
+              <span className="pr-out">team owns it</span>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* PRODUCTS WE DEPLOY */}
+      <section className="section" id="products">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          02
+        </div>
+        <div className="container">
+          <div className="section-head section-head-narrow">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              What we ship
+            </div>
+            <h2 className="section-title" data-split>
+              One platform.
+              <br />
+              <em>Two specialized cockpits.</em>
+            </h2>
+            <p className="section-lede" data-reveal>
+              We built Recon ourselves. Pulse and Helm wrap it for revenue and portfolio teams
+              respectively. We deploy whichever fits — and we&apos;ll fork a custom variant if
+              neither does.
+            </p>
+          </div>
+
+          <div className="studio-products" data-stagger>
+            <Link className="sp-card sp-recon" href="/recon">
+              <div className="sp-head">
+                <span className="sp-badge">platform</span>
+                <span className="sp-arrow" aria-hidden="true">
+                  →
+                </span>
+              </div>
+              <h3 className="sp-name">Recon</h3>
+              <p className="sp-tag">
+                The substrate. Self-hosted gateway, identity vault, agent runtime, audit log.
+              </p>
+              <ul className="sp-meta" role="list">
+                <li>Common to both</li>
+                <li>Lives inside your perimeter</li>
+                <li>Forkable</li>
+              </ul>
+            </Link>
+            <Link className="sp-card sp-pulse" href="/pulse">
+              <div className="sp-head">
+                <span className="sp-badge accent">GTM</span>
+                <span className="sp-arrow" aria-hidden="true">
+                  →
+                </span>
+              </div>
+              <h3 className="sp-name">Pulse</h3>
+              <p className="sp-tag">
+                Revenue cockpit. Identity-resolved CRM, scheduled agents, attribution, forecast.
+              </p>
+              <ul className="sp-meta" role="list">
+                <li>RevOps · Sales · Growth</li>
+                <li>Inbox-first</li>
+                <li>Agent-driven outbound</li>
+              </ul>
+            </Link>
+            <Link className="sp-card sp-helm" href="/helm">
+              <div className="sp-head">
+                <span className="sp-badge helm">PE</span>
+                <span className="sp-arrow" aria-hidden="true">
+                  →
+                </span>
+              </div>
+              <h3 className="sp-name">Helm</h3>
+              <p className="sp-tag">
+                Portfolio cockpit. KPI roll-ups, variance flags, DD workspace, board-pack agent.
+              </p>
+              <ul className="sp-meta" role="list">
+                <li>Operating partners · Holdcos</li>
+                <li>Per-portco scoping</li>
+                <li>SOC2-ready trail</li>
+              </ul>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* WHY US */}
+      <section className="section section-narrow" id="why">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          03
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Why 42nights
+            </div>
+            <h2 className="section-title" data-split>
+              Operator-led.
+              <br />
+              Source-available. <em>On-site.</em>
+            </h2>
+          </div>
+
+          <ol className="reason-list" data-stagger role="list">
+            <li className="reason-row">
+              <span className="rr-num">①</span>
+              <div className="rr-body">
+                <h3>We built the thing we deploy.</h3>
+                <p>
+                  Recon is ours. When something doesn&apos;t fit your stack, we change the
+                  substrate, not the contract.
+                </p>
+              </div>
+            </li>
+            <li className="reason-row">
+              <span className="rr-num">②</span>
+              <div className="rr-body">
+                <h3>Sovereignty is the default, not an upgrade.</h3>
+                <p>
+                  Single-tenant by definition. Your VPC, your keys, your audit log. We pass your
+                  security review on day one.
+                </p>
+              </div>
+            </li>
+            <li className="reason-row">
+              <span className="rr-num">③</span>
+              <div className="rr-body">
+                <h3>Hands-on, not advisory.</h3>
+                <p>
+                  We deploy and operate alongside your team — not in a slide deck from a thousand
+                  miles away. The handoff is real.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* ENGAGEMENT */}
+      <section className="section section-narrow" id="engagement">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          04
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Engagement
+            </div>
+            <h2 className="section-title" data-split>
+              Fixed-fee. <em>In person.</em>
+              <br />
+              Source escrow.
+            </h2>
+          </div>
+
+          <dl className="terms-table" data-stagger>
+            <div className="tt-row">
+              <dt>Format</dt>
+              <dd>
+                Four-week minimum, fully on-site at your office. Two engineers from us, embedded
+                with your operators.
+              </dd>
+            </div>
+            <div className="tt-row">
+              <dt>Fee</dt>
+              <dd>
+                Fixed-fee per engagement, scoped in week one. No hourly billing, no out-of-scope
+                creep.
+              </dd>
+            </div>
+            <div className="tt-row">
+              <dt>IP</dt>
+              <dd>
+                Source escrow at deploy. Custom skill packs are yours. Recon core stays under our
+                license, available to you in perpetuity for that deployment.
+              </dd>
+            </div>
+            <div className="tt-row">
+              <dt>Support</dt>
+              <dd>
+                Ninety days post-deploy on retainer — priority Slack, weekly check-ins, hot-fixes
+                within 24 hours.
+              </dd>
+            </div>
+            <div className="tt-row">
+              <dt>Capacity</dt>
+              <dd>Three active engagements at a time, max. We&apos;re a studio, not a body shop.</dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+
+      {/* CONTACT */}
+      <section className="section cta-sec" id="contact">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          05
+        </div>
+        <div className="container">
+          <div className="contact-card" data-reveal>
+            <div className="cta-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Get started
+              </div>
+              <h2 className="section-title" data-split>
+                Tell us what you&apos;re
+                <br />
+                <em>trying to ship.</em>
+              </h2>
+              <p className="section-lede">
+                We&apos;ll come to you for an hour. Bring your most painful workflow, the data flow
+                you can&apos;t get a SaaS to touch, or the security review that keeps killing your
+                ops tooling. We&apos;ll tell you whether we&apos;re the right team — honestly —
+                within the week.
+              </p>
+              <div className="hero-cta">
+                <a
+                  className="btn btn-primary"
+                  href="mailto:jerry@xiao.sh?subject=42nights%20discovery"
+                  data-magnetic
+                >
+                  <span>Book a discovery</span>
+                  <ArrowSm />
+                </a>
+                <Link className="btn btn-ghost" href="/recon">
+                  <span>See the platform</span>
+                </Link>
+              </div>
+              <p className="contact-detail">
+                <span>jerry@xiao.sh</span> · <span>SF, on-site continental US &amp; EMEA</span>
+              </p>
+            </div>
+
+            <Terminal
+              title="42nights · discovery.log"
+              lines={[
+                { prompt: '▶', cmd: 'W1: discovery on the ground' },
+                { prompt: '', out: '↳ shadow ops · map workflows · scope plan' },
+                { prompt: '▶', cmd: 'W2: deploy substrate' },
+                { prompt: '', out: '↳ recon up · vault sealed · audit log signed' },
+                { prompt: '▶', cmd: 'W3: ship the surface' },
+                { prompt: '', out: '↳ pulse | helm | custom · skills tuned' },
+                { prompt: '▶', cmd: 'W4: hand off · team owns it' },
+                { prompt: '', out: '✓ deployed · 90-day retainer active', outClass: 'ok' },
+              ]}
+            />
+          </div>
+        </div>
+      </section>
+
+      <Footer variant="studio" />
+      <GsapClient />
+    </div>
+  );
+}
diff --git a/app/pulse/page.tsx b/app/pulse/page.tsx
new file mode 100644
index 0000000..df5c47e
--- /dev/null
+++ b/app/pulse/page.tsx
@@ -0,0 +1,399 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import GsapClient from '@/components/GsapClient';
+import Nav from '@/components/Nav';
+import Footer from '@/components/Footer';
+import Marquee from '@/components/Marquee';
+import Terminal from '@/components/Terminal';
+
+export const metadata: Metadata = {
+  title: 'Pulse — the GTM operating cockpit',
+  description:
+    'Identity-resolved CRM, scheduled agents, attribution and forecast — on infrastructure you control. Built on Recon, deployed by 42nights.',
+  alternates: { canonical: '/pulse' },
+  openGraph: {
+    type: 'website',
+    url: '/pulse',
+    title: 'Pulse — GTM cockpit on your infra',
+    description:
+      'The operating layer between signal and revenue. Built on Recon, deployed by 42nights in four weeks.',
+    siteName: '42nights',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Pulse — GTM cockpit on your infra',
+    description:
+      'The operating layer between signal and revenue. Built on Recon, deployed by 42nights in four weeks.',
+  },
+};
+
+export const viewport = { themeColor: '#cdfb53' };
+
+const ArrowSm = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="13"
+    height="13"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+export default function PulsePage() {
+  return (
+    <div data-theme="recon">
+      <Nav active="pulse" />
+
+      {/* HERO */}
+      <section className="hero" id="top">
+        <div className="hero-grid" aria-hidden="true" data-parallax="0.4" />
+        <div className="hero-orb" aria-hidden="true" data-parallax="0.7" />
+        <div className="hero-bg-word" aria-hidden="true" data-parallax="0.25">
+          pulse
+        </div>
+
+        <div className="container hero-inner">
+          <div className="hero-badge" data-reveal>
+            <span className="ping" />
+            <span>Pulse · Built on Recon · Deployed by 42nights</span>
+          </div>
+
+          <h1 className="hero-title">
+            <span className="line">
+              <span className="word">The</span> <span className="word">operating</span>{' '}
+              <span className="word">layer</span>
+            </span>
+            <span className="line">
+              <span className="word">between</span> <span className="word italic">signal</span>
+            </span>
+            <span className="line">
+              <span className="word">and</span> <span className="word italic">revenue.</span>
+            </span>
+          </h1>
+          <p className="hero-sub" data-reveal>
+            Identity-resolved CRM, inbox-first sync, scheduled agents, forecast that ties to source.
+            On infrastructure you control. Deployed by{' '}
+            <Link className="inline-link" href="/">
+              42nights
+            </Link>{' '}
+            in four weeks.
+          </p>
+          <p className="hero-audience" data-reveal>
+            RevOps · Sales leadership · Growth ops · CROs
+          </p>
+
+          <div className="hero-cta" data-reveal>
+            <a className="btn btn-primary" href="#cta" data-magnetic>
+              <span>Book a Pulse deploy</span>
+              <ArrowSm />
+            </a>
+            <Link className="btn btn-ghost" href="/recon">
+              <span>See the platform</span>
+            </Link>
+          </div>
+
+          <div className="hero-stats" data-reveal>
+            <div className="stat">
+              <span className="stat-num" data-counter="100">
+                0
+              </span>
+              <span className="stat-label">% on your own infra</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="6">
+                0
+              </span>
+              <span className="stat-label">GTM skill packs</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="4">
+                0
+              </span>
+              <span className="stat-label">week deploy</span>
+            </div>
+          </div>
+        </div>
+
+        <Marquee
+          items={[
+            'Salesforce',
+            'HubSpot',
+            'Apollo',
+            'Clay',
+            'Gmail',
+            'Outlook',
+            'Calendar',
+            'LinkedIn',
+            'PostHog',
+            'Smartlead',
+            'Instantly',
+            'Slack',
+          ]}
+        />
+      </section>
+
+      {/* CAPABILITIES */}
+      <section className="section" id="capabilities">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          01
+        </div>
+        <div className="container">
+          <div className="section-head section-head-narrow">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              What Pulse does
+            </div>
+            <h2 className="section-title" data-split>
+              From inbox<br />
+              <em>to closed-won.</em>
+            </h2>
+          </div>
+
+          <div className="cap-grid" data-stagger>
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="0" y="6" width="92" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="17" className="cap-label">maya@northstar.io</text>
+                <rect x="0" y="36" width="106" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="47" className="cap-label">m.adams@northstar.io</text>
+                <rect x="0" y="66" width="100" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="77" className="cap-label">li/maya-adams</text>
+                <path d="M 92 13 C 120 13 130 43 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <path d="M 106 43 L 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <path d="M 100 73 C 120 73 130 43 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <rect x="145" y="34" width="72" height="20" rx="4" fill="rgba(205,251,83,0.15)" stroke="var(--accent)" />
+                <text x="181" y="48" className="cap-label-out" textAnchor="middle">M. Adams</text>
+              </svg>
+              <h3>Identity-resolved CRM</h3>
+              <p>Three channels. One row.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <circle cx="20" cy="46" r="7" fill="var(--accent)" />
+                <circle cx="20" cy="46" r="14" fill="none" stroke="var(--accent)" strokeOpacity="0.4" />
+                <text x="6" y="78" className="cap-label">trigger</text>
+                <line x1="34" y1="46" x2="78" y2="46" stroke="var(--accent)" strokeDasharray="3 4" />
+                <rect x="78" y="32" width="56" height="28" rx="6" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
+                <text x="106" y="50" className="cap-label-out" textAnchor="middle">RUN</text>
+                <line x1="134" y1="46" x2="178" y2="46" stroke="var(--accent)" strokeDasharray="3 4" />
+                <rect x="178" y="32" width="34" height="28" rx="6" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" />
+                <text x="195" y="50" className="cap-label-out muted" textAnchor="middle">DIFF</text>
+                <text x="195" y="78" className="cap-label" textAnchor="middle">review</text>
+              </svg>
+              <h3>Per-account next-best-action</h3>
+              <p>Trigger → run → diff back.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="0" y="4" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="13" className="cap-label">posthog</text>
+                <rect x="0" y="22" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="31" className="cap-label">apollo</text>
+                <rect x="0" y="40" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="49" className="cap-label">clearbit</text>
+                <rect x="0" y="58" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="67" className="cap-label">webhook</text>
+                <rect x="0" y="76" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="85" className="cap-label">linkedin</text>
+                <path d="M 100 4 L 150 36 L 150 56 L 100 88 Z" fill="rgba(205,251,83,0.05)" stroke="var(--accent)" strokeOpacity="0.4" />
+                <rect x="150" y="36" width="68" height="20" rx="10" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
+                <text x="184" y="50" className="cap-label-out" textAnchor="middle">signals</text>
+              </svg>
+              <h3>One surface for intent</h3>
+              <p>Many sources. One stream.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <line x1="10" y1="80" x2="210" y2="80" stroke="rgba(255,255,255,0.15)" />
+                <path d="M 10 78 C 50 78 80 50 110 42 C 140 34 170 30 210 22" stroke="var(--accent)" fill="none" strokeWidth="1.5" />
+                <circle cx="10" cy="78" r="3" fill="var(--accent)" />
+                <circle cx="60" cy="62" r="3" fill="var(--accent)" />
+                <circle cx="110" cy="42" r="3" fill="var(--accent)" />
+                <circle cx="160" cy="32" r="3" fill="var(--accent)" />
+                <circle cx="210" cy="22" r="4" fill="var(--accent)" />
+                <text x="110" y="92" textAnchor="middle" className="cap-label">forecast</text>
+              </svg>
+              <h3>Forecast that ties to source</h3>
+              <p>Stage · owner · segment.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      {/* ROADMAP */}
+      <section className="section section-narrow" id="roadmap">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          02
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Roadmap
+            </div>
+            <h2 className="section-title" data-split>
+              Five phases<br />
+              <em>per deployment.</em>
+            </h2>
+          </div>
+
+          <div className="rm-timeline" data-active-phase="0">
+            <div className="rm-track">
+              <div className="rm-line" />
+              <div className="rm-progress" />
+              <button className="rm-dot active" data-phase-idx="0" aria-label="Phase 1">
+                <span>01</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="1" aria-label="Phase 2">
+                <span>02</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="2" aria-label="Phase 3">
+                <span>03</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="3" aria-label="Phase 4">
+                <span>04</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="4" aria-label="Phase 5">
+                <span>05</span>
+              </button>
+            </div>
+
+            <div className="rm-stage">
+              <div className="rm-panels active" data-roadmap-panel="pulse">
+                <div className="rm-panel active" data-phase-idx="0">
+                  <span className="rm-tag">Phase 1 · Pulse</span>
+                  <h4>Pipeline foundations</h4>
+                  <p>
+                    Canonical People + Company model. Inbox-first sync. Calendar → meeting → deal
+                    attribution. Lifecycle stage, owner, last touch.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="1">
+                  <span className="rm-tag">Phase 2 · Pulse</span>
+                  <h4>Signal capture</h4>
+                  <p>
+                    Apollo / Clay enrichment. PostHog event timeline. LinkedIn + outbound capture.
+                    Intent adapters behind one <code>signals</code> surface.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="2">
+                  <span className="rm-tag">Phase 3 · Pulse</span>
+                  <h4>Agentic execution</h4>
+                  <p>
+                    Lead triage · ICP scoring · outbound draft · meeting prep · pipeline review ·
+                    churn flag. Per-account next-best-action on a schedule.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="3">
+                  <span className="rm-tag">Phase 4 · Pulse</span>
+                  <h4>Revenue analytics</h4>
+                  <p>
+                    Weighted forecast by stage / owner / segment. Source → meeting → opp
+                    attribution. Cohort retention via PostHog or warehouse adapter.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="4">
+                  <span className="rm-tag">Phase 5 · Pulse</span>
+                  <h4>Multiplayer</h4>
+                  <p>
+                    Team workspaces with row-level RBAC. Shared skill libraries with review/approval.
+                    Slack / Linear two-way sync for handoffs.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* PLATFORM REFERENCE */}
+      <section className="section section-narrow platform-ref">
+        <div className="container">
+          <div className="ref-card" data-reveal>
+            <div className="ref-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Built on Recon
+              </div>
+              <h3>Same gateway. Same vault. Same audit log.</h3>
+              <p>
+                Pulse is a thin Next.js app over the Recon substrate. Your data plane, security
+                model, and operator skills are the platform&apos;s — Pulse just wears the GTM chrome
+                on top.
+              </p>
+              <Link className="btn btn-ghost" href="/recon">
+                <span>See the Recon platform</span>
+                <ArrowSm />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="section cta-sec" id="cta">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          03
+        </div>
+        <div className="container">
+          <div className="cta-card" data-reveal>
+            <div className="cta-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Get Pulse deployed
+              </div>
+              <h2 className="section-title" data-split>
+                Four weeks to<br />
+                <em>your own pipeline OS.</em>
+              </h2>
+              <p className="section-lede">
+                42nights deploys Pulse inside your perimeter. Discovery on Monday, your team running
+                it on the Friday of week four.
+              </p>
+              <div className="hero-cta">
+                <a
+                  className="btn btn-primary"
+                  href="mailto:jerry@xiao.sh?subject=Pulse%20deploy"
+                  data-magnetic
+                >
+                  <span>Book a deploy</span>
+                  <ArrowSm />
+                </a>
+                <Link className="btn btn-ghost" href="/">
+                  <span>About 42nights</span>
+                </Link>
+              </div>
+            </div>
+
+            <Terminal
+              title="pulse · acme-prod"
+              lines={[
+                { prompt: '$', cmd: 'recon up --variant=pulse' },
+                { prompt: '', out: '▲ workspace ready · auth via SSO', outClass: 'ok' },
+                { prompt: '$', cmd: 'pulse connect hubspot --read-only' },
+                { prompt: '', out: '✓ 4,212 contacts · 318 active deals indexed' },
+                { prompt: '$', cmd: 'pulse skills run pipeline-review' },
+                { prompt: '', out: '✓ 47 deals scored · 3 flagged for risk' },
+                { prompt: '$', cmd: 'pulse forecast --segment=enterprise' },
+                { prompt: '', out: '◇ Q2 weighted: $2.4M · vs plan: +112%', outClass: 'muted' },
+              ]}
+            />
+          </div>
+        </div>
+      </section>
+
+      <Footer variant="product" productName="Pulse" />
+      <GsapClient />
+    </div>
+  );
+}
diff --git a/app/recon/page.tsx b/app/recon/page.tsx
new file mode 100644
index 0000000..6ed0f85
--- /dev/null
+++ b/app/recon/page.tsx
@@ -0,0 +1,784 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import GsapClient from '@/components/GsapClient';
+import Nav from '@/components/Nav';
+import Footer from '@/components/Footer';
+import Marquee from '@/components/Marquee';
+import Terminal from '@/components/Terminal';
+
+export const metadata: Metadata = {
+  title: 'Recon — operating substrate for ops-heavy teams',
+  description:
+    'The self-hosted, single-tenant, audit-ready platform that Pulse and Helm are built on. Deployed by 42nights.',
+  alternates: { canonical: '/recon' },
+  openGraph: {
+    type: 'website',
+    url: '/recon',
+    title: 'Recon — operating substrate for ops-heavy teams',
+    description:
+      'Self-hosted gateway, identity vault, agent runtime. The platform Pulse and Helm are built on.',
+    siteName: '42nights',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Recon — operating substrate for ops-heavy teams',
+    description:
+      'Self-hosted gateway, identity vault, agent runtime. The platform Pulse and Helm are built on.',
+  },
+};
+
+export const viewport = { themeColor: '#cdfb53' };
+
+const ArrowSm = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="13"
+    height="13"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+const ArrowSmInRow = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="14"
+    height="14"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+// helper: glass-box positioning vars
+const pos = (x: number, y: number, w: number, h: number): React.CSSProperties =>
+  ({
+    ['--x' as string]: x,
+    ['--y' as string]: y,
+    ['--w' as string]: w,
+    ['--h' as string]: h,
+  }) as React.CSSProperties;
+
+export default function ReconPage() {
+  return (
+    <div data-theme="recon">
+      <Nav active="recon" />
+
+      {/* HERO */}
+      <section className="hero" id="top">
+        <div className="hero-grid" aria-hidden="true" data-parallax="0.4" />
+        <div className="hero-orb" aria-hidden="true" data-parallax="0.7" />
+        <div className="hero-radar" aria-hidden="true" data-parallax="0.5">
+          <span className="radar-ring" />
+          <span className="radar-ring r2" />
+          <span className="radar-ring r3" />
+          <span className="radar-sweep" />
+        </div>
+        <div className="hero-bg-word" aria-hidden="true" data-parallax="0.25">
+          recon
+        </div>
+
+        <div className="container hero-inner">
+          <div className="hero-badge" data-reveal>
+            <span className="ping" />
+            <span>Self-hosted · Single-tenant · Audit-ready</span>
+          </div>
+
+          <h1 className="hero-title">
+            <span className="line">
+              <span className="word">The</span> <span className="word">operating</span>{' '}
+              <span className="word">substrate</span>
+            </span>
+            <span className="line">
+              <span className="word">for</span> <span className="word italic">ops-heavy</span>{' '}
+              <span className="word">teams.</span>
+            </span>
+          </h1>
+          <p className="hero-sub" data-reveal>
+            Recon is the self-hosted gateway, workspace, and skill runtime that{' '}
+            <Link className="inline-link" href="/pulse">
+              Pulse
+            </Link>{' '}
+            and{' '}
+            <Link className="inline-link helm-link" href="/helm">
+              Helm
+            </Link>{' '}
+            are built on. Deployed by{' '}
+            <Link className="inline-link" href="/">
+              42nights
+            </Link>{' '}
+            inside your perimeter.
+          </p>
+          <p className="hero-audience" data-reveal>
+            RevOps · Sales leadership · Operating partners · COOs · Family offices
+          </p>
+
+          <div className="hero-cta" data-reveal>
+            <a className="btn btn-primary" href="#cta" data-magnetic>
+              <span>Book a demo</span>
+              <ArrowSm />
+            </a>
+            <a className="btn btn-ghost" href="mailto:jerry@xiao.sh?subject=Recon%20enquiry">
+              <span>Talk to us</span>
+            </a>
+          </div>
+
+          <div className="hero-stats" data-reveal>
+            <div className="stat">
+              <span className="stat-num" data-counter="100">
+                0
+              </span>
+              <span className="stat-label">% on your own infra</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="2">
+                0
+              </span>
+              <span className="stat-label">product surfaces</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat">
+              <span className="stat-num" data-counter="0">
+                0
+              </span>
+              <span className="stat-label">vendor lock-in</span>
+            </div>
+          </div>
+        </div>
+
+        <Marquee
+          items={[
+            'Salesforce',
+            'HubSpot',
+            'Gmail',
+            'Outlook',
+            'Slack',
+            'Linear',
+            'QuickBooks',
+            'Stripe',
+            'NetSuite',
+            'Xero',
+            'Apollo',
+            'Clay',
+            'PostHog',
+            'Notion',
+            'Drive',
+            'Box',
+            'MCP servers',
+          ]}
+        />
+      </section>
+
+      {/* WHY (perimeter diagram) */}
+      <section className="section" id="why">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          01
+        </div>
+        <div className="container">
+          <div className="section-head section-head-narrow">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Why operators choose Recon
+            </div>
+            <h2 className="section-title" data-split>
+              Your data. Your perimeter. <em>Your agents.</em>
+            </h2>
+          </div>
+
+          <div className="perimeter-stage" data-reveal>
+            <div className="perim-canvas">
+              <svg
+                viewBox="0 0 1000 540"
+                className="perimeter-svg"
+                role="img"
+                aria-labelledby="perimTitle"
+                preserveAspectRatio="xMidYMid meet"
+              >
+                <title id="perimTitle">
+                  Recon stays inside your perimeter; connectors call out, never in
+                </title>
+                <defs>
+                  <pattern id="perimGrid" width="40" height="40" patternUnits="userSpaceOnUse">
+                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.025)" strokeWidth="1" />
+                  </pattern>
+                </defs>
+                <rect width="1000" height="540" fill="url(#perimGrid)" />
+                <rect
+                  x="60"
+                  y="74"
+                  width="600"
+                  height="396"
+                  rx="16"
+                  fill="rgba(205, 251, 83, 0.018)"
+                  stroke="rgba(205, 251, 83, 0.45)"
+                  strokeWidth="1.5"
+                  strokeDasharray="6 6"
+                  className="perim-boundary"
+                />
+                <path d="M200 178 Q200 220 270 250" stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1.2" />
+                <path d="M520 178 Q520 220 450 250" stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1.2" />
+                <line x1="360" y1="338" x2="360" y2="380" stroke="rgba(255,255,255,0.18)" strokeWidth="1.2" />
+                <g className="perim-flows" strokeLinecap="round" fill="none" strokeWidth="1.4">
+                  <path d="M480 274 C 600 274 620 122 720 122" strokeDasharray="4 6" />
+                  <path d="M480 286 C 600 286 620 182 720 182" strokeDasharray="4 6" />
+                  <path d="M480 298 C 600 298 620 242 720 242" strokeDasharray="4 6" />
+                  <path d="M480 310 C 600 310 620 302 720 302" strokeDasharray="4 6" />
+                  <path d="M480 322 C 600 322 620 362 720 362" strokeDasharray="4 6" />
+                </g>
+              </svg>
+
+              <div className="perim-overlay">
+                <span className="perim-label-text perim-title-text" style={pos(80, 58, 0, 0)}>
+                  YOUR PERIMETER
+                </span>
+                <span className="perim-label-text perim-sub-text" style={pos(222, 58, 0, 0)}>
+                  VPC · laptop · air-gapped
+                </span>
+
+                <div className="glass glass-pulse" style={pos(110, 120, 180, 58)}>
+                  <div className="g-name">Pulse</div>
+                  <div className="g-tag">GTM workspace</div>
+                </div>
+                <div className="glass glass-helm" style={pos(430, 120, 180, 58)}>
+                  <div className="g-name">Helm</div>
+                  <div className="g-tag">Portfolio cockpit</div>
+                </div>
+
+                <div className="glass glass-gateway" style={pos(240, 252, 240, 86)}>
+                  <div className="g-name strong">Gateway</div>
+                  <div className="g-tag">audit log · vault · skill runtime</div>
+                </div>
+
+                <div className="glass glass-db" style={pos(290, 380, 140, 46)}>
+                  <div className="g-name muted">your DB</div>
+                </div>
+
+                <div className="glass glass-ext" style={pos(720, 102, 240, 40)}>
+                  Salesforce · HubSpot
+                </div>
+                <div className="glass glass-ext" style={pos(720, 162, 240, 40)}>
+                  Stripe · QuickBooks · Xero
+                </div>
+                <div className="glass glass-ext" style={pos(720, 222, 240, 40)}>
+                  Gmail · Outlook · Calendar
+                </div>
+                <div className="glass glass-ext" style={pos(720, 282, 240, 40)}>
+                  Apollo · Clay · PostHog
+                </div>
+                <div className="glass glass-ext" style={pos(720, 342, 240, 40)}>
+                  MCP servers · LLM APIs
+                </div>
+
+                <div className="glass glass-tag glass-deny" style={pos(60, 490, 200, 32)}>
+                  <span className="x-mark" aria-hidden="true">
+                    ✕
+                  </span>
+                  <span>no inbound</span>
+                </div>
+                <div className="glass glass-tag glass-allow" style={pos(280, 490, 200, 32)}>
+                  <span>→ outbound only</span>
+                </div>
+                <div className="glass glass-tag" style={pos(500, 490, 200, 32)}>
+                  <span>audit log signed</span>
+                </div>
+                <div className="glass glass-tag" style={pos(720, 490, 240, 32)}>
+                  <span>your keys, your network</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* PRODUCTS */}
+      <section className="section" id="products">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          02
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Two products · one substrate
+            </div>
+            <h2 className="section-title" data-split>
+              Pulse for revenue.
+              <br />
+              <em>Helm</em> for portfolios.
+            </h2>
+            <p className="section-lede" data-reveal>
+              Both wrap the same self-hosted core — same gateway, same identity vault, same skill
+              substrate. Different operators, very different jobs to be done.
+            </p>
+          </div>
+
+          <div className="product-grid">
+            <Link className="product-card" href="/pulse" data-product="pulse" data-reveal>
+              <div className="product-head">
+                <div className="product-mark pulse-mark">
+                  <svg
+                    viewBox="0 0 32 32"
+                    width="22"
+                    height="22"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M2 16h6l3-9 6 18 3-9h10" />
+                  </svg>
+                </div>
+                <div>
+                  <div className="product-name">Pulse</div>
+                  <div className="product-tag">GTM operating system</div>
+                </div>
+              </div>
+              <h3 className="product-headline">
+                The operating layer between raw signal and revenue execution.
+              </h3>
+              <p className="product-copy">
+                Identity-resolved CRM, inbox-first sync, Apollo / Clay-style enrichment, scheduled
+                outbound, attribution and forecast — all on infrastructure you control.
+              </p>
+              <div className="product-foot">
+                <span className="product-audience">RevOps · Sales · Growth</span>
+                <span className="product-arrow" aria-hidden="true">
+                  <ArrowSmInRow />
+                </span>
+              </div>
+              <div className="product-glow" />
+            </Link>
+
+            <Link className="product-card helm" href="/helm" data-product="helm" data-reveal>
+              <div className="product-head">
+                <div className="product-mark helm-mark">
+                  <svg
+                    viewBox="0 0 32 32"
+                    width="22"
+                    height="22"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <circle cx="16" cy="16" r="6" />
+                    <path d="M16 4v6M16 22v6M4 16h6M22 16h6M7.5 7.5l4.2 4.2M20.3 20.3l4.2 4.2M7.5 24.5l4.2-4.2M20.3 11.7l4.2-4.2" />
+                  </svg>
+                </div>
+                <div>
+                  <div className="product-name">Helm</div>
+                  <div className="product-tag">Portfolio operating cockpit</div>
+                </div>
+              </div>
+              <h3 className="product-headline">
+                A holdco cockpit — every portco a workspace, rolling up to one view.
+              </h3>
+              <p className="product-copy">
+                KPI ingest from QuickBooks, Stripe, HRIS, HubSpot. Variance flags with agent-drafted
+                commentary. Per-deal DD workspace generator. Cross-portfolio benchmarking on margin,
+                CAC payback, NRR.
+              </p>
+              <div className="product-foot">
+                <span className="product-audience">
+                  Operating partners · Holdcos · Family offices
+                </span>
+                <span className="product-arrow" aria-hidden="true">
+                  <ArrowSmInRow />
+                </span>
+              </div>
+              <div className="product-glow" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* HOW (architecture stack) */}
+      <section className="section section-narrow" id="how">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          03
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              How it deploys
+            </div>
+            <h2 className="section-title" data-split>
+              Three layers. <em>One process tree.</em>
+            </h2>
+          </div>
+
+          <div className="arch-stack" data-stagger>
+            <div className="arch-layer arch-shells">
+              <span className="al-tag">Shells</span>
+              <div className="al-cells">
+                <span className="al-cell">apps/web</span>
+                <span className="al-cell pulse">Pulse</span>
+                <span className="al-cell helm">Helm</span>
+              </div>
+            </div>
+            <div className="arch-arrow" />
+            <div className="arch-layer arch-gateway">
+              <span className="al-tag">Gateway</span>
+              <div className="al-cells">
+                <span className="al-cell strong">profile-managed daemon</span>
+                <span className="al-cell">audit signer</span>
+                <span className="al-cell">credential vault</span>
+              </div>
+            </div>
+            <div className="arch-arrow" />
+            <div className="arch-layer arch-ext">
+              <span className="al-tag">Extensions</span>
+              <div className="al-cells">
+                <span className="al-cell">AI gateway</span>
+                <span className="al-cell">Identity</span>
+                <span className="al-cell">Composio</span>
+                <span className="al-cell">Apollo</span>
+                <span className="al-cell">PostHog</span>
+              </div>
+            </div>
+            <div className="arch-arrow down" />
+            <div className="arch-deploys">
+              <span className="kbd">macOS</span>
+              <span className="kbd">Linux</span>
+              <span className="kbd">Docker</span>
+              <span className="kbd">VPC</span>
+              <span className="kbd">Air-gapped</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CAPABILITIES */}
+      <section className="section" id="capabilities">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          04
+        </div>
+        <div className="container">
+          <div className="section-head section-head-narrow">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Capabilities
+            </div>
+            <h2 className="section-title" data-split>
+              What it does, <em>out of the box.</em>
+            </h2>
+          </div>
+
+          <div className="cap-grid" data-stagger>
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="0" y="6" width="92" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="17" className="cap-label">maya@northstar.io</text>
+                <rect x="0" y="36" width="106" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="47" className="cap-label">m.adams@northstar.io</text>
+                <rect x="0" y="66" width="100" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
+                <text x="6" y="77" className="cap-label">li/maya-adams</text>
+                <path d="M 92 13 C 120 13 130 43 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <path d="M 106 43 L 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <path d="M 100 73 C 120 73 130 43 145 43" stroke="var(--accent)" fill="none" strokeDasharray="3 3" />
+                <rect x="145" y="34" width="72" height="20" rx="4" fill="rgba(205,251,83,0.15)" stroke="var(--accent)" />
+                <text x="181" y="48" className="cap-label-out" textAnchor="middle">M. Adams</text>
+              </svg>
+              <h3>Identity-resolved CRM</h3>
+              <p>Three channels. One row.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <circle cx="20" cy="46" r="7" fill="var(--accent)" />
+                <circle cx="20" cy="46" r="14" fill="none" stroke="var(--accent)" strokeOpacity="0.4" />
+                <text x="6" y="78" className="cap-label">trigger</text>
+                <line x1="34" y1="46" x2="78" y2="46" stroke="var(--accent)" strokeDasharray="3 4" />
+                <rect x="78" y="32" width="56" height="28" rx="6" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
+                <text x="106" y="50" className="cap-label-out" textAnchor="middle">RUN</text>
+                <line x1="134" y1="46" x2="178" y2="46" stroke="var(--accent)" strokeDasharray="3 4" />
+                <rect x="178" y="32" width="34" height="28" rx="6" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" />
+                <text x="195" y="50" className="cap-label-out muted" textAnchor="middle">DIFF</text>
+                <text x="195" y="78" className="cap-label" textAnchor="middle">review</text>
+              </svg>
+              <h3>Skills act on schedule</h3>
+              <p>Trigger → run → diff back.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="0" y="4" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="13" className="cap-label">posthog</text>
+                <rect x="0" y="22" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="31" className="cap-label">apollo</text>
+                <rect x="0" y="40" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="49" className="cap-label">clearbit</text>
+                <rect x="0" y="58" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="67" className="cap-label">webhook</text>
+                <rect x="0" y="76" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
+                <text x="48" y="85" className="cap-label">linkedin</text>
+                <path d="M 100 4 L 150 36 L 150 56 L 100 88 Z" fill="rgba(205,251,83,0.05)" stroke="var(--accent)" strokeOpacity="0.4" />
+                <rect x="150" y="36" width="68" height="20" rx="10" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
+                <text x="184" y="50" className="cap-label-out" textAnchor="middle">signals</text>
+              </svg>
+              <h3>One surface for intent</h3>
+              <p>Many sources. One stream.</p>
+            </article>
+
+            <article className="cap-tile">
+              <svg className="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
+                <rect x="10" y="58" width="14" height="22" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="30" y="44" width="14" height="36" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="50" y="62" width="14" height="18" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="70" y="36" width="14" height="44" rx="2" fill="rgba(126,197,255,0.55)" />
+                <rect x="90" y="50" width="14" height="30" rx="2" fill="rgba(126,197,255,0.55)" />
+                <text x="57" y="92" className="cap-label" textAnchor="middle">portcos</text>
+                <line x1="120" y1="58" x2="148" y2="58" stroke="rgb(126, 197, 255)" strokeWidth="1.4" />
+                <polyline points="142,53 148,58 142,63" stroke="rgb(126, 197, 255)" fill="none" strokeWidth="1.4" />
+                <rect x="158" y="20" width="44" height="60" rx="5" fill="rgba(126,197,255,0.22)" stroke="rgb(126, 197, 255)" />
+                <text x="180" y="92" className="cap-label" textAnchor="middle">holdco</text>
+              </svg>
+              <h3>Holdco KPI roll-ups</h3>
+              <p>Portcos in. Dashboard out.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      {/* ROADMAP */}
+      <section className="section section-narrow" id="roadmap">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          05
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Roadmap
+            </div>
+            <h2 className="section-title" data-split>
+              Five phases. <em>Two products.</em> One substrate.
+            </h2>
+          </div>
+
+          <div className="roadmap-tabs" role="tablist" aria-label="Roadmap product">
+            <button className="rt-btn active" data-roadmap="pulse" role="tab" aria-selected="true">
+              Pulse — GTM
+            </button>
+            <button className="rt-btn" data-roadmap="helm" role="tab" aria-selected="false">
+              Helm — PE
+            </button>
+            <span className="rt-indicator" aria-hidden="true" />
+          </div>
+
+          <div className="rm-timeline" data-active-phase="0">
+            <div className="rm-track">
+              <div className="rm-line" />
+              <div className="rm-progress" />
+              <button className="rm-dot active" data-phase-idx="0" aria-label="Phase 1">
+                <span>01</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="1" aria-label="Phase 2">
+                <span>02</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="2" aria-label="Phase 3">
+                <span>03</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="3" aria-label="Phase 4">
+                <span>04</span>
+              </button>
+              <button className="rm-dot" data-phase-idx="4" aria-label="Phase 5">
+                <span>05</span>
+              </button>
+            </div>
+
+            <div className="rm-stage">
+              <div className="rm-panels active" data-roadmap-panel="pulse">
+                <div className="rm-panel active" data-phase-idx="0">
+                  <span className="rm-tag">Phase 1 · Pulse</span>
+                  <h4>Pipeline foundations</h4>
+                  <p>
+                    Canonical People + Company model. Inbox-first sync. Calendar → meeting → deal
+                    attribution. Lifecycle stage, owner, last touch.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="1">
+                  <span className="rm-tag">Phase 2 · Pulse</span>
+                  <h4>Signal capture</h4>
+                  <p>
+                    Apollo / Clay enrichment. PostHog event timeline. LinkedIn + outbound capture.
+                    Intent adapters behind one <code>signals</code> surface.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="2">
+                  <span className="rm-tag">Phase 3 · Pulse</span>
+                  <h4>Agentic execution</h4>
+                  <p>
+                    Lead triage · ICP scoring · outbound draft · meeting prep · pipeline review ·
+                    churn flag. Per-account next-best-action on a schedule.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="3">
+                  <span className="rm-tag">Phase 4 · Pulse</span>
+                  <h4>Revenue analytics</h4>
+                  <p>
+                    Weighted forecast by stage / owner / segment. Source → meeting → opp
+                    attribution. Cohort retention via PostHog or warehouse adapter.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="4">
+                  <span className="rm-tag">Phase 5 · Pulse</span>
+                  <h4>Multiplayer</h4>
+                  <p>
+                    Team workspaces with row-level RBAC. Shared skill libraries with review/approval.
+                    Slack / Linear two-way sync for handoffs.
+                  </p>
+                </div>
+              </div>
+
+              <div className="rm-panels" data-roadmap-panel="helm">
+                <div className="rm-panel active" data-phase-idx="0">
+                  <span className="rm-tag">Phase 1 · Helm</span>
+                  <h4>Multi-entity foundation</h4>
+                  <p>
+                    Workspace-as-portfolio-company. HoldCo workspace aggregating read-only views.
+                    Entities: Company, People, Contracts, KPIs, Reporting periods.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="1">
+                  <span className="rm-tag">Phase 2 · Helm</span>
+                  <h4>Operating cadence</h4>
+                  <p>
+                    QuickBooks / Xero / NetSuite, Stripe, HRIS, Hub/Salesforce ingest. Auto-populated
+                    monthly &amp; quarterly templates with variance flags.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="2">
+                  <span className="rm-tag">Phase 3 · Helm</span>
+                  <h4>Diligence &amp; deal flow</h4>
+                  <p>
+                    Deal pipeline as a first-class object. Per-deal DD workspace generator.
+                    Data-room ingest with auto-tagging and risk flag agents.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="3">
+                  <span className="rm-tag">Phase 4 · Helm</span>
+                  <h4>Portfolio agents</h4>
+                  <p>
+                    Operating-partner agent per portco. Cross-portfolio benchmarking on margin, CAC
+                    payback, NRR percentiles. Talent-network agent.
+                  </p>
+                </div>
+                <div className="rm-panel" data-phase-idx="4">
+                  <span className="rm-tag">Phase 5 · Helm</span>
+                  <h4>LP &amp; governance</h4>
+                  <p>
+                    LP reporting view (capital account, IRR/MOIC). Board-pack generator from
+                    operating-partner output. SOC2-ready audit trail.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* TRUST */}
+      <section className="section section-narrow trust-sec" id="trust">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          06
+        </div>
+        <div className="container">
+          <div className="section-head">
+            <div className="eyebrow" data-reveal>
+              <span className="dot" />
+              Trust
+            </div>
+            <h2 className="section-title" data-split>
+              Built to pass<br />
+              <em>your security review.</em>
+            </h2>
+          </div>
+          <p className="trust-statement" data-reveal>
+            Single-tenant by definition. Bring your own keys for LLM, CRM, storage, and identity.
+            SOC2-ready audit log per workspace, per skill, per credential — pipe it straight to your
+            SIEM. Zero telemetry, verifiable in source provided under your contract.
+            Workspace-scoped RBAC isolates your sales workspace from your portfolio data, by
+            default.
+          </p>
+          <ul className="trust-tags" data-stagger role="list">
+            <li>SOC2-ready audit trail</li>
+            <li>Bring your own keys</li>
+            <li>On-prem / VPC / Air-gapped</li>
+            <li>Single-tenant by design</li>
+            <li>Zero telemetry</li>
+            <li>Workspace-scoped RBAC</li>
+          </ul>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="section cta-sec" id="cta">
+        <div className="bg-numeral" aria-hidden="true" data-parallax="0.35">
+          07
+        </div>
+        <div className="container">
+          <div className="cta-card" data-reveal>
+            <div className="cta-copy">
+              <div className="eyebrow">
+                <span className="dot" />
+                Get started
+              </div>
+              <h2 className="section-title" data-split>
+                Run it where your<br />
+                <em>data already lives.</em>
+              </h2>
+              <p className="section-lede">
+                We deploy Recon inside your perimeter and stay close through onboarding,
+                integration, and skill-pack tuning. Talk to us about scope, security, and pricing.
+              </p>
+              <div className="hero-cta">
+                <a
+                  className="btn btn-primary"
+                  href="mailto:jerry@xiao.sh?subject=Recon%20demo%20request"
+                  data-magnetic
+                >
+                  <span>Book a demo</span>
+                  <ArrowSm />
+                </a>
+                <a className="btn btn-ghost" href="mailto:jerry@xiao.sh?subject=Recon%20enquiry">
+                  <span>Talk to us</span>
+                </a>
+              </div>
+            </div>
+
+            <Terminal
+              title="recon · acme-prod"
+              lines={[
+                { prompt: '$', cmd: 'recon up --profile=acme-prod' },
+                { prompt: '', out: '▲ workspace ready · auth via SSO', outClass: 'ok' },
+                { prompt: '$', cmd: 'recon connect hubspot --read-only' },
+                { prompt: '', out: '✓ 4,212 contacts · 318 active deals indexed' },
+                { prompt: '$', cmd: 'recon skills run pipeline-review' },
+                { prompt: '', out: '✓ 47 deals scored · 3 flagged for risk' },
+                { prompt: '$', cmd: 'recon audit log --since=24h' },
+                { prompt: '', out: '◇ 142 agent actions · 0 anomalies', outClass: 'muted' },
+              ]}
+            />
+          </div>
+        </div>
+      </section>
+
+      <Footer variant="product" productName="Recon" />
+      <GsapClient />
+    </div>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..98ed2e9
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+interface Props {
+  variant?: 'studio' | 'product';
+  productName?: 'Recon' | 'Pulse' | 'Helm';
+}
+
+export default function Footer({ variant = 'product', productName = 'Recon' }: Props) {
+  const isStudio = variant === 'studio';
+
+  return (
+    <footer className="footer">
+      <div className="container footer-inner">
+        <div className="footer-brand">
+          {isStudio ? (
+            <>
+              <div className="brand-mark denim">
+                <svg
+                  viewBox="0 0 24 24"
+                  width="14"
+                  height="14"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.6"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="9" />
+                  <circle cx="12" cy="12" r="5" />
+                  <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+                </svg>
+              </div>
+              <span>42nights · engineering studio · SF</span>
+            </>
+          ) : (
+            <span>
+              {productName} · built &amp; deployed by <Link href="/">42nights</Link>
+            </span>
+          )}
+        </div>
+        <div className="footer-links">
+          <Link href="/">Studio</Link>
+          <Link href="/recon">Recon</Link>
+          <Link href="/pulse">Pulse</Link>
+          <Link href="/helm">Helm</Link>
+          <a href="mailto:jerry@xiao.sh">Contact</a>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/GsapClient.tsx b/components/GsapClient.tsx
new file mode 100644
index 0000000..27dce91
--- /dev/null
+++ b/components/GsapClient.tsx
@@ -0,0 +1,427 @@
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+const EASE_OUT_HARD = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+export default function GsapClient() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    gsap.registerPlugin(ScrollTrigger);
+    document.body.classList.add('ready');
+
+    /* ─── spotlight follow ─── */
+    let spotlightCleanup: (() => void) | undefined;
+    {
+      const el = document.querySelector('.spotlight') as HTMLElement | null;
+      if (el && !reduceMotion) {
+        gsap.set(el, { xPercent: -50, yPercent: -50, top: 0, left: 0 });
+        const xTo = gsap.quickTo(el, 'x', { duration: 0.7, ease: 'power3.out' });
+        const yTo = gsap.quickTo(el, 'y', { duration: 0.7, ease: 'power3.out' });
+        xTo(window.innerWidth / 2);
+        yTo(window.innerHeight / 3);
+        const onMove = (e: PointerEvent) => {
+          xTo(e.clientX);
+          yTo(e.clientY);
+        };
+        window.addEventListener('pointermove', onMove, { passive: true });
+        spotlightCleanup = () => window.removeEventListener('pointermove', onMove);
+      }
+    }
+
+    /* ─── parallax ─── */
+    if (!reduceMotion) {
+      document.querySelectorAll<HTMLElement>('[data-parallax]').forEach((el) => {
+        const speed = parseFloat(el.dataset.parallax || '');
+        if (!isFinite(speed) || speed <= 0) return;
+        const trigger = (el.closest('.section, .hero') as HTMLElement) || el.parentElement;
+        gsap.to(el, {
+          yPercent: -40 * speed,
+          ease: 'none',
+          scrollTrigger: {
+            trigger,
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: 0.4,
+          },
+        });
+      });
+    }
+
+    /* ─── hero title reveal ─── */
+    {
+      const scope =
+        document.querySelector('.hero-phase.is-active') ||
+        document.querySelector('.hero');
+      if (scope) {
+        const words = scope.querySelectorAll('.hero-title .word');
+        if (words.length) {
+          gsap.from(words, {
+            yPercent: 110,
+            filter: 'blur(8px)',
+            opacity: 0,
+            duration: 0.95,
+            ease: 'power4.out',
+            stagger: 0.05,
+            delay: 0.1,
+          });
+        }
+      }
+    }
+
+    /* ─── data-reveal scroll fades ─── */
+    document.querySelectorAll<HTMLElement>('[data-reveal]').forEach((el) => {
+      gsap.fromTo(
+        el,
+        { opacity: 0, y: 22, filter: 'blur(6px)' },
+        {
+          opacity: 1,
+          y: 0,
+          filter: 'blur(0px)',
+          duration: 0.8,
+          ease: 'power3.out',
+          scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' },
+        }
+      );
+    });
+
+    /* ─── data-stagger groups ─── */
+    document.querySelectorAll<HTMLElement>('[data-stagger]').forEach((group) => {
+      const items = Array.from(group.children) as HTMLElement[];
+      if (!items.length) return;
+      gsap.set(items, { opacity: 0, y: 14 });
+      gsap.to(items, {
+        opacity: 1,
+        y: 0,
+        duration: 0.55,
+        ease: EASE_OUT_HARD,
+        stagger: 0.05,
+        scrollTrigger: { trigger: group, start: 'top 88%', toggleActions: 'play none none none' },
+      });
+    });
+
+    /* ─── number counters ─── */
+    document.querySelectorAll<HTMLElement>('[data-counter]').forEach((node) => {
+      const target = parseFloat(node.dataset.counter || '0');
+      const proxy = { v: 0 };
+      ScrollTrigger.create({
+        trigger: node,
+        start: 'top 90%',
+        once: true,
+        onEnter: () => {
+          gsap.to(proxy, {
+            v: target,
+            duration: 1.4,
+            ease: 'power3.out',
+            onUpdate: () => {
+              node.textContent = Math.round(proxy.v).toLocaleString();
+            },
+          });
+        },
+      });
+    });
+
+    /* ─── marquee ─── */
+    let marqueeTween: gsap.core.Tween | undefined;
+    {
+      const track = document.querySelector('.marquee-track') as HTMLElement | null;
+      if (track) {
+        track.innerHTML += track.innerHTML;
+        const distance = track.scrollWidth / 2;
+        marqueeTween = gsap.to(track, {
+          x: -distance,
+          duration: 40,
+          ease: 'none',
+          repeat: -1,
+        });
+        const parent = track.parentElement;
+        if (parent) {
+          parent.addEventListener('mouseenter', () => marqueeTween?.timeScale(0.1));
+          parent.addEventListener('mouseleave', () => marqueeTween?.timeScale(1));
+        }
+      }
+    }
+
+    /* ─── nav: compact + sliding indicator + scroll-spy ─── */
+    {
+      const nav = document.querySelector('.nav') as HTMLElement | null;
+      const links = document.querySelectorAll<HTMLAnchorElement>('.nav-link[data-nav]');
+      const indicator = document.querySelector('.nav-indicator') as HTMLElement | null;
+      const linksList = document.querySelector('.nav-links') as HTMLElement | null;
+
+      if (nav) {
+        ScrollTrigger.create({
+          start: 'top -40',
+          onUpdate: (self) => nav.classList.toggle('compact', self.scroll() > 40),
+        });
+      }
+
+      const moveTo = (el: HTMLElement) => {
+        if (!indicator || !linksList) return;
+        const r = el.getBoundingClientRect();
+        const parent = linksList.getBoundingClientRect();
+        gsap.to(indicator, {
+          x: r.left - parent.left,
+          y: r.top - parent.top,
+          width: r.width,
+          height: r.height,
+          opacity: 1,
+          duration: 0.4,
+          ease: 'power3.out',
+        });
+      };
+      links.forEach((l) => l.addEventListener('pointerenter', () => moveTo(l)));
+      linksList?.addEventListener('pointerleave', () => {
+        if (indicator) gsap.to(indicator, { opacity: 0, duration: 0.3 });
+      });
+
+      // scroll spy on in-page sections (only on pages with hash links)
+      ['#why', '#products', '#how', '#roadmap', '#approach', '#engagement', '#contact'].forEach(
+        (id) => {
+          const sec = document.querySelector(id);
+          if (!sec) return;
+          ScrollTrigger.create({
+            trigger: sec,
+            start: 'top center',
+            end: 'bottom center',
+            onToggle: (self) => {
+              if (!self.isActive) return;
+              links.forEach((l) =>
+                l.classList.toggle('is-active', l.getAttribute('href') === id)
+              );
+              const active = document.querySelector('.nav-link.is-active') as HTMLElement | null;
+              if (active) moveTo(active);
+            },
+          });
+        }
+      );
+    }
+
+    /* ─── magnetic buttons ─── */
+    if (!reduceMotion) {
+      document.querySelectorAll<HTMLElement>('[data-magnetic]').forEach((el) => {
+        const xTo = gsap.quickTo(el, 'x', { duration: 0.5, ease: 'elastic.out(1, 0.4)' });
+        const yTo = gsap.quickTo(el, 'y', { duration: 0.5, ease: 'elastic.out(1, 0.4)' });
+        const onMove = (e: PointerEvent) => {
+          const r = el.getBoundingClientRect();
+          const dx = e.clientX - (r.left + r.width / 2);
+          const dy = e.clientY - (r.top + r.height / 2);
+          xTo(dx * 0.22);
+          yTo(dy * 0.32);
+        };
+        const onLeave = () => {
+          xTo(0);
+          yTo(0);
+        };
+        el.addEventListener('pointermove', onMove);
+        el.addEventListener('pointerleave', onLeave);
+      });
+    }
+
+    /* ─── product card hover-glow follow ─── */
+    document.querySelectorAll<HTMLElement>('.product-card').forEach((card) => {
+      card.addEventListener('pointermove', (e) => {
+        const r = card.getBoundingClientRect();
+        card.style.setProperty('--gx', ((e.clientX - r.left) / r.width) * 100 + '%');
+        card.style.setProperty('--gy', ((e.clientY - r.top) / r.height) * 100 + '%');
+      });
+    });
+
+    /* ─── roadmap tabs + horizontal phase timeline ─── */
+    {
+      const btns = document.querySelectorAll<HTMLButtonElement>('.rt-btn');
+      const indicator = document.querySelector('.rt-indicator') as HTMLElement | null;
+      const panelGroups = document.querySelectorAll<HTMLElement>('[data-roadmap-panel]');
+      const dots = document.querySelectorAll<HTMLButtonElement>('.rm-dot');
+      const progress = document.querySelector('.rm-progress') as HTMLElement | null;
+      const timeline = document.querySelector('.rm-timeline') as HTMLElement | null;
+
+      const placeRtIndicator = (btn: HTMLElement) => {
+        if (!indicator || !btn.parentElement) return;
+        const tabsRect = btn.parentElement.getBoundingClientRect();
+        const r = btn.getBoundingClientRect();
+        gsap.to(indicator, {
+          x: r.left - tabsRect.left,
+          y: r.top - tabsRect.top,
+          width: r.width,
+          height: r.height,
+          duration: 0.42,
+          ease: 'power3.out',
+        });
+      };
+
+      const initial = document.querySelector('.rt-btn.active') as HTMLElement | null;
+      if (initial) requestAnimationFrame(() => placeRtIndicator(initial));
+
+      const updateProgress = () => {
+        if (!progress || !dots.length || !timeline) return;
+        const track = timeline.querySelector('.rm-track') as HTMLElement | null;
+        if (!track) return;
+        const activeIdx = parseInt(timeline.dataset.activePhase || '0', 10);
+        const pct = dots.length > 1 ? activeIdx / (dots.length - 1) : 0;
+        const width = pct * (track.clientWidth - 32);
+        gsap.to(progress, { width, duration: 0.55, ease: 'power3.out' });
+      };
+
+      const activatePhase = (idx: number) => {
+        if (!timeline) return;
+        timeline.dataset.activePhase = String(idx);
+        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
+        const visibleGroup = document.querySelector('.rm-panels.active');
+        if (visibleGroup) {
+          const panels = visibleGroup.querySelectorAll<HTMLElement>('.rm-panel');
+          panels.forEach((p, i) => p.classList.toggle('active', i === idx));
+          const target = panels[idx];
+          if (target) {
+            gsap.fromTo(
+              target,
+              { opacity: 0, y: 10, filter: 'blur(4px)' },
+              { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.45, ease: 'power3.out' }
+            );
+          }
+        }
+        updateProgress();
+      };
+
+      dots.forEach((dot, idx) => {
+        dot.addEventListener('click', () => activatePhase(idx));
+      });
+
+      btns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          btns.forEach((b) => {
+            b.classList.remove('active');
+            b.setAttribute('aria-selected', 'false');
+          });
+          btn.classList.add('active');
+          btn.setAttribute('aria-selected', 'true');
+          placeRtIndicator(btn);
+
+          const target = btn.dataset.roadmap;
+          panelGroups.forEach((g) => {
+            const isTarget = g.dataset.roadmapPanel === target;
+            g.classList.toggle('active', isTarget);
+            if (isTarget) {
+              const visiblePanel = g.querySelector('.rm-panel.active') as HTMLElement | null;
+              if (visiblePanel) {
+                gsap.fromTo(
+                  visiblePanel,
+                  { opacity: 0, y: 10, filter: 'blur(4px)' },
+                  { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.45, ease: 'power3.out' }
+                );
+              }
+            }
+          });
+        });
+      });
+
+      const onResize = () => {
+        const active = document.querySelector('.rt-btn.active') as HTMLElement | null;
+        if (active) placeRtIndicator(active);
+        updateProgress();
+      };
+      window.addEventListener('resize', onResize);
+      requestAnimationFrame(updateProgress);
+    }
+
+    /* ─── terminal typewriter ─── */
+    {
+      const body = document.getElementById('terminal-body');
+      if (body) {
+        const cmds = body.querySelectorAll<HTMLElement>('.cmd');
+        const outs = body.querySelectorAll<HTMLElement>('.t-line.out');
+        cmds.forEach((c) => {
+          c.dataset.text = c.dataset.typed;
+          c.textContent = '';
+        });
+        outs.forEach((o) => gsap.set(o, { opacity: 0, height: 0, overflow: 'hidden' }));
+        const lines = Array.from(body.children) as HTMLElement[];
+
+        const playLine = (line: HTMLElement) =>
+          new Promise<void>((resolve) => {
+            if (line.classList.contains('out')) {
+              gsap.to(line, { opacity: 1, height: 'auto', duration: 0.25, onComplete: () => resolve() });
+            } else {
+              const cmd = line.querySelector('.cmd') as HTMLElement | null;
+              if (!cmd) return resolve();
+              line.classList.add('is-typing');
+              const text = cmd.dataset.text || '';
+              const proxy = { i: 0 };
+              gsap.to(proxy, {
+                i: text.length,
+                duration: Math.max(0.5, text.length * 0.025),
+                ease: 'none',
+                onUpdate: () => {
+                  cmd.textContent = text.slice(0, Math.floor(proxy.i));
+                },
+                onComplete: () => {
+                  cmd.textContent = text;
+                  line.classList.remove('is-typing');
+                  resolve();
+                },
+              });
+            }
+          });
+
+        let started = false;
+        ScrollTrigger.create({
+          trigger: body,
+          start: 'top 80%',
+          once: true,
+          onEnter: async () => {
+            if (started) return;
+            started = true;
+            for (const line of lines) {
+              await playLine(line);
+              await new Promise((r) => setTimeout(r, 200));
+            }
+          },
+        });
+      }
+    }
+
+    /* ─── section title split-word reveal ─── */
+    document.querySelectorAll<HTMLElement>('[data-split]').forEach((title) => {
+      const html = title.innerHTML;
+      const wrapped = html.replace(/(<[^>]+>)|([^<\s]+)/g, (m, tag, word) => {
+        if (tag) return tag;
+        return `<span class="sw"><span class="swi">${word}</span></span>`;
+      });
+      title.innerHTML = wrapped;
+      const inners = title.querySelectorAll('.swi');
+      gsap.set(title.querySelectorAll('.sw'), {
+        display: 'inline-block',
+        overflow: 'hidden',
+        verticalAlign: 'bottom',
+        paddingBottom: '0.06em',
+      });
+      gsap.set(inners, { display: 'inline-block', yPercent: 110, opacity: 0 });
+      gsap.to(inners, {
+        yPercent: 0,
+        opacity: 1,
+        duration: 0.85,
+        ease: 'power3.out',
+        stagger: 0.04,
+        scrollTrigger: { trigger: title, start: 'top 88%', toggleActions: 'play none none none' },
+      });
+    });
+
+    if (!reduceMotion) gsap.ticker.lagSmoothing(500, 16);
+
+    return () => {
+      // tear down ScrollTriggers and tweens for clean re-init on route change
+      ScrollTrigger.getAll().forEach((t) => t.kill());
+      marqueeTween?.kill();
+      spotlightCleanup?.();
+    };
+  }, [pathname]);
+
+  return null;
+}
diff --git a/components/Marquee.tsx b/components/Marquee.tsx
new file mode 100644
index 0000000..ce63d5f
--- /dev/null
+++ b/components/Marquee.tsx
@@ -0,0 +1,20 @@
+import { Fragment } from 'react';
+
+interface Props {
+  items: string[];
+}
+
+export default function Marquee({ items }: Props) {
+  return (
+    <div className="marquee" aria-hidden="true">
+      <div className="marquee-track">
+        {items.map((item, i) => (
+          <Fragment key={i}>
+            <span>{item}</span>
+            <span>·</span>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/Nav.tsx b/components/Nav.tsx
new file mode 100644
index 0000000..8e6bfc9
--- /dev/null
+++ b/components/Nav.tsx
@@ -0,0 +1,114 @@
+import Link from 'next/link';
+import RadarMark from './RadarMark';
+
+export type NavPage = 'studio' | 'recon' | 'pulse' | 'helm';
+
+interface Props {
+  active: NavPage;
+}
+
+const ArrowIcon = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="12"
+    height="12"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 8h10M9 4l4 4-4 4" />
+  </svg>
+);
+
+export default function Nav({ active }: Props) {
+  const isStudio = active === 'studio';
+  const denim = active !== 'recon';
+  const brandLabel = isStudio ? '42nights' : `42nights / ${active}`;
+  const ctaLabel = isStudio ? 'Book a discovery' : 'Book a deploy';
+  const ctaHref = isStudio ? '#contact' : '#cta';
+
+  return (
+    <header className="nav-wrap">
+      <nav className="nav" aria-label="Primary">
+        <Link href="/" className="nav-brand" aria-label="42nights home">
+          <span className={`brand-mark${denim ? ' denim' : ''}`}>
+            <RadarMark />
+          </span>
+          <span className="brand-name">{brandLabel}</span>
+        </Link>
+
+        <ul className="nav-links" role="list">
+          {isStudio ? (
+            <>
+              <li>
+                <a className="nav-link" href="#approach" data-nav>
+                  Approach
+                </a>
+              </li>
+              <li>
+                <a className="nav-link" href="#products" data-nav>
+                  Products
+                </a>
+              </li>
+              <li>
+                <a className="nav-link" href="#engagement" data-nav>
+                  Engagement
+                </a>
+              </li>
+              <li>
+                <a className="nav-link" href="#contact" data-nav>
+                  Contact
+                </a>
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <Link
+                  className={`nav-link${active === 'recon' ? ' is-active' : ''}`}
+                  href="/recon"
+                  data-nav
+                >
+                  Recon
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className={`nav-link${active === 'pulse' ? ' is-active' : ''}`}
+                  href="/pulse"
+                  data-nav
+                >
+                  Pulse
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className={`nav-link${active === 'helm' ? ' is-active' : ''}`}
+                  href="/helm"
+                  data-nav
+                >
+                  Helm
+                </Link>
+              </li>
+              <li>
+                <Link className="nav-link" href="/" data-nav>
+                  Studio
+                </Link>
+              </li>
+            </>
+          )}
+          <span className="nav-indicator" aria-hidden="true" />
+        </ul>
+
+        <div className="nav-actions">
+          <a className="nav-cta" href={ctaHref} data-magnetic>
+            <span>{ctaLabel}</span>
+            <ArrowIcon />
+          </a>
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/components/RadarMark.tsx b/components/RadarMark.tsx
new file mode 100644
index 0000000..9591c0c
--- /dev/null
+++ b/components/RadarMark.tsx
@@ -0,0 +1,23 @@
+interface Props {
+  size?: number;
+  withPad?: boolean;
+}
+
+export default function RadarMark({ size = 18, withPad = true }: Props) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <circle cx="12" cy="12" r="5" />
+      <circle cx="12" cy="12" r={withPad ? 1.5 : 1.5} fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/components/Terminal.tsx b/components/Terminal.tsx
new file mode 100644
index 0000000..824f3a9
--- /dev/null
+++ b/components/Terminal.tsx
@@ -0,0 +1,40 @@
+interface Line {
+  prompt: string; // e.g. '$' or '▶'
+  cmd?: string; // typed command (data-typed)
+  out?: string; // output line text (no command)
+  outClass?: 'ok' | 'muted';
+}
+
+interface Props {
+  title: string;
+  lines: Line[];
+}
+
+export default function Terminal({ title, lines }: Props) {
+  return (
+    <div className="terminal" aria-hidden="true">
+      <div className="terminal-bar">
+        <span className="dot d-r" />
+        <span className="dot d-y" />
+        <span className="dot d-g" />
+        <span className="terminal-title">{title}</span>
+      </div>
+      <div className="terminal-body" id="terminal-body">
+        {lines.map((line, i) =>
+          line.cmd ? (
+            <div className="t-line" key={i}>
+              <span className="prompt">{line.prompt}</span> <span className="cmd" data-typed={line.cmd} />
+            </div>
+          ) : (
+            <div
+              className={`t-line out${line.outClass ? ' ' + line.outClass : ''}`}
+              key={i}
+            >
+              <span>{line.out}</span>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/helm.html b/helm.html
deleted file mode 100644
index d9263a7..0000000
--- a/helm.html
+++ /dev/null
@@ -1,343 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Helm — the portfolio operating cockpit, deployed by 42nights</title>
-  <meta name="description" content="KPI roll-ups across portcos, variance flags, board-pack agent. On infrastructure you control. Built on Recon, deployed by 42nights." />
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link rel="canonical" href="https://42nights.dev/helm" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://42nights.dev/helm" />
-  <meta property="og:title" content="Helm — portfolio cockpit on your infra" />
-  <meta property="og:description" content="KPI roll-ups, variance flags, DD workspace, board-pack agent. Built on Recon, deployed by 42nights." />
-  <meta property="og:site_name" content="42nights" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Helm — portfolio cockpit on your infra" />
-  <meta name="twitter:description" content="KPI roll-ups, variance flags, DD workspace, board-pack agent. Built on Recon, deployed by 42nights." />
-  <meta name="theme-color" content="#7ec5ff" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="styles.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
-  <script src="main.js" defer></script>
-</head>
-<body data-theme="helm">
-  <div class="grain" aria-hidden="true"></div>
-  <div class="spotlight" aria-hidden="true"></div>
-
-  <!-- ═══════════════════ NAVBAR ═══════════════════ -->
-  <header class="nav-wrap">
-    <nav class="nav" aria-label="Primary">
-      <a href="/" class="nav-brand" aria-label="42nights home">
-        <span class="brand-mark denim">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </span>
-        <span class="brand-name">42nights / helm</span>
-      </a>
-
-      <ul class="nav-links" role="list">
-        <li><a class="nav-link" href="recon.html" data-nav>Recon</a></li>
-        <li><a class="nav-link" href="pulse.html" data-nav>Pulse</a></li>
-        <li><a class="nav-link is-active" href="helm.html" data-nav>Helm</a></li>
-        <li><a class="nav-link" href="/" data-nav>Studio</a></li>
-        <span class="nav-indicator" aria-hidden="true"></span>
-      </ul>
-
-      <div class="nav-actions">
-        <a class="nav-cta" href="#cta" data-magnetic>
-          <span>Book a deploy</span>
-          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-      </div>
-    </nav>
-  </header>
-
-  <!-- ═══════════════════ HERO ═══════════════════ -->
-  <section class="hero" id="top">
-    <div class="hero-grid" aria-hidden="true" data-parallax="0.4"></div>
-    <div class="hero-orb" aria-hidden="true" data-parallax="0.7"></div>
-    <div class="hero-bg-word" aria-hidden="true" data-parallax="0.25">helm</div>
-
-    <div class="container hero-inner">
-      <div class="hero-badge" data-reveal>
-        <span class="ping"></span>
-        <span>Helm · Built on Recon · Deployed by 42nights</span>
-      </div>
-
-      <h1 class="hero-title">
-        <span class="line"><span class="word">A</span> <span class="word italic">portfolio</span></span>
-        <span class="line"><span class="word">cockpit</span> <span class="word">for</span></span>
-        <span class="line"><span class="word italic">holdcos</span> <span class="word">&amp;</span> <span class="word">PE.</span></span>
-      </h1>
-      <p class="hero-sub" data-reveal>
-        KPI roll-ups across portcos, variance flags, DD workspace, board-pack agent. On infrastructure you control. Deployed by <a class="inline-link" href="/">42nights</a> in four weeks.
-      </p>
-      <p class="hero-audience" data-reveal>Operating partners · COOs · Holdcos · Family offices · LP teams</p>
-
-      <div class="hero-cta" data-reveal>
-        <a class="btn btn-primary" href="#cta" data-magnetic>
-          <span>Book a Helm deploy</span>
-          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-        <a class="btn btn-ghost" href="recon.html">
-          <span>See the platform</span>
-        </a>
-      </div>
-
-      <div class="hero-stats" data-reveal>
-        <div class="stat"><span class="stat-num" data-counter="100">0</span><span class="stat-label">% on your own infra</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="6">0</span><span class="stat-label">PE skill packs</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="4">0</span><span class="stat-label">week deploy</span></div>
-      </div>
-    </div>
-
-    <div class="marquee" aria-hidden="true">
-      <div class="marquee-track">
-        <span>QuickBooks</span><span>·</span>
-        <span>Xero</span><span>·</span>
-        <span>NetSuite</span><span>·</span>
-        <span>Stripe</span><span>·</span>
-        <span>Plaid</span><span>·</span>
-        <span>Rippling</span><span>·</span>
-        <span>Gusto</span><span>·</span>
-        <span>HubSpot</span><span>·</span>
-        <span>Salesforce</span><span>·</span>
-        <span>Carta</span><span>·</span>
-        <span>Drive · Box · Docsend</span><span>·</span>
-        <span>Notion</span><span>·</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CAPABILITIES ═══════════════════ -->
-  <section class="section" id="capabilities">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">01</div>
-    <div class="container">
-      <div class="section-head section-head-narrow">
-        <div class="eyebrow" data-reveal><span class="dot"></span>What Helm does</div>
-        <h2 class="section-title" data-split>
-          From portco<br/><em>to board pack.</em>
-        </h2>
-      </div>
-
-      <div class="cap-grid" data-stagger>
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="10" y="58" width="14" height="22" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="30" y="44" width="14" height="36" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="50" y="62" width="14" height="18" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="70" y="36" width="14" height="44" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="90" y="50" width="14" height="30" rx="2" fill="rgba(126,197,255,0.55)" />
-            <text x="57" y="92" class="cap-label" text-anchor="middle">portcos</text>
-            <line x1="120" y1="58" x2="148" y2="58" stroke="var(--accent)" stroke-width="1.4" />
-            <polyline points="142,53 148,58 142,63" stroke="var(--accent)" fill="none" stroke-width="1.4" />
-            <rect x="158" y="20" width="44" height="60" rx="5" fill="rgba(126,197,255,0.22)" stroke="var(--accent)" />
-            <text x="180" y="92" class="cap-label" text-anchor="middle">holdco</text>
-          </svg>
-          <h3>KPI roll-ups</h3>
-          <p>Portcos in. Dashboard out.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <line x1="10" y1="46" x2="210" y2="46" stroke="rgba(255,255,255,0.15)" stroke-dasharray="2 4" />
-            <text x="14" y="14" class="cap-label">plan</text>
-            <text x="14" y="80" class="cap-label">actual</text>
-            <path d="M 20 40 L 60 38 L 100 42 L 140 56 L 180 60 L 210 65" stroke="var(--accent)" stroke-width="1.6" fill="none" />
-            <circle cx="140" cy="56" r="5" fill="none" stroke="rgba(255,140,140,0.85)" stroke-width="1.6" />
-            <line x1="135" y1="51" x2="145" y2="61" stroke="rgba(255,140,140,0.85)" stroke-width="1.5" />
-            <line x1="145" y1="51" x2="135" y2="61" stroke="rgba(255,140,140,0.85)" stroke-width="1.5" />
-            <text x="148" y="40" class="cap-label-out" fill="rgba(255,140,140,0.9)">flag</text>
-          </svg>
-          <h3>Variance vs plan</h3>
-          <p>Flagged. Drafted. Reviewed.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="0" y="6" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="36" y="17" class="cap-label">data room</text>
-            <rect x="0" y="26" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="36" y="37" class="cap-label">CIM</text>
-            <rect x="0" y="46" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="36" y="57" class="cap-label">model</text>
-            <rect x="0" y="66" width="32" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="36" y="77" class="cap-label">notes</text>
-            <path d="M 110 6 L 110 86" stroke="rgba(255,255,255,0.1)" stroke-dasharray="2 3" />
-            <rect x="120" y="14" width="92" height="20" rx="4" fill="rgba(126,197,255,0.16)" stroke="var(--accent)" />
-            <text x="166" y="28" class="cap-label-out" text-anchor="middle">DD workspace</text>
-            <rect x="120" y="42" width="64" height="14" rx="3" fill="rgba(255,255,255,0.05)" />
-            <text x="124" y="53" class="cap-label">checklist</text>
-            <rect x="120" y="62" width="80" height="14" rx="3" fill="rgba(255,255,255,0.05)" />
-            <text x="124" y="73" class="cap-label">risk flags</text>
-          </svg>
-          <h3>DD workspace generator</h3>
-          <p>Per-deal. Auto-tagged.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="6" y="10" width="80" height="72" rx="4" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)" />
-            <line x1="14" y1="22" x2="78" y2="22" stroke="rgba(255,255,255,0.15)" />
-            <line x1="14" y1="32" x2="60" y2="32" stroke="rgba(255,255,255,0.15)" />
-            <line x1="14" y1="42" x2="74" y2="42" stroke="rgba(255,255,255,0.15)" />
-            <line x1="14" y1="52" x2="50" y2="52" stroke="rgba(255,255,255,0.15)" />
-            <line x1="14" y1="62" x2="68" y2="62" stroke="rgba(255,255,255,0.15)" />
-            <line x1="14" y1="72" x2="56" y2="72" stroke="rgba(255,255,255,0.15)" />
-            <text x="46" y="92" class="cap-label" text-anchor="middle">notes</text>
-            <line x1="92" y1="46" x2="124" y2="46" stroke="var(--accent)" stroke-width="1.4" />
-            <polyline points="118,41 124,46 118,51" stroke="var(--accent)" fill="none" stroke-width="1.4" />
-            <rect x="130" y="10" width="84" height="72" rx="4" fill="rgba(126,197,255,0.12)" stroke="var(--accent)" />
-            <text x="172" y="38" class="cap-label-out" text-anchor="middle">BOARD</text>
-            <text x="172" y="52" class="cap-label-out" text-anchor="middle">PACK</text>
-            <text x="172" y="92" class="cap-label" text-anchor="middle">board ready</text>
-          </svg>
-          <h3>Board-pack agent</h3>
-          <p>Notes in. Pack out.</p>
-        </article>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ ROADMAP ═══════════════════ -->
-  <section class="section section-narrow" id="roadmap">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">02</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Roadmap</div>
-        <h2 class="section-title" data-split>
-          Five phases<br/><em>per deployment.</em>
-        </h2>
-      </div>
-
-      <div class="rm-timeline" data-active-phase="0">
-        <div class="rm-track">
-          <div class="rm-line"></div>
-          <div class="rm-progress"></div>
-          <button class="rm-dot active" data-phase-idx="0" aria-label="Phase 1"><span>01</span></button>
-          <button class="rm-dot" data-phase-idx="1" aria-label="Phase 2"><span>02</span></button>
-          <button class="rm-dot" data-phase-idx="2" aria-label="Phase 3"><span>03</span></button>
-          <button class="rm-dot" data-phase-idx="3" aria-label="Phase 4"><span>04</span></button>
-          <button class="rm-dot" data-phase-idx="4" aria-label="Phase 5"><span>05</span></button>
-        </div>
-
-        <div class="rm-stage">
-          <div class="rm-panels active" data-roadmap-panel="helm">
-            <div class="rm-panel active" data-phase-idx="0">
-              <span class="rm-tag">Phase 1 · Helm</span>
-              <h4>Multi-entity foundation</h4>
-              <p>Workspace-as-portfolio-company. HoldCo workspace aggregating read-only views. Entities: Company, People, Contracts, KPIs, Reporting periods.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="1">
-              <span class="rm-tag">Phase 2 · Helm</span>
-              <h4>Operating cadence</h4>
-              <p>QuickBooks / Xero / NetSuite, Stripe, HRIS, Hub/Salesforce ingest. Auto-populated monthly &amp; quarterly templates with variance flags.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="2">
-              <span class="rm-tag">Phase 3 · Helm</span>
-              <h4>Diligence &amp; deal flow</h4>
-              <p>Deal pipeline as a first-class object. Per-deal DD workspace generator. Data-room ingest with auto-tagging and risk flag agents.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="3">
-              <span class="rm-tag">Phase 4 · Helm</span>
-              <h4>Portfolio agents</h4>
-              <p>Operating-partner agent per portco. Cross-portfolio benchmarking on margin, CAC payback, NRR percentiles. Talent-network agent.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="4">
-              <span class="rm-tag">Phase 5 · Helm</span>
-              <h4>LP &amp; governance</h4>
-              <p>LP reporting view (capital account, IRR/MOIC). Board-pack generator from operating-partner output. SOC2-ready audit trail.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ PLATFORM REFERENCE ═══════════════════ -->
-  <section class="section section-narrow platform-ref">
-    <div class="container">
-      <div class="ref-card" data-reveal>
-        <div class="ref-copy">
-          <div class="eyebrow"><span class="dot"></span>Built on Recon</div>
-          <h3>Same gateway. Same vault. Same audit log.</h3>
-          <p>Helm is a thin Next.js app over the Recon substrate. Each portco is a scoped workspace; the holdco view is a read-only roll-up. Same security posture, same audit trail.</p>
-          <a class="btn btn-ghost" href="recon.html">
-            <span>See the Recon platform</span>
-            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CTA ═══════════════════ -->
-  <section class="section cta-sec" id="cta">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">03</div>
-    <div class="container">
-      <div class="cta-card" data-reveal>
-        <div class="cta-copy">
-          <div class="eyebrow"><span class="dot"></span>Get Helm deployed</div>
-          <h2 class="section-title" data-split>
-            Four weeks to<br/><em>a holdco cockpit.</em>
-          </h2>
-          <p class="section-lede">
-            42nights deploys Helm inside your perimeter — one workspace per portco, holdco view rolling up. Discovery to running in four weeks.
-          </p>
-          <div class="hero-cta">
-            <a class="btn btn-primary" href="mailto:jerry@xiao.sh?subject=Helm%20deploy" data-magnetic>
-              <span>Book a deploy</span>
-              <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </a>
-            <a class="btn btn-ghost" href="/">
-              <span>About 42nights</span>
-            </a>
-          </div>
-        </div>
-
-        <div class="terminal" aria-hidden="true">
-          <div class="terminal-bar">
-            <span class="dot d-r"></span><span class="dot d-y"></span><span class="dot d-g"></span>
-            <span class="terminal-title">helm · pinemark-holdco</span>
-          </div>
-          <div class="terminal-body" id="terminal-body">
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon up --variant=helm"></span></div>
-            <div class="t-line out ok"><span>▲ holdco workspace ready · 7 portcos scoped</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="helm ingest --kpi --portco=northstar"></span></div>
-            <div class="t-line out"><span>✓ QB · Stripe · HRIS · 14 KPIs synced</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="helm variance --period=Q2 --vs=plan"></span></div>
-            <div class="t-line out"><span>◇ 3 portcos flagged · 12 commentary drafts</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="helm board-pack --period=Q2 --portco=all"></span></div>
-            <div class="t-line out muted"><span>◇ pack drafted · 38 pages · awaiting review</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ FOOTER ═══════════════════ -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div class="footer-brand">
-        <span>Helm · built &amp; deployed by <a href="/">42nights</a></span>
-      </div>
-      <div class="footer-links">
-        <a href="/">Studio</a>
-        <a href="recon.html">Recon</a>
-        <a href="pulse.html">Pulse</a>
-        <a href="helm.html">Helm</a>
-        <a href="mailto:jerry@xiao.sh">Contact</a>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/index.html b/index.html
deleted file mode 100644
index 7602026..0000000
--- a/index.html
+++ /dev/null
@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>42nights — we deploy AI operating layers inside your perimeter</title>
-  <meta name="description" content="An in-person engineering studio. We embed for four weeks, ship Recon (or Pulse, or Helm) on your infrastructure, and hand the keys to your team." />
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link rel="canonical" href="https://42nights.dev/" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://42nights.dev/" />
-  <meta property="og:title" content="42nights — engineering studio · SF" />
-  <meta property="og:description" content="We embed for four weeks and ship the operating layer that runs your business — inside your perimeter." />
-  <meta property="og:site_name" content="42nights" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="42nights — engineering studio · SF" />
-  <meta name="twitter:description" content="We embed for four weeks and ship the operating layer that runs your business — inside your perimeter." />
-  <meta name="theme-color" content="#7892bd" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="styles.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
-  <script src="main.js" defer></script>
-</head>
-<body data-theme="agency">
-  <div class="grain" aria-hidden="true"></div>
-  <div class="spotlight" aria-hidden="true"></div>
-
-  <!-- ═══════════════════ NAVBAR ═══════════════════ -->
-  <header class="nav-wrap">
-    <nav class="nav" aria-label="Primary">
-      <a href="/" class="nav-brand" aria-label="42nights home">
-        <span class="brand-mark denim">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </span>
-        <span class="brand-name">42nights</span>
-      </a>
-
-      <ul class="nav-links" role="list">
-        <li><a class="nav-link" href="#approach" data-nav>Approach</a></li>
-        <li><a class="nav-link" href="#products" data-nav>Products</a></li>
-        <li><a class="nav-link" href="#engagement" data-nav>Engagement</a></li>
-        <li><a class="nav-link" href="#contact" data-nav>Contact</a></li>
-        <span class="nav-indicator" aria-hidden="true"></span>
-      </ul>
-
-      <div class="nav-actions">
-        <a class="nav-cta" href="#contact" data-magnetic>
-          <span>Book a discovery</span>
-          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-      </div>
-    </nav>
-  </header>
-
-  <!-- ═══════════════════ HERO ═══════════════════ -->
-  <section class="hero studio-hero" id="top">
-    <div class="hero-grid" aria-hidden="true" data-parallax="0.4"></div>
-    <div class="hero-orb" aria-hidden="true" data-parallax="0.7"></div>
-    <div class="hero-bg-word" aria-hidden="true" data-parallax="0.25">42n</div>
-
-    <div class="container hero-inner studio-inner">
-      <div class="hero-badge" data-reveal>
-        <span class="ping"></span>
-        <span>Engineering studio · SF + on-site · est. ’24</span>
-      </div>
-
-      <h1 class="hero-title studio-title">
-        <span class="line"><span class="word">We</span> <span class="word italic">embed</span></span>
-        <span class="line"><span class="word">inside</span> <span class="word">your</span> <span class="word">team</span></span>
-        <span class="line"><span class="word">and</span> <span class="word">ship</span> <span class="word">the</span></span>
-        <span class="line"><span class="word italic">operating</span> <span class="word italic">layer</span></span>
-        <span class="line"><span class="word">that</span> <span class="word">runs</span> <span class="word">your</span> <span class="word">business.</span></span>
-      </h1>
-
-      <p class="hero-sub studio-sub" data-reveal>
-        42nights is a four-week, on-site engineering studio. We deploy <a class="inline-link" href="recon.html">Recon</a> — and its variants <a class="inline-link" href="pulse.html">Pulse</a> for revenue teams and <a class="inline-link helm-link" href="helm.html">Helm</a> for portfolio teams — inside your perimeter, then hand the keys to your operators.
-      </p>
-
-      <div class="hero-cta" data-reveal>
-        <a class="btn btn-primary" href="#contact" data-magnetic>
-          <span>Book a discovery</span>
-          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-        <a class="btn btn-ghost" href="#approach">
-          <span>How we work</span>
-        </a>
-      </div>
-
-      <div class="hero-stats studio-stats" data-reveal>
-        <div class="stat"><span class="stat-num" data-counter="4">0</span><span class="stat-label">week engagement</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="100">0</span><span class="stat-label">% on your infra</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="3">0</span><span class="stat-label">products deployed</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="90">0</span><span class="stat-label">day post-deploy support</span></div>
-      </div>
-    </div>
-
-    <div class="marquee" aria-hidden="true">
-      <div class="marquee-track">
-        <span>Holding companies</span><span>·</span>
-        <span>Series B → late-stage</span><span>·</span>
-        <span>RevOps</span><span>·</span>
-        <span>Operating partners</span><span>·</span>
-        <span>Family offices</span><span>·</span>
-        <span>Holdcos</span><span>·</span>
-        <span>Sales leadership</span><span>·</span>
-        <span>COOs</span><span>·</span>
-        <span>Studio of three</span><span>·</span>
-        <span>SF + on-site</span><span>·</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ APPROACH ═══════════════════ -->
-  <section class="section section-narrow" id="approach">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">01</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Approach</div>
-        <h2 class="section-title" data-split>
-          Four weeks. <em>On site.</em><br/>Then it's yours.
-        </h2>
-        <p class="section-lede" data-reveal>
-          We don't write a deck and disappear. We sit at your desk, watch your operators work, and ship the system that fits — then we leave.
-        </p>
-      </div>
-
-      <ol class="process-list" data-stagger role="list">
-        <li class="process-row">
-          <span class="pr-week">W1</span>
-          <div class="pr-body">
-            <h3>Discovery on the ground.</h3>
-            <p>One week shadowing your team. We map workflows, identify which pieces of Recon (or Pulse / Helm) fit, and write the deployment plan with you.</p>
-          </div>
-          <span class="pr-out">scope &amp; plan</span>
-        </li>
-        <li class="process-row">
-          <span class="pr-week">W2</span>
-          <div class="pr-body">
-            <h3>Deploy the substrate.</h3>
-            <p>Recon goes inside your VPC, on-prem, or air-gapped — whichever your security review demands. Identity, vault, gateway, audit log, all live by end of week.</p>
-          </div>
-          <span class="pr-out">platform live</span>
-        </li>
-        <li class="process-row">
-          <span class="pr-week">W3</span>
-          <div class="pr-body">
-            <h3>Ship the surface.</h3>
-            <p>Pulse for revenue, Helm for portfolio, or a custom variant. Your data is wired, your skills are tuned, your operators are running real workflows by Friday.</p>
-          </div>
-          <span class="pr-out">surface running</span>
-        </li>
-        <li class="process-row">
-          <span class="pr-week">W4</span>
-          <div class="pr-body">
-            <h3>Hand off.</h3>
-            <p>Train your team, document the deploy, transfer source escrow, set up the 90-day support cadence. We leave on Friday. The platform stays.</p>
-          </div>
-          <span class="pr-out">team owns it</span>
-        </li>
-      </ol>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ PRODUCTS WE DEPLOY ═══════════════════ -->
-  <section class="section" id="products">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">02</div>
-    <div class="container">
-      <div class="section-head section-head-narrow">
-        <div class="eyebrow" data-reveal><span class="dot"></span>What we ship</div>
-        <h2 class="section-title" data-split>
-          One platform.<br/><em>Two specialized cockpits.</em>
-        </h2>
-        <p class="section-lede" data-reveal>
-          We built Recon ourselves. Pulse and Helm wrap it for revenue and portfolio teams respectively. We deploy whichever fits — and we'll fork a custom variant if neither does.
-        </p>
-      </div>
-
-      <div class="studio-products" data-stagger>
-        <a class="sp-card sp-recon" href="recon.html">
-          <div class="sp-head">
-            <span class="sp-badge">platform</span>
-            <span class="sp-arrow" aria-hidden="true">→</span>
-          </div>
-          <h3 class="sp-name">Recon</h3>
-          <p class="sp-tag">The substrate. Self-hosted gateway, identity vault, agent runtime, audit log.</p>
-          <ul class="sp-meta" role="list">
-            <li>Common to both</li>
-            <li>Lives inside your perimeter</li>
-            <li>Forkable</li>
-          </ul>
-        </a>
-        <a class="sp-card sp-pulse" href="pulse.html">
-          <div class="sp-head">
-            <span class="sp-badge accent">GTM</span>
-            <span class="sp-arrow" aria-hidden="true">→</span>
-          </div>
-          <h3 class="sp-name">Pulse</h3>
-          <p class="sp-tag">Revenue cockpit. Identity-resolved CRM, scheduled agents, attribution, forecast.</p>
-          <ul class="sp-meta" role="list">
-            <li>RevOps · Sales · Growth</li>
-            <li>Inbox-first</li>
-            <li>Agent-driven outbound</li>
-          </ul>
-        </a>
-        <a class="sp-card sp-helm" href="helm.html">
-          <div class="sp-head">
-            <span class="sp-badge helm">PE</span>
-            <span class="sp-arrow" aria-hidden="true">→</span>
-          </div>
-          <h3 class="sp-name">Helm</h3>
-          <p class="sp-tag">Portfolio cockpit. KPI roll-ups, variance flags, DD workspace, board-pack agent.</p>
-          <ul class="sp-meta" role="list">
-            <li>Operating partners · Holdcos</li>
-            <li>Per-portco scoping</li>
-            <li>SOC2-ready trail</li>
-          </ul>
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ WHY US ═══════════════════ -->
-  <section class="section section-narrow" id="why">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">03</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Why 42nights</div>
-        <h2 class="section-title" data-split>
-          Operator-led.<br/>Source-available. <em>On-site.</em>
-        </h2>
-      </div>
-
-      <ol class="reason-list" data-stagger role="list">
-        <li class="reason-row">
-          <span class="rr-num">①</span>
-          <div class="rr-body">
-            <h3>We built the thing we deploy.</h3>
-            <p>Recon is ours. When something doesn't fit your stack, we change the substrate, not the contract.</p>
-          </div>
-        </li>
-        <li class="reason-row">
-          <span class="rr-num">②</span>
-          <div class="rr-body">
-            <h3>Sovereignty is the default, not an upgrade.</h3>
-            <p>Single-tenant by definition. Your VPC, your keys, your audit log. We pass your security review on day one.</p>
-          </div>
-        </li>
-        <li class="reason-row">
-          <span class="rr-num">③</span>
-          <div class="rr-body">
-            <h3>Hands-on, not advisory.</h3>
-            <p>We deploy and operate alongside your team — not in a slide deck from a thousand miles away. The handoff is real.</p>
-          </div>
-        </li>
-      </ol>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ ENGAGEMENT MODEL ═══════════════════ -->
-  <section class="section section-narrow" id="engagement">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">04</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Engagement</div>
-        <h2 class="section-title" data-split>
-          Fixed-fee. <em>In person.</em><br/>Source escrow.
-        </h2>
-      </div>
-
-      <dl class="terms-table" data-stagger>
-        <div class="tt-row">
-          <dt>Format</dt>
-          <dd>Four-week minimum, fully on-site at your office. Two engineers from us, embedded with your operators.</dd>
-        </div>
-        <div class="tt-row">
-          <dt>Fee</dt>
-          <dd>Fixed-fee per engagement, scoped in week one. No hourly billing, no out-of-scope creep.</dd>
-        </div>
-        <div class="tt-row">
-          <dt>IP</dt>
-          <dd>Source escrow at deploy. Custom skill packs are yours. Recon core stays under our license, available to you in perpetuity for that deployment.</dd>
-        </div>
-        <div class="tt-row">
-          <dt>Support</dt>
-          <dd>Ninety days post-deploy on retainer — priority Slack, weekly check-ins, hot-fixes within 24 hours.</dd>
-        </div>
-        <div class="tt-row">
-          <dt>Capacity</dt>
-          <dd>Three active engagements at a time, max. We're a studio, not a body shop.</dd>
-        </div>
-      </dl>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CONTACT ═══════════════════ -->
-  <section class="section cta-sec" id="contact">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">05</div>
-    <div class="container">
-      <div class="contact-card" data-reveal>
-        <div class="cta-copy">
-          <div class="eyebrow"><span class="dot"></span>Get started</div>
-          <h2 class="section-title" data-split>
-            Tell us what you're<br/><em>trying to ship.</em>
-          </h2>
-          <p class="section-lede">
-            We'll come to you for an hour. Bring your most painful workflow, the data flow you can't get a SaaS to touch, or the security review that keeps killing your ops tooling. We'll tell you whether we're the right team — honestly — within the week.
-          </p>
-          <div class="hero-cta">
-            <a class="btn btn-primary" href="mailto:jerry@xiao.sh?subject=42nights%20discovery" data-magnetic>
-              <span>Book a discovery</span>
-              <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </a>
-            <a class="btn btn-ghost" href="recon.html">
-              <span>See the platform</span>
-            </a>
-          </div>
-          <p class="contact-detail">
-            <span>jerry@xiao.sh</span> ·
-            <span>SF, on-site continental US &amp; EMEA</span>
-          </p>
-        </div>
-
-        <div class="terminal" aria-hidden="true">
-          <div class="terminal-bar">
-            <span class="dot d-r"></span><span class="dot d-y"></span><span class="dot d-g"></span>
-            <span class="terminal-title">42nights · discovery.log</span>
-          </div>
-          <div class="terminal-body" id="terminal-body">
-            <div class="t-line"><span class="prompt">▶</span> <span class="cmd" data-typed="W1: discovery on the ground"></span></div>
-            <div class="t-line out"><span>↳ shadow ops · map workflows · scope plan</span></div>
-            <div class="t-line"><span class="prompt">▶</span> <span class="cmd" data-typed="W2: deploy substrate"></span></div>
-            <div class="t-line out"><span>↳ recon up · vault sealed · audit log signed</span></div>
-            <div class="t-line"><span class="prompt">▶</span> <span class="cmd" data-typed="W3: ship the surface"></span></div>
-            <div class="t-line out"><span>↳ pulse | helm | custom · skills tuned</span></div>
-            <div class="t-line"><span class="prompt">▶</span> <span class="cmd" data-typed="W4: hand off · team owns it"></span></div>
-            <div class="t-line out ok"><span>✓ deployed · 90-day retainer active</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ FOOTER ═══════════════════ -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div class="footer-brand">
-        <div class="brand-mark denim">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </div>
-        <span>42nights · engineering studio · SF</span>
-      </div>
-      <div class="footer-links">
-        <a href="recon.html">Recon</a>
-        <a href="pulse.html">Pulse</a>
-        <a href="helm.html">Helm</a>
-        <a href="#approach">Approach</a>
-        <a href="mailto:jerry@xiao.sh">Contact</a>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/main.js b/main.js
deleted file mode 100644
index 8c49aec..0000000
--- a/main.js
+++ /dev/null
@@ -1,482 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   recon · landing · GSAP · v2 (parallax + phase transition)
-   Easings follow Emil's playbook: strong custom curves, ≤300ms UI.
-   ═══════════════════════════════════════════════════════════ */
-
-(() => {
-  const start = () => {
-    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
-      requestAnimationFrame(start);
-      return;
-    }
-    init();
-  };
-  document.addEventListener('DOMContentLoaded', start);
-
-  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
-
-  function init() {
-    gsap.registerPlugin(ScrollTrigger);
-    document.body.classList.add('ready');
-
-    heroSpotlight();
-    parallax();
-    heroTitleReveal();
-    revealOnScroll();
-    staggerGroups();
-    counters();
-    marquee();
-    navBehavior();
-    magneticButtons();
-    productGlow();
-    roadmapTabs();
-    phaseToggle();
-    terminalTypewriter();
-    splitTitles();
-
-    if (!reduceMotion) gsap.ticker.lagSmoothing(500, 16);
-  }
-
-  /* ─────── spotlight (mouse-follow) ─────── */
-  function heroSpotlight() {
-    if (reduceMotion) return;
-    const el = document.querySelector('.spotlight');
-    if (!el) return;
-    gsap.set(el, { xPercent: -50, yPercent: -50, top: 0, left: 0 });
-    const xTo = gsap.quickTo(el, 'x', { duration: 0.7, ease: 'power3.out' });
-    const yTo = gsap.quickTo(el, 'y', { duration: 0.7, ease: 'power3.out' });
-    xTo(window.innerWidth / 2); yTo(window.innerHeight / 3);
-    window.addEventListener('pointermove', (e) => {
-      xTo(e.clientX); yTo(e.clientY);
-    }, { passive: true });
-  }
-
-  /* ─────── parallax (background layers, section numerals) ─────── */
-  function parallax() {
-    if (reduceMotion) return;
-    document.querySelectorAll('[data-parallax]').forEach((el) => {
-      const speed = parseFloat(el.dataset.parallax);
-      if (!isFinite(speed) || speed <= 0) return;
-      const trigger = el.closest('.section, .hero') || el.parentElement;
-      gsap.to(el, {
-        yPercent: -40 * speed,
-        ease: 'none',
-        scrollTrigger: {
-          trigger,
-          start: 'top bottom',
-          end: 'bottom top',
-          scrub: 0.4,
-        },
-      });
-    });
-  }
-
-  /* ─────── hero title — defensive gsap.from() ───────
-     gsap.from sets initial state and animates to natural CSS state.
-     If the tween is interrupted, words fall back to visible. */
-  function heroTitleReveal() {
-    const scope = document.querySelector('.hero-phase.is-active') || document.querySelector('.hero');
-    if (!scope) return;
-    const words = scope.querySelectorAll('.hero-title .word');
-    if (!words.length) return;
-    gsap.from(words, {
-      yPercent: 110,
-      filter: 'blur(8px)',
-      opacity: 0,
-      duration: 0.95,
-      ease: 'power4.out',
-      stagger: 0.05,
-      delay: 0.1,
-    });
-  }
-
-  /* ─────── [data-reveal] scroll-triggered fade-up ─────── */
-  function revealOnScroll() {
-    document.querySelectorAll('[data-reveal]').forEach((el) => {
-      gsap.fromTo(
-        el,
-        { opacity: 0, y: 22, filter: 'blur(6px)' },
-        {
-          opacity: 1, y: 0, filter: 'blur(0px)',
-          duration: 0.8, ease: 'power3.out',
-          scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' },
-        }
-      );
-    });
-  }
-
-  /* ─────── grouped 50ms-stagger reveal (Emil-style) ─────── */
-  function staggerGroups() {
-    document.querySelectorAll('[data-stagger]').forEach((group) => {
-      const items = Array.from(group.children);
-      if (!items.length) return;
-      gsap.set(items, { opacity: 0, y: 14 });
-      gsap.to(items, {
-        opacity: 1, y: 0,
-        duration: 0.55,
-        ease: 'cubic-bezier(0.23, 1, 0.32, 1)',
-        stagger: 0.05,
-        scrollTrigger: { trigger: group, start: 'top 88%', toggleActions: 'play none none none' },
-      });
-    });
-  }
-
-  /* ─────── counter animation on scroll ─────── */
-  function counters() {
-    document.querySelectorAll('[data-counter]').forEach((node) => {
-      const target = parseFloat(node.dataset.counter);
-      const proxy = { v: 0 };
-      ScrollTrigger.create({
-        trigger: node,
-        start: 'top 90%',
-        once: true,
-        onEnter: () => {
-          gsap.to(proxy, {
-            v: target, duration: 1.4, ease: 'power3.out',
-            onUpdate: () => { node.textContent = Math.round(proxy.v).toLocaleString(); },
-          });
-        },
-      });
-    });
-  }
-
-  /* ─────── marquee (gsap loop, slow on hover) ─────── */
-  function marquee() {
-    const track = document.querySelector('.marquee-track');
-    if (!track) return;
-    track.innerHTML += track.innerHTML;
-    const distance = track.scrollWidth / 2;
-    const tween = gsap.to(track, {
-      x: -distance, duration: 40, ease: 'none', repeat: -1,
-    });
-    track.parentElement.addEventListener('mouseenter', () => tween.timeScale(0.1));
-    track.parentElement.addEventListener('mouseleave', () => tween.timeScale(1));
-  }
-
-  /* ─────── nav: compact on scroll + sliding indicator + scroll-spy ─────── */
-  function navBehavior() {
-    const nav = document.querySelector('.nav');
-    const links = document.querySelectorAll('.nav-link[data-nav]');
-    const indicator = document.querySelector('.nav-indicator');
-    const linksList = document.querySelector('.nav-links');
-
-    ScrollTrigger.create({
-      start: 'top -40',
-      onUpdate: (self) => nav.classList.toggle('compact', self.scroll() > 40),
-    });
-
-    const moveTo = (el) => {
-      if (!el || !indicator || !linksList) return;
-      const r = el.getBoundingClientRect();
-      const parent = linksList.getBoundingClientRect();
-      gsap.to(indicator, {
-        x: r.left - parent.left,
-        y: r.top - parent.top,
-        width: r.width,
-        height: r.height,
-        opacity: 1,
-        duration: 0.4,
-        ease: 'power3.out',
-      });
-    };
-    links.forEach((l) => l.addEventListener('pointerenter', () => moveTo(l)));
-    linksList?.addEventListener('pointerleave', () => {
-      gsap.to(indicator, { opacity: 0, duration: 0.3 });
-    });
-
-    const sectionIds = ['#why', '#products', '#how', '#roadmap'];
-    sectionIds.forEach((id) => {
-      const sec = document.querySelector(id);
-      if (!sec) return;
-      ScrollTrigger.create({
-        trigger: sec,
-        start: 'top center',
-        end: 'bottom center',
-        onToggle: (self) => {
-          if (!self.isActive) return;
-          links.forEach((l) => l.classList.toggle('is-active', l.getAttribute('href') === id));
-          const active = document.querySelector('.nav-link.is-active');
-          if (active) moveTo(active);
-        },
-      });
-    });
-  }
-
-  /* ─────── magnetic buttons ─────── */
-  function magneticButtons() {
-    if (reduceMotion) return;
-    document.querySelectorAll('[data-magnetic]').forEach((el) => {
-      const xTo = gsap.quickTo(el, 'x', { duration: 0.5, ease: 'elastic.out(1, 0.4)' });
-      const yTo = gsap.quickTo(el, 'y', { duration: 0.5, ease: 'elastic.out(1, 0.4)' });
-      el.addEventListener('pointermove', (e) => {
-        const r = el.getBoundingClientRect();
-        const dx = e.clientX - (r.left + r.width / 2);
-        const dy = e.clientY - (r.top + r.height / 2);
-        xTo(dx * 0.22); yTo(dy * 0.32);
-      });
-      el.addEventListener('pointerleave', () => { xTo(0); yTo(0); });
-    });
-  }
-
-  /* ─────── product card glow follows pointer ─────── */
-  function productGlow() {
-    document.querySelectorAll('.product-card').forEach((card) => {
-      card.addEventListener('pointermove', (e) => {
-        const r = card.getBoundingClientRect();
-        card.style.setProperty('--gx', ((e.clientX - r.left) / r.width) * 100 + '%');
-        card.style.setProperty('--gy', ((e.clientY - r.top) / r.height) * 100 + '%');
-      });
-    });
-  }
-
-  /* ─────── roadmap (product tabs + horizontal phase timeline) ─────── */
-  function roadmapTabs() {
-    const btns = document.querySelectorAll('.rt-btn');
-    const indicator = document.querySelector('.rt-indicator');
-    const panelGroups = document.querySelectorAll('[data-roadmap-panel]');
-    const dots = document.querySelectorAll('.rm-dot');
-    const progress = document.querySelector('.rm-progress');
-    const timeline = document.querySelector('.rm-timeline');
-
-    const placeIndicator = (btn) => {
-      const tabsRect = btn.parentElement.getBoundingClientRect();
-      const r = btn.getBoundingClientRect();
-      gsap.to(indicator, {
-        x: r.left - tabsRect.left,
-        y: r.top - tabsRect.top,
-        width: r.width,
-        height: r.height,
-        duration: 0.42,
-        ease: 'power3.out',
-      });
-    };
-    const initial = document.querySelector('.rt-btn.active');
-    if (initial) requestAnimationFrame(() => placeIndicator(initial));
-
-    // place progress fill based on active phase
-    const updateProgress = () => {
-      if (!progress || !dots.length || !timeline) return;
-      const track = timeline.querySelector('.rm-track');
-      if (!track) return;
-      const activeIdx = parseInt(timeline.dataset.activePhase || '0', 10);
-      const pct = dots.length > 1 ? activeIdx / (dots.length - 1) : 0;
-      const width = pct * (track.clientWidth - 32);
-      gsap.to(progress, { width, duration: 0.55, ease: 'power3.out' });
-    };
-
-    const activePhase = (idx) => {
-      timeline.dataset.activePhase = idx;
-      dots.forEach((d, i) => d.classList.toggle('active', i === idx));
-      // update visible panel within active group
-      const visibleGroup = document.querySelector('.rm-panels.active');
-      if (visibleGroup) {
-        const panels = visibleGroup.querySelectorAll('.rm-panel');
-        panels.forEach((p, i) => p.classList.toggle('active', i === idx));
-        const target = panels[idx];
-        if (target) {
-          gsap.fromTo(target, { opacity: 0, y: 10, filter: 'blur(4px)' },
-            { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.45, ease: 'power3.out' });
-        }
-      }
-      updateProgress();
-    };
-
-    dots.forEach((dot, idx) => {
-      dot.addEventListener('click', () => activePhase(idx));
-    });
-
-    btns.forEach((btn) => {
-      btn.addEventListener('click', () => {
-        btns.forEach((b) => { b.classList.remove('active'); b.setAttribute('aria-selected', 'false'); });
-        btn.classList.add('active');
-        btn.setAttribute('aria-selected', 'true');
-        placeIndicator(btn);
-
-        const target = btn.dataset.roadmap;
-        panelGroups.forEach((g) => {
-          const isTarget = g.dataset.roadmapPanel === target;
-          g.classList.toggle('active', isTarget);
-          if (isTarget) {
-            const visiblePanel = g.querySelector('.rm-panel.active');
-            if (visiblePanel) {
-              gsap.fromTo(visiblePanel, { opacity: 0, y: 10, filter: 'blur(4px)' },
-                { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.45, ease: 'power3.out' });
-            }
-          }
-        });
-      });
-    });
-
-    window.addEventListener('resize', () => {
-      const active = document.querySelector('.rt-btn.active');
-      if (active) placeIndicator(active);
-      updateProgress();
-    });
-
-    // initial progress on load
-    requestAnimationFrame(updateProgress);
-  }
-
-  /* ─────── phase toggle (hero GTM ↔ PE transition) ─────── */
-  function phaseToggle() {
-    const btns = document.querySelectorAll('.pt-btn');
-    const indicator = document.querySelector('.pt-indicator');
-    const phases = document.querySelectorAll('.hero-phase');
-    if (!btns.length || !indicator) return;
-
-    const placeIndicator = (btn) => {
-      const tabsRect = btn.parentElement.getBoundingClientRect();
-      const r = btn.getBoundingClientRect();
-      gsap.to(indicator, {
-        x: r.left - tabsRect.left,
-        y: r.top - tabsRect.top,
-        width: r.width,
-        height: r.height,
-        duration: 0.45,
-        ease: 'power3.out',
-      });
-    };
-
-    const initial = document.querySelector('.pt-btn.active');
-    if (initial) requestAnimationFrame(() => placeIndicator(initial));
-
-    let currentPhase = 'gtm';
-    let switching = false;
-
-    const switchTo = (target) => {
-      if (target === currentPhase || switching) return;
-      switching = true;
-      const incoming = document.querySelector(`[data-phase-panel="${target}"]`);
-      const outgoing = document.querySelector(`[data-phase-panel="${currentPhase}"]`);
-
-      // body data-phase drives accent color on indicator etc.
-      document.body.dataset.phase = target;
-
-      // outgoing: blur out
-      gsap.to(outgoing, {
-        opacity: 0,
-        y: -8,
-        filter: 'blur(6px)',
-        duration: 0.28,
-        ease: 'power2.in',
-        onComplete: () => {
-          outgoing.classList.remove('is-active');
-          outgoing.setAttribute('aria-hidden', 'true');
-        },
-      });
-
-      // incoming: blur in (slightly delayed)
-      incoming.classList.add('is-active');
-      incoming.setAttribute('aria-hidden', 'false');
-      gsap.fromTo(incoming,
-        { opacity: 0, y: 8, filter: 'blur(6px)' },
-        {
-          opacity: 1, y: 0, filter: 'blur(0px)',
-          duration: 0.46,
-          delay: 0.18,
-          ease: 'power3.out',
-        }
-      );
-
-      // animate the words inside the new phase
-      const words = incoming.querySelectorAll('.hero-title .word');
-      gsap.fromTo(words,
-        { yPercent: 90, filter: 'blur(8px)', opacity: 0 },
-        {
-          yPercent: 0, filter: 'blur(0px)', opacity: 1,
-          duration: 0.7, ease: 'power4.out', stagger: 0.04,
-          delay: 0.22,
-          onComplete: () => { switching = false; },
-        }
-      );
-
-      currentPhase = target;
-    };
-
-    btns.forEach((btn) => {
-      btn.addEventListener('click', () => {
-        btns.forEach((b) => { b.classList.remove('active'); b.setAttribute('aria-selected', 'false'); });
-        btn.classList.add('active');
-        btn.setAttribute('aria-selected', 'true');
-        placeIndicator(btn);
-        switchTo(btn.dataset.phaseBtn);
-      });
-    });
-
-    window.addEventListener('resize', () => {
-      const active = document.querySelector('.pt-btn.active');
-      if (active) placeIndicator(active);
-    });
-  }
-
-  /* ─────── terminal typewriter ─────── */
-  function terminalTypewriter() {
-    const body = document.getElementById('terminal-body');
-    if (!body) return;
-    const cmds = body.querySelectorAll('.cmd');
-    const outs = body.querySelectorAll('.t-line.out');
-    cmds.forEach((c) => { c.dataset.text = c.dataset.typed; c.textContent = ''; });
-    outs.forEach((o) => gsap.set(o, { opacity: 0, height: 0, overflow: 'hidden' }));
-    const lines = Array.from(body.children);
-
-    const playLine = (line) => new Promise((resolve) => {
-      if (line.classList.contains('out')) {
-        gsap.to(line, { opacity: 1, height: 'auto', duration: 0.25, onComplete: resolve });
-      } else {
-        const cmd = line.querySelector('.cmd');
-        if (!cmd) return resolve();
-        line.classList.add('is-typing');
-        const text = cmd.dataset.text || '';
-        const proxy = { i: 0 };
-        gsap.to(proxy, {
-          i: text.length,
-          duration: Math.max(0.5, text.length * 0.025),
-          ease: 'none',
-          onUpdate: () => { cmd.textContent = text.slice(0, Math.floor(proxy.i)); },
-          onComplete: () => {
-            cmd.textContent = text;
-            line.classList.remove('is-typing');
-            resolve();
-          },
-        });
-      }
-    });
-
-    let started = false;
-    ScrollTrigger.create({
-      trigger: body,
-      start: 'top 80%',
-      once: true,
-      onEnter: async () => {
-        if (started) return;
-        started = true;
-        for (const line of lines) {
-          await playLine(line);
-          await new Promise((r) => setTimeout(r, 200));
-        }
-      },
-    });
-  }
-
-  /* ─────── section title split-word reveal ─────── */
-  function splitTitles() {
-    document.querySelectorAll('[data-split]').forEach((title) => {
-      const html = title.innerHTML;
-      const wrapped = html.replace(/(<[^>]+>)|([^<\s]+)/g, (m, tag, word) => {
-        if (tag) return tag;
-        return `<span class="sw"><span class="swi">${word}</span></span>`;
-      });
-      title.innerHTML = wrapped;
-      const inners = title.querySelectorAll('.swi');
-      gsap.set(title.querySelectorAll('.sw'), {
-        display: 'inline-block', overflow: 'hidden', verticalAlign: 'bottom', paddingBottom: '0.06em',
-      });
-      gsap.set(inners, { display: 'inline-block', yPercent: 110, opacity: 0 });
-      gsap.to(inners, {
-        yPercent: 0, opacity: 1, duration: 0.85, ease: 'power3.out', stagger: 0.04,
-        scrollTrigger: { trigger: title, start: 'top 88%', toggleActions: 'play none none none' },
-      });
-    });
-  }
-})();
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..4f2de35
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  async headers() {
+    return [
+      {
+        source: '/(.*)\\.(css|js|svg|woff2)',
+        headers: [
+          { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4f71878
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1030 @@
+{
+  "name": "42nights-landing",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "42nights-landing",
+      "version": "0.1.0",
+      "dependencies": {
+        "gsap": "^3.12.5",
+        "next": "^15.1.7",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.10.5",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "typescript": "^5.7.3"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.16.tgz",
+      "integrity": "sha512-9QMKolCl+JnJtaRAQSXy4RQrhgfe8W7/G1+Hl3QSB/HZY7zQMzTwPDdTRwwio8BS96ps1MHpHhbS8qxoNV3JIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.16.tgz",
+      "integrity": "sha512-wzdER4JZj+31vNkhaZ1Ght3IsNI8DMwj7VqadfIOqJB5sh8FiOqNSopYADQn6mgEPomzDd/DHqBcfo2fmVMYtg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.16.tgz",
+      "integrity": "sha512-PPTo+cvcanxkuDEuDyZGk28ntmu0WjfkxqlG7hw9Mhsiribs4x1C6h2Culn0cJKqsne1gFjjZRK3ax7WYlSxgg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.16.tgz",
+      "integrity": "sha512-Jl0IL9P7S8uNl5oI1TqrQmfmLp7OqjWM58000pVnUVIsHrvPP6m9QDW/uNWYUbmd+8IYvc6MTeZKICstBMBpew==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.16.tgz",
+      "integrity": "sha512-Zf0BIqv/o5uOWfyRkzgGhyV2Tky7HLt0bG+w7XWdaU1JpyX0tltM3TrSfa/Y9c597SJG4CzN47+u2InhgZZ4vg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.16.tgz",
+      "integrity": "sha512-HCDDU1TRLeUDV180QQTWrs5Oa4lIcI7XH9nF0UVUVmYLN/boZ6LqyFtm3814gc1fv+lOVyKaw5B6bVC9BpXTSQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.16.tgz",
+      "integrity": "sha512-kvXUY1dn5wxKuMkXxQRUbPjEnKxW1PR9uKOm0zpIpj3574+cFfaePhYFmBVtrOuwt+w34OdDzNaJr5Iixf+HBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.16.tgz",
+      "integrity": "sha512-zpOQuF+eyENMXRjglp2hZCIrUjTdO37suEBnDn1mX4PXSuetXZDMLpjKOh4dYSw3SiDTnOoOUwBl5i5Elr6nnQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.16.tgz",
+      "integrity": "sha512-LnwKYpiSmIzXlTq76hMeeIzZoDcFwu848p6H+QBkGFJIbZphgzNUPdHruJcHM/bFnaFeco0l1Frie5I27VKglA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.17.tgz",
+      "integrity": "sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001792",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001792.tgz",
+      "integrity": "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.5.16",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.16.tgz",
+      "integrity": "sha512-aZExBk/V6JCu3NCFc90twdj9L/M3y0+ukeQwUAZbOiqRhAX+h2oMEa0NZFhcpj6HYRYjVS3V2/3xvyOpNnmw7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.16",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.16",
+        "@next/swc-darwin-x64": "15.5.16",
+        "@next/swc-linux-arm64-gnu": "15.5.16",
+        "@next/swc-linux-arm64-musl": "15.5.16",
+        "@next/swc-linux-x64-gnu": "15.5.16",
+        "@next/swc-linux-x64-musl": "15.5.16",
+        "@next/swc-win32-arm64-msvc": "15.5.16",
+        "@next/swc-win32-x64-msvc": "15.5.16",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
+      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
+      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.6"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..175bcbd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "42nights-landing",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.1.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "gsap": "^3.12.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.7.3"
+  }
+}
diff --git a/favicon.svg b/public/favicon.svg
similarity index 100%
rename from favicon.svg
rename to public/favicon.svg
diff --git a/robots.txt b/public/robots.txt
similarity index 100%
rename from robots.txt
rename to public/robots.txt
diff --git a/sitemap.xml b/public/sitemap.xml
similarity index 100%
rename from sitemap.xml
rename to public/sitemap.xml
diff --git a/pulse.html b/pulse.html
deleted file mode 100644
index 7736214..0000000
--- a/pulse.html
+++ /dev/null
@@ -1,338 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Pulse — the GTM operating cockpit, deployed by 42nights</title>
-  <meta name="description" content="Identity-resolved CRM, scheduled agents, attribution and forecast — on infrastructure you control. Built on Recon, deployed by 42nights." />
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link rel="canonical" href="https://42nights.dev/pulse" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://42nights.dev/pulse" />
-  <meta property="og:title" content="Pulse — GTM cockpit on your infra" />
-  <meta property="og:description" content="The operating layer between signal and revenue. Built on Recon, deployed by 42nights in four weeks." />
-  <meta property="og:site_name" content="42nights" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Pulse — GTM cockpit on your infra" />
-  <meta name="twitter:description" content="The operating layer between signal and revenue. Built on Recon, deployed by 42nights in four weeks." />
-  <meta name="theme-color" content="#cdfb53" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="styles.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
-  <script src="main.js" defer></script>
-</head>
-<body data-theme="recon">
-  <div class="grain" aria-hidden="true"></div>
-  <div class="spotlight" aria-hidden="true"></div>
-
-  <!-- ═══════════════════ NAVBAR ═══════════════════ -->
-  <header class="nav-wrap">
-    <nav class="nav" aria-label="Primary">
-      <a href="/" class="nav-brand" aria-label="42nights home">
-        <span class="brand-mark denim">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </span>
-        <span class="brand-name">42nights / pulse</span>
-      </a>
-
-      <ul class="nav-links" role="list">
-        <li><a class="nav-link" href="recon.html" data-nav>Recon</a></li>
-        <li><a class="nav-link is-active" href="pulse.html" data-nav>Pulse</a></li>
-        <li><a class="nav-link" href="helm.html" data-nav>Helm</a></li>
-        <li><a class="nav-link" href="/" data-nav>Studio</a></li>
-        <span class="nav-indicator" aria-hidden="true"></span>
-      </ul>
-
-      <div class="nav-actions">
-        <a class="nav-cta" href="#cta" data-magnetic>
-          <span>Book a deploy</span>
-          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-      </div>
-    </nav>
-  </header>
-
-  <!-- ═══════════════════ HERO ═══════════════════ -->
-  <section class="hero" id="top">
-    <div class="hero-grid" aria-hidden="true" data-parallax="0.4"></div>
-    <div class="hero-orb" aria-hidden="true" data-parallax="0.7"></div>
-    <div class="hero-bg-word" aria-hidden="true" data-parallax="0.25">pulse</div>
-
-    <div class="container hero-inner">
-      <div class="hero-badge" data-reveal>
-        <span class="ping"></span>
-        <span>Pulse · Built on Recon · Deployed by 42nights</span>
-      </div>
-
-      <h1 class="hero-title">
-        <span class="line"><span class="word">The</span> <span class="word">operating</span> <span class="word">layer</span></span>
-        <span class="line"><span class="word">between</span> <span class="word italic">signal</span></span>
-        <span class="line"><span class="word">and</span> <span class="word italic">revenue.</span></span>
-      </h1>
-      <p class="hero-sub" data-reveal>
-        Identity-resolved CRM, inbox-first sync, scheduled agents, forecast that ties to source. On infrastructure you control. Deployed by <a class="inline-link" href="/">42nights</a> in four weeks.
-      </p>
-      <p class="hero-audience" data-reveal>RevOps · Sales leadership · Growth ops · CROs</p>
-
-      <div class="hero-cta" data-reveal>
-        <a class="btn btn-primary" href="#cta" data-magnetic>
-          <span>Book a Pulse deploy</span>
-          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-        <a class="btn btn-ghost" href="recon.html">
-          <span>See the platform</span>
-        </a>
-      </div>
-
-      <div class="hero-stats" data-reveal>
-        <div class="stat"><span class="stat-num" data-counter="100">0</span><span class="stat-label">% on your own infra</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="6">0</span><span class="stat-label">GTM skill packs</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="4">0</span><span class="stat-label">week deploy</span></div>
-      </div>
-    </div>
-
-    <div class="marquee" aria-hidden="true">
-      <div class="marquee-track">
-        <span>Salesforce</span><span>·</span>
-        <span>HubSpot</span><span>·</span>
-        <span>Apollo</span><span>·</span>
-        <span>Clay</span><span>·</span>
-        <span>Gmail</span><span>·</span>
-        <span>Outlook</span><span>·</span>
-        <span>Calendar</span><span>·</span>
-        <span>LinkedIn</span><span>·</span>
-        <span>PostHog</span><span>·</span>
-        <span>Smartlead</span><span>·</span>
-        <span>Instantly</span><span>·</span>
-        <span>Slack</span><span>·</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CAPABILITIES ═══════════════════ -->
-  <section class="section" id="capabilities">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">01</div>
-    <div class="container">
-      <div class="section-head section-head-narrow">
-        <div class="eyebrow" data-reveal><span class="dot"></span>What Pulse does</div>
-        <h2 class="section-title" data-split>
-          From inbox<br/><em>to closed-won.</em>
-        </h2>
-      </div>
-
-      <div class="cap-grid" data-stagger>
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="0" y="6" width="92" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="17" class="cap-label">maya@northstar.io</text>
-            <rect x="0" y="36" width="106" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="47" class="cap-label">m.adams@northstar.io</text>
-            <rect x="0" y="66" width="100" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="77" class="cap-label">li/maya-adams</text>
-            <path d="M 92 13 C 120 13 130 43 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <path d="M 106 43 L 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <path d="M 100 73 C 120 73 130 43 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <rect x="145" y="34" width="72" height="20" rx="4" fill="rgba(205,251,83,0.15)" stroke="var(--accent)" />
-            <text x="181" y="48" class="cap-label-out" text-anchor="middle">M. Adams</text>
-          </svg>
-          <h3>Identity-resolved CRM</h3>
-          <p>Three channels. One row.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <circle cx="20" cy="46" r="7" fill="var(--accent)" />
-            <circle cx="20" cy="46" r="14" fill="none" stroke="var(--accent)" stroke-opacity="0.4" />
-            <text x="6" y="78" class="cap-label">trigger</text>
-            <line x1="34" y1="46" x2="78" y2="46" stroke="var(--accent)" stroke-dasharray="3 4" />
-            <rect x="78" y="32" width="56" height="28" rx="6" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
-            <text x="106" y="50" class="cap-label-out" text-anchor="middle">RUN</text>
-            <line x1="134" y1="46" x2="178" y2="46" stroke="var(--accent)" stroke-dasharray="3 4" />
-            <rect x="178" y="32" width="34" height="28" rx="6" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" />
-            <text x="195" y="50" class="cap-label-out muted" text-anchor="middle">DIFF</text>
-            <text x="195" y="78" class="cap-label" text-anchor="middle">review</text>
-          </svg>
-          <h3>Per-account next-best-action</h3>
-          <p>Trigger → run → diff back.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="0" y="4" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="13" class="cap-label">posthog</text>
-            <rect x="0" y="22" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="31" class="cap-label">apollo</text>
-            <rect x="0" y="40" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="49" class="cap-label">clearbit</text>
-            <rect x="0" y="58" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="67" class="cap-label">webhook</text>
-            <rect x="0" y="76" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="85" class="cap-label">linkedin</text>
-            <path d="M 100 4 L 150 36 L 150 56 L 100 88 Z" fill="rgba(205,251,83,0.05)" stroke="var(--accent)" stroke-opacity="0.4" />
-            <rect x="150" y="36" width="68" height="20" rx="10" fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
-            <text x="184" y="50" class="cap-label-out" text-anchor="middle">signals</text>
-          </svg>
-          <h3>One surface for intent</h3>
-          <p>Many sources. One stream.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <line x1="10" y1="80" x2="210" y2="80" stroke="rgba(255,255,255,0.15)" />
-            <path d="M 10 78 C 50 78 80 50 110 42 C 140 34 170 30 210 22" stroke="var(--accent)" fill="none" stroke-width="1.5" />
-            <circle cx="10" cy="78" r="3" fill="var(--accent)" />
-            <circle cx="60" cy="62" r="3" fill="var(--accent)" />
-            <circle cx="110" cy="42" r="3" fill="var(--accent)" />
-            <circle cx="160" cy="32" r="3" fill="var(--accent)" />
-            <circle cx="210" cy="22" r="4" fill="var(--accent)" />
-            <text x="110" y="92" text-anchor="middle" class="cap-label">forecast</text>
-          </svg>
-          <h3>Forecast that ties to source</h3>
-          <p>Stage · owner · segment.</p>
-        </article>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ ROADMAP ═══════════════════ -->
-  <section class="section section-narrow" id="roadmap">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">02</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Roadmap</div>
-        <h2 class="section-title" data-split>
-          Five phases<br/><em>per deployment.</em>
-        </h2>
-      </div>
-
-      <div class="rm-timeline" data-active-phase="0">
-        <div class="rm-track">
-          <div class="rm-line"></div>
-          <div class="rm-progress"></div>
-          <button class="rm-dot active" data-phase-idx="0" aria-label="Phase 1"><span>01</span></button>
-          <button class="rm-dot" data-phase-idx="1" aria-label="Phase 2"><span>02</span></button>
-          <button class="rm-dot" data-phase-idx="2" aria-label="Phase 3"><span>03</span></button>
-          <button class="rm-dot" data-phase-idx="3" aria-label="Phase 4"><span>04</span></button>
-          <button class="rm-dot" data-phase-idx="4" aria-label="Phase 5"><span>05</span></button>
-        </div>
-
-        <div class="rm-stage">
-          <div class="rm-panels active" data-roadmap-panel="pulse">
-            <div class="rm-panel active" data-phase-idx="0">
-              <span class="rm-tag">Phase 1 · Pulse</span>
-              <h4>Pipeline foundations</h4>
-              <p>Canonical People + Company model. Inbox-first sync. Calendar → meeting → deal attribution. Lifecycle stage, owner, last touch.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="1">
-              <span class="rm-tag">Phase 2 · Pulse</span>
-              <h4>Signal capture</h4>
-              <p>Apollo / Clay enrichment. PostHog event timeline. LinkedIn + outbound capture. Intent adapters behind one <code>signals</code> surface.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="2">
-              <span class="rm-tag">Phase 3 · Pulse</span>
-              <h4>Agentic execution</h4>
-              <p>Lead triage · ICP scoring · outbound draft · meeting prep · pipeline review · churn flag. Per-account next-best-action on a schedule.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="3">
-              <span class="rm-tag">Phase 4 · Pulse</span>
-              <h4>Revenue analytics</h4>
-              <p>Weighted forecast by stage / owner / segment. Source → meeting → opp attribution. Cohort retention via PostHog or warehouse adapter.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="4">
-              <span class="rm-tag">Phase 5 · Pulse</span>
-              <h4>Multiplayer</h4>
-              <p>Team workspaces with row-level RBAC. Shared skill libraries with review/approval. Slack / Linear two-way sync for handoffs.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ PLATFORM REFERENCE ═══════════════════ -->
-  <section class="section section-narrow platform-ref">
-    <div class="container">
-      <div class="ref-card" data-reveal>
-        <div class="ref-copy">
-          <div class="eyebrow"><span class="dot"></span>Built on Recon</div>
-          <h3>Same gateway. Same vault. Same audit log.</h3>
-          <p>Pulse is a thin Next.js app over the Recon substrate. Your data plane, security model, and operator skills are the platform's — Pulse just wears the GTM chrome on top.</p>
-          <a class="btn btn-ghost" href="recon.html">
-            <span>See the Recon platform</span>
-            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CTA ═══════════════════ -->
-  <section class="section cta-sec" id="cta">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">03</div>
-    <div class="container">
-      <div class="cta-card" data-reveal>
-        <div class="cta-copy">
-          <div class="eyebrow"><span class="dot"></span>Get Pulse deployed</div>
-          <h2 class="section-title" data-split>
-            Four weeks to<br/><em>your own pipeline OS.</em>
-          </h2>
-          <p class="section-lede">
-            42nights deploys Pulse inside your perimeter. Discovery on Monday, your team running it on the Friday of week four.
-          </p>
-          <div class="hero-cta">
-            <a class="btn btn-primary" href="mailto:jerry@xiao.sh?subject=Pulse%20deploy" data-magnetic>
-              <span>Book a deploy</span>
-              <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </a>
-            <a class="btn btn-ghost" href="/">
-              <span>About 42nights</span>
-            </a>
-          </div>
-        </div>
-
-        <div class="terminal" aria-hidden="true">
-          <div class="terminal-bar">
-            <span class="dot d-r"></span><span class="dot d-y"></span><span class="dot d-g"></span>
-            <span class="terminal-title">pulse · acme-prod</span>
-          </div>
-          <div class="terminal-body" id="terminal-body">
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon up --variant=pulse"></span></div>
-            <div class="t-line out ok"><span>▲ workspace ready · auth via SSO</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="pulse connect hubspot --read-only"></span></div>
-            <div class="t-line out"><span>✓ 4,212 contacts · 318 active deals indexed</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="pulse skills run pipeline-review"></span></div>
-            <div class="t-line out"><span>✓ 47 deals scored · 3 flagged for risk</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="pulse forecast --segment=enterprise"></span></div>
-            <div class="t-line out muted"><span>◇ Q2 weighted: $2.4M · vs plan: +112%</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ FOOTER ═══════════════════ -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div class="footer-brand">
-        <span>Pulse · built &amp; deployed by <a href="/">42nights</a></span>
-      </div>
-      <div class="footer-links">
-        <a href="/">Studio</a>
-        <a href="recon.html">Recon</a>
-        <a href="pulse.html">Pulse</a>
-        <a href="helm.html">Helm</a>
-        <a href="mailto:jerry@xiao.sh">Contact</a>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/recon.html b/recon.html
deleted file mode 100644
index 1fc5cd7..0000000
--- a/recon.html
+++ /dev/null
@@ -1,620 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Recon — the operating substrate for revenue and portfolio teams</title>
-  <meta name="description" content="The self-hosted, single-tenant, audit-ready platform that Pulse and Helm are built on. Deployed by 42nights." />
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link rel="canonical" href="https://42nights.dev/recon" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://42nights.dev/recon" />
-  <meta property="og:title" content="Recon — operating substrate for ops-heavy teams" />
-  <meta property="og:description" content="Self-hosted gateway, identity vault, agent runtime. The platform Pulse and Helm are built on." />
-  <meta property="og:site_name" content="42nights" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Recon — operating substrate for ops-heavy teams" />
-  <meta name="twitter:description" content="Self-hosted gateway, identity vault, agent runtime. The platform Pulse and Helm are built on." />
-  <meta name="theme-color" content="#cdfb53" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="styles.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
-  <script src="main.js" defer></script>
-</head>
-<body data-theme="recon">
-  <div class="grain" aria-hidden="true"></div>
-  <div class="spotlight" aria-hidden="true"></div>
-
-  <!-- ═══════════════════ NAVBAR ═══════════════════ -->
-  <header class="nav-wrap">
-    <nav class="nav" aria-label="Primary">
-      <a href="/" class="nav-brand" aria-label="42nights home">
-        <span class="brand-mark">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </span>
-        <span class="brand-name">42nights / recon</span>
-      </a>
-
-      <ul class="nav-links" role="list">
-        <li><a class="nav-link is-active" href="recon.html" data-nav>Recon</a></li>
-        <li><a class="nav-link" href="pulse.html" data-nav>Pulse</a></li>
-        <li><a class="nav-link" href="helm.html" data-nav>Helm</a></li>
-        <li><a class="nav-link" href="/" data-nav>Studio</a></li>
-        <span class="nav-indicator" aria-hidden="true"></span>
-      </ul>
-
-      <div class="nav-actions">
-        <a class="nav-cta" href="#cta" data-magnetic>
-          <span>Book a deploy</span>
-          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-      </div>
-    </nav>
-  </header>
-
-  <!-- ═══════════════════ HERO ═══════════════════ -->
-  <section class="hero" id="top">
-    <div class="hero-grid" aria-hidden="true" data-parallax="0.4"></div>
-    <div class="hero-orb" aria-hidden="true" data-parallax="0.7"></div>
-    <div class="hero-radar" aria-hidden="true" data-parallax="0.5">
-      <span class="radar-ring"></span>
-      <span class="radar-ring r2"></span>
-      <span class="radar-ring r3"></span>
-      <span class="radar-sweep"></span>
-    </div>
-    <div class="hero-bg-word" aria-hidden="true" data-parallax="0.25">recon</div>
-
-    <div class="container hero-inner">
-      <div class="hero-badge" data-reveal>
-        <span class="ping"></span>
-        <span>Self-hosted · Single-tenant · Audit-ready</span>
-      </div>
-
-      <h1 class="hero-title">
-        <span class="line"><span class="word">The</span> <span class="word">operating</span> <span class="word">substrate</span></span>
-        <span class="line"><span class="word">for</span> <span class="word italic">ops-heavy</span> <span class="word">teams.</span></span>
-      </h1>
-      <p class="hero-sub" data-reveal>
-        Recon is the self-hosted gateway, workspace, and skill runtime that <a class="inline-link" href="pulse.html">Pulse</a> and <a class="inline-link helm-link" href="helm.html">Helm</a> are built on. Deployed by <a class="inline-link" href="/">42nights</a> inside your perimeter.
-      </p>
-      <p class="hero-audience" data-reveal>RevOps · Sales leadership · Operating partners · COOs · Family offices</p>
-
-      <div class="hero-cta" data-reveal>
-        <a class="btn btn-primary" href="#cta" data-magnetic>
-          <span>Book a demo</span>
-          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-        </a>
-        <a class="btn btn-ghost" href="mailto:jerry@xiao.sh?subject=Recon%20enquiry">
-          <span>Talk to us</span>
-        </a>
-      </div>
-
-      <div class="hero-stats" data-reveal>
-        <div class="stat"><span class="stat-num" data-counter="100">0</span><span class="stat-label">% on your own infra</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="2">0</span><span class="stat-label">product surfaces</span></div>
-        <div class="stat-divider"></div>
-        <div class="stat"><span class="stat-num" data-counter="0">0</span><span class="stat-label">vendor lock-in</span></div>
-      </div>
-    </div>
-
-    <div class="marquee" aria-hidden="true">
-      <div class="marquee-track">
-        <span>Salesforce</span><span>·</span>
-        <span>HubSpot</span><span>·</span>
-        <span>Gmail</span><span>·</span>
-        <span>Outlook</span><span>·</span>
-        <span>Slack</span><span>·</span>
-        <span>Linear</span><span>·</span>
-        <span>QuickBooks</span><span>·</span>
-        <span>Stripe</span><span>·</span>
-        <span>NetSuite</span><span>·</span>
-        <span>Xero</span><span>·</span>
-        <span>Apollo</span><span>·</span>
-        <span>Clay</span><span>·</span>
-        <span>PostHog</span><span>·</span>
-        <span>Notion</span><span>·</span>
-        <span>Drive</span><span>·</span>
-        <span>Box</span><span>·</span>
-        <span>MCP servers</span><span>·</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ WHY (perimeter diagram) ═══════════════════ -->
-  <section class="section" id="why">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">01</div>
-    <div class="container">
-      <div class="section-head section-head-narrow">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Why operators choose Recon</div>
-        <h2 class="section-title" data-split>
-          Your data. Your perimeter. <em>Your agents.</em>
-        </h2>
-      </div>
-
-      <div class="perimeter-stage" data-reveal>
-        <div class="perim-canvas">
-          <!-- SVG: grid background, perimeter outline, all connecting lines/flows -->
-          <svg viewBox="0 0 1000 540" class="perimeter-svg" role="img" aria-labelledby="perimTitle" preserveAspectRatio="xMidYMid meet">
-            <title id="perimTitle">Recon stays inside your perimeter; connectors call out, never in</title>
-            <defs>
-              <pattern id="perimGrid" width="40" height="40" patternUnits="userSpaceOnUse">
-                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.025)" stroke-width="1"/>
-              </pattern>
-            </defs>
-            <rect width="1000" height="540" fill="url(#perimGrid)" />
-            <rect x="60" y="74" width="600" height="396" rx="16"
-                  fill="rgba(205, 251, 83, 0.018)"
-                  stroke="rgba(205, 251, 83, 0.45)"
-                  stroke-width="1.5" stroke-dasharray="6 6"
-                  class="perim-boundary" />
-            <!-- shells → gateway -->
-            <path d="M200 178 Q200 220 270 250" stroke="rgba(255,255,255,0.18)" fill="none" stroke-width="1.2" />
-            <path d="M520 178 Q520 220 450 250" stroke="rgba(255,255,255,0.18)" fill="none" stroke-width="1.2" />
-            <!-- gateway → DB -->
-            <line x1="360" y1="338" x2="360" y2="380" stroke="rgba(255,255,255,0.18)" stroke-width="1.2" />
-            <!-- outbound flow lines -->
-            <g class="perim-flows" stroke-linecap="round" fill="none" stroke-width="1.4">
-              <path d="M480 274 C 600 274 620 122 720 122" stroke-dasharray="4 6" />
-              <path d="M480 286 C 600 286 620 182 720 182" stroke-dasharray="4 6" />
-              <path d="M480 298 C 600 298 620 242 720 242" stroke-dasharray="4 6" />
-              <path d="M480 310 C 600 310 620 302 720 302" stroke-dasharray="4 6" />
-              <path d="M480 322 C 600 322 620 362 720 362" stroke-dasharray="4 6" />
-            </g>
-          </svg>
-
-          <!-- HTML overlay: liquid-glass boxes positioned in % of the 1000×540 viewBox -->
-          <div class="perim-overlay">
-            <span class="perim-label-text perim-title-text" style="--x:80; --y:58">YOUR PERIMETER</span>
-            <span class="perim-label-text perim-sub-text" style="--x:222; --y:58">VPC · laptop · air-gapped</span>
-
-            <!-- shells -->
-            <div class="glass glass-pulse" style="--x:110; --y:120; --w:180; --h:58">
-              <div class="g-name">Pulse</div>
-              <div class="g-tag">GTM workspace</div>
-            </div>
-            <div class="glass glass-helm" style="--x:430; --y:120; --w:180; --h:58">
-              <div class="g-name">Helm</div>
-              <div class="g-tag">Portfolio cockpit</div>
-            </div>
-
-            <!-- gateway -->
-            <div class="glass glass-gateway" style="--x:240; --y:252; --w:240; --h:86">
-              <div class="g-name strong">Gateway</div>
-              <div class="g-tag">audit log · vault · skill runtime</div>
-            </div>
-
-            <!-- db -->
-            <div class="glass glass-db" style="--x:290; --y:380; --w:140; --h:46">
-              <div class="g-name muted">your DB</div>
-            </div>
-
-            <!-- externals -->
-            <div class="glass glass-ext" style="--x:720; --y:102; --w:240; --h:40">Salesforce · HubSpot</div>
-            <div class="glass glass-ext" style="--x:720; --y:162; --w:240; --h:40">Stripe · QuickBooks · Xero</div>
-            <div class="glass glass-ext" style="--x:720; --y:222; --w:240; --h:40">Gmail · Outlook · Calendar</div>
-            <div class="glass glass-ext" style="--x:720; --y:282; --w:240; --h:40">Apollo · Clay · PostHog</div>
-            <div class="glass glass-ext" style="--x:720; --y:342; --w:240; --h:40">MCP servers · LLM APIs</div>
-
-            <!-- legend tags -->
-            <div class="glass glass-tag glass-deny" style="--x:60; --y:490; --w:200; --h:32">
-              <span class="x-mark" aria-hidden="true">✕</span>
-              <span>no inbound</span>
-            </div>
-            <div class="glass glass-tag glass-allow" style="--x:280; --y:490; --w:200; --h:32">
-              <span>→ outbound only</span>
-            </div>
-            <div class="glass glass-tag" style="--x:500; --y:490; --w:200; --h:32">
-              <span>audit log signed</span>
-            </div>
-            <div class="glass glass-tag" style="--x:720; --y:490; --w:240; --h:32">
-              <span>your keys, your network</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ PRODUCTS ═══════════════════ -->
-  <section class="section" id="products">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">02</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Two products · one substrate</div>
-        <h2 class="section-title" data-split>
-          Pulse for revenue.<br/><em>Helm</em> for portfolios.
-        </h2>
-        <p class="section-lede" data-reveal>
-          Both wrap the same self-hosted core — same gateway, same identity vault, same skill substrate. Different operators, very different jobs to be done.
-        </p>
-      </div>
-
-      <div class="product-grid">
-        <a class="product-card" href="pulse.html" data-product="pulse" data-reveal>
-          <div class="product-head">
-            <div class="product-mark pulse-mark">
-              <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M2 16h6l3-9 6 18 3-9h10"/>
-              </svg>
-            </div>
-            <div>
-              <div class="product-name">Pulse</div>
-              <div class="product-tag">GTM operating system</div>
-            </div>
-          </div>
-          <h3 class="product-headline">The operating layer between raw signal and revenue execution.</h3>
-          <p class="product-copy">
-            Identity-resolved CRM, inbox-first sync, Apollo / Clay-style enrichment, scheduled outbound, attribution and forecast — all on infrastructure you control.
-          </p>
-          <div class="product-foot">
-            <span class="product-audience">RevOps · Sales · Growth</span>
-            <span class="product-arrow" aria-hidden="true">
-              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </span>
-          </div>
-          <div class="product-glow"></div>
-        </a>
-
-        <a class="product-card helm" href="helm.html" data-product="helm" data-reveal>
-          <div class="product-head">
-            <div class="product-mark helm-mark">
-              <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="16" cy="16" r="6"/>
-                <path d="M16 4v6M16 22v6M4 16h6M22 16h6M7.5 7.5l4.2 4.2M20.3 20.3l4.2 4.2M7.5 24.5l4.2-4.2M20.3 11.7l4.2-4.2"/>
-              </svg>
-            </div>
-            <div>
-              <div class="product-name">Helm</div>
-              <div class="product-tag">Portfolio operating cockpit</div>
-            </div>
-          </div>
-          <h3 class="product-headline">A holdco cockpit — every portco a workspace, rolling up to one view.</h3>
-          <p class="product-copy">
-            KPI ingest from QuickBooks, Stripe, HRIS, HubSpot. Variance flags with agent-drafted commentary. Per-deal DD workspace generator. Cross-portfolio benchmarking on margin, CAC payback, NRR.
-          </p>
-          <div class="product-foot">
-            <span class="product-audience">Operating partners · Holdcos · Family offices</span>
-            <span class="product-arrow" aria-hidden="true">
-              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </span>
-          </div>
-          <div class="product-glow"></div>
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ HOW IT DEPLOYS (architecture stack) ═══════════════════ -->
-  <section class="section section-narrow" id="how">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">03</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>How it deploys</div>
-        <h2 class="section-title" data-split>
-          Three layers. <em>One process tree.</em>
-        </h2>
-      </div>
-
-      <div class="arch-stack" data-stagger>
-        <div class="arch-layer arch-shells">
-          <span class="al-tag">Shells</span>
-          <div class="al-cells">
-            <span class="al-cell">apps/web</span>
-            <span class="al-cell pulse">Pulse</span>
-            <span class="al-cell helm">Helm</span>
-          </div>
-        </div>
-        <div class="arch-arrow"></div>
-        <div class="arch-layer arch-gateway">
-          <span class="al-tag">Gateway</span>
-          <div class="al-cells">
-            <span class="al-cell strong">profile-managed daemon</span>
-            <span class="al-cell">audit signer</span>
-            <span class="al-cell">credential vault</span>
-          </div>
-        </div>
-        <div class="arch-arrow"></div>
-        <div class="arch-layer arch-ext">
-          <span class="al-tag">Extensions</span>
-          <div class="al-cells">
-            <span class="al-cell">AI gateway</span>
-            <span class="al-cell">Identity</span>
-            <span class="al-cell">Composio</span>
-            <span class="al-cell">Apollo</span>
-            <span class="al-cell">PostHog</span>
-          </div>
-        </div>
-        <div class="arch-arrow down"></div>
-        <div class="arch-deploys">
-          <span class="kbd">macOS</span>
-          <span class="kbd">Linux</span>
-          <span class="kbd">Docker</span>
-          <span class="kbd">VPC</span>
-          <span class="kbd">Air-gapped</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CAPABILITIES (2×2 mini diagrams) ═══════════════════ -->
-  <section class="section" id="capabilities">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">04</div>
-    <div class="container">
-      <div class="section-head section-head-narrow">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Capabilities</div>
-        <h2 class="section-title" data-split>
-          What it does, <em>out of the box.</em>
-        </h2>
-      </div>
-
-      <div class="cap-grid" data-stagger>
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="0" y="6" width="92" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="17" class="cap-label">maya@northstar.io</text>
-            <rect x="0" y="36" width="106" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="47" class="cap-label">m.adams@northstar.io</text>
-            <rect x="0" y="66" width="100" height="14" rx="3" fill="rgba(255,255,255,0.06)" />
-            <text x="6" y="77" class="cap-label">li/maya-adams</text>
-            <path d="M 92 13 C 120 13 130 43 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <path d="M 106 43 L 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <path d="M 100 73 C 120 73 130 43 145 43" stroke="var(--accent)" fill="none" stroke-dasharray="3 3" />
-            <rect x="145" y="34" width="72" height="20" rx="4"
-                  fill="rgba(205,251,83,0.15)" stroke="var(--accent)" />
-            <text x="181" y="48" class="cap-label-out" text-anchor="middle">M. Adams</text>
-          </svg>
-          <h3>Identity-resolved CRM</h3>
-          <p>Three channels. One row.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <circle cx="20" cy="46" r="7" fill="var(--accent)" />
-            <circle cx="20" cy="46" r="14" fill="none" stroke="var(--accent)" stroke-opacity="0.4" />
-            <text x="6" y="78" class="cap-label">trigger</text>
-            <line x1="34" y1="46" x2="78" y2="46" stroke="var(--accent)" stroke-dasharray="3 4" />
-            <rect x="78" y="32" width="56" height="28" rx="6"
-                  fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
-            <text x="106" y="50" class="cap-label-out" text-anchor="middle">RUN</text>
-            <line x1="134" y1="46" x2="178" y2="46" stroke="var(--accent)" stroke-dasharray="3 4" />
-            <rect x="178" y="32" width="34" height="28" rx="6"
-                  fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" />
-            <text x="195" y="50" class="cap-label-out muted" text-anchor="middle">DIFF</text>
-            <text x="195" y="78" class="cap-label" text-anchor="middle">review</text>
-          </svg>
-          <h3>Skills act on schedule</h3>
-          <p>Trigger → run → diff back.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="0" y="4" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="13" class="cap-label">posthog</text>
-            <rect x="0" y="22" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="31" class="cap-label">apollo</text>
-            <rect x="0" y="40" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="49" class="cap-label">clearbit</text>
-            <rect x="0" y="58" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="67" class="cap-label">webhook</text>
-            <rect x="0" y="76" width="44" height="10" rx="3" fill="rgba(255,255,255,0.08)" />
-            <text x="48" y="85" class="cap-label">linkedin</text>
-            <path d="M 100 4 L 150 36 L 150 56 L 100 88 Z"
-                  fill="rgba(205,251,83,0.05)" stroke="var(--accent)" stroke-opacity="0.4" />
-            <rect x="150" y="36" width="68" height="20" rx="10"
-                  fill="rgba(205,251,83,0.16)" stroke="var(--accent)" />
-            <text x="184" y="50" class="cap-label-out" text-anchor="middle">signals</text>
-          </svg>
-          <h3>One surface for intent</h3>
-          <p>Many sources. One stream.</p>
-        </article>
-
-        <article class="cap-tile">
-          <svg class="cap-vis" viewBox="0 0 220 92" aria-hidden="true">
-            <rect x="10" y="58" width="14" height="22" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="30" y="44" width="14" height="36" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="50" y="62" width="14" height="18" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="70" y="36" width="14" height="44" rx="2" fill="rgba(126,197,255,0.55)" />
-            <rect x="90" y="50" width="14" height="30" rx="2" fill="rgba(126,197,255,0.55)" />
-            <text x="57" y="92" class="cap-label" text-anchor="middle">portcos</text>
-            <line x1="120" y1="58" x2="148" y2="58" stroke="var(--helm)" stroke-width="1.4" />
-            <polyline points="142,53 148,58 142,63" stroke="var(--helm)" fill="none" stroke-width="1.4" />
-            <rect x="158" y="20" width="44" height="60" rx="5"
-                  fill="rgba(126,197,255,0.22)" stroke="var(--helm)" />
-            <text x="180" y="92" class="cap-label" text-anchor="middle">holdco</text>
-          </svg>
-          <h3>Holdco KPI roll-ups</h3>
-          <p>Portcos in. Dashboard out.</p>
-        </article>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ ROADMAP ═══════════════════ -->
-  <section class="section section-narrow" id="roadmap">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">05</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Roadmap</div>
-        <h2 class="section-title" data-split>
-          Five phases. <em>Two products.</em> One substrate.
-        </h2>
-      </div>
-
-      <div class="roadmap-tabs" role="tablist" aria-label="Roadmap product">
-        <button class="rt-btn active" data-roadmap="pulse" role="tab" aria-selected="true">Pulse — GTM</button>
-        <button class="rt-btn" data-roadmap="helm" role="tab" aria-selected="false">Helm — PE</button>
-        <span class="rt-indicator" aria-hidden="true"></span>
-      </div>
-
-      <div class="rm-timeline" data-active-phase="0">
-        <div class="rm-track">
-          <div class="rm-line"></div>
-          <div class="rm-progress"></div>
-          <button class="rm-dot active" data-phase-idx="0" aria-label="Phase 1"><span>01</span></button>
-          <button class="rm-dot" data-phase-idx="1" aria-label="Phase 2"><span>02</span></button>
-          <button class="rm-dot" data-phase-idx="2" aria-label="Phase 3"><span>03</span></button>
-          <button class="rm-dot" data-phase-idx="3" aria-label="Phase 4"><span>04</span></button>
-          <button class="rm-dot" data-phase-idx="4" aria-label="Phase 5"><span>05</span></button>
-        </div>
-
-        <div class="rm-stage">
-          <div class="rm-panels active" data-roadmap-panel="pulse">
-            <div class="rm-panel active" data-phase-idx="0">
-              <span class="rm-tag">Phase 1 · Pulse</span>
-              <h4>Pipeline foundations</h4>
-              <p>Canonical People + Company model. Inbox-first sync. Calendar → meeting → deal attribution. Lifecycle stage, owner, last touch.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="1">
-              <span class="rm-tag">Phase 2 · Pulse</span>
-              <h4>Signal capture</h4>
-              <p>Apollo / Clay enrichment. PostHog event timeline. LinkedIn + outbound capture. Intent adapters behind one <code>signals</code> surface.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="2">
-              <span class="rm-tag">Phase 3 · Pulse</span>
-              <h4>Agentic execution</h4>
-              <p>Lead triage · ICP scoring · outbound draft · meeting prep · pipeline review · churn flag. Per-account next-best-action on a schedule.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="3">
-              <span class="rm-tag">Phase 4 · Pulse</span>
-              <h4>Revenue analytics</h4>
-              <p>Weighted forecast by stage / owner / segment. Source → meeting → opp attribution. Cohort retention via PostHog or warehouse adapter.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="4">
-              <span class="rm-tag">Phase 5 · Pulse</span>
-              <h4>Multiplayer</h4>
-              <p>Team workspaces with row-level RBAC. Shared skill libraries with review/approval. Slack / Linear two-way sync for handoffs.</p>
-            </div>
-          </div>
-
-          <div class="rm-panels" data-roadmap-panel="helm">
-            <div class="rm-panel active" data-phase-idx="0">
-              <span class="rm-tag">Phase 1 · Helm</span>
-              <h4>Multi-entity foundation</h4>
-              <p>Workspace-as-portfolio-company. HoldCo workspace aggregating read-only views. Entities: Company, People, Contracts, KPIs, Reporting periods.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="1">
-              <span class="rm-tag">Phase 2 · Helm</span>
-              <h4>Operating cadence</h4>
-              <p>QuickBooks / Xero / NetSuite, Stripe, HRIS, Hub/Salesforce ingest. Auto-populated monthly &amp; quarterly templates with variance flags.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="2">
-              <span class="rm-tag">Phase 3 · Helm</span>
-              <h4>Diligence &amp; deal flow</h4>
-              <p>Deal pipeline as a first-class object. Per-deal DD workspace generator. Data-room ingest with auto-tagging and risk flag agents.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="3">
-              <span class="rm-tag">Phase 4 · Helm</span>
-              <h4>Portfolio agents</h4>
-              <p>Operating-partner agent per portco. Cross-portfolio benchmarking on margin, CAC payback, NRR percentiles. Talent-network agent.</p>
-            </div>
-            <div class="rm-panel" data-phase-idx="4">
-              <span class="rm-tag">Phase 5 · Helm</span>
-              <h4>LP &amp; governance</h4>
-              <p>LP reporting view (capital account, IRR/MOIC). Board-pack generator from operating-partner output. SOC2-ready audit trail.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ TRUST (sovereignty inline) ═══════════════════ -->
-  <section class="section section-narrow trust-sec" id="trust">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">06</div>
-    <div class="container">
-      <div class="section-head">
-        <div class="eyebrow" data-reveal><span class="dot"></span>Trust</div>
-        <h2 class="section-title" data-split>
-          Built to pass<br/><em>your security review.</em>
-        </h2>
-      </div>
-      <p class="trust-statement" data-reveal>
-        Single-tenant by definition. Bring your own keys for LLM, CRM, storage, and identity. SOC2-ready audit log per workspace, per skill, per credential — pipe it straight to your SIEM. Zero telemetry, verifiable in source provided under your contract. Workspace-scoped RBAC isolates your sales workspace from your portfolio data, by default.
-      </p>
-      <ul class="trust-tags" data-stagger role="list">
-        <li>SOC2-ready audit trail</li>
-        <li>Bring your own keys</li>
-        <li>On-prem / VPC / Air-gapped</li>
-        <li>Single-tenant by design</li>
-        <li>Zero telemetry</li>
-        <li>Workspace-scoped RBAC</li>
-      </ul>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ CTA ═══════════════════ -->
-  <section class="section cta-sec" id="cta">
-    <div class="bg-numeral" aria-hidden="true" data-parallax="0.35">07</div>
-    <div class="container">
-      <div class="cta-card" data-reveal>
-        <div class="cta-copy">
-          <div class="eyebrow"><span class="dot"></span>Get started</div>
-          <h2 class="section-title" data-split>
-            Run it where your<br/><em>data already lives.</em>
-          </h2>
-          <p class="section-lede">
-            We deploy Recon inside your perimeter and stay close through onboarding, integration, and skill-pack tuning. Talk to us about scope, security, and pricing.
-          </p>
-          <div class="hero-cta">
-            <a class="btn btn-primary" href="mailto:jerry@xiao.sh?subject=Recon%20demo%20request" data-magnetic>
-              <span>Book a demo</span>
-              <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
-            </a>
-            <a class="btn btn-ghost" href="mailto:jerry@xiao.sh?subject=Recon%20enquiry">
-              <span>Talk to us</span>
-            </a>
-          </div>
-        </div>
-
-        <div class="terminal" aria-hidden="true">
-          <div class="terminal-bar">
-            <span class="dot d-r"></span><span class="dot d-y"></span><span class="dot d-g"></span>
-            <span class="terminal-title">recon · acme-prod</span>
-          </div>
-          <div class="terminal-body" id="terminal-body">
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon up --profile=acme-prod"></span></div>
-            <div class="t-line out ok"><span>▲ workspace ready · auth via SSO</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon connect hubspot --read-only"></span></div>
-            <div class="t-line out"><span>✓ 4,212 contacts · 318 active deals indexed</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon skills run pipeline-review"></span></div>
-            <div class="t-line out"><span>✓ 47 deals scored · 3 flagged for risk</span></div>
-            <div class="t-line"><span class="prompt">$</span> <span class="cmd" data-typed="recon audit log --since=24h"></span></div>
-            <div class="t-line out muted"><span>◇ 142 agent actions · 0 anomalies</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ FOOTER ═══════════════════ -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div class="footer-brand">
-        <div class="brand-mark">
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="9" />
-            <circle cx="12" cy="12" r="5" />
-            <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-          </svg>
-        </div>
-        <span>Recon · built &amp; deployed by <a href="/">42nights</a></span>
-      </div>
-      <div class="footer-links">
-        <a href="/">Studio</a>
-        <a href="recon.html">Recon</a>
-        <a href="pulse.html">Pulse</a>
-        <a href="helm.html">Helm</a>
-        <a href="mailto:jerry@xiao.sh">Contact</a>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..bde17a6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index eff36ae..0000000
--- a/vercel.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "cleanUrls": true,
-  "trailingSlash": false,
-  "headers": [
-    {
-      "source": "/(.*)\\.(css|js|svg|png|jpg|jpeg|webp|woff2)",
-      "headers": [
-        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
-      ]
-    },
-    {
-      "source": "/(.*)\\.html",
-      "headers": [
-        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
-      ]
-    }
-  ]
-}