THE 3D SCENE — build this first, it is the whole page

Render a real-time 3D scene on a full-bleed <canvas> behind the hero
content. Real 3D, not a CSS transform: points live in world space, are
rotated by a matrix each frame, projected through a perspective camera,
depth-sorted, and shaded by distance from the camera.

Write it by hand in about a hundred lines of plain JavaScript with a 2D
canvas context. Do not pull in Three.js — the whole effect is a point
cloud, and a 600KB dependency to draw dots is not a trade worth making.

Geometry: a 30 × 30 point field spanning 2.8 units on the XZ plane.

Displace Y by sin(d·4 − t·1.6)·0.22·(1 − d·0.3) where d is distance from the centre. The decay term matters — without it the ripple has no origin and reads as noise.

The maths, exactly:
  - rotate around Y:  x' = x·cosY + z·sinY,  z' = −x·sinY + z·cosY
  - rotate around X:  y' = y·cosX − z'·sinX, z'' = y·sinX + z'·cosX
  - perspective:      f = 1 / (camZ + z''), with camZ ≈ 3.4
  - screen position:  cx + x'·scale·f,  cy + y'·scale·f

Sort every projected point by z'' descending and draw furthest first, so
near points land on top. Size and opacity both scale with nearness —
getting this backwards is the single most common mistake and it makes the
scene look inside out.

Colour: interpolate between two brand colours by depth, so the far side
of the object reads as one hue and the near side as the other. Points in
the nearest quarter get a second, larger, low-opacity circle behind them
as a cheap bloom.

PERFORMANCE — not optional
  - Cap devicePixelRatio at 1.6.
  - Pause the loop entirely with IntersectionObserver when the canvas
    leaves the viewport, and on document visibilitychange.
  - Under prefers-reduced-motion, draw one static frame and stop.

THE CONTENT ON TOP

A radial gradient veil over the canvas, dark at the text side and clear
over the scene, so the copy stays legible without hiding the 3D.

Left-aligned in a max-width 1280px container: a pill badge with a pulsing
status dot, a headline at clamp(2.5rem, 5.6vw, 4.5rem) with one word
carrying a gradient fill, a lede capped at 45 characters per line, and
two buttons.

On the right, a glass panel — 68% background tint, blur(22px) with
saturate(160%), 1px light border and an inset top highlight — holding four
live-looking rows of real domain data. It floats over the scene rather
than sitting beside it.

Below the fold, a four-column stat strip with gradient-filled numbers.

RULES
Hide the glass panel below 1000px and drop the stats to two columns below
760px. The canvas stays at every width — it is the reason the page works.