diff --git a/app/about/page.tsx b/app/about/page.tsx
index 4e4c649..6ffa4bd 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -15,23 +15,23 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
 
   return (
     <div className="mb-16">
-      <h2 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">{title}</h2>
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
+      <h2 className="text-2xl font-bold mb-6 text-white">{title}</h2>
+      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
+            <tr className="border-b border-neutral-800">
               <th className="p-4 sm:p-6 text-sm font-medium text-neutral-500">Feature</th>
               {competitors.map((comp) => (
-                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-white'}`}>
                   {comp.name}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+          <tbody className="divide-y divide-neutral-800">
             {allFeatures.map((feature) => (
-              <tr key={feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-4 sm:p-6 text-neutral-900 dark:text-white font-medium text-sm sm:text-base">{feature}</td>
+              <tr key={feature} className="hover:bg-neutral-800/50 transition-colors">
+                <td className="p-4 sm:p-6 text-white font-medium text-sm sm:text-base">{feature}</td>
                 {competitors.map((comp) => {
                   const val = comp.features[feature]
                   return (
@@ -41,7 +41,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
                       ) : val === false ? (
                         <XIcon className="w-5 h-5 text-red-500" />
                       ) : (
-                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-600 dark:text-neutral-400'}>{val}</span>
+                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-400'}>{val}</span>
                       )}
                     </td>
                   )
@@ -60,9 +60,9 @@ export default function AboutPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -74,10 +74,10 @@ export default function AboutPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-16"
         >
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Why Pulse?
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             We built Pulse because we were tired of complex, invasive analytics tools.
             Here is how we stack up against the giants.
           </p>
@@ -87,9 +87,9 @@ export default function AboutPage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.1 }}
-          className="prose prose-neutral dark:prose-invert max-w-none mb-16"
+          className="prose prose-invert max-w-none mb-16"
         >
-          <p className="text-lg text-neutral-600 dark:text-neutral-400">
+          <p className="text-lg text-neutral-400">
             Most analytics tools are overkill. They track everything, slow down your site, and require annoying cookie banners. 
             Pulse is different. We focus on the metrics that actually matter—visitors, pageviews, and sources—while respecting user privacy.
           </p>
@@ -162,10 +162,10 @@ export default function AboutPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mt-8 p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200 dark:border-neutral-800"
+          className="mt-8 p-6 bg-neutral-800/50 rounded-xl border border-neutral-800"
         >
-          <h3 className="text-xl font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
-          <p className="text-neutral-600 dark:text-neutral-400 text-sm">
+          <h3 className="text-xl font-bold mb-2 text-white">What about Plausible?</h3>
+          <p className="text-neutral-400 text-sm">
             We love Plausible! They paved the way for privacy-friendly analytics. 
             Pulse offers a similar philosophy but with a focus on even deeper integration with the Ciphera ecosystem 
             and more flexible pricing for developers.
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 700ea6d..39fd2db 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -109,9 +109,9 @@ export default function FeaturesPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -128,11 +128,11 @@ export default function FeaturesPage() {
             <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
             Product Tour
           </span>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Everything you need. <br />
             <span className="gradient-text">Nothing you don&apos;t.</span>
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Pulse gives you meaningful analytics without the complexity, the cookies, or the privacy trade-offs.
           </p>
         </motion.div>
@@ -151,10 +151,10 @@ export default function FeaturesPage() {
               <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
                 <feature.icon className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+              <h3 className="text-xl font-bold text-white mb-3">
                 {feature.title}
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+              <p className="text-neutral-400 leading-relaxed">
                 {feature.description}
               </p>
             </motion.div>
@@ -170,10 +170,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Powerful analytics, <span className="gradient-text">simplified</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Everything from real-time dashboards to conversion funnels — without the bloat.
             </p>
           </div>
@@ -192,10 +192,10 @@ export default function FeaturesPage() {
                   {cap.icon}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white mb-1">
+                  <h3 className="font-bold text-white mb-1">
                     {cap.title}
                   </h3>
-                  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                  <p className="text-sm text-neutral-400 leading-relaxed">
                     {cap.description}
                   </p>
                 </div>
@@ -210,14 +210,14 @@ export default function FeaturesPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mb-28 p-10 md:p-14 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl"
+          className="mb-28 p-10 md:p-14 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl"
         >
           <div className="grid md:grid-cols-2 gap-10 items-center">
             <div>
-              <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+              <h2 className="text-2xl font-bold text-white mb-4">
                 Content that <span className="gradient-text">performs</span>
               </h2>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-6">
+              <p className="text-neutral-400 leading-relaxed mb-6">
                 See which pages drive the most traffic, where visitors enter your site, and where they leave. Use data to double down on what works.
               </p>
               <ul className="space-y-3">
@@ -228,7 +228,7 @@ export default function FeaturesPage() {
                   'Referral sources — where traffic comes from',
                   'Browser, OS & device breakdowns',
                 ].map((item) => (
-                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-400">
                     <svg className="w-5 h-5 text-brand-orange shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                     </svg>
@@ -250,17 +250,17 @@ export default function FeaturesPage() {
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.4, delay: i * 0.1 }}
-                  className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl"
+                  className="p-4 bg-neutral-800/50 rounded-xl"
                 >
                   <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate mr-4">
+                    <span className="text-sm font-medium text-white truncate mr-4">
                       {page.label}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <span className="text-sm text-neutral-400 shrink-0">
                       {page.views} views
                     </span>
                   </div>
-                  <div className="h-1.5 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
+                  <div className="h-1.5 bg-neutral-700 rounded-full overflow-hidden">
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${page.pct}%` }}
@@ -284,10 +284,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-12">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Built for trust
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Open source, Swiss hosted, and designed to keep your visitors&apos; data where it belongs.
             </p>
           </div>
@@ -306,8 +306,8 @@ export default function FeaturesPage() {
                   <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                 </svg>
                 <div>
-                  <span className="font-semibold text-neutral-900 dark:text-white text-sm">{signal.label}</span>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{signal.detail}</p>
+                  <span className="font-semibold text-white text-sm">{signal.label}</span>
+                  <p className="text-xs text-neutral-400 mt-0.5">{signal.detail}</p>
                 </div>
               </motion.div>
             ))}
@@ -340,10 +340,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Up and running in <span className="gradient-text">3 minutes</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               No SDKs to install, no build steps, no configuration files.
             </p>
           </div>
@@ -366,15 +366,15 @@ export default function FeaturesPage() {
                   {s.step}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white text-sm">
+                  <h3 className="font-bold text-white text-sm">
                     {s.title}
                   </h3>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="text-xs text-neutral-400">
                     {s.desc}
                   </p>
                 </div>
                 {i < 2 && (
-                  <ArrowRightIcon className="w-5 h-5 text-neutral-300 dark:text-neutral-600 shrink-0 hidden md:block" />
+                  <ArrowRightIcon className="w-5 h-5 text-neutral-600 shrink-0 hidden md:block" />
                 )}
               </motion.div>
             ))}
@@ -389,10 +389,10 @@ export default function FeaturesPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-20"
         >
-          <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+          <h2 className="text-2xl font-bold text-white mb-4">
             Ready to see it in action?
           </h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg mx-auto">
+          <p className="text-neutral-400 mb-8 max-w-lg mx-auto">
             Start for free. No credit card required. Cancel anytime.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index 48a3af4..effd9a3 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -9,26 +9,26 @@ export default function InstallationPage() {
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         {/* * Bottom-right Neutral Glow */}
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Installation
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Get up and running with Pulse in seconds.
           </p>
         </div>
 
         <div className="w-full text-center">
-          <h2 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">Add the snippet</h2>
+          <h2 className="text-2xl font-bold mb-8 text-white">Add the snippet</h2>
           <p className="text-neutral-500 mb-8">Just add this snippet to your &lt;head&gt; tag in your layout or index file.</p>
           
           <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
@@ -57,9 +57,9 @@ export default function InstallationPage() {
         </div>
 
         <div className="w-full mt-16 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-neutral-900 dark:text-white">Custom events (goals)</h2>
+          <h2 className="text-2xl font-bold mb-4 text-white">Custom events (goals)</h2>
           <p className="text-neutral-500 mb-6 max-w-xl mx-auto">
-            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
+            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
           </p>
           <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 31f76b6..96ced7e 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -8,9 +8,9 @@ export default function NextJsIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,22 +25,22 @@ export default function NextJsIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 dark:invert">
+          <div className="p-3 bg-neutral-800 rounded-xl">
+            <svg viewBox="0 0 128 128" className="w-10 h-10 invert">
               <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Next.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Using App Router (Recommended)</h3>
           <p>
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 10ece2f..4be357a 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -93,9 +93,9 @@ export default function IntegrationsPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -109,14 +109,14 @@ export default function IntegrationsPage() {
         >
           {/* * --- Title with count badge --- */}
           <div className="flex items-center justify-center gap-3 mb-6">
-            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
               Integrations
             </h1>
             <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-brand-orange/10 text-brand-orange border border-brand-orange/20">
               {integrations.length}+
             </span>
           </div>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
             Connect Pulse with {integrations.length}+ frameworks and platforms in minutes.
           </p>
 
@@ -143,12 +143,12 @@ export default function IntegrationsPage() {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search integrations..."
-              className="w-full pl-12 pr-16 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
+              className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-neutral-800 rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
             />
             {query ? (
               <button
                 onClick={() => setQuery('')}
-                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 hover:text-neutral-300 transition-colors"
                 aria-label="Clear search"
               >
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
@@ -157,7 +157,7 @@ export default function IntegrationsPage() {
               </button>
             ) : (
               <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
-                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-200/80 dark:bg-neutral-700/80 text-neutral-500 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600">
+                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-700/80 text-neutral-400 border border-neutral-600">
                   /
                 </kbd>
               </div>
@@ -169,7 +169,7 @@ export default function IntegrationsPage() {
             <motion.p
               initial={{ opacity: 0, y: -5 }}
               animate={{ opacity: 1, y: 0 }}
-              className="text-sm text-neutral-500 dark:text-neutral-400 mt-3"
+              className="text-sm text-neutral-400 mt-3"
             >
               {totalResults} {totalResults === 1 ? 'integration' : 'integrations'} found
               {query && <> for &ldquo;{query}&rdquo;</>}
@@ -189,7 +189,7 @@ export default function IntegrationsPage() {
             className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
               activeCategory === 'all'
                 ? 'bg-brand-orange text-white shadow-sm'
-                : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
             }`}
           >
             All
@@ -201,7 +201,7 @@ export default function IntegrationsPage() {
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
                 activeCategory === cat
                   ? 'bg-brand-orange text-white shadow-sm'
-                  : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                  : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
               }`}
             >
               {categoryLabels[cat]}
@@ -226,7 +226,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
                   >
                     <svg className="w-5 h-5 text-brand-orange" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.33L10 13.27l-4.77 2.5.91-5.33L2.27 6.67l5.34-.78L10 1z" />
@@ -245,12 +245,12 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration!.id}`}
-                          className="group flex items-center gap-3 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
+                          className="group flex items-center gap-3 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
                         >
-                          <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
+                          <div className="p-2 bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
                             {integration!.icon}
                           </div>
-                          <span className="font-semibold text-neutral-900 dark:text-white text-sm">
+                          <span className="font-semibold text-white text-sm">
                             {integration!.name}
                           </span>
                         </Link>
@@ -268,7 +268,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase"
                   >
                     {group.label}
                   </motion.h2>
@@ -284,19 +284,19 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration.id}`}
-                          className="group relative p-6 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                          className="group relative p-6 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
                         >
                           <div className="flex items-start justify-between mb-6">
-                            <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
+                            <div className="p-3 bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
                               {integration.icon}
                             </div>
                             <ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
                           </div>
 
-                          <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+                          <h3 className="text-xl font-bold text-white mb-3">
                             {integration.name}
                           </h3>
-                          <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
+                          <p className="text-neutral-400 leading-relaxed mb-4">
                             {integration.description}
                           </p>
                           <span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
@@ -317,20 +317,20 @@ export default function IntegrationsPage() {
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.95 }}
               transition={{ duration: 0.3 }}
-              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
             >
-              <div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
+              <div className="p-4 bg-neutral-800 rounded-full mb-4">
                 <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+              <h3 className="text-xl font-bold text-white mb-2">
                 Missing something?
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-1">
+              <p className="text-neutral-400 text-sm mb-1">
                 No integrations found for &ldquo;{query}&rdquo;.
               </p>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
+              <p className="text-neutral-400 text-sm mb-5">
                 Let us know which integration you&apos;d like to see next.
               </p>
               <a
@@ -350,12 +350,12 @@ export default function IntegrationsPage() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
           >
-            <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-xl font-bold text-white mb-2">
               Missing something?
             </h3>
-            <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
+            <p className="text-neutral-400 text-sm mb-4">
               Let us know which integration you&apos;d like to see next.
             </p>
             <a
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index 789a819..a783174 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -8,9 +8,9 @@ export default function ReactIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,23 +25,23 @@ export default function ReactIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
               <path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
               <circle cx="64" cy="64" r="10.6" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             React Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index a33e528..013f6b9 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -8,9 +8,9 @@ export default function VueIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,23 +25,23 @@ export default function VueIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
               <path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
               <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Vue.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index d38f11b..98f9f6f 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -8,9 +8,9 @@ export default function WordPressIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,22 +25,22 @@ export default function WordPressIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
               <path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             WordPress Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: Using a Plugin (Easiest)</h3>
           <ol>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 25db689..924cc99 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -8,19 +8,19 @@ export default function NotFound() {
       <div className="absolute inset-0 -z-10 pointer-events-none">
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="text-center px-4 z-10">
-        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500 mb-4">
+        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
           404
         </h1>
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-2xl font-bold text-white mb-6">
           Page not found
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
+        <p className="text-lg text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
           Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
         </p>
 
diff --git a/app/page.tsx b/app/page.tsx
index 60e48fb..4f84a39 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -27,14 +27,14 @@ function DashboardPreview() {
         initial={{ opacity: 0, y: 40 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.7, delay: 0.4 }}
-        className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl overflow-hidden"
+        className="relative rounded-xl border border-neutral-800/50 shadow-2xl overflow-hidden"
       >
         {/* * Browser chrome */}
-        <div className="h-8 bg-neutral-100 dark:bg-neutral-800/80 border-b border-neutral-200 dark:border-white/5 flex items-center px-4 gap-2">
+        <div className="h-8 bg-neutral-800/80 border-b border-white/5 flex items-center px-4 gap-2">
           <div className="w-3 h-3 rounded-full bg-red-400/60" />
           <div className="w-3 h-3 rounded-full bg-yellow-400/60" />
           <div className="w-3 h-3 rounded-full bg-green-400/60" />
-          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-200 dark:bg-neutral-700/50" />
+          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-700/50" />
         </div>
 
         {/* * Screenshot with bottom fade */}
@@ -47,7 +47,7 @@ function DashboardPreview() {
             className="w-full h-auto object-cover object-top"
             priority
           />
-          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-white dark:to-neutral-950" />
+          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-neutral-950" />
         </div>
       </motion.div>
     </div>
@@ -59,28 +59,28 @@ function ComparisonSection() {
   return (
     <div className="w-full max-w-4xl mx-auto mb-32">
       <div className="text-center mb-12">
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
+        <h2 className="text-2xl font-bold text-white mb-4">Why choose Pulse?</h2>
         <p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
       </div>
 
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
+      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
+            <tr className="border-b border-neutral-800">
               <th className="p-6 text-sm font-medium text-neutral-500">Feature</th>
               <th className="p-6 text-sm font-bold text-brand-orange">Pulse</th>
               <th className="p-6 text-sm font-medium text-neutral-500">Google Analytics</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+          <tbody className="divide-y divide-neutral-800">
             {[
               { feature: "Cookie Banner Required", pulse: false, ga: true },
               { feature: "GDPR Compliant", pulse: true, ga: "Complex" },
               { feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" },
               { feature: "Data Ownership", pulse: "Yours", ga: "Google's" },
             ].map((row) => (
-              <tr key={row.feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-6 text-neutral-900 dark:text-white font-medium">{row.feature}</td>
+              <tr key={row.feature} className="hover:bg-neutral-800/50 transition-colors">
+                <td className="p-6 text-white font-medium">{row.feature}</td>
                 <td className="p-6">
                   {row.pulse === true ? (
                     <CheckCircleIcon className="w-5 h-5 text-green-500" />
@@ -237,10 +237,10 @@ export default function HomePage() {
         {/* * --- 1. ATMOSPHERE (Background) --- */}
         <div className="absolute inset-0 -z-10 pointer-events-none">
           {/* * Bottom-right Neutral Glow */}
-          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
           {/* * Grid Pattern with Radial Mask */}
           <div 
-            className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+            className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
             style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
           />
         </div>
@@ -266,7 +266,7 @@ export default function HomePage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
+              className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6"
             >
               Simple analytics for <br />
               <span className="relative inline-block">
@@ -283,7 +283,7 @@ export default function HomePage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.2 }}
-              className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
+              className="text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
             >
               Respect your users' privacy while getting the insights you need. 
               No cookies, no IP tracking, fully GDPR compliant.
@@ -326,8 +326,8 @@ export default function HomePage() {
                 <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
                   <feature.icon className="w-6 h-6" />
                 </div>
-                <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
+                <p className="text-neutral-400 leading-relaxed">
                   {feature.desc}
                 </p>
               </motion.div>
@@ -345,7 +345,7 @@ export default function HomePage() {
             transition={{ duration: 0.5 }}
             className="text-center mb-20"
           >
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
+            <h2 className="text-2xl font-bold text-white mb-6">Ready to switch?</h2>
             <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
               Start your free trial
             </Button>
@@ -365,8 +365,8 @@ export default function HomePage() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       {showFinishSetupBanner && (
-        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/5 px-4 py-3 dark:bg-brand-orange/10">
-          <p className="text-sm text-neutral-700 dark:text-neutral-300">
+        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
+          <p className="text-sm text-neutral-300">
             Finish setting up your workspace and add your first site.
           </p>
           <div className="flex items-center gap-2 flex-shrink-0">
@@ -381,7 +381,7 @@ export default function HomePage() {
                 if (typeof window !== 'undefined') localStorage.setItem('pulse_welcome_completed', 'true')
                 setShowFinishSetupBanner(false)
               }}
-              className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 p-1 rounded"
+              className="text-neutral-500 hover:text-neutral-400 p-1 rounded"
               aria-label="Dismiss"
             >
               <XIcon className="h-4 w-4" />
@@ -392,8 +392,8 @@ export default function HomePage() {
 
       <div className="mb-8 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
-          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
+          <h1 className="text-2xl font-bold text-white">Your Sites</h1>
+          <p className="mt-1 text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
         </div>
         {(() => {
           const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
@@ -401,7 +401,7 @@ export default function HomePage() {
           return atLimit ? (
           <div>
             <div className="flex items-center gap-3">
-              <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
+              <span className="text-sm font-medium text-neutral-400 bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-700">
                 Limit reached ({sites.length}/{siteLimit})
               </span>
               <Link href="/pricing">
@@ -411,7 +411,7 @@ export default function HomePage() {
               </Link>
             </div>
             {deletedSites.length > 0 && (
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+              <p className="text-sm text-neutral-400 mt-2">
                 You have a site pending deletion. Restore it or permanently delete it to free the slot.
               </p>
             )}
@@ -428,26 +428,26 @@ export default function HomePage() {
 
       {/* * Global Overview - min-h ensures no layout shift when Plan & usage loads */}
       <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Sites</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">{sites.length}</p>
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Sites</p>
+          <p className="text-2xl font-bold text-white">{sites.length}</p>
         </div>
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Visitors (24h)</p>
+          <p className="text-2xl font-bold text-white">
             {sites.length === 0 || Object.keys(siteStats).length < sites.length
               ? '--'
               : Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
           </p>
         </div>
-        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
+        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-brand-orange/10 p-4">
           <p className="text-sm text-brand-orange">Plan & usage</p>
           {subscriptionLoading ? (
             <div className="animate-pulse space-y-2">
-              <div className="h-6 w-24 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-full rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-3/4 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-20 rounded bg-brand-orange/25 dark:bg-brand-orange/20 pt-2" />
+              <div className="h-6 w-24 rounded bg-brand-orange/20" />
+              <div className="h-4 w-full rounded bg-brand-orange/20" />
+              <div className="h-4 w-3/4 rounded bg-brand-orange/20" />
+              <div className="h-4 w-20 rounded bg-brand-orange/20 pt-2" />
             </div>
           ) : subscription ? (
             <>
@@ -464,7 +464,7 @@ export default function HomePage() {
                 })()}
               </p>
               {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
-                <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
+                <p className="text-sm text-neutral-400 mt-1">
                   {typeof subscription.sites_count === 'number' && (
                     <span>Sites: {(() => {
                       const limit = getSitesLimitForPlan(subscription.plan_id)
@@ -512,12 +512,12 @@ export default function HomePage() {
       </div>
 
       {!sitesLoading && sites.length === 0 && (
-        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/5 p-6 text-center dark:bg-brand-orange/10">
+        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-6 text-center">
           <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/20 text-brand-orange mb-4">
             <GlobeIcon className="h-7 w-7" />
           </div>
-          <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Add your first site</h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+          <h2 className="text-xl font-bold text-white mb-2">Add your first site</h2>
+          <p className="text-neutral-400 mb-6 max-w-md mx-auto">
             Connect a domain to start collecting privacy-friendly analytics. You can add more sites later from the dashboard.
           </p>
           <Link href="/sites/new">
@@ -553,31 +553,31 @@ export default function HomePage() {
 
       {deletedSites.length > 0 && (
         <div className="mt-8">
-          <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
+          <h3 className="text-sm font-medium text-neutral-400 mb-4">Scheduled for Deletion</h3>
           <div className="space-y-3">
             {deletedSites.map((site) => {
               const purgeAt = site.deleted_at ? new Date(new Date(site.deleted_at).getTime() + 7 * 24 * 60 * 60 * 1000) : null
               const daysLeft = purgeAt ? Math.max(0, Math.ceil((purgeAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : 0
 
               return (
-                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 opacity-60">
+                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-900/50 opacity-60">
                   <div>
-                    <span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
+                    <span className="font-medium text-neutral-300">{site.name}</span>
                     <span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
-                    <span className="ml-3 inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                    <span className="ml-3 inline-flex items-center rounded-full bg-red-900/20 px-2 py-0.5 text-xs font-medium text-red-400">
                       Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}
                     </span>
                   </div>
                   <div className="flex gap-2">
                     <button
                       onClick={() => handleRestore(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-neutral-300 border border-neutral-700 rounded-lg hover:bg-neutral-800 transition-colors"
                     >
                       Restore
                     </button>
                     <button
                       onClick={() => handlePermanentDelete(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-red-400 border border-red-900 rounded-lg hover:bg-red-900/20 transition-colors"
                     >
                       Delete Now
                     </button>
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index f31aa18..5ff3cbe 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -19,8 +19,8 @@ export default function PricingPage() {
       <Suspense fallback={
         <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-16">
           <div className="text-center mb-12">
-            <div className="h-10 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto mb-4" />
-            <div className="h-5 w-96 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto" />
+            <div className="h-10 w-64 animate-pulse rounded bg-neutral-800 mx-auto mb-4" />
+            <div className="h-5 w-96 animate-pulse rounded bg-neutral-800 mx-auto" />
           </div>
           <PricingCardsSkeleton />
         </div>
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index c309f63..390ce92 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -39,9 +39,9 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -56,18 +56,18 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             {headerIcon}
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-white">
             {integration.name} Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
+        <div className="prose prose-invert max-w-none">
           {children}
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
           <h3>Optional: Frustration Tracking</h3>
           <p>
             Detect rage clicks and dead clicks by adding the frustration tracking
@@ -82,8 +82,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
 
         {/* * --- Related Integrations --- */}
         {relatedIntegrations.length > 0 && (
-          <div className="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800">
-            <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-6">
+          <div className="mt-16 pt-10 border-t border-neutral-800">
+            <h2 className="text-xl font-bold text-white mb-6">
               Related Integrations
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -91,16 +91,16 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
                 <Link
                   key={related.id}
                   href={`/integrations/${related.id}`}
-                  className="group flex items-center gap-4 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300"
+                  className="group flex items-center gap-4 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300"
                 >
-                  <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
+                  <div className="p-2 bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
                     {related.icon}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <span className="font-semibold text-neutral-900 dark:text-white block">
+                    <span className="font-semibold text-white block">
                       {related.name}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 truncate block">
+                    <span className="text-sm text-neutral-400 truncate block">
                       {related.description}
                     </span>
                   </div>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 8205816..51f5ef8 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -219,10 +219,10 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
+        <h2 className="text-3xl font-bold text-white mb-4">
           Transparent Pricing
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400">
+        <p className="text-lg text-neutral-400">
           Scale with your traffic. No hidden fees.
         </p>
       </motion.div>
@@ -232,13 +232,13 @@ export default function PricingSection() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
+        className="max-w-6xl mx-auto border border-neutral-800 rounded-2xl bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
       >
         
         {/* Top Toolbar */}
-        <div className="p-6 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
+        <div className="p-6 border-b border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-900/50">
           <div className="w-full md:w-2/3">
-            <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">
+            <div className="flex justify-between text-sm font-medium text-neutral-400 mb-4">
               <span>10k</span>
               <span className="text-brand-orange font-bold text-lg">
                 Up to {currentTraffic.label} monthly pageviews
@@ -254,23 +254,23 @@ export default function PricingSection() {
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
               aria-label="Monthly pageview limit"
               aria-valuetext={`${currentTraffic.label} pageviews per month`}
-              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+              className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
             />
           </div>
 
           <div className="flex flex-col items-end gap-2 shrink-0">
-            <span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
+            <span className="text-xs text-neutral-400 font-medium uppercase tracking-wide">
               Get 1 month free with yearly
             </span>
-            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
+            <div className="bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
               <button
                 onClick={() => setIsYearly(false)}
                 role="radio"
                 aria-checked={!isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   !isYearly
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Monthly
@@ -281,8 +281,8 @@ export default function PricingSection() {
                 aria-checked={isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   isYearly
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Yearly
@@ -292,15 +292,15 @@ export default function PricingSection() {
         </div>
 
         {/* Pricing Grid */}
-        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">
+        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-800">
           {/* Free Plan */}
-          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50">
+          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-800/50">
             <div className="mb-8">
-              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Free</h3>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
+              <h3 className="text-lg font-bold text-white mb-2">Free</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
               <div className="flex items-baseline gap-1">
-                <span className="text-4xl font-bold text-neutral-900 dark:text-white">€0</span>
-                <span className="text-neutral-500 dark:text-neutral-400 font-medium">/forever</span>
+                <span className="text-4xl font-bold text-white">€0</span>
+                <span className="text-neutral-400 font-medium">/forever</span>
               </div>
             </div>
 
@@ -320,7 +320,7 @@ export default function PricingSection() {
 
             <ul className="space-y-4 flex-grow">
               {['1 site', '5k monthly pageviews', '6 months data retention', '100% Data ownership'].map((feature) => (
-                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 shrink-0 text-neutral-400" />
                   <span>{feature}</span>
                 </li>
@@ -333,7 +333,7 @@ export default function PricingSection() {
             const isTeam = plan.id === 'team'
 
             return (
-              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-800/50'}`}>
                 {isTeam && (
                   <>
                     <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
@@ -344,17 +344,17 @@ export default function PricingSection() {
                 )}
                 
                 <div className="mb-8">
-                  <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
+                  <h3 className="text-lg font-bold text-white mb-2">{plan.name}</h3>
+                  <p className="text-sm text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
                   
                   {priceDetails ? (
                     isYearly ? (
                       <div>
                         <div className="flex items-baseline gap-1">
-                          <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                          <span className="text-4xl font-bold text-white">
                             €{priceDetails.yearlyTotal}
                           </span>
-                          <span className="text-neutral-500 dark:text-neutral-400 font-medium">/year</span>
+                          <span className="text-neutral-400 font-medium">/year</span>
                         </div>
                         <div className="flex items-center gap-2 mt-2 text-sm font-medium">
                           <span className="text-neutral-400 line-through decoration-neutral-400">
@@ -367,14 +367,14 @@ export default function PricingSection() {
                       </div>
                     ) : (
                       <div className="flex items-baseline gap-1">
-                        <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                        <span className="text-4xl font-bold text-white">
                           €{priceDetails.baseMonthly}
                         </span>
-                        <span className="text-neutral-500 dark:text-neutral-400 font-medium">/mo</span>
+                        <span className="text-neutral-400 font-medium">/mo</span>
                       </div>
                     )
                   ) : (
-                    <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+                    <div className="text-4xl font-bold text-white">
                       Custom
                     </div>
                   )}
@@ -391,7 +391,7 @@ export default function PricingSection() {
 
                 <ul className="space-y-4 flex-grow">
                   {plan.features.map((feature) => (
-                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                       <CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
                       <span>{feature}</span>
                     </li>
@@ -402,11 +402,11 @@ export default function PricingSection() {
           })}
 
           {/* Enterprise Section */}
-          <div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+          <div className="p-6 bg-neutral-900/50 flex flex-col">
             <div className="mb-8">
-              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
-              <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+              <h3 className="text-lg font-bold text-white mb-2">Enterprise</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
+              <div className="text-4xl font-bold text-white">
                 Custom
               </div>
             </div>
@@ -428,7 +428,7 @@ export default function PricingSection() {
                 'Managed Proxy',
                 'Raw data export'
               ].map((feature) => (
-                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
                   <span>{feature}</span>
                 </li>