Pulsegrid. Built from one prompt.

Build a single-screen SaaS hero for an uptime-monitoring product "Pulsegrid" using React, TypeScript, Vite, Tailwind CSS. Centerpiece: a live animated SVG pulse line, drawn by code.

FONTS: "Instrument Sans" (400, 500, 600) from Google Fonts, utility `.font-instrument`. Page `bg-[#07090f]`, text white.

BACKDROP: two fixed radial glows (`fixed inset-0 z-0 pointer-events-none`): `background: radial-gradient(600px circle at 20% 15%, rgba(56,189,248,0.14), transparent 60%), radial-gradient(700px circle at 85% 80%, rgba(52,211,153,0.10), transparent 60%)`; plus a subtle grid: `background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px`.

NAV (relative z-10, flex justify-between items-center px-6 sm:px-10 py-5):
- "Pulsegrid" with a 8px emerald dot before it (`h-2 w-2 rounded-full bg-emerald-400 animate-pulse`), name in `font-instrument font-semibold text-lg`
- Links "Status", "Docs", "Pricing" `text-[13px] text-white/60 hover:text-white transition-colors` gap-7 (hidden md:flex)
- "Start free" button `bg-white text-black rounded-lg px-4 py-2 text-[13px] font-medium hover:bg-white/85 transition-colors`

HERO (relative z-10, max-w-3xl mx-auto text-center pt-20 px-6):
- Badge pill: "99.999% OF HEARTBEATS DELIVERED LAST QUARTER" in `text-[11px] tracking-[0.2em] text-emerald-300/90 border border-emerald-400/25 bg-emerald-400/5 rounded-full px-4 py-1.5 uppercase`
- H1: "Know it's down" / "before they do." two lines, `font-instrument font-semibold text-[clamp(2.6rem,7vw,5rem)] leading-[1.02] tracking-[-2px] mt-7`
- Sub: "Pulsegrid pings every region, every second, and pages the right human in under 800 milliseconds." `text-white/55 text-sm sm:text-base max-w-lg mx-auto mt-5 leading-relaxed`

PULSE CHART (mt-14, max-w-4xl mx-auto px-6): an `<svg viewBox="0 0 800 160">` with:
- A horizontal baseline at y=80, `stroke="rgba(255,255,255,0.12)"`
- A heartbeat path: repeating segments of flatline + QRS spike, e.g. `M0,80 L90,80 L104,80 L112,34 L122,126 L132,80 L146,80` continued to x=800 (four spikes total), `stroke="#34d399" stroke-width="2.5" fill="none"`
- The path animates like a drawing oscilloscope: `stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: sweep 3.6s linear infinite;` with `@keyframes sweep { to { stroke-dashoffset: 0; } }`
- A blinking cursor dot at the path end (`<circle r="4" fill="#34d399">`) with `animation: pulse-dot 1s ease-in-out infinite` scaling opacity 1 → 0.2.

METRIC CHIPS (mt-10, flex flex-wrap justify-center gap-3): four glass chips `bg-white/[0.06] border border-white/10 rounded-xl px-5 py-3 backdrop-blur-sm text-left`:
- "182ms" / "median page time" ; "31 regions" / "active probes" ; "0 missed" / "incidents this year" ; "2.4M" / "checks per hour"
Values `font-instrument font-semibold text-xl`, labels `text-[11px] text-white/45 uppercase tracking-[0.15em] mt-0.5`.
Hero pieces rise in with `@keyframes lift { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }` 0.7s ease-out, staggered 0.1s each. Single App.tsx + src/styles.css.

saassvg-animationglass