Vectorline

You are a founding designer at an AI infrastructure startup. Build a complete one-page site for a fictional product called Vectorline ("Ship agents that don't hallucinate your roadmap."). Real copy throughout, written with dry engineer humor. No lorem ipsum.

ART DIRECTION — terminal noir. Background #070A08 with a faint animated grid: 1px lines in rgba(51,255,153,0.06), a soft radial glow following the hero. Primary text #E6F4EC, muted #7C8A81, accent phosphor green #33FF99 used sparingly (never for body text). Cards #0E1512 with 1px #1C2620 borders, sharp 6px corners. Fonts via Google Fonts: "IBM Plex Mono" for headings, labels, and anything numeric; "Inter" for body paragraphs. Mood: command line, precision, quiet confidence.

LAYOUT, top to bottom:
1. Slim nav — mono wordmark "vectorline_", three links, green outline "Get access" button.
2. Hero — left-aligned. A mono eyebrow like "// agent infrastructure", a big headline where the last word is typed and retyped by a typewriter effect with a blinking block cursor, a one-line subhead, then a fake terminal window (traffic-light dots, three lines of prompt/response that type themselves once on load).
3. A "capabilities" grid — six cells, each with a mono keyword (route, guard, trace, cache, eval, deploy), one plain-English sentence, and a thin green top border that draws itself on reveal.
4. A code-and-claim split — left: a styled code block (HTML/CSS only, no highlight library) showing a six-line fictional API call; right: three short claims with checkmarks.
5. Benchmarks band — a horizontal bar chart built from divs, bars animate to width on scroll, mono value labels.
6. Footer — mono, minimal, with a green "status: all systems nominal" line.

MOTION: typewriter loop cycles three words (agents, evals, guardrails) at a readable pace; terminal lines type once, 24ms per character; grid glow drifts subtly; bars and border-draws animate once on IntersectionObserver reveal; hover on grid cells shifts the background one shade lighter. Respect prefers-reduced-motion: render everything static with the first word in place.

RULES: responsive at 375 / 768 / 1280 (grid goes 3-then-2-then-1 columns). Semantic HTML, focus states, contrast at least 4.5:1 for body text — the green is for accents and labels only. All visuals are CSS or inline SVG. Page must read perfectly with JavaScript disabled.