feat: space background from Aaron's Space_HD.jpg asset

- public/space-bg.jpg: Aaron's space art (3072x2048, purple cosmic scene)
- globals.css: body background wired to /space-bg.jpg with dark overlay (65% opacity)
  for readability, fixed attachment so it scrolls naturally
- CSS vars updated: dark/dark-mid/dark-card tuned for deep-purple space palette
- border color shifted slightly toward purple to complement the bg

styles/Home.module.css

@@ -68,9 +68,8 @@
   position: absolute;
   inset: 0;
   background: 
-    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(192, 57, 43, 0.08) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(192, 57, 43, 0.05) 0%, transparent 70%),
-    var(--dark);
+    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(106, 0, 204, 0.15) 0%, transparent 70%),
+    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(192, 57, 43, 0.08) 0%, transparent 70%);
   z-index: 0;
 }
 
@@ -270,9 +269,10 @@
 /* ── Characters section ──────────────────────────────────────────────────── */
 .characters {
   padding: 6rem 2.5rem;
-  background: var(--dark-mid);
+  background: rgba(8, 2, 18, 0.55);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(2px);
 }
 
 .sectionHeader {
@@ -290,8 +290,9 @@
 }
 
 .characterCard {
-  background: var(--dark-card);
-  border: 1px solid var(--border);
+  background: rgba(15, 5, 28, 0.72);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(160, 100, 255, 0.18);
   padding: 2rem 1.75rem;
   position: relative;
   overflow: hidden;

styles/globals.css

@@ -9,10 +9,10 @@
   --bone-dim: #9e9080;
   --red: #c0392b;
   --red-glow: rgba(192, 57, 43, 0.4);
-  --dark: #0a0806;
-  --dark-mid: #120f0a;
-  --dark-card: #1a1510;
-  --border: rgba(232, 220, 200, 0.12);
+  --dark: #06030f;
+  --dark-mid: rgba(8, 4, 20, 0.85);
+  --dark-card: rgba(12, 6, 28, 0.78);
+  --border: rgba(180, 140, 255, 0.18);
   --font-display: 'Georgia', 'Times New Roman', serif;
   --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
 }
@@ -22,7 +22,12 @@ html {
 }
 
 body {
-  background: var(--dark);
+  background-color: #06030f;
+  background-image: url('/space-bg.jpg');
+  background-size: cover;
+  background-position: center top;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
   color: var(--bone);
   font-family: var(--font-body);
   line-height: 1.6;
@@ -30,6 +35,21 @@ body {
   overflow-x: hidden;
 }
 
+/* Dark overlay so text stays readable over the space background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(4, 0, 14, 0.65);
+  pointer-events: none;
+  z-index: 0;
+}
+
+#__next {
+  position: relative;
+  z-index: 1;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -46,5 +66,5 @@ img {
 
 /* Scrollbar */
 ::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: var(--dark); }
+::-webkit-scrollbar-track { background: #06030f; }
 ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }