diff --git a/src/pages/index.astro b/src/pages/index.astro
index 08c85ed..e539e0e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,53 +2,91 @@
 import Layout from '../layouts/Layout.astro';
 import PublicHeader from '../components/PublicHeader.astro';
 import ComparisonSection from '../components/ComparisonSection.astro';
+// Test deployment script - 2025-01-12
 ---
 
 <Layout title="Black Canyon Tickets - Premium Event Ticketing Platform">
   <div class="min-h-screen relative overflow-hidden">
     <!-- Premium Hero Background with Animated Gradients -->
-    <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-900">
+    <div class="absolute inset-0" style="background: var(--bg-gradient);">
       <!-- Animated Background Elements -->
-      <div class="absolute inset-0 opacity-20">
-        <div class="absolute top-20 left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full blur-3xl animate-pulse"></div>
-        <div class="absolute bottom-20 right-20 w-96 h-96 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full blur-3xl animate-pulse delay-1000"></div>
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full blur-3xl animate-pulse delay-500"></div>
+      <div class="absolute inset-0 opacity-30">
+        <!-- Large flowing orbs -->
+        <div class="absolute top-16 left-16 w-80 h-80 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-1); animation-duration: 20s;"></div>
+        <div class="absolute bottom-16 right-16 w-96 h-96 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-2); animation-duration: 25s; animation-delay: -5s;"></div>
+        <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-3); animation-duration: 18s; animation-delay: -10s;"></div>
+        <div class="absolute bottom-1/3 left-1/4 w-64 h-64 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-4); animation-duration: 22s; animation-delay: -15s;"></div>
+        <div class="absolute top-2/3 left-1/2 w-56 h-56 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-5); animation-duration: 16s; animation-delay: -8s;"></div>
+        
+        <!-- Smaller accent orbs -->
+        <div class="absolute top-1/4 left-3/4 w-32 h-32 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-1); animation-duration: 3s;"></div>
+        <div class="absolute bottom-1/4 left-1/3 w-24 h-24 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-2); animation-duration: 4s; animation-delay: -1s;"></div>
+        <div class="absolute top-3/4 right-1/3 w-40 h-40 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-3); animation-duration: 5s; animation-delay: -2s;"></div>
       </div>
       
       <!-- Geometric Patterns -->
-      <div class="absolute inset-0 opacity-10">
-        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+      <div class="absolute inset-0" style="opacity: var(--grid-opacity, 0.1);">
+        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
           <defs>
-            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
-              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
+            <!-- Fine grid pattern -->
+            <pattern id="grid" width="3" height="3" patternUnits="userSpaceOnUse">
+              <path d="M 3 0 L 0 0 0 3" fill="none" stroke="currentColor" stroke-width="0.2" style="color: var(--grid-pattern);"/>
+            </pattern>
+            <!-- Dots pattern -->
+            <pattern id="dots" width="8" height="8" patternUnits="userSpaceOnUse">
+              <circle cx="4" cy="4" r="0.5" fill="currentColor" style="color: var(--grid-pattern); opacity: 0.3;"/>
+            </pattern>
+            <!-- Diagonal lines -->
+            <pattern id="diagonals" width="10" height="10" patternUnits="userSpaceOnUse">
+              <path d="M 0 10 L 10 0" stroke="currentColor" stroke-width="0.1" style="color: var(--grid-pattern); opacity: 0.2;"/>
             </pattern>
           </defs>
           <rect width="100" height="100" fill="url(#grid)" />
+          <rect width="100" height="100" fill="url(#dots)" />
+          <rect width="100" height="100" fill="url(#diagonals)" />
         </svg>
       </div>
+      
+      <!-- Premium geometric shapes -->
+      <div class="absolute inset-0 opacity-10">
+        <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-purple-400 rounded-full animate-ping" style="animation-duration: 4s;"></div>
+        <div class="absolute top-3/4 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-ping" style="animation-duration: 6s; animation-delay: -2s;"></div>
+        <div class="absolute bottom-1/4 left-3/4 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping" style="animation-duration: 5s; animation-delay: -4s;"></div>
+        
+        <!-- Floating geometric shapes -->
+        <div class="absolute top-1/3 right-1/5 w-8 h-8 border border-purple-300 rounded rotate-45 animate-spin" style="animation-duration: 30s;"></div>
+        <div class="absolute bottom-1/3 left-1/6 w-6 h-6 border border-blue-300 rounded-full animate-spin" style="animation-duration: 25s; animation-direction: reverse;"></div>
+        <div class="absolute top-2/3 right-2/5 w-4 h-4 bg-gradient-to-r from-purple-400 to-blue-400 rounded-sm animate-bounce" style="animation-duration: 8s;"></div>
+      </div>
     </div>
 
     <!-- Navigation -->
     <PublicHeader />
+    
 
     <!-- Hero Section -->
     <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24 lg:pt-40 lg:pb-32">
       <div class="text-center">
         <!-- Badge -->
-        <div class="inline-flex items-center px-4 py-2 rounded-full bg-white/10 backdrop-blur-lg border border-white/20 mb-8">
-          <span class="text-sm font-medium text-white/90">✨ Premium Event Ticketing Platform</span>
+        <div class="inline-flex items-center px-4 py-2 rounded-full backdrop-blur-lg mb-8" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
+          <span class="text-sm font-medium flex items-center gap-2" style="color: var(--glass-text-secondary);">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+            </svg>
+            Premium Event Ticketing Platform
+          </span>
         </div>
         
         <!-- Main Heading -->
-        <h1 class="text-5xl lg:text-7xl font-light text-white mb-6 tracking-tight">
+        <h1 class="text-5xl lg:text-7xl font-light mb-6 tracking-tight" style="color: var(--glass-text-primary);">
           Premium Ticketing for
-          <span class="font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          <span class="font-bold" style="color: var(--glass-text-accent);">
             Colorado's Elite
           </span>
         </h1>
         
         <!-- Subheading -->
-        <p class="text-xl lg:text-2xl text-white/80 mb-12 max-w-3xl mx-auto leading-relaxed">
+        <p class="text-xl lg:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed" style="color: var(--glass-text-secondary);">
           Elegant self-service platform designed for upscale venues, prestigious events, and discerning organizers
         </p>
         
@@ -57,23 +95,23 @@ import ComparisonSection from '../components/ComparisonSection.astro';
           <a href="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl">
             Start Selling Tickets
           </a>
-          <a href="/calendar" class="text-white/80 hover:text-white px-8 py-4 rounded-xl font-semibold text-lg transition-colors border border-white/20 hover:border-white/40">
+          <a href="/calendar" class="backdrop-blur-xl px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105" style="background: var(--glass-bg-button); border: 1px solid var(--glass-border); color: var(--glass-text-primary);">
             View Events
           </a>
         </div>
         
         <!-- Feature Points -->
-        <div class="flex flex-wrap justify-center gap-6 text-sm text-white/70">
+        <div class="flex flex-wrap justify-center gap-6 text-sm" style="color: var(--glass-text-tertiary);">
           <span class="flex items-center">
-            <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
+            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
             No setup fees
           </span>
           <span class="flex items-center">
-            <span class="w-2 h-2 bg-purple-400 rounded-full mr-2"></span>
+            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
             Instant payouts
           </span>
           <span class="flex items-center">
-            <span class="w-2 h-2 bg-pink-400 rounded-full mr-2"></span>
+            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
             Mobile-first design
           </span>
         </div>
@@ -84,13 +122,13 @@ import ComparisonSection from '../components/ComparisonSection.astro';
     <section id="features" class="relative z-10 py-20 lg:py-32">
       <div class="container mx-auto px-4">
         <div class="text-center mb-16">
-          <h3 class="text-3xl lg:text-5xl font-light text-white mb-6">
+          <h3 class="text-3xl lg:text-5xl font-light mb-6" style="color: var(--glass-text-primary);">
             Why Choose
-            <span class="font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+            <span class="font-bold" style="color: var(--glass-text-accent);">
               Black Canyon
             </span>
           </h3>
-          <p class="text-lg text-white/80 max-w-2xl mx-auto">
+          <p class="text-lg max-w-2xl mx-auto" style="color: var(--glass-text-secondary);">
             Built specifically for Colorado's premium venues and high-end events
           </p>
         </div>
@@ -99,57 +137,65 @@ import ComparisonSection from '../components/ComparisonSection.astro';
         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
           
           <!-- Quick Setup Tile -->
-          <div class="group bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20 text-center hover:bg-white/15 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-xl">💡</span>
+          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--glass-text-accent);">
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
+              </svg>
             </div>
-            <h4 class="text-xl font-semibold text-white mb-2">Quick Setup</h4>
-            <p class="text-white/70 text-sm mb-4">
+            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Quick Setup</h4>
+            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
               Create professional events in minutes with our intuitive dashboard
             </p>
-            <button class="text-blue-400 hover:text-blue-300 font-medium text-sm transition-colors">
+            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
               Learn More
             </button>
           </div>
           
           <!-- Real Experience Tile -->
-          <div class="group bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20 text-center hover:bg-white/15 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-xl">🎯</span>
+          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--success-color);">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+              </svg>
             </div>
-            <h4 class="text-xl font-semibold text-white mb-2">Built by Event Pros</h4>
-            <p class="text-white/70 text-sm mb-4">
+            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Built by Event Pros</h4>
+            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
               Created by people who've actually worked ticket gates and run events
             </p>
-            <button class="text-blue-400 hover:text-blue-300 font-medium text-sm transition-colors">
+            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
               Learn More
             </button>
           </div>
           
           <!-- Analytics Tile -->
-          <div class="group bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20 text-center hover:bg-white/15 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-xl">📊</span>
+          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--premium-gold);">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
             </div>
-            <h4 class="text-xl font-semibold text-white mb-2">Live Analytics</h4>
-            <p class="text-white/70 text-sm mb-4">
+            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Live Analytics</h4>
+            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
               Real-time sales tracking with comprehensive reporting
             </p>
-            <button class="text-blue-400 hover:text-blue-300 font-medium text-sm transition-colors">
+            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
               Learn More
             </button>
           </div>
           
           <!-- Human Support Tile -->
-          <div class="group bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20 text-center hover:bg-white/15 transition-all duration-300 hover:transform hover:scale-105">
-            <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-xl">🤝</span>
+          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--warning-color);">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
             </div>
-            <h4 class="text-xl font-semibold text-white mb-2">Real Human Support</h4>
-            <p class="text-white/70 text-sm mb-4">
+            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Real Human Support</h4>
+            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
               Actual humans help you before and during your event
             </p>
-            <button class="text-blue-400 hover:text-blue-300 font-medium text-sm transition-colors">
+            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
               Get Help
             </button>
           </div>
@@ -165,16 +211,16 @@ import ComparisonSection from '../components/ComparisonSection.astro';
     <section class="relative z-10 py-20">
       <div class="container mx-auto px-4 text-center">
         <div class="max-w-3xl mx-auto">
-          <h3 class="text-3xl lg:text-5xl font-light text-white mb-6">
+          <h3 class="text-3xl lg:text-5xl font-light mb-6" style="color: var(--glass-text-primary);">
             Ready to
-            <span class="font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+            <span class="font-bold" style="color: var(--glass-text-accent);">
               Get Started?
             </span>
           </h3>
-          <p class="text-xl text-white/80 mb-8">
+          <p class="text-xl mb-8" style="color: var(--glass-text-secondary);">
             Join Colorado's most prestigious venues and start selling tickets today
           </p>
-          <a href="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl">
+          <a href="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl backdrop-blur-xl">
             Create Your Account
           </a>
         </div>
@@ -211,4 +257,33 @@ import ComparisonSection from '../components/ComparisonSection.astro';
   .delay-500 {
     animation-delay: 0.5s;
   }
-</style>
\ No newline at end of file
+  
+</style>
+
+<script>
+  // Force dark mode for this page - no theme toggle allowed
+  document.documentElement.setAttribute('data-theme', 'dark');
+  document.documentElement.classList.add('dark');
+  document.documentElement.classList.remove('light');
+  
+  // Override any global theme logic for this page
+  (window as any).__FORCE_DARK_MODE__ = true;
+  
+  // Prevent theme changes on this page
+  if (window.localStorage) {
+    const originalTheme = localStorage.getItem('theme');
+    if (originalTheme && originalTheme !== 'dark') {
+      sessionStorage.setItem('originalTheme', originalTheme);
+    }
+    localStorage.setItem('theme', 'dark');
+  }
+  
+  // Block any theme toggle attempts
+  window.addEventListener('themeChanged', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  }, true);
+</script>
\ No newline at end of file