Build a single self-contained index.html for "Meridian", a dark, premium SaaS landing page for an AI-agent handoff platform. Plain HTML + CSS + vanilla JS, no frameworks, no build step. Google Fonts only: Geist (300–600), Geist Mono (400–500), Instrument Serif (italic). Every value below is final; do not invent new ones.

FILES (already in ./assets — reference exactly these paths)
- assets/hero.webm, assets/hero.mp4 (looping 7s hero video), assets/hero-poster.jpg
- Platform cards: assets/p-mesh.webp, p-models.webp, p-checkpoints.webp, p-edge.webp, p-versions.webp, p-trust.webp
- How-it-works cards: assets/s-connect.webp, s-route.webp, s-guard.webp, s-trace.webp
- CTA: assets/bg-cta.webp

STACK
- One file. CSS in <style>, JS in one IIFE at the end of <body>. All animation is rAF + CSS; no libraries.

TOKENS (:root)
--bg #07060a; --bg-2 #0e0c13; --text #f2eff7; --muted #8d879a; --line rgba(255,255,255,.09);
--accent #ff7a3d (ember); --accent-2 #a58bff (violet); --ok #7be3a6;
--glass linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 45%,rgba(255,255,255,.04));
--glass-border rgba(255,255,255,.12); --glass-blur blur(22px) saturate(150%); --radius 22px;
--gutter clamp(16px,4vw,48px); --maxw 1280px.
Reusable .glass: --glass background, 1px --glass-border, backdrop-filter --glass-blur, inset top highlight, deep drop shadow.
Fixed grain overlay on body::after (SVG fractalNoise, opacity .05).
Italic serif accent words use Instrument Serif in --accent.

DATA (verbatim copy)
Nav: logo "Meridian" (conic ember/violet ring) · How it works · Platform · Customers · Docs · button "Get access".
Hero eyebrow "Now in public beta". H1: "Every agent, / one clean / handoff." ("clean" italic serif ember).
Lede: "Meridian routes context, tools and state between AI agents in real time, so nothing gets dropped between steps and every decision stays traceable."
Buttons: "Start building →" (solid light) · "See how it works" (ghost glass). Meta: 38ms median handoff · 99.2% run success · 900+ teams.
Marquee logos: Northwind, Halcyon Labs, Ostrava, Kestrel, Lumen & Co, Parallax, Fieldwork, Atlas Nine.
Platform (section 2) eyebrow "Platform", H2 "Built for teams shipping real agents." Cards: 01 MESH "Live mesh view" / 02 MODELS "Model-agnostic" / 03 REVIEW "Human checkpoints" / 04 EDGE "Edge runtime" / 05 FLOWS "Versioned flows" / 06 TRUST "SOC 2 ready", each with a one-line description.
How it works (section 3) eyebrow "How it works", H2 "Four steps from scattered agents to a single system." Steps: 01 / Connect "Plug in the agents you already run." · 02 / Route "Context travels with the task." · 03 / Guard "Policies at every hop." · 04 / Trace "Replay any run, step by step."
Reveal line: "Agents are getting smarter every month. The gaps between them are where work quietly breaks. Meridian closes those gaps." ("between" italic serif ember).
Stats: 38ms median handoff latency · 2.4B handoffs routed · 61% fewer failed runs · 900+ teams in beta.
CTA: eyebrow "Free during beta", H2 "Give your agents a shared line.", buttons "Get access →" / "Talk to us".
Footer columns: Product (How it works, Platform, Pricing, Changelog, Roadmap) · Developers (Docs, API reference, SDKs, MCP server, Status) · Company (About, Customers, Careers, Blog, Contact) · Legal (Privacy, Terms, Security, DPA). Bottom: "© 2026 Meridian Systems. All rights reserved." + X, GitHub, LinkedIn, Discord.

BACKGROUND VIDEO
- <video id="bgVideo"> fixed, top -4vh, left -12vw, 124vw × 108vh, object-fit cover, opacity .6, mask linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 35%, #000 70%).
- Scroll sway (smoothed sy = lerp(sy, scrollY, .075)): translate3d(sin(sy/700)*7 + sin(sy/1900)*3 vw, sin(sy/1300)*-2 vh, 0) scale(1.02 + |sin(sy/1600)|*.04) rotate(sin(sy/1100)*-1.2deg). Opacity .6*(1 - clamp(sy/innerHeight,0,1)*.6).
- A fixed #veil (#07060a) placed AFTER the video in the DOM: opacity = clamp((sy - innerHeight*.12)/(innerHeight*.45), 0, 1) * .97, so the video fades away after the hero.

HERO LAYOUT
- min-height 100svh, grid 1.05fr / 1fr, copy left. Left-side radial scrim behind copy: ellipse 55% 60% at 18% 52%, rgba(7,6,10,.78) → transparent 75%.
- H1 clamp(44px,6.4vw,100px), lines rise in from translateY(105%) over 1.1s, staggered .1s.

HERO FLOW WINDOW (the 3D cursor graphic)
- .stage: perspective 1497px, height clamp(360px,34vw,440px), margin-right calc(-1*var(--gutter) - 6vw) so it bleeds off the right edge.
- .rig preserve-3d holds three .layer elements with data-depth 0 / 90 / 140.
- Depth 0 = .flow window: top -2%, width 106%, height 115%, radius 18px, background linear-gradient(160deg, rgba(26,22,34,.96), rgba(11,9,16,.95) 45%, rgba(15,13,21,.96)), mask fades the right 30% to transparent.
  - Bar: "Support escalation" | "4 agents · 1 branch" | green LIVE pill (blinking dot).
  - Body: 18px dot grid; tool stack (↖ + ⟲) top-left; "100%" zoom tag.
  - SVG wires (viewBox 0 0 100 100, preserveAspectRatio none, non-scaling stroke): M28 52 C33 52 32 30 38 30 · M28 52 C33 52 32 74 38 74 · M59 30 C65 30 64 52 70 52 · M59 74 C65 74 64 52 70 52. Each has a pulse copy (pathLength 100, dasharray 7 93, dashoffset 100→0 over 2.4s linear, ember or violet with glow). Labels "urgent" and "else" on the branches.
  - Four node cards (width 23%, padding 12px 11px, radius 9px): "Ticket received / intake agent" at left 7% top 52%; "Score above 0.8 / classifier" 38%/30%; "Draft a reply / writer agent" 38%/74%; "Ask a human / waiting · 2 min" (spinner) 70%/52%.
  - ELEVATION: clone each card as a .fbase plate at the same spot (dashed 1px border rgba(255,255,255,.14), faint fill, inset shadow, content hidden, connector dots on its edges). The real card sits on top at translate(calc(-14px + var(--px)), calc(-50% - 30px + var(--py))) with box-shadow -10px 32px 34px -12px rgba(0,0,0,.8).
  - Active card cycles every 900ms along route [0,1,3] / [0,2,3] (ember border + glow). After each route, prepend a row to "LAST RUNS": time · "#44xx <ticket>" · "NNms ✓" (green), max 3 rows.
- Depth 90 chip "● 1,284 handoffs today" (left 46%, top -3%); depth 140 chip "● classifier → writer · NN ms" (left -6%, bottom -17%).
- CURSOR: pointer over hero sets tx,ty in -1..1 relative to the stage. cx,cy lerp toward target at .07. Rig = rotateY(BASE_RY*(1 - scroll*.5) + cx*MAX_RY) rotateX(BASE_RX - cy*MAX_RX) translateY(scroll*-40px) with BASE_RY -16, BASE_RX 7, MAX_RY 13, MAX_RX 9. Each layer eases at .06 + index*.025 and translates (x*k*40px, y*k*30px, depth px), k = depth/100. Cards get --px = x*(16 + i*4)px, --py = y*(12 + i*3)px. A .glare radial highlight follows the cursor. After 90 idle frames (or on touch), drift: x = sin(t/2800)*.3, y = cos(t/3300)*.2.

PLATFORM (section 2) — horizontal scroll
- Section height = innerHeight + (track width - innerWidth); inner sticky 100svh; the track translates by -progress*distance; 1px progress bar under it fills with an ember→violet gradient.
- Cards: flex 0 0 min(78vw,380px), aspect 4/5, glass. Full-bleed image layer (scale 1.02, 1.08 on hover over 1.2s) + shade gradient (dark top 0–25%, clear middle, rgba(7,6,10,.92) at 82%). Number + tag top, title + description bottom.

HOW IT WORKS (section 3) — sticky stacking cards
- Each card is sticky at top calc(13vh + i*20px), min-height min(66vh,540px), 2 columns: copy | visual panel.
- Visual panel background: linear-gradient(rgba(7,6,10,.35), rgba(7,6,10,.6)) over its image, with an animated SVG on top: (1) a hub with 7 nodes and travelling packets, (2) a line chart that draws in with a "−63% tokens" pill, (3) a gauge counting to 72% "BUDGET USED · CAP $500" with PII ✓ / SPEND ✓ / REVIEW 2 pills, (4) a timeline of 5 agent bars with a moving white scrubber.
- As the next card arrives, the previous one scales to 1 - p*.035*depth and a dark overlay rises to .55.

REVEAL LINE
- Section 220vh with a sticky 100svh inner. Split the paragraph into words at opacity .12; light them up in order as you scroll (lit = floor(progress*words*1.15)). Plain dark background, no image.

STATS
- Solid --bg band with padding clamp(96px,14vh,150px) top and clamp(80px,12vh,130px) bottom, 120px gradient fade above and 100px below. 4 glass tiles; numbers count up over 1.6s (ease-out cubic) when in view; a sparkline draws in under each.

CTA
- Glass panel, radius 32px, background assets/bg-cta.webp center bottom/cover, radial dark vignette, centred copy.

FOOTER
- Background #050408, top border. Grid 1.6fr + 4×1fr: brand blurb + LIVE "All systems normal" pill, then the 4 link columns (mono uppercase headings).
- Giant SVG wordmark "meridian" (viewBox 0 0 1200 230, Geist 600, 250px, letter-spacing -12px) drawn three times: base (fill rgba(255,255,255,.035), stroke rgba(255,255,255,.16)); dots (stroke-dasharray .1 16, round caps, dashoffset → -161 over 6s linear); runner (gradient ember→violet→ember, dasharray 90 420, dashoffset → -1020 over 7s linear, ember glow).

FALLBACKS
- If the video fails, the poster shows. If an image is missing, the card shows its dark gradient. Run the hero loop only while the hero is visible.

RESPONSIVE
- ≤1000px: hero stacks, stage height 380px under the copy. ≤900px: footer becomes 2 columns. ≤760px: nav links hidden; stacking cards become 1 column with the visual on top. ≤560px: stage height 300px, flow width 150%, both chips hidden. No horizontal scroll at 390px.

ACCESSIBILITY
- prefers-reduced-motion: disable all animation, show final states (words lit, numbers final, charts drawn). Decorative graphics aria-hidden. Real <a> and <button> elements with visible focus.

DONE WHEN
- The hero window tilts and its four cards float 30px above dashed base plates, all following the cursor.
- The video fades under a near-black veil once you scroll past the hero.
- Platform scrolls sideways, How it works stacks, the reveal line lights word by word, stats count up, and the footer wordmark has dots running around each letter.
- No console errors. Runs by double-clicking index.html next to the assets/ folder.