diff --git a/app/globals.css b/app/globals.css
index 20ea66e..3300fa0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -22,12 +22,17 @@ html {
 }
 
 body {
-  background-color: #18212f;
-  color: #f1f5f9;
+  background-color: #f0f4f8;
+  color: #1a202c;
   font-family: 'Inter', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
+.dark body {
+  background-color: #18212f;
+  color: #f1f5f9;
+}
+
 @layer components {
   /* Primary button – orange, darkens on hover */
   .btn-primary {
@@ -42,10 +47,12 @@ body {
   /* Secondary button – outlined, fills subtly on hover */
   .btn-secondary {
     @apply inline-flex items-center justify-center rounded-xl
-           border border-gray-600 text-slate-300 font-semibold
+           border border-slate-300 text-slate-700 font-semibold
            transition-all duration-200
-           hover:bg-white/5 hover:border-gray-400 hover:text-white
-           active:scale-[0.98];
+           hover:bg-slate-100 hover:border-slate-400 hover:text-slate-900
+           active:scale-[0.98]
+           dark:border-gray-600 dark:text-slate-300
+           dark:hover:bg-white/5 dark:hover:border-gray-400 dark:hover:text-white;
   }
 
   /* Small nav button */
@@ -68,10 +75,14 @@ body {
 
   /* Dot matrix – default background pattern */
   .bg-grid {
-    background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
+    background-image: radial-gradient(rgba(249, 115, 22, 0.06) 1px, transparent 1px);
     background-size: 28px 28px;
   }
 
+  .dark .bg-grid {
+    background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
+  }
+
   /* Alt: subtle line grid */
   .bg-grid-lines {
     background-image: linear-gradient(rgba(249, 115, 22, 0.05) 1px, transparent 1px),
@@ -112,23 +123,23 @@ body {
 .legal-content h2 {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f1f5f9;
+  color: #1a202c;
   margin-bottom: 0.75rem;
   margin-top: 2rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid #2d3748;
+  border-bottom: 1px solid #cbd5e0;
 }
 .legal-content h3 {
   font-size: 0.95rem;
   font-weight: 600;
-  color: #fb923c;
+  color: #ea6c00;
   margin-top: 1.25rem;
   margin-bottom: 0.4rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 .legal-content p {
-  color: #94a3b8;
+  color: #4a5568;
   line-height: 1.8;
   margin-bottom: 0.75rem;
   font-size: 0.925rem;
@@ -139,7 +150,7 @@ body {
   margin: 0.75rem 0 1rem 0;
 }
 .legal-content ul li {
-  color: #94a3b8;
+  color: #4a5568;
   font-size: 0.925rem;
   line-height: 1.75;
   padding-left: 1.25rem;
@@ -157,19 +168,19 @@ body {
   background: #f97316;
 }
 .legal-content a {
-  color: #60a5fa;
+  color: #2563eb;
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 .legal-content a:hover {
-  color: #fb923c;
+  color: #f97316;
 }
 .legal-content strong {
-  color: #e2e8f0;
+  color: #1a202c;
   font-weight: 600;
 }
 .legal-content .note {
-  background: #1e2a3d;
+  background: #e8eef4;
   border-left: 3px solid #f97316;
   padding: 0.75rem 1rem;
   border-radius: 0 0.5rem 0.5rem 0;
@@ -180,17 +191,49 @@ body {
   font-size: 0.875rem !important;
 }
 
+/* Legal pages – dark mode overrides */
+.dark .legal-content h2 {
+  color: #f1f5f9;
+  border-bottom-color: #2d3748;
+}
+.dark .legal-content h3 {
+  color: #fb923c;
+}
+.dark .legal-content p,
+.dark .legal-content ul li {
+  color: #94a3b8;
+}
+.dark .legal-content a {
+  color: #60a5fa;
+}
+.dark .legal-content a:hover {
+  color: #fb923c;
+}
+.dark .legal-content strong {
+  color: #e2e8f0;
+}
+.dark .legal-content .note {
+  background: #1e2a3d;
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
 }
 ::-webkit-scrollbar-track {
-  background: #18212f;
+  background: #e8eef4;
 }
 ::-webkit-scrollbar-thumb {
-  background: #2d3748;
+  background: #94a3b8;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: #f97316;
 }
+
+.dark ::-webkit-scrollbar-track {
+  background: #18212f;
+}
+.dark ::-webkit-scrollbar-thumb {
+  background: #2d3748;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 44450e8..8f6707a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,7 +12,7 @@ import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-[#18212f]">
+    <main className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
       <Header />
       <Hero />
       <TaglineBanner />