feat(ui): electric Bat-Computer redesign — cyan→magenta theme

Cinematic full-page backdrop: per-theme Bat-Computer board image,
scroll-panned (S→E→SE→NE) via CSS scroll-driven animation behind a
legibility scrim — replaces the grid/aura motif.

- Accent retuned royal-blue → the board's cyan→magenta; headline runs a
  cyan→magenta electric sweep; gradient primary CTA + scroll-progress line.
- Display face: self-hosted Chakra Petch (OFL) on hero + section titles.
- Skill chips reworked as circuit-node chips (glowing via + gradient hover
  outline); frosted-glass cards with a cyan→magenta hover hairline; section
  eyebrows get a gradient tick.
- Remove unused BackgroundGrid component + grid assets.

All CSS-only / zero external requests / no inline JS — strict CSP and A+
security headers preserved.

src/components/SkillGroup.astro

@@ -10,7 +10,9 @@ const { group } = Astro.props;
   <h3 class="skill__title">{group.title}</h3>
   <p class="skill__blurb">{group.blurb}</p>
   <ul class="skill__items">
-    {group.items.map((item) => <li class="tag">{item}</li>)}
+    {group.items.map((item) => (
+      <li class="chip"><span class="chip__node" aria-hidden="true"></span>{item}</li>
+    ))}
   </ul>
 </article>
 
@@ -40,6 +42,53 @@ const { group } = Astro.props;
     margin: var(--space-2) 0 0;
     display: flex;
     flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Circuit-node chips — a glowing cyan→magenta node + mono label, wired to the
+     board palette. Gradient border via padding-box/border-box layering so the
+     radius survives. Lights to a full gradient outline + glow on hover. */
+  .chip {
+    --chip-grad: linear-gradient(100deg, var(--accent), var(--accent-2));
+    display: inline-flex;
+    align-items: center;
     gap: 0.45rem;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.01em;
+    color: var(--text-dim);
+    padding: 0.3rem 0.62rem 0.3rem 0.55rem;
+    border-radius: 7px;
+    border: 1px solid var(--accent-line);
+    background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%);
+    transition: color 0.2s var(--ease), transform 0.2s var(--ease),
+      border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
+      background 0.2s var(--ease);
+  }
+  /* The node: a small cyan→magenta square that glows, like a lit via/pad. */
+  .chip__node {
+    flex: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
+    background: var(--chip-grad);
+    box-shadow: 0 0 7px var(--accent-glow);
+  }
+  .chip:hover {
+    color: var(--text);
+    transform: translateY(-1px);
+    border-color: transparent;
+    /* dark fill (padding-box) inside a live gradient border (border-box) */
+    background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
+      var(--chip-grad) border-box;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 0 16px var(--accent-glow);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chip {
+      transition: none;
+    }
+    .chip:hover {
+      transform: none;
+    }
   }
 </style>