feat(web): glow-pulse on primary CTAs + hero fills full first viewport

Two coordinated polish moves:

1. **<PulseLink> / <PulseButton>** — new `apps/web/components/pulse.tsx`.
   Click anywhere on a wrapped link or button and a small indigo dot
   detonates from the click point, scaling 1x→80x over 650ms before
   fading to transparent. Same visual language as the hero load-in
   glow — the click effectively says "this is the brand reaching back."

   The dot lives in a `pointer-events: none` overlay, so it never
   blocks the underlying navigation. `overflow-hidden + relative` are
   added to the host so the bloom stays inside the rounded shape.
   `glow-pulse` keyframe sits in globals.css next to the existing
   `pulse-dot` / `shimmer` / `fade-in` definitions; reduced-motion
   suppresses the animation to instant-opacity-0 so the click flow
   is preserved without the bloom.

   Wired into the highest-conversion CTAs only — the user explicitly
   asked "wo's Sinn macht":
   - Hero "Start building free" + "Read the docs"
   - Marketing header Login / Dashboard button
   - Dashboard header "+ New server" pill

   Deliberately NOT applied to dashboard nav links, logout, destructive
   buttons, form internals, carousel dots — pulse on every click would
   be noise.

2. **Hero fills 100svh − nav** (`min-height: calc(100svh - 3rem)`).
   `svh` (small viewport height) instead of `vh` so the hero doesn't
   jump when the mobile address bar hides/shows. The 3rem subtracts
   the sticky marketing nav (h-12 = 48px), so the hero ends right at
   the loadscreen's natural bottom edge.

   `flex items-center` plus the inner grid's existing `md:items-center`
   keep the content vertically centred inside the tall section. The
   ParticleHero background now has cinematic-scale room and the indigo
   radial-glow + dot-mask read as the dominant background motif —
   which is the effect the user loved at load-in.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/(dashboard)/layout.tsx

@@ -1,6 +1,7 @@
 import { CookieBanner } from '@/components/cookie-banner';
 import { Logo } from '@/components/logo';
 import { MobileActionBar } from '@/components/mobile-action-bar';
+import { PulseLink } from '@/components/pulse';
 import { UserMenu } from '@/components/user-menu';
 import { FileClock, LayoutGrid, Package, Server, Settings } from 'lucide-react';
 import Link from 'next/link';
@@ -33,12 +34,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             </nav>
           </div>
           <div className="flex items-center gap-1 sm:gap-2">
-            <Link
+            <PulseLink
               href="/servers/new"
               className="hidden h-7 items-center gap-1.5 rounded-md bg-[--color-accent] px-2.5 text-[12px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8] sm:inline-flex"
             >
               + New server
-            </Link>
+            </PulseLink>
             <UserMenu />
           </div>
         </div>

apps/web/app/(marketing)/page.tsx

@@ -1,6 +1,7 @@
 import { HeroStepRotator } from '@/components/hero-step-rotator';
 import { JsonLd } from '@/components/json-ld';
 import { ParticleHero } from '@/components/particle-hero';
+import { PulseLink } from '@/components/pulse';
 import { ScrollCue } from '@/components/scroll-cue';
 import { StaticCodeBlock } from '@/components/static-code-block';
 import { FAQ, faqJsonLd } from '@/lib/seo';
@@ -92,14 +93,20 @@ export default function Landing() {
           three artifacts (prompt → build.log → claude config) with a
           mouse-reactive 3D tilt and a step indicator. Shorter overall
           so the video section below is teased above the fold. */}
-      <section className="relative overflow-hidden border-b border-[--color-border]">
+      <section
+        className="relative flex items-center overflow-hidden border-b border-[--color-border]"
+        style={{ minHeight: 'calc(100svh - 3rem)' }}
+      >
         {/* WebGL particle field — capability-detected client component.
             Sits behind the hero content at z-0 with pointer-events:none
             so the CTAs above remain fully interactive. The canvas listens
             for pointermove on window itself, so the ring still tracks
-            the cursor through the content above. */}
+            the cursor through the content above. With the hero now
+            filling the full first-viewport (minus the 48px sticky nav),
+            the field has cinematic-scale room and the indigo radial
+            glow + dot mask read as the dominant background motif. */}
         <ParticleHero />
-        <div className="relative z-10 mx-auto grid max-w-6xl gap-10 px-6 py-14 sm:py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12 md:py-28">
+        <div className="relative z-10 mx-auto grid w-full max-w-6xl gap-10 px-6 py-14 sm:py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12">
           <div className="min-w-0">
             <span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
               v0.1 — updated 2026-05-20
@@ -116,18 +123,18 @@ export default function Landing() {
               for Claude, Cursor and ChatGPT.
             </p>
             <div className="mt-7 flex flex-wrap items-center gap-3">
-              <Link
+              <PulseLink
                 href="/login"
                 className="inline-flex h-9 items-center justify-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
               >
                 Start building free
-              </Link>
-              <Link
+              </PulseLink>
+              <PulseLink
                 href="/docs"
                 className="inline-flex h-9 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-4 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
               >
                 Read the docs
-              </Link>
+              </PulseLink>
             </div>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
               <span className="inline-flex items-center gap-1.5">

apps/web/app/globals.css

@@ -168,3 +168,29 @@
     transform: translateY(0);
   }
 }
+
+/* Click-pulse for primary actions (see components/pulse.tsx).
+   Scales a small indigo dot from 1x to 80x over 650ms — on a 2px base
+   that's ~160px max radius, comfortably larger than any button on the
+   site. The translate(-50%, -50%) keeps the dot anchored to the click
+   point as it grows. Reduced-motion users get an instant fade-out so
+   the click action still proceeds without the bloom. */
+@keyframes glow-pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.85;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(80);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes glow-pulse {
+    0%,
+    100% {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0;
+    }
+  }
+}