Build a single-file HTML landing page for "Undertow", a fictional platform that runs AI agents on a company's recurring work: they plan, act and check, and ask a person before anything irreversible. Archivo (variable width), Instrument Sans and IBM Plex Mono from Google Fonts, GSAP 3.12.5 and ScrollTrigger from cdnjs, everything else inline. No images: the sea is a shader, every product screen is HTML and CSS, every chart is inline SVG. Example domains and 555 numbers only, and mark the customers, quote and figures as illustrative in a comment.

THE SYSTEM
One palette for the whole page: deep navy #0a1830 surfaces, white type, one signal blue (#8fb8ff, #4c8dff for action) for progress and selection, and coral only where a person is needed. Archivo at 125% width for display and the wordmark, Instrument Sans for reading, Plex Mono for labels and data. Write the base in CSS layers with logical properties and color-mix(in oklab) tints off one --paper token, then scope everything below the hero to a .stone class that re-points the same tokens, so one card style (navy, 1.1rem radius, a hairline ring and a long soft shadow) and one featured card (light) serve every section.

THE SEA
The hero is a full-screen raw-WebGL ocean, written from scratch: one ray-plane hit per pixel, a five-octave crest function (rotate the wave direction each octave, wobble it with value noise), a finite-difference normal, Fresnel sky reflection, a tight specular glint and exponential horizon haze. Render it at 0.45 to 0.6 of screen resolution capped near 1.1 million pixels, at 30fps, paused off screen, in hidden tabs and under reduced motion (draw one frame). Lerp the sea's height, chop, speed and colours toward a preset so it can change mood smoothly. No WebGL falls back to a CSS gradient.

THE HERO
Over the sea: a stacked headline "DELEGATE / THE / WORK." in heavy white Archivo with a thin italic "THE", and a real visually hidden h1 ("Delegate the work. Keep the judgment."), since the stacked words are aria-hidden. Behind the words, a tall glass slab skewed -33deg, and joined to it a second slanted pane carrying the lede. Draw them as ONE glass: a script measures both boxes, builds the two parallelograms as path subpaths, clips one blurred, frosted fill to their union, and strokes each outline with the other shape masked out, so there's no seam where they meet. A drop shadow falls only outside the glass. A kicker with a long rule into the slab, and a single white pill CTA with a navy arrow disc and a slow sheen, inside thin concentric rings and crosshair ticks.
Size the whole composition off one --fs (about min(10.6vw, 16.5vh)) and make it clear the nav. The block is centred on the headline, but the slab and kicker hang about 0.8 x --fs above it, so reserve that in the hero's top padding (nav height + 0.8 x --fs + 1rem). Otherwise, on a laptop-height window (730px and under), the slab runs up behind the nav links. Check 1280x600, 1536x730 and 1920x1080: the gaps above the slab and below the CTA should come out about equal.
The nav starts flat and full width over the sea, then after 24px of scroll gathers into a floating glass pill. Inline links mark the section on screen; under 46rem they give way to a menu button that opens a full-screen menu which clips down from the top, with inert content behind, a focus trap and Escape to close.

THE TIDE
Pin the hero for 95% of a viewport and scrub one timeline: the headline words lift, scale and blur away like spray; a glowing tideline drops down the screen while the sea is clip-path inset() down behind it; then the sea gathers into the exact rectangle of a terminal window on the right (rounded 18px) while the canvas stage pushes in. Never resize the canvas, only clip it, or the shader stalls. The copy rises line by line from behind masks: "PLAN. ACT. CHECK. / THEN ASK YOU.", a lede, a blue copy-to-clipboard install line, an outlined "undertow init" quickstart and a platforms line. When the scene ends, the terminal types a run over the sea: the command, planning, four green tool lines, a coral approval stop, "approve? [y/N] y", and the email sent. Measure the terminal on init and on width changes only; a phone's toolbar changes the height mid-scroll.

THE PRODUCT
Three cards, each a small live product screen: a plan that writes itself step by step ending in an approval gate and a "Run plan" button that lights; a queue of task chips draining into four agents with load bars; and a re-plan shown as a line diff with the reason, confidence and ETA change, cycling through three diffs.

THE WORKSPACE
A full product window, as real as you can make it: a top bar with breadcrumbs, a ⌘K search, avatars and "+ New run"; a left column of six runs with live status dots (running, needs you, done), the agents and the connected tools; a centre with the run title, status, a progress bar and Timeline / Output / Logs tabs; a right column with a "Needs you" approval card (preview, Approve, Edit), the files the run made and a budget meter. The churn run advances by itself every few seconds until it reaches the approval; Approve completes it with a toast and it resets later. Runs are keyboard-navigable. Number the three regions with small pins and explain them in a legend underneath.

THE RUN TRACE
An SVG trace on a time axis: one lane per tool plus a "you" lane, each step a dashed bar that fills as a playhead sweeps, a confidence line underneath with an 80% re-plan threshold and an annotated dip. At the approval the playhead holds with a pulsing "Waiting on you" chip, which turns to "Approved by you", then carries on and loops. Play and pause, and seven step buttons to jump. A four-cell readout below (step, tool and time, confidence, elapsed) whose values wrap rather than overflow, and which is not a live region, since it changes every frame.

THE REST
A trust band (six typographic wordmarks, a quote card, three big stats, compliance pills; two wordmarks per row on phones), an API section where a segmented control, two range sliders and an approval switch rewrite the JSON request beside them, three pricing tiers with the middle one light, a sign-up form with an FAQ of native details, and a footer.

THE FLOOR
One h1 and one main (the app window's centre column is a div), data-section on every region, the terminal as role="img" with a label describing the run and its typed lines hidden from screen readers, labels on every control, visible focus rings, reduced motion respected everywhere, no horizontal scroll at 390px.