Use Patiun icons, motifs, seal logo and gold accents across the site

- Icons: Patiun stroke icon set (13 approved + 73 new) in src/lib/brand-icons.ts;
  Icon.astro and a React BrandIcon resolve mdi names to brand icons, keeping
  mdi only for third-party logos. Inline island icons (mobile menu, carousel,
  form success, board game shelf, product tile) switched too.
- Motifs: layered seal turns in the hero corner; astrolabe on the Professional
  hero; Starlight recolors of the transmutation seal and tria prima array
  behind light sections (outlined ring text, no fonts needed). Removed the
  generic sacred-geometry and astrolabe drawings.
- Gold accents: image frames and corner stars, quote bars, dividers (new
  star-line divider), nav group divider, scrolled nav rule, footer rule.
- Nav and footer use the Patiun seal; nav tagline back to "Developer. Maker.
  Storyteller."; "Web Development · a Patiun LLC company" moved to the
  footer copyright line.
- Mobile menu: Midnight drawer, visible close button.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

src/components/hero/AnimatedBackground.tsx

@@ -6,8 +6,8 @@
  *   1. A CSS-driven night-sky gradient (deep blue, darker at top → lighter near
  *      horizon) plus a diagonal Milky Way galaxy band and teal/violet nebula
  *      clouds. GPU-friendly, animated via `animate-gradient-shift` keyframes.
- *   2. A faint static SVG ornament layer (astrolabe + sacred geometry) for
- *      esoteric texture.
+ *   2. The Patiun layered magic seal, faint and slowly turning in the top-left
+ *      corner (the surface's one focal motif).
  *   3. An optional <canvas> star field: a dense field of slowly-twinkling stars
  *      with thin constellation lines between near neighbors, plus the occasional
  *      shooting star. The WHOLE field rotates together very slowly around the
@@ -359,55 +359,17 @@ export default function AnimatedBackground({
           `,
         }}
       />
-      {/* Faint astrolabe + sacred-geometry ornaments for esoteric texture. */}
-      <svg
-        className="absolute -left-40 -top-40 h-[34rem] w-[34rem] animate-spin-slow text-(--color-gold) opacity-[0.11]"
-        viewBox="0 0 100 100"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="0.5"
+      {/* The layered magic seal, turning slowly in the top-left corner: the
+          one focal motif on the night sky. Its ring text and symbols are
+          outlined to paths (public/motifs/), so no symbol font is needed. */}
+      <img
+        src="/motifs/layered-seal.svg"
+        alt=""
         aria-hidden="true"
-      >
-        <circle cx="50" cy="50" r="49" strokeWidth="0.8" />
-        <circle cx="50" cy="50" r="42" />
-        <circle cx="50" cy="50" r="30" />
-        <circle cx="50" cy="50" r="18" />
-        {Array.from({ length: 36 }).map((_, i) => {
-          const rad = (i * 10 * Math.PI) / 180;
-          const major = i % 3 === 0;
-          return (
-            <line
-              key={i}
-              x1={50 + 49 * Math.cos(rad)}
-              y1={50 + 49 * Math.sin(rad)}
-              x2={50 + (major ? 43 : 45.5) * Math.cos(rad)}
-              y2={50 + (major ? 43 : 45.5) * Math.sin(rad)}
-              strokeWidth={major ? 0.8 : 0.4}
-            />
-          );
-        })}
-      </svg>
-      <svg
-        className="absolute -right-44 bottom-[-12rem] h-[30rem] w-[30rem] text-(--color-violet) opacity-[0.11]"
-        viewBox="0 0 100 100"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="0.5"
-        aria-hidden="true"
-      >
-        {/* Compact flower-of-life cluster. */}
-        <circle cx="50" cy="50" r="10" />
-        {Array.from({ length: 6 }).map((_, i) => {
-          const rad = (Math.PI / 3) * i;
-          return <circle key={i} cx={50 + 10 * Math.cos(rad)} cy={50 + 10 * Math.sin(rad)} r="10" />;
-        })}
-        {Array.from({ length: 6 }).map((_, i) => {
-          const rad = (Math.PI / 3) * i + Math.PI / 6;
-          return (
-            <circle key={`o${i}`} cx={50 + 10 * Math.sqrt(3) * Math.cos(rad)} cy={50 + 10 * Math.sqrt(3) * Math.sin(rad)} r="10" />
-          );
-        })}
-      </svg>
+        decoding="async"
+        draggable={false}
+        className="pointer-events-none absolute -left-40 -top-40 h-[34rem] w-[34rem] animate-spin-slow select-none opacity-[0.2]"
+      />
 
       {/* Subtle vignette for text legibility. */}
       <div