@utopia-studio-design/design-system-cli 0.6.1 → 0.7.0

package/data/templates/quantum-verification-story/src/components/lattice-diagram.tsx

@@ -0,0 +1,73 @@
+/**
+ * Shortest Vector Problem diagram — the lattice hardness assumption that
+ * underpins ML-KEM (FIPS-203) and ML-DSA (FIPS-204). Pure SVG, deterministic.
+ */
+const O = { x: 78, y: 250 }
+const b1 = { x: 60, y: -16 }
+const b2 = { x: 22, y: -52 }
+
+const points: { x: number; y: number; origin: boolean }[] = []
+for (let i = -1; i <= 5; i++) {
+  for (let j = -1; j <= 5; j++) {
+    const x = O.x + i * b1.x + j * b2.x
+    const y = O.y + i * b1.y + j * b2.y
+    if (x >= 8 && x <= 372 && y >= 8 && y <= 292) {
+      points.push({ x, y, origin: i === 0 && j === 0 })
+    }
+  }
+}
+
+// shortest non-zero vector ≈ b1 − b2
+const sv = { x: O.x + b1.x - b2.x, y: O.y + b1.y - b2.y }
+
+export function LatticeDiagram() {
+  return (
+    <div className="rounded-2xl border border-white/10 bg-[var(--deep-950)] p-7 sm:p-8">
+      <div className="font-mono text-[10px] tracking-[0.15em] text-[var(--primary-400)] uppercase font-semibold mb-5">
+        Why quantum can&apos;t break it
+      </div>
+
+      <svg viewBox="0 0 380 300" className="w-full h-auto" role="img"
+        aria-label="Lattice diagram illustrating the shortest vector problem">
+        <defs>
+          <marker id="ah-primary" markerWidth="7" markerHeight="7" refX="5.5" refY="3" orient="auto">
+            <path d="M0 0 L6 3 L0 6 z" fill="var(--primary-400)" />
+          </marker>
+          <marker id="ah-sv" markerWidth="7" markerHeight="7" refX="5.5" refY="3" orient="auto">
+            <path d="M0 0 L6 3 L0 6 z" fill="#6ee7a8" />
+          </marker>
+        </defs>
+
+        {/* lattice points */}
+        {points.map((p, k) => (
+          <circle key={k} cx={p.x} cy={p.y} r={p.origin ? 3.4 : 2.4}
+            fill={p.origin ? "var(--primary-300)" : "color-mix(in srgb, var(--primary-500) 40%, transparent)"} />
+        ))}
+
+        {/* basis vectors */}
+        <line x1={O.x} y1={O.y} x2={O.x + b1.x} y2={O.y + b1.y}
+          stroke="var(--primary-400)" strokeWidth="1.6" markerEnd="url(#ah-primary)" opacity="0.85" />
+        <line x1={O.x} y1={O.y} x2={O.x + b2.x} y2={O.y + b2.y}
+          stroke="var(--primary-400)" strokeWidth="1.6" markerEnd="url(#ah-primary)" opacity="0.85" />
+        <text x={O.x + b1.x + 6} y={O.y + b1.y + 2} fill="var(--primary-300)"
+          className="font-mono" fontSize="11" fontStyle="italic">b₁</text>
+        <text x={O.x + b2.x - 18} y={O.y + b2.y + 4} fill="var(--primary-300)"
+          className="font-mono" fontSize="11" fontStyle="italic">b₂</text>
+
+        {/* shortest vector */}
+        <line x1={O.x} y1={O.y} x2={sv.x} y2={sv.y}
+          stroke="#6ee7a8" strokeWidth="2.2" markerEnd="url(#ah-sv)" />
+        <text x={sv.x + 8} y={sv.y + 4} fill="#6ee7a8" className="font-mono" fontSize="11">shortest vector</text>
+      </svg>
+
+      <p className="mt-5 text-[13px] text-white/55 leading-[1.7]">
+        Finding the shortest vector in a high-dimensional lattice stays hard even for a large-scale
+        quantum computer — Shor&apos;s algorithm, the very attack that shatters RSA and ECC, simply
+        doesn&apos;t apply here. That asymmetry is exactly what{" "}
+        <strong className="text-[var(--primary-400)]">ML-KEM (FIPS-203)</strong> and{" "}
+        <strong className="text-[var(--primary-400)]">ML-DSA (FIPS-204)</strong> are built on. Migrating
+        to them is what keeps your data safe after Y2Q.
+      </p>
+    </div>
+  )
+}

package/data/templates/quantum-verification-story/src/components/lattice-field.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+/**
+ * Animated lattice field — evokes lattice-based post-quantum cryptography
+ * (the math behind NIST FIPS-203 / FIPS-204). A grid of nodes drifts slowly
+ * and connects to nearby neighbours; a faint pulse travels through the lattice.
+ * Subtle by design so text stays readable. Respects reduced-motion and pauses
+ * the animation loop while off-screen, so multiple instances stay cheap.
+ */
+export function LatticeField({
+  spacing = 64,
+  className = "",
+}: {
+  spacing?: number
+  className?: string
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const still = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("still")
+    const reduce = still || window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    const SPACING = spacing
+    const LINK = spacing * 1.45   // max distance to draw a connection
+    const GOLD = "208,160,85"
+
+    let w = 0, h = 0, dpr = 1
+    let nodes: { x: number; y: number; bx: number; by: number; ph: number; sp: number }[] = []
+    let raf = 0
+    let t = 0
+
+    const build = () => {
+      const rect = canvas.getBoundingClientRect()
+      w = rect.width; h = rect.height
+      dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width = w * dpr; canvas.height = h * dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      nodes = []
+      const cols = Math.ceil(w / SPACING) + 2
+      const rows = Math.ceil(h / SPACING) + 2
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const bx = (c - 1) * SPACING
+          const by = (r - 1) * SPACING
+          // deterministic phase offset so the drift looks organic, not uniform
+          const ph = ((c * 13 + r * 7) % 100) / 100 * Math.PI * 2
+          const sp = 0.5 + ((c * 5 + r * 11) % 50) / 100
+          nodes.push({ x: bx, y: by, bx, by, ph, sp })
+        }
+      }
+    }
+
+    const draw = () => {
+      ctx.clearRect(0, 0, w, h)
+      const amp = reduce ? 0 : 7
+
+      for (const n of nodes) {
+        n.x = n.bx + Math.sin(t * 0.0006 * n.sp + n.ph) * amp
+        n.y = n.by + Math.cos(t * 0.0005 * n.sp + n.ph) * amp
+      }
+
+      // a slow diagonal pulse front travelling across the lattice
+      const pulse = ((t * 0.04) % (w + h + 400)) - 200
+
+      for (let i = 0; i < nodes.length; i++) {
+        const a = nodes[i]
+        for (let j = i + 1; j < nodes.length; j++) {
+          const b = nodes[j]
+          const dx = a.x - b.x, dy = a.y - b.y
+          const d = Math.hypot(dx, dy)
+          if (d < LINK) {
+            const base = (1 - d / LINK) * 0.16
+            ctx.strokeStyle = `rgba(${GOLD},${base})`
+            ctx.lineWidth = 0.6
+            ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke()
+          }
+        }
+        // node dot, brighter near the pulse front
+        const near = 1 - Math.min(Math.abs((a.x + a.y) - pulse), 160) / 160
+        const glow = reduce ? 0.22 : 0.18 + near * 0.55
+        ctx.fillStyle = `rgba(${GOLD},${glow})`
+        ctx.beginPath(); ctx.arc(a.x, a.y, near > 0.6 && !reduce ? 2.2 : 1.4, 0, Math.PI * 2); ctx.fill()
+      }
+    }
+
+    const loop = (now: number) => {
+      t = now
+      draw()
+      raf = requestAnimationFrame(loop)
+    }
+
+    let visible = true
+    const start = () => { if (!reduce && visible && !raf) raf = requestAnimationFrame(loop) }
+    const stop = () => { if (raf) { cancelAnimationFrame(raf); raf = 0 } }
+
+    build()
+    draw()
+
+    // pause the loop while the canvas is scrolled out of view
+    const io = new IntersectionObserver(
+      ([e]) => {
+        visible = e.isIntersecting
+        if (visible) start()
+        else stop()
+      },
+      { threshold: 0 }
+    )
+    io.observe(canvas)
+    start()
+
+    const onResize = () => { build(); draw() }
+    window.addEventListener("resize", onResize)
+    return () => { stop(); io.disconnect(); window.removeEventListener("resize", onResize) }
+  }, [spacing])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={`absolute inset-0 w-full h-full pointer-events-none ${className}`}
+    />
+  )
+}

package/data/templates/quantum-verification-story/src/components/nav.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { BrandMark } from "@/components/brand-mark"
+import { Menu, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+const links = [
+  { label: "Products",       href: "/products" },
+  { label: "NIST Estimator", href: "/assessment" },
+  { label: "Verification",   href: "/deployment" },
+  { label: "Pricing",        href: "#pilot" },
+]
+
+export function Nav() {
+  const [open, setOpen]         = useState(false)
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 4)
+    window.addEventListener("scroll", fn, { passive: true })
+    return () => window.removeEventListener("scroll", fn)
+  }, [])
+
+  return (
+    <header className={cn(
+      "sticky top-0 z-50 w-full bg-[var(--gray-950)] transition-shadow duration-200",
+      scrolled && "shadow-lg shadow-black/30"
+    )}>
+      <div className="container-main h-[64px] flex items-center justify-between gap-6">
+
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2.5 shrink-0">
+          <BrandMark />
+          <span className="text-[15px] font-semibold tracking-tight text-white">
+            Your Company
+          </span>
+        </Link>
+
+        {/* Desktop center links */}
+        <nav className="hidden md:flex items-center gap-0.5">
+          {links.map(({ label, href }) => (
+            <Link
+              key={href}
+              href={href}
+              className="px-3 py-1.5 text-[14px] font-medium text-white/65 hover:text-white rounded-md hover:bg-white/5 transition-colors"
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Desktop right */}
+        <div className="hidden md:flex items-center gap-2 shrink-0">
+          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full border border-white/20 text-[12px] font-mono text-white/55">
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--primary-400)] animate-[pulse-dot_1.8s_infinite]" />
+            <span>Lattice active</span>
+          </div>
+          <Button asChild size="sm"
+            className="rounded-full bg-white text-[var(--gray-950)] hover:bg-white/90 h-8 px-4 text-[13px] font-semibold"
+          >
+            <Link href="#contact">Contact sales</Link>
+          </Button>
+        </div>
+
+        {/* Mobile toggle */}
+        <button
+          className="md:hidden p-1.5 rounded-md text-white/80 hover:bg-white/10 transition-colors"
+          onClick={() => setOpen(v => !v)}
+          aria-label="Toggle menu"
+          aria-expanded={open}
+          aria-controls="mobile-navigation"
+        >
+          {open ? <X size={20} /> : <Menu size={20} />}
+        </button>
+      </div>
+
+      {/* Mobile drawer */}
+      {open && (
+        <div id="mobile-navigation" className="md:hidden bg-[var(--gray-950)] border-t border-white/10">
+          <div className="container-main py-4 flex flex-col gap-0.5">
+            {links.map(({ label, href }) => (
+              <Link
+                key={href}
+                href={href}
+                onClick={() => setOpen(false)}
+                className="px-3 py-2.5 text-[15px] font-medium text-white/80 hover:bg-white/5 rounded-md transition-colors"
+              >
+                {label}
+              </Link>
+            ))}
+            <div className="pt-3 mt-2 border-t border-white/10">
+              <Button asChild className="w-full rounded-full bg-white text-[var(--gray-950)] hover:bg-white/90">
+                <Link href="#contact" onClick={() => setOpen(false)}>Contact sales</Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}

package/data/templates/quantum-verification-story/src/components/presentation-layout.tsx

@@ -0,0 +1,91 @@
+"use client"
+import { useEffect, useState, ReactNode } from "react"
+import { motion } from "framer-motion"
+
+const NAV_H = 64
+
+function Slide({ children, snap }: { children: ReactNode; snap: boolean }) {
+  return (
+    <div
+      style={snap ? {
+        height: `calc(100vh - ${NAV_H}px)`,
+        scrollSnapAlign: "start",
+        scrollSnapStop: "always",
+        overflow: "hidden",
+        position: "relative",
+      } : {
+        minHeight: "100svh",
+        position: "relative",
+      }}
+    >
+      <motion.div
+        style={snap ? { height: "100%" } : {}}
+        initial={false}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  )
+}
+
+export function PresentationLayout({ sections }: { sections: ReactNode[] }) {
+  const [snap, setSnap] = useState(false)
+
+  useEffect(() => {
+    const check = () => setSnap(window.innerWidth >= 768)
+    check()
+    window.addEventListener("resize", check)
+    return () => window.removeEventListener("resize", check)
+  }, [])
+
+  // Lock body scroll only on desktop snap mode
+  useEffect(() => {
+    if (!snap) return
+    document.documentElement.style.overflow = "hidden"
+    document.documentElement.style.height = "100%"
+    document.body.style.overflow = "hidden"
+    document.body.style.height = "100%"
+    return () => {
+      document.documentElement.style.overflow = ""
+      document.documentElement.style.height = ""
+      document.body.style.overflow = ""
+      document.body.style.height = ""
+    }
+  }, [snap])
+
+  return (
+    <>
+      {/* Black frame — desktop only */}
+      {snap && (
+        <div
+          style={{
+            position: "fixed",
+            top: NAV_H,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: "none",
+            zIndex: 40,
+            boxShadow: "inset 0 0 0 10px #000",
+          }}
+        />
+      )}
+
+      {/* Scroll container */}
+      <div
+        style={snap ? {
+          height: `calc(100vh - ${NAV_H}px)`,
+          overflowY: "scroll",
+          scrollSnapType: "y mandatory",
+          scrollBehavior: "smooth",
+        } : {}}
+      >
+        {sections.map((section, i) => (
+          <Slide key={i} snap={snap}>{section}</Slide>
+        ))}
+      </div>
+    </>
+  )
+}

package/data/templates/quantum-verification-story/src/components/readiness-estimator.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+
+/**
+ * Readiness estimator based on Mosca's inequality:
+ *   if  (data shelf-life X) + (migration time Y)  >  (years until quantum Z)
+ *   then you are already exposed to harvest-now-decrypt-later.
+ * Z is anchored to an estimated Y2Q of 2031.
+ */
+const CRYPTO = [
+  { k: "rsa2048", l: "RSA-2048", mult: 1.0 },
+  { k: "ecc",     l: "ECC (P-256)", mult: 1.0 },
+  { k: "rsa4096", l: "RSA-4096", mult: 1.1 },
+  { k: "mixed",   l: "Mixed legacy", mult: 1.4 },
+]
+const Z = 5 // years from 2026 to an estimated Y2Q of 2031
+
+export function ReadinessEstimator() {
+  const [shelf, setShelf]     = useState(7)
+  const [systems, setSystems] = useState(40)
+  const [crypto, setCrypto]   = useState("rsa2048")
+
+  const mult = CRYPTO.find((c) => c.k === crypto)!.mult
+  const migration = Math.max(0.5, Math.round((systems / 60) * mult * 10) / 10)
+  const total = Math.round((shelf + migration) * 10) / 10
+  const margin = Math.round((total - Z) * 10) / 10
+  const exposed = total > Z
+
+  const tier =
+    !exposed ? { label: "Narrow margin", tone: "ok" } :
+    margin > 10 ? { label: "Critical exposure", tone: "crit" } :
+    margin > 4  ? { label: "High exposure", tone: "high" } :
+                  { label: "Elevated exposure", tone: "elev" }
+
+  const toneColor =
+    tier.tone === "ok"   ? "#6ee7a8" :
+    tier.tone === "crit" ? "#e8705a" :
+    tier.tone === "high" ? "#e8975a" :
+    tier.tone === "elev" ? "var(--primary-400)" : "var(--primary-400)"
+
+  // bar scaling
+  const max = Math.max(total, Z) * 1.1
+  const pct = (v: number) => `${Math.min((v / max) * 100, 100)}%`
+
+  return (
+    <div className="glow-border rounded-2xl border border-white/10 bg-[var(--deep-900)] text-white overflow-hidden">
+      <div className="px-7 sm:px-9 pt-8 pb-6 border-b border-white/10">
+        <div className="font-mono text-[10px] tracking-[0.15em] uppercase text-[var(--primary-400)] font-semibold mb-1.5">
+          Mosca Exposure Estimator
+        </div>
+        <p className="text-[13px] text-white/55 leading-relaxed">
+          A 30-second version of the math we run in a full assessment. Adjust the inputs to see whether
+          your data is already inside the harvest-now window.
+        </p>
+      </div>
+
+      <div className="grid lg:grid-cols-[1fr_1fr]">
+        {/* Inputs */}
+        <div className="px-7 sm:px-9 py-8 space-y-7 border-b lg:border-b-0 lg:border-r border-white/10">
+          <div>
+            <div className="flex justify-between items-baseline mb-2">
+              <label className="text-[12px] font-mono uppercase tracking-[0.08em] text-white/55">Data must stay secret for</label>
+              <span className="font-mono text-[15px] font-bold text-[var(--primary-400)]">{shelf} yrs</span>
+            </div>
+            <input type="range" min={1} max={25} value={shelf} onChange={(e) => setShelf(+e.target.value)}
+              className="w-full h-1 cursor-grab" style={{ accentColor: "var(--primary-500)" }} />
+          </div>
+
+          <div>
+            <div className="flex justify-between items-baseline mb-2">
+              <label className="text-[12px] font-mono uppercase tracking-[0.08em] text-white/55">Systems in scope</label>
+              <span className="font-mono text-[15px] font-bold text-[var(--primary-400)]">{systems}</span>
+            </div>
+            <input type="range" min={1} max={300} value={systems} onChange={(e) => setSystems(+e.target.value)}
+              className="w-full h-1 cursor-grab" style={{ accentColor: "var(--primary-500)" }} />
+          </div>
+
+          <div>
+            <label className="block text-[12px] font-mono uppercase tracking-[0.08em] text-white/55 mb-2">Primary public-key crypto</label>
+            <div className="grid grid-cols-2 gap-2">
+              {CRYPTO.map((c) => (
+                <button key={c.k} onClick={() => setCrypto(c.k)}
+                  className={`px-3 py-2 text-[12px] font-mono rounded-lg border transition-colors cursor-pointer ${
+                    crypto === c.k
+                      ? "border-[var(--primary-500)] bg-[var(--primary-500)]/15 text-[var(--primary-300)]"
+                      : "border-white/12 text-white/55 hover:border-white/30"
+                  }`}>
+                  {c.l}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Output */}
+        <div className="px-7 sm:px-9 py-8 flex flex-col justify-center bg-white/[0.02]">
+          <div className="space-y-3 mb-6">
+            {[
+              { l: "Data shelf-life (X)", v: `${shelf} yrs`, w: shelf, c: "var(--primary-400)" },
+              { l: "Migration time (Y)", v: `${migration} yrs`, w: migration, c: "var(--primary-300)" },
+              { l: "Years to Y2Q (Z)", v: `${Z} yrs`, w: Z, c: "rgba(255,255,255,0.45)" },
+            ].map((row) => (
+              <div key={row.l}>
+                <div className="flex justify-between text-[11px] mb-1">
+                  <span className="text-white/50 font-mono">{row.l}</span>
+                  <span className="text-white/80 font-mono font-semibold">{row.v}</span>
+                </div>
+                <div className="h-1.5 rounded-full bg-white/8 overflow-hidden">
+                  <div className="h-full rounded-full" style={{ width: pct(row.w), background: row.c }} />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-xl border p-5" style={{ borderColor: toneColor + "55", background: toneColor + "12" }}>
+            <div className="font-mono text-[11px] tracking-[0.1em] uppercase font-bold mb-1.5" style={{ color: toneColor }}>
+              {tier.label}
+            </div>
+            <p className="text-[13px] text-white/75 leading-[1.6]">
+              {exposed ? (
+                <>X + Y = <strong className="text-white">{total} yrs</strong> exceeds Z = {Z} yrs by{" "}
+                <strong style={{ color: toneColor }}>{margin} yrs</strong>. Data you encrypt today can be
+                harvested now and decrypted after Y2Q. Migration should start immediately.</>
+              ) : (
+                <>X + Y = <strong className="text-white">{total} yrs</strong> is within Z = {Z} yrs — but the
+                margin is thin. Any delay or scope growth pushes you into exposure.</>
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/data/templates/quantum-verification-story/src/components/scramble-text.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+const GLYPHS = "ABCDEF0123456789<>/\\{}[]=+*#$%&"
+
+/**
+ * Decodes its text from random cipher-glyphs into the final string when it
+ * scrolls into view — a nod to encryption/decryption. Static (final text) for
+ * reduced-motion users and during SSR, so it's always readable.
+ */
+export function ScrambleText({
+  text,
+  className = "",
+  duration = 700,
+}: {
+  text: string
+  className?: string
+  duration?: number
+}) {
+  const [display, setDisplay] = useState(text)
+  const ref = useRef<HTMLSpanElement>(null)
+  const done = useRef(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+
+    const run = () => {
+      if (done.current) return
+      done.current = true
+      const start = performance.now()
+      let raf = 0
+      const tick = (now: number) => {
+        const p = Math.min((now - start) / duration, 1)
+        const reveal = Math.floor(p * text.length)
+        let out = ""
+        for (let i = 0; i < text.length; i++) {
+          if (i < reveal || text[i] === " ") out += text[i]
+          else out += GLYPHS[Math.floor(Math.random() * GLYPHS.length)]
+        }
+        setDisplay(out)
+        if (p < 1) raf = requestAnimationFrame(tick)
+        else setDisplay(text)
+      }
+      raf = requestAnimationFrame(tick)
+      return () => cancelAnimationFrame(raf)
+    }
+
+    const io = new IntersectionObserver(
+      ([e]) => { if (e.isIntersecting) { run(); io.disconnect() } },
+      { threshold: 0.4 }
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [text, duration])
+
+  return <span ref={ref} className={className}>{display}</span>
+}

package/data/templates/quantum-verification-story/src/components/section-backdrop.tsx

@@ -0,0 +1,38 @@
+/**
+ * Subtle decorative backdrop for the light sections — a faint dotted lattice
+ * grid plus a soft brand glow, radially masked so it fades into the page.
+ * Pure CSS/SVG, no JS, render-cheap. Breaks up large white areas without
+ * competing with the foreground text.
+ */
+export function SectionBackdrop({
+  variant = "light",
+  className = "",
+}: {
+  variant?: "light" | "dark"
+  className?: string
+}) {
+  const dot = variant === "dark" ? "color-mix(in srgb, var(--primary-500) 18%, transparent)" : "color-mix(in srgb, var(--foreground) 10%, transparent)"
+  const glow =
+    variant === "dark"
+      ? "radial-gradient(48% 60% at 85% 12%, color-mix(in srgb, var(--primary-500) 10%, transparent) 0%, transparent 70%)"
+      : "radial-gradient(46% 58% at 88% 10%, color-mix(in srgb, var(--primary-500) 7%, transparent) 0%, transparent 72%)"
+
+  return (
+    <div aria-hidden className={`absolute inset-0 overflow-hidden pointer-events-none ${className}`}>
+      {/* dotted lattice */}
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundImage: `radial-gradient(${dot} 1.2px, transparent 1.3px)`,
+          backgroundSize: "26px 26px",
+          maskImage:
+            "radial-gradient(70% 70% at 80% 8%, black 0%, transparent 75%)",
+          WebkitMaskImage:
+            "radial-gradient(70% 70% at 80% 8%, black 0%, transparent 75%)",
+        }}
+      />
+      {/* soft glow */}
+      <div className="absolute inset-0" style={{ background: glow }} />
+    </div>
+  )
+}