diff --git a/index.html b/index.html
index 5ae68e0..c7b2b99 100644
--- a/index.html
+++ b/index.html
@@ -9,187 +9,22 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
         
-        /* ============================================
-           COLOR PALETTE - NEW SCHEME
-           ============================================ */
         :root {
-            /* Light Mode Colors */
-            --light-background: #F0F9FF;
-            --light-surface: #FFFFFF;
-            --light-primary-text: #1E293B;
-            --light-secondary-text: #64748B;
-            --light-accent-primary: #7DD3FC;
-            --light-accent-neural: #818CF8;
-            --light-border: #E2E8F0;
-            
-            /* Dark Mode Colors */
-            --dark-background: #0F172A;
-            --dark-surface: #1E293B;
-            --dark-primary-text: #F8FAFC;
-            --dark-secondary-text: #94A3B8;
-            --dark-accent-primary: #38BDF8;
-            --dark-accent-neural: #A5B4FC;
-            --dark-border: #334155;
-            
-            /* Active theme (dark by default) */
-            --background: var(--dark-background);
-            --surface: var(--dark-surface);
-            --primary-text: var(--dark-primary-text);
-            --secondary-text: var(--dark-secondary-text);
-            --accent-primary: var(--dark-accent-primary);
-            --accent-neural: var(--dark-accent-neural);
-            --border: var(--dark-border);
+            --tw-color-primary: #00f0c8;
         }
         
         * {
-            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, transform, opacity, box-shadow;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 300ms;
+            transition-duration: 150ms;
         }
         
-        body {
-            background: var(--background);
-            color: var(--primary-text);
-        }
-        
-        /* ============================================
-           HERO BACKGROUND WITH ANIMATED GRADIENTS
-           ============================================ */
         .hero-bg {
-            background: 
-                radial-gradient(ellipse 80% 50% at 20% 40%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
-                radial-gradient(ellipse 60% 40% at 80% 20%, rgba(165, 180, 252, 0.12) 0%, transparent 50%),
-                radial-gradient(ellipse 50% 80% at 60% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
-                var(--background);
-            position: relative;
-            overflow: hidden;
+            background: radial-gradient(circle at 30% 20%, rgba(0, 240, 200, 0.15) 0%, transparent 70%),
+                        radial-gradient(circle at 70% 80%, rgba(0, 240, 200, 0.1) 0%, transparent 70%);
         }
         
-        .hero-bg::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
-                    rgba(56, 189, 248, 0.1) 0%, 
-                    transparent 40%);
-            pointer-events: none;
-            z-index: 0;
-        }
-        
-        /* ============================================
-           ANIMATED GRADIENT BACKGROUND
-           ============================================ */
-        .animated-gradient {
-            background: linear-gradient(
-                -45deg,
-                rgba(56, 189, 248, 0.1),
-                rgba(165, 180, 252, 0.1),
-                rgba(56, 189, 248, 0.05),
-                rgba(165, 180, 252, 0.15)
-            );
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
-        }
-        
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        
-        /* ============================================
-           PARTICLE SYSTEM
-           ============================================ */
-        .particles-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 1;
-            overflow: hidden;
-        }
-        
-        .particle {
-            position: absolute;
-            width: 4px;
-            height: 4px;
-            background: var(--accent-primary);
-            border-radius: 50%;
-            opacity: 0;
-            animation: particleFloat 20s infinite;
-        }
-        
-        .particle:nth-child(odd) {
-            background: var(--accent-neural);
-        }
-        
-        @keyframes particleFloat {
-            0% {
-                opacity: 0;
-                transform: translateY(100vh) scale(0);
-            }
-            10% {
-                opacity: 0.6;
-            }
-            90% {
-                opacity: 0.6;
-            }
-            100% {
-                opacity: 0;
-                transform: translateY(-100vh) scale(1);
-            }
-        }
-        
-        /* ============================================
-           FLOATING LOGO ANIMATION (ENHANCED)
-           ============================================ */
-        .logo-float {
-            animation: floatBalloon 4s ease-in-out infinite;
-        }
-        
-        @keyframes floatBalloon {
-            0%, 100% { 
-                transform: translateY(0px) rotate(0deg) scale(1); 
-                filter: drop-shadow(0 25px 50px rgba(56, 189, 248, 0.3));
-            }
-            25% {
-                transform: translateY(-15px) rotate(2deg) scale(1.02);
-            }
-            50% { 
-                transform: translateY(-25px) rotate(3deg) scale(1.05); 
-                filter: drop-shadow(0 35px 60px rgba(165, 180, 252, 0.4));
-            }
-            75% {
-                transform: translateY(-15px) rotate(1deg) scale(1.02);
-            }
-        }
-        
-        .logo-glow {
-            animation: logoGlow 3s ease-in-out infinite alternate;
-        }
-        
-        @keyframes logoGlow {
-            0% {
-                filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(56, 189, 248, 0.5));
-            }
-            100% {
-                filter: brightness(0) invert(1) drop-shadow(0 0 40px rgba(165, 180, 252, 0.8));
-            }
-        }
-        
-        .logo-invert {
-            filter: brightness(0) invert(1);
-        }
-        
-        /* ============================================
-           SCROLL-DRIVEN ANIMATIONS (ENHANCED)
-           ============================================ */
+        /* SCROLL-DRIVEN ANIMATIONS */
         .scroll-animate {
             opacity: 0;
             transform: translateY(60px);
@@ -206,520 +41,40 @@
         .scroll-animate.card-2 { transition-delay: 250ms; }
         .scroll-animate.card-3 { transition-delay: 400ms; }
         
-        /* Slide from left */
-        .scroll-animate.slide-left {
-            transform: translateX(-80px);
-        }
-        .scroll-animate.slide-left.visible {
-            transform: translateX(0);
-        }
-        
-        /* Slide from right */
-        .scroll-animate.slide-right {
-            transform: translateX(80px);
-        }
-        .scroll-animate.slide-right.visible {
-            transform: translateX(0);
-        }
-        
-        /* Scale up animation */
-        .scroll-animate.scale-up {
-            transform: scale(0.8);
-        }
-        .scroll-animate.scale-up.visible {
-            transform: scale(1);
-        }
-        
-        /* Hero logo combined animation */
-        .hero-logo {
-            animation: floatBalloon 4s ease-in-out infinite, heroEntrance 1.5s ease-out forwards;
-        }
-        
-        @keyframes heroEntrance {
-            0% {
-                opacity: 0;
-                transform: translateY(100px) scale(0.5) rotate(-10deg);
-            }
-            60% {
-                transform: translateY(-20px) scale(1.1) rotate(5deg);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0px) scale(1) rotate(0deg);
-            }
-        }
-        
-        /* ============================================
-           TEXT ANIMATIONS
-           ============================================ */
-        .text-shimmer {
-            background: linear-gradient(
-                90deg,
-                var(--primary-text) 0%,
-                var(--accent-primary) 25%,
-                var(--accent-neural) 50%,
-                var(--accent-primary) 75%,
-                var(--primary-text) 100%
-            );
-            background-size: 200% auto;
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            animation: textShimmer 4s linear infinite;
-        }
-        
-        @keyframes textShimmer {
-            0% { background-position: 0% center; }
-            100% { background-position: 200% center; }
-        }
-        
-        .text-gradient {
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        
-        /* Typewriter effect for hero subtitle */
-        .typewriter {
-            overflow: hidden;
-            border-right: 2px solid var(--accent-primary);
-            white-space: nowrap;
-            animation: typing 3.5s steps(80, end), blink-caret 0.75s step-end infinite;
-        }
-        
-        @keyframes typing {
-            from { width: 0; }
-            to { width: 100%; }
-        }
-        
-        @keyframes blink-caret {
-            from, to { border-color: transparent; }
-            50% { border-color: var(--accent-primary); }
-        }
-        
-        /* ============================================
-           BUTTON ANIMATIONS
-           ============================================ */
-        .btn-primary {
-            position: relative;
-            overflow: hidden;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
-            transition: all 0.3s ease;
-        }
-        
-        .btn-primary::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                rgba(255, 255, 255, 0.3),
-                transparent
-            );
-            transition: left 0.5s ease;
-        }
-        
-        .btn-primary:hover::before {
-            left: 100%;
-        }
-        
-        .btn-primary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 20px 40px -10px rgba(56, 189, 248, 0.4);
-        }
-        
-        .btn-secondary {
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .btn-secondary::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
-            transition: width 0.3s ease;
-        }
-        
-        .btn-secondary:hover::after {
-            width: 100%;
-        }
-        
-        .btn-secondary:hover {
-            border-color: var(--accent-primary);
-            transform: translateY(-2px);
-        }
-        
-        /* ============================================
-           CARD ANIMATIONS
-           ============================================ */
-        .benefit-card {
-            position: relative;
-            overflow: hidden;
-            background: var(--background);
-            border: 1px solid var(--border);
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        
-        .benefit-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
-            transform: scaleX(0);
-            transition: transform 0.4s ease;
-        }
-        
-        .benefit-card:hover::before {
-            transform: scaleX(1);
-        }
-        
-        .benefit-card:hover {
-            transform: translateY(-8px);
-            border-color: var(--accent-primary);
-            box-shadow: 
-                0 25px 50px -12px rgba(56, 189, 248, 0.25),
-                0 0 0 1px rgba(56, 189, 248, 0.1);
-        }
-        
-        .benefit-card .icon-container {
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        
-        .benefit-card:hover .icon-container {
-            transform: scale(1.15) rotate(5deg);
-            box-shadow: 0 10px 30px -5px rgba(56, 189, 248, 0.4);
-        }
-        
-        /* ============================================
-           PULSE/ATTENTION ANIMATIONS
-           ============================================ */
-        .pulse-ring {
-            animation: pulseRing 2s ease-out infinite;
-        }
-        
-        @keyframes pulseRing {
-            0% {
-                box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
-            }
-            70% {
-                box-shadow: 0 0 0 20px rgba(56, 189, 248, 0);
-            }
-            100% {
-                box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
-            }
-        }
-        
-        .attention-bounce {
-            animation: attentionBounce 2s ease-in-out infinite;
-        }
-        
-        @keyframes attentionBounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-5px); }
-        }
-        
-        .live-indicator {
-            animation: livePulse 1.5s ease-in-out infinite;
-        }
-        
-        @keyframes livePulse {
-            0%, 100% { 
-                opacity: 1;
-                transform: scale(1);
-            }
-            50% { 
-                opacity: 0.5;
-                transform: scale(1.2);
-            }
-        }
-        
-        /* ============================================
-           NAVBAR ANIMATIONS
-           ============================================ */
+        /* Navbar scroll effect */
         .nav-scrolled {
             background: rgba(15, 23, 42, 0.95);
-            box-shadow: 0 10px 40px -10px rgba(56, 189, 248, 0.2);
-            border-bottom-color: var(--accent-primary) !important;
+            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
         }
-        
-        .nav-link {
+
+        /* BALLOON + M STYLES (hero) */
+        .stage {
             position: relative;
-            padding-bottom: 4px;
+            width: 620px;      /* widened so the full M is visible */
+            height: 680px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
-        
-        .nav-link::after {
-            content: '';
+        .glowing-m {
             position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
-            transition: width 0.3s ease;
-        }
-        
-        .nav-link:hover::after {
-            width: 100%;
-        }
-        
-        /* ============================================
-           FORM ANIMATIONS
-           ============================================ */
-        .form-input {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            color: var(--primary-text);
-            transition: all 0.3s ease;
-        }
-        
-        .form-input:focus {
-            border-color: var(--accent-primary);
-            box-shadow: 
-                0 0 0 3px rgba(56, 189, 248, 0.1),
-                0 10px 20px -5px rgba(56, 189, 248, 0.1);
-            transform: translateY(-2px);
-        }
-        
-        .form-input::placeholder {
-            color: var(--secondary-text);
-        }
-        
-        /* ============================================
-           FOOTER ANIMATIONS
-           ============================================ */
-        .footer-link {
-            position: relative;
-            transition: color 0.3s ease;
-        }
-        
-        .footer-link::before {
-            content: '';
-            position: absolute;
-            bottom: -2px;
+            z-index: 0;
+            filter: drop-shadow(0 0 20px rgba(224, 242, 254, 0.6));
+            top: 70px;
             left: 50%;
-            width: 0;
-            height: 1px;
-            background: var(--accent-primary);
-            transition: all 0.3s ease;
             transform: translateX(-50%);
         }
-        
-        .footer-link:hover::before {
-            width: 100%;
-        }
-        
-        /* ============================================
-           RIPPLE EFFECT
-           ============================================ */
-        .ripple {
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .ripple-effect {
+        #canvas {
             position: absolute;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.4);
-            transform: scale(0);
-            animation: rippleAnimation 0.6s linear;
-            pointer-events: none;
-        }
-        
-        @keyframes rippleAnimation {
-            to {
-                transform: scale(4);
-                opacity: 0;
-            }
-        }
-        
-        /* ============================================
-           MORPHING BACKGROUND BLOBS
-           ============================================ */
-        .blob {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(60px);
-            opacity: 0.3;
-            animation: blobMorph 20s ease-in-out infinite;
-        }
-        
-        .blob-1 {
-            width: 400px;
-            height: 400px;
-            background: var(--accent-primary);
-            top: 10%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-        
-        .blob-2 {
-            width: 300px;
-            height: 300px;
-            background: var(--accent-neural);
-            top: 60%;
-            right: 10%;
-            animation-delay: -5s;
-        }
-        
-        .blob-3 {
-            width: 350px;
-            height: 350px;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
-            bottom: 10%;
-            left: 30%;
-            animation-delay: -10s;
-        }
-        
-        @keyframes blobMorph {
-            0%, 100% {
-                transform: translate(0, 0) scale(1);
-                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-            }
-            25% {
-                transform: translate(30px, -50px) scale(1.1);
-                border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
-            }
-            50% {
-                transform: translate(-20px, 20px) scale(0.9);
-                border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
-            }
-            75% {
-                transform: translate(50px, 30px) scale(1.05);
-                border-radius: 70% 30% 30% 70% / 30% 70% 70% 30%;
-            }
-        }
-        
-        /* ============================================
-           SCROLL PROGRESS INDICATOR
-           ============================================ */
-        .scroll-progress {
-            position: fixed;
+            z-index: 1;
+            background: transparent;
             top: 0;
-            left: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
-            z-index: 9999;
-            transform-origin: left;
-            transform: scaleX(0);
-        }
-        
-        /* ============================================
-           NUMBER COUNTER ANIMATION
-           ============================================ */
-        .counter {
-            display: inline-block;
-            animation: counterPop 0.5s ease-out;
-        }
-        
-        @keyframes counterPop {
-            0% {
-                transform: scale(0.5);
-                opacity: 0;
-            }
-            50% {
-                transform: scale(1.1);
-            }
-            100% {
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-        
-        /* ============================================
-           MARQUEE/TICKER ANIMATION
-           ============================================ */
-        .marquee {
-            overflow: hidden;
-        }
-        
-        .marquee-content {
-            display: flex;
-            animation: marquee 30s linear infinite;
-        }
-        
-        @keyframes marquee {
-            0% { transform: translateX(0); }
-            100% { transform: translateX(-50%); }
-        }
-        
-        /* ============================================
-           3D TILT EFFECT (JS ENHANCED)
-           ============================================ */
-        .tilt-card {
-            transform-style: preserve-3d;
-            perspective: 1000px;
-        }
-        
-        .tilt-card:hover {
-            transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
-        }
-        
-        /* ============================================
-           LOADING SKELETON
-           ============================================ */
-        .skeleton {
-            background: linear-gradient(
-                90deg,
-                var(--surface) 0%,
-                var(--border) 50%,
-                var(--surface) 100%
-            );
-            background-size: 200% 100%;
-            animation: skeleton 1.5s ease-in-out infinite;
-        }
-        
-        @keyframes skeleton {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
-        }
-        
-        /* ============================================
-           SECTION DIVIDER ANIMATION
-           ============================================ */
-        .section-divider {
-            height: 1px;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                var(--accent-primary),
-                var(--accent-neural),
-                var(--accent-primary),
-                transparent
-            );
-            background-size: 200% 100%;
-            animation: dividerFlow 3s linear infinite;
-        }
-        
-        @keyframes dividerFlow {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
+            left: 50%;
+            transform: translateX(-50%);
         }
     </style>
 </head>
 <body class="bg-slate-950 text-white font-sans">
-    <!-- Scroll Progress Indicator -->
-    <div class="scroll-progress" id="scrollProgress"></div>
-    
-    <!-- Particle System -->
-    <div class="particles-container" id="particles"></div>
-    
-    <!-- Morphing Background Blobs -->
-    <div class="blob blob-1"></div>
-    <div class="blob blob-2"></div>
-    <div class="blob blob-3"></div>
-    
     <!-- NAVBAR -->
     <nav id="navbar" class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-lg sticky top-0 z-50">
         <div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
@@ -727,32 +82,32 @@
             <a href="index.html" class="flex items-center gap-x-3">
                 <img src="logo.svg" 
                      alt="Moxiegen" 
-                     class="h-11 w-auto logo-glow"
+                     class="h-11 w-auto"
                      onerror="this.onerror=null; this.src='logo.png';">
                 <span class="font-semibold text-3xl tracking-[-1px] text-white" style="font-family: 'Space Grotesk', sans-serif;">Moxiegen</span>
             </a>
             
             <!-- Navigation -->
             <div class="flex items-center gap-x-8 text-sm font-medium">
-                <a href="#benefits" class="nav-link hover:text-[#38BDF8]">How It Works</a>
-                <a href="#moxy" class="nav-link hover:text-[#38BDF8]">See Moxy Go</a>
-                <a href="#licensing" class="nav-link hover:text-[#38BDF8]">Licensing</a>
+                <a href="#benefits" class="hover:text-emerald-400">How It Works</a>
+                <a href="#moxy" class="hover:text-emerald-400">See Moxy Go</a>
+                <a href="#licensing" class="hover:text-emerald-400">Licensing</a>
                 
                 <!-- Auth buttons -->
                 <div id="authButtons" class="flex items-center gap-x-4">
                     <!-- Login button (shown when not authenticated) -->
-                    <button id="loginBtn" onclick="login()" class="hidden ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
+                    <button id="loginBtn" onclick="login()" class="hidden px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
                         Login
                     </button>
                     
                     <!-- Dashboard button (shown when authenticated) -->
-                    <a id="dashboardBtn" href="dashboard.html" class="hidden ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
+                    <a id="dashboardBtn" href="dashboard.html" class="hidden px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
                         Dashboard
                     </a>
                 </div>
-                
+
                 <button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
-                        class="ripple px-6 py-2.5 border border-white/30 hover:border-[#38BDF8] font-semibold rounded-3xl">
+                        class="px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
                     Contact Us
                 </button>
             </div>
@@ -760,209 +115,178 @@
     </nav>
 
     <!-- HERO SECTION -->
-    <header class="hero-bg pt-16 pb-20 relative">
-        <div class="max-w-screen-2xl mx-auto px-8 relative z-10">
+    <header class="hero-bg pt-16 pb-20">
+        <div class="max-w-screen-2xl mx-auto px-8">
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                 
                 <!-- Left Text -->
-                <div class="lg:col-span-7 scroll-animate slide-left" id="hero-text">
-                    <div class="inline-flex items-center gap-x-2 bg-slate-900 border border-[#38BDF8]/30 text-[#38BDF8] text-sm font-medium px-5 py-2 rounded-3xl mb-6 pulse-ring">
-                        <div class="w-2 h-2 bg-[#38BDF8] rounded-full live-indicator"></div>
+                <div class="lg:col-span-7 scroll-animate" id="hero-text">
+                    <div class="inline-flex items-center gap-x-2 bg-slate-900 border border-emerald-400/30 text-emerald-400 text-sm font-medium px-5 py-2 rounded-3xl mb-6">
+                        <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
                         NOW IN ENTERPRISE BETA
                     </div>
                     
                     <h1 class="text-7xl lg:text-8xl font-semibold leading-none tracking-[-3px] mb-6" style="font-family: 'Space Grotesk', sans-serif;">
-                        Our Algos,<br>your AI <span class="text-gradient">Advantage</span>.
+                        Our Algos,<br>your AI Advantage.
                     </h1>
                     
                     <p class="text-2xl text-slate-300 max-w-2xl mb-8">
                         Moxiegen offers algorithmic enhancement of enterprise LLM and AI models, 
-                        increasing efficiency of both inference and training by <span class="text-[#A5B4FC] font-semibold text-shimmer">10-100x</span>.
+                        increasing efficiency of both inference and training by <span class="text-emerald-400 font-semibold">10-100x</span>.
                     </p>
                     
                     <div class="flex items-center gap-x-4">
                         <button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
-                                class="ripple btn-primary px-10 py-5 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 text-xl font-semibold rounded-3xl flex items-center gap-x-3">
+                                class="px-10 py-5 bg-emerald-400 hover:bg-emerald-300 text-slate-950 text-xl font-semibold rounded-3xl flex items-center gap-x-3">
                             Get Moxie
-                            <span class="text-3xl leading-none attention-bounce">→</span>
+                            <span class="text-3xl leading-none">→</span>
                         </button>
                         
                         <a href="#moxy" 
-                           class="btn-secondary px-8 py-5 border border-white/30 hover:border-[#38BDF8] text-xl font-medium rounded-3xl flex items-center">
+                           class="px-8 py-5 border border-white/30 hover:border-white/60 text-xl font-medium rounded-3xl flex items-center">
                             See Moxy Go
                         </a>
                     </div>
-                    
-                    <div class="mt-12 flex items-center gap-x-8 text-sm text-slate-400">
-                        <div class="flex -space-x-4">
-                            <div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">🚀</div>
-                            <div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">⚡</div>
-                            <div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">📱</div>
-                        </div>
-                        <p class="max-w-xs">Trusted by leading AI labs and Fortune 500 data centers</p>
-                    </div>
                 </div>
                 
-                <!-- Right: Real Logo (floating) -->
-                <div class="lg:col-span-5 flex justify-center lg:justify-end scroll-animate slide-right scale-up" id="hero-logo">
-                    <div class="hero-logo">
-                        <img src="logo.svg" 
-                             alt="Moxiegen Logo"
-                             class="logo-glow max-w-[420px] w-full h-auto"
-                             onerror="this.onerror=null; this.src='logo.png';">
+                <!-- Right: CUSTOM BALLOON + M (hero) – widened container only -->
+                <div class="lg:col-span-5 flex justify-center lg:justify-end scroll-animate" id="hero-logo">
+                    <div class="stage">
+                        <!-- THE M – widened SVG so edges are no longer clipped -->
+                        <svg width="590" height="540" viewBox="0 0 500 500" class="glowing-m">
+                            <text
+                                x="50%" y="60%"
+                                font-family="'Linux Libertine', serif"
+                                font-size="600" font-weight="400"
+                                text-anchor="middle" dominant-baseline="middle"
+                                fill="#020617" stroke="#e0f2fe" stroke-width="3"
+                                paint-order="stroke">
+                                M
+                            </text>
+                        </svg>
+                        <!-- THE BALLOON – unchanged -->
+                        <canvas id="canvas" width="400" height="620"></canvas>
                     </div>
                 </div>
             </div>
         </div>
     </header>
-    
-    <!-- Section Divider -->
-    <div class="section-divider"></div>
 
     <!-- MOXY GO SECTION -->
-    <section id="moxy" class="py-20 relative scroll-animate">
+    <section id="moxy" class="py-20 border-b border-slate-800 scroll-animate">
         <div class="max-w-screen-2xl mx-auto px-8">
             <div class="flex flex-col md:flex-row items-center justify-between gap-8">
-                <div class="max-w-md scroll-animate slide-left">
-                    <h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxy <span class="text-gradient">Go</span>.</h2>
+                <div class="max-w-md">
+                    <h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxy Go.</h2>
                     <p class="text-slate-400 text-xl">Real-time performance leaderboard</p>
                 </div>
                 
                 <!-- Leaderboard Placeholder -->
-                <div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 max-w-2xl w-full md:w-auto scroll-animate slide-right tilt-card" id="leaderboard-card">
+                <div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 max-w-2xl w-full md:w-auto scroll-animate">
                     <div class="flex items-center justify-between mb-6">
-                        <div class="text-[#38BDF8] font-medium flex items-center gap-x-2">
-                            <span class="text-2xl attention-bounce inline-block">🏆</span>
+                        <div class="text-emerald-400 font-medium flex items-center gap-x-2">
+                            <span class="text-2xl">🏆</span>
                             LIVE LEADERBOARD
                         </div>
-                        <div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl flex items-center gap-x-2">
-                            <span class="w-2 h-2 bg-green-400 rounded-full live-indicator"></span>
-                            Updated 11 seconds ago
-                        </div>
+                        <div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl">Updated 11 seconds ago</div>
                     </div>
                     
-                    <div class="text-center py-16 border border-dashed border-slate-600 rounded-3xl text-slate-400 relative overflow-hidden">
-                        <div class="absolute inset-0 animated-gradient opacity-50"></div>
-                        <p class="text-2xl mb-2 relative z-10">[Leaderboard Placement]</p>
-                        <p class="text-sm relative z-10">Insert your Moxy Go leaderboard table, chart, or screenshot here.<br>Current top models show <span class="text-[#A5B4FC] font-semibold">87x</span> inference speedup.</p>
+                    <div class="text-center py-16 border border-dashed border-slate-600 rounded-3xl text-slate-400">
+                        <p class="text-2xl mb-2">[Leaderboard Placement]</p>
+                        <p class="text-sm">Insert your Moxy Go leaderboard table, chart, or screenshot here.<br>Current top models show 87x inference speedup.</p>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    
-    <!-- Section Divider -->
-    <div class="section-divider"></div>
 
     <!-- BENEFITS SECTION -->
-    <section id="benefits" class="py-20 bg-slate-900/50 relative overflow-hidden">
-        <!-- Background animation -->
-        <div class="absolute inset-0 opacity-20">
-            <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-[#38BDF8] rounded-full filter blur-[100px] animate-pulse"></div>
-            <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-[#A5B4FC] rounded-full filter blur-[100px] animate-pulse" style="animation-delay: 1s;"></div>
-        </div>
-        
-        <div class="max-w-screen-2xl mx-auto px-8 relative z-10">
+    <section id="benefits" class="py-20 bg-slate-900">
+        <div class="max-w-screen-2xl mx-auto px-8">
             <div class="max-w-2xl mx-auto text-center mb-16 scroll-animate">
                 <h2 class="text-6xl font-semibold tracking-[-2px] mb-6 leading-none" style="font-family: 'Space Grotesk', sans-serif;">
-                    Looks like your AI<br>could use some <span class="text-gradient">Moxie</span>.
+                    Looks like your AI<br>could use some Moxie.
                 </h2>
             </div>
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <!-- Benefit 1 -->
-                <div class="scroll-animate card-1 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
-                    <div class="icon-container h-12 w-12 bg-[#38BDF8]/10 text-[#38BDF8] rounded-2xl flex items-center justify-center text-3xl mb-6">🔄</div>
+                <div class="scroll-animate card-1 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
+                    <div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">🔄</div>
                     <h3 class="text-2xl font-semibold mb-3">Simultaneous Training + Inference</h3>
                     <p class="text-slate-400">Allows training data center GPU resources to simultaneously perform inference.</p>
                 </div>
                 
                 <!-- Benefit 2 -->
-                <div class="scroll-animate card-2 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
-                    <div class="icon-container h-12 w-12 bg-[#A5B4FC]/10 text-[#A5B4FC] rounded-2xl flex items-center justify-center text-3xl mb-6">🏭</div>
+                <div class="scroll-animate card-2 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
+                    <div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">🏭</div>
                     <h3 class="text-2xl font-semibold mb-3">Massive Offload</h3>
                     <p class="text-slate-400">Massively offloads inference data centers, freeing expensive GPU clusters for training workloads.</p>
                 </div>
                 
                 <!-- Benefit 3 -->
-                <div class="scroll-animate card-3 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
-                    <div class="icon-container h-12 w-12 bg-[#38BDF8]/10 text-[#38BDF8] rounded-2xl flex items-center justify-center text-3xl mb-6">📱</div>
+                <div class="scroll-animate card-3 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
+                    <div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">📱</div>
                     <h3 class="text-2xl font-semibold mb-3">Native Consumer Inference</h3>
                     <p class="text-slate-400">Enables native LLM inference on consumer devices without any API calls or cloud dependency.</p>
                 </div>
             </div>
         </div>
     </section>
-    
-    <!-- Section Divider -->
-    <div class="section-divider"></div>
 
     <!-- LICENSING CTA -->
     <section id="licensing" class="py-16 scroll-animate">
         <div class="max-w-screen-2xl mx-auto px-8">
-            <div class="animated-gradient bg-gradient-to-r from-slate-900 to-slate-800 border border-[#38BDF8]/20 rounded-3xl p-16 flex flex-col md:flex-row items-center justify-between gap-10 relative overflow-hidden">
-                <!-- Decorative elements -->
-                <div class="absolute top-0 right-0 w-64 h-64 bg-[#38BDF8] rounded-full filter blur-[80px] opacity-20"></div>
-                <div class="absolute bottom-0 left-0 w-64 h-64 bg-[#A5B4FC] rounded-full filter blur-[80px] opacity-20"></div>
-                
-                <div class="max-w-lg relative z-10">
+            <div class="bg-gradient-to-r from-slate-900 to-slate-800 border border-emerald-400/20 rounded-3xl p-16 flex flex-col md:flex-row items-center justify-between gap-10">
+                <div class="max-w-lg">
                     <p class="text-4xl font-semibold leading-tight tracking-[-1px]">
-                        Licensing now available through customized <span class="text-gradient">enterprise contracts</span>.
+                        Licensing now available through customized enterprise contracts.
                     </p>
                 </div>
                 <button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
-                        class="ripple btn-primary flex-shrink-0 px-14 py-6 text-2xl font-semibold bg-white text-slate-950 hover:bg-[#38BDF8] rounded-3xl flex items-center gap-x-4 relative z-10">
+                        class="flex-shrink-0 px-14 py-6 text-2xl font-semibold bg-white text-slate-950 hover:bg-emerald-400 rounded-3xl flex items-center gap-x-4">
                     Request Enterprise License
-                    <span class="text-4xl attention-bounce inline-block">→</span>
+                    <span class="text-4xl">→</span>
                 </button>
             </div>
         </div>
     </section>
-    
-    <!-- Section Divider -->
-    <div class="section-divider"></div>
 
     <!-- CONTACT SECTION -->
-    <section id="contact" class="py-24 bg-slate-900/50 scroll-animate relative overflow-hidden">
-        <!-- Background decoration -->
-        <div class="absolute top-0 left-0 w-full h-full opacity-10">
-            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] rounded-full filter blur-[150px]"></div>
-        </div>
-        
-        <div class="max-w-screen-2xl mx-auto px-8 relative z-10">
+    <section id="contact" class="py-24 bg-slate-900 scroll-animate">
+        <div class="max-w-screen-2xl mx-auto px-8">
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
-                <div class="lg:col-span-5 scroll-animate slide-left">
-                    <h2 class="text-5xl font-semibold mb-6" style="font-family: 'Space Grotesk', sans-serif;">Ready for <span class="text-gradient">10-100×</span> more Moxie?</h2>
+                <div class="lg:col-span-5">
+                    <h2 class="text-5xl font-semibold mb-6" style="font-family: 'Space Grotesk', sans-serif;">Ready for 10-100× more Moxie?</h2>
                     <p class="text-slate-400 text-2xl">Let's talk about how our algorithms can transform your LLM infrastructure.</p>
                     
-                    <div class="mt-12 border-l-4 border-[#38BDF8] pl-8 relative">
-                        <div class="absolute -left-2 top-0 w-4 h-4 bg-[#38BDF8] rounded-full pulse-ring"></div>
+                    <div class="mt-12 border-l-4 border-emerald-400 pl-8">
                         <p class="font-medium">Email us at:</p>
-                        <a href="mailto:hello@moxiegen.com" class="block text-3xl font-semibold text-[#A5B4FC] hover:text-[#38BDF8] transition-colors">hello@moxiegen.com</a>
+                        <a href="mailto:hello@moxiegen.com" class="block text-3xl font-semibold text-emerald-400 hover:text-white">hello@moxiegen.com</a>
                     </div>
                 </div>
                 
-                <div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10 scroll-animate slide-right border border-slate-800 hover:border-[#38BDF8]/30 transition-colors">
+                <div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10">
                     <form id="contactForm" class="space-y-8">
                         <div class="grid grid-cols-2 gap-6">
                             <div>
                                 <label class="block text-sm text-slate-400 mb-2">Your name</label>
-                                <input type="text" id="contactName" placeholder="Jane Doe" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg" required>
+                                <input type="text" id="contactName" placeholder="Jane Doe" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
                             </div>
                             <div>
                                 <label class="block text-sm text-slate-400 mb-2">Company</label>
-                                <input type="text" id="contactCompany" placeholder="Acme AI Labs" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg">
+                                <input type="text" id="contactCompany" placeholder="Acme AI Labs" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
                             </div>
                         </div>
                         <div>
                             <label class="block text-sm text-slate-400 mb-2">Work email</label>
-                            <input type="email" id="contactEmail" placeholder="you@company.com" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg" required>
+                            <input type="email" id="contactEmail" placeholder="you@company.com" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
                         </div>
                         <div>
                             <label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label>
-                            <textarea id="contactMessage" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="form-input w-full rounded-3xl px-6 py-5 outline-none text-lg resize-none" required></textarea>
+                            <textarea id="contactMessage" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-3xl px-6 py-5 outline-none text-lg resize-none"></textarea>
                         </div>
-                        <button type="submit" class="ripple btn-primary w-full py-6 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 font-semibold text-2xl rounded-3xl">
+                        <button type="submit" class="w-full py-6 bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-2xl rounded-3xl">
                             Send message to Moxiegen
                         </button>
                     </form>
@@ -972,123 +296,26 @@
     </section>
 
     <!-- FOOTER -->
-    <footer class="bg-slate-950 border-t border-slate-800 py-8 relative overflow-hidden">
-        <!-- Subtle gradient line at top -->
-        <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#38BDF8] to-transparent opacity-50"></div>
-        
+    <footer class="bg-slate-950 border-t border-slate-800 py-8">
         <div class="max-w-screen-2xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-4 text-slate-400 text-sm">
             <div>Copyright © 2025 NT Logstics LLC</div>
             <div class="flex gap-x-6">
-                <a href="#" class="footer-link hover:text-[#38BDF8]">Privacy</a>
-                <a href="#" class="footer-link hover:text-[#38BDF8]">Terms</a>
-                <a href="#" class="footer-link hover:text-[#38BDF8]">Legal</a>
-            </div>
-            <div class="text-[#A5B4FC] text-xs font-medium flex items-center gap-x-2">
-                Built with <span class="text-[#38BDF8]">Moxie</span>
-                <span class="inline-block attention-bounce">✨</span>
+                <a href="#" class="hover:text-white">Privacy</a>
+                <a href="#" class="hover:text-white">Terms</a>
+                <a href="#" class="hover:text-white">Legal</a>
             </div>
+            <div class="text-emerald-400 text-xs font-medium">Built with Moxie</div>
         </div>
     </footer>
 
     <script>
-        // ============================================
-        // PARTICLE SYSTEM
-        // ============================================
-        function createParticles() {
-            const container = document.getElementById('particles');
-            const particleCount = 30;
-            
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 20 + 's';
-                particle.style.animationDuration = (15 + Math.random() * 15) + 's';
-                particle.style.width = (2 + Math.random() * 4) + 'px';
-                particle.style.height = particle.style.width;
-                container.appendChild(particle);
-            }
+        // Tailwind initialization
+        function initializeTailwind() {
+            return { config(userConfig = {}) { return { content: [], theme: { extend: {} }, plugins: [], ...userConfig }; }, theme: { extend: {} } };
         }
-        
-        // ============================================
-        // SCROLL PROGRESS INDICATOR
-        // ============================================
-        function updateScrollProgress() {
-            const scrollProgress = document.getElementById('scrollProgress');
-            const scrollTop = window.scrollY;
-            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-            const scrollPercent = scrollTop / docHeight;
-            scrollProgress.style.transform = `scaleX(${scrollPercent})`;
-        }
-        
-        // ============================================
-        // MOUSE TRACKING FOR HERO BACKGROUND
-        // ============================================
-        function initMouseTracking() {
-            const hero = document.querySelector('.hero-bg');
-            if (hero) {
-                hero.addEventListener('mousemove', (e) => {
-                    const rect = hero.getBoundingClientRect();
-                    const x = ((e.clientX - rect.left) / rect.width) * 100;
-                    const y = ((e.clientY - rect.top) / rect.height) * 100;
-                    hero.style.setProperty('--mouse-x', x + '%');
-                    hero.style.setProperty('--mouse-y', y + '%');
-                });
-            }
-        }
-        
-        // ============================================
-        // RIPPLE EFFECT
-        // ============================================
-        function initRippleEffect() {
-            document.querySelectorAll('.ripple').forEach(button => {
-                button.addEventListener('click', function(e) {
-                    const rect = this.getBoundingClientRect();
-                    const size = Math.max(rect.width, rect.height);
-                    const x = e.clientX - rect.left - size / 2;
-                    const y = e.clientY - rect.top - size / 2;
-                    
-                    const ripple = document.createElement('span');
-                    ripple.className = 'ripple-effect';
-                    ripple.style.width = ripple.style.height = size + 'px';
-                    ripple.style.left = x + 'px';
-                    ripple.style.top = y + 'px';
-                    
-                    this.appendChild(ripple);
-                    
-                    setTimeout(() => ripple.remove(), 600);
-                });
-            });
-        }
-        
-        // ============================================
-        // 3D TILT EFFECT FOR CARDS
-        // ============================================
-        function initTiltEffect() {
-            document.querySelectorAll('.tilt-card').forEach(card => {
-                card.addEventListener('mousemove', (e) => {
-                    const rect = card.getBoundingClientRect();
-                    const x = e.clientX - rect.left;
-                    const y = e.clientY - rect.top;
-                    const centerX = rect.width / 2;
-                    const centerY = rect.height / 2;
-                    const rotateX = (y - centerY) / 20;
-                    const rotateY = (centerX - x) / 20;
-                    
-                    card.style.setProperty('--rotateX', rotateX + 'deg');
-                    card.style.setProperty('--rotateY', rotateY + 'deg');
-                });
-                
-                card.addEventListener('mouseleave', () => {
-                    card.style.setProperty('--rotateX', '0deg');
-                    card.style.setProperty('--rotateY', '0deg');
-                });
-            });
-        }
-        
-        // ============================================
+        document.documentElement.setAttribute('data-tailwind-config', JSON.stringify(initializeTailwind()));
+
         // SCROLL-DRIVEN ANIMATIONS (Intersection Observer)
-        // ============================================
         function initScrollAnimations() {
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
@@ -1119,142 +346,125 @@
                     }
                     lastScrollY = window.scrollY;
                 }
-                
-                // Update scroll progress
-                updateScrollProgress();
             });
         }
+
+        // BALLOON + M ANIMATION (hero – still, no bobbing)
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const particles = [];
+        const NUM_PARTICLES = 275;
+        const MAX_RADIUS = 120;
+        const INTAKE_RADIUS = MAX_RADIUS / 8;
+        const DOME_HEIGHT = 0.33;
+        const BOTTOM_TOTAL_HEIGHT = 1.0 - DOME_HEIGHT;
+        const COMPACTED_BOTTOM_HEIGHT = BOTTOM_TOTAL_HEIGHT * 0.6;
+        const TOTAL_COMPACTED_HEIGHT = DOME_HEIGHT + COMPACTED_BOTTOM_HEIGHT;
         
-        // ============================================
-        // FORM SUBMIT HANDLER
-        // ============================================
-        function initContactForm() {
-            const form = document.getElementById('contactForm');
-            if (!form) return;
+        const Y_OFFSET = 50 - 100;
+        const TOP_SHIFT = 70;
+
+        function getRadius(h) {
+            if (h < DOME_HEIGHT) return MAX_RADIUS * Math.sqrt(Math.max(0, 1 - Math.pow((h - DOME_HEIGHT) / DOME_HEIGHT, 2)));
+            if (h >= DOME_HEIGHT && h < TOTAL_COMPACTED_HEIGHT) {
+                const t = (h - DOME_HEIGHT) / COMPACTED_BOTTOM_HEIGHT;
+                return MAX_RADIUS - (MAX_RADIUS - INTAKE_RADIUS) * Math.pow(t, 1.5);
+            }
+            return INTAKE_RADIUS;
+        }
+
+        class Particle {
+            constructor(isAnchor = false, h = null, theta = null) {
+                this.isAnchor = isAnchor;
+                this.h = isAnchor ? h : Math.random() * TOTAL_COMPACTED_HEIGHT;
+                this.theta = isAnchor ? theta : Math.random() * Math.PI * 2;
+                this.speed = isAnchor ? 0 : 0.003 + Math.random() * 0.004;
+            }
+        }
+
+        function getPos(h, theta) {
+            const r = getRadius(h);
+            return { x: 200 + r * Math.cos(theta), y: Y_OFFSET + h * 380, z: Math.sin(theta) };
+        }
+
+        function drawBasket() {
+            const baseCenter = { x: 200, y: Y_OFFSET + TOTAL_COMPACTED_HEIGHT * 380 };
+            const ropeAttachY = baseCenter.y - 10.8;
+            const basketTopY = baseCenter.y + 20;
+            const w1 = 36;
+            const angleRad = 10 * Math.PI / 180;
+            const topXOffset = 22 * Math.cos(angleRad);
+            const bottomXOffset = (w1 / 2) - (w1 * 0.05);
+
+            ctx.shadowColor = '#e0f2fe';
+            ctx.shadowBlur = 8;
+            ctx.strokeStyle = 'rgba(224, 242, 254, 0.2)';
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+            ctx.moveTo(baseCenter.x - topXOffset, ropeAttachY);
+            ctx.lineTo(baseCenter.x - bottomXOffset, basketTopY);
+            ctx.moveTo(baseCenter.x + topXOffset, ropeAttachY);
+            ctx.lineTo(baseCenter.x + bottomXOffset, basketTopY);
+            ctx.stroke();
+
+            ctx.shadowBlur = 10;
+            ctx.fillStyle = 'rgba(2, 6, 23, 0.9)';
+            ctx.strokeStyle = '#e0f2fe';
+            ctx.lineWidth = 1.5;
+            const bH = 8.5;
+            const widths = [w1, w1 * 0.9, (w1 * 0.9) * 0.9];
+            for (let i = 0; i < 3; i++) {
+                ctx.beginPath();
+                ctx.roundRect(baseCenter.x - widths[i]/2, basketTopY + (i * (bH + 2)), widths[i], bH, 3);
+                ctx.fill();
+                ctx.stroke();
+            }
+            ctx.shadowBlur = 0;
+        }
+
+        function initBalloon() {
+            particles.length = 0;
+            particles.push(new Particle(true, 0, 0));
+            for(let i = 0; i < 5; i++) particles.push(new Particle(true, TOTAL_COMPACTED_HEIGHT, (i / 5) * Math.PI * 2));
+            for (let i = 0; i < NUM_PARTICLES; i++) particles.push(new Particle());
+            animateBalloon();
+        }
+
+        function animateBalloon() {
+            ctx.clearRect(0, 0, 400, 620);
+            ctx.save();
+            ctx.translate(0, TOP_SHIFT);
             
-            form.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                
-                const button = form.querySelector('button[type="submit"]');
-                const originalText = button.innerHTML;
-                
-                // Get form values
-                const name = document.getElementById('contactName').value.trim();
-                const company = document.getElementById('contactCompany').value.trim();
-                const email = document.getElementById('contactEmail').value.trim();
-                const message = document.getElementById('contactMessage').value.trim();
-                
-                // Basic validation
-                if (!name || !email || !message) {
-                    alert('Please fill in all required fields.');
-                    return;
-                }
-                
-                // Loading state
-                button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...';
-                button.disabled = true;
-                
-                try {
-                    const response = await fetch('/api/contact', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ name, company, email, message })
-                    });
-                    
-                    const data = await response.json();
-                    
-                    if (data.success) {
-                        button.innerHTML = '✓ Message Sent!';
-                        button.classList.remove('from-[#38BDF8]', 'to-[#A5B4FC]');
-                        button.style.background = '#22c55e';
-                        form.reset();
-                        
-                        setTimeout(() => {
-                            button.innerHTML = originalText;
-                            button.disabled = false;
-                            button.style.background = '';
-                        }, 3000);
-                    } else {
-                        throw new Error(data.message || 'Failed to send message');
-                    }
-                } catch (error) {
-                    console.error('Contact form error:', error);
-                    button.innerHTML = '✗ Failed to send';
-                    button.style.background = '#ef4444';
-                    
-                    setTimeout(() => {
-                        button.innerHTML = originalText;
-                        button.disabled = false;
-                        button.style.background = '';
-                    }, 3000);
+            particles.forEach(p => { if(!p.isAnchor) p.theta += p.speed; });
+            drawBasket();
+            
+            ctx.lineWidth = 0.4;
+            for (let i = 0; i < particles.length; i++) {
+                for (let j = i + 1; j < particles.length; j++) {
+                    const p1 = getPos(particles[i].h, particles[i].theta);
+                    const p2 = getPos(particles[j].h, particles[j].theta);
+                    if (Math.hypot(p1.x - p2.x, p1.y - p2.y) < 30) {
+                        const alpha = 0.05 + (((p1.z + p2.z) / 2) + 1) * 0.05;
+                        ctx.strokeStyle = `rgba(52, 211, 153, ${alpha})`;
+                        ctx.beginPath(); 
+                        ctx.moveTo(p1.x, p1.y); 
+                        ctx.lineTo(p2.x, p2.y); 
+                        ctx.stroke();
+                    }
                 }
+            }
+            
+            particles.forEach(p => {
+                const pos = getPos(p.h, p.theta);
+                ctx.fillStyle = `rgba(52, 211, 153, ${0.3 + (pos.z + 1) * 0.35})`;
+                ctx.beginPath(); 
+                ctx.arc(pos.x, pos.y, 1.2, 0, Math.PI * 2); 
+                ctx.fill();
             });
+            
+            ctx.restore();
+            requestAnimationFrame(animateBalloon);
         }
-        
-        // ============================================
-        // SMOOTH ANCHOR SCROLL
-        // ============================================
-        function initSmoothScroll() {
-            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-                anchor.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const target = document.querySelector(this.getAttribute('href'));
-                    if (target) {
-                        target.scrollIntoView({
-                            behavior: 'smooth',
-                            block: 'start'
-                        });
-                    }
-                });
-            });
-        }
-        
-        // ============================================
-        // COUNTER ANIMATION
-        // ============================================
-        function animateCounters() {
-            document.querySelectorAll('[data-count]').forEach(counter => {
-                const target = parseInt(counter.dataset.count);
-                const duration = 2000;
-                const step = target / (duration / 16);
-                let current = 0;
-                
-                const updateCounter = () => {
-                    current += step;
-                    if (current < target) {
-                        counter.textContent = Math.floor(current);
-                        requestAnimationFrame(updateCounter);
-                    } else {
-                        counter.textContent = target;
-                    }
-                };
-                
-                // Start when visible
-                const observer = new IntersectionObserver((entries) => {
-                    if (entries[0].isIntersecting) {
-                        updateCounter();
-                        observer.disconnect();
-                    }
-                });
-                
-                observer.observe(counter);
-            });
-        }
-        
-        // ============================================
-        // INITIALIZE EVERYTHING
-        // ============================================
-        window.addEventListener('load', () => {
-            createParticles();
-            initScrollAnimations();
-            initMouseTracking();
-            initRippleEffect();
-            initTiltEffect();
-            initSmoothScroll();
-            animateCounters();
-            initContactForm();
-            initAuth();
-        });
 
         // ============================================
         // AUTHENTICATION
@@ -1265,7 +475,6 @@
                 updateAuthUI();
             } catch (error) {
                 console.error('Auth init error:', error);
-                // Show login button on error
                 document.getElementById('loginBtn').classList.remove('hidden');
             }
         }
@@ -1291,6 +500,76 @@
                 alert('Failed to login. Please try again.');
             }
         }
+
+        // ============================================
+        // FORM SUBMIT HANDLER
+        // ============================================
+        function initContactForm() {
+            const form = document.getElementById('contactForm');
+            if (!form) return;
+            
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                
+                const button = form.querySelector('button[type="submit"]');
+                const originalText = button.innerHTML;
+                
+                const name = document.getElementById('contactName').value.trim();
+                const company = document.getElementById('contactCompany').value.trim();
+                const email = document.getElementById('contactEmail').value.trim();
+                const message = document.getElementById('contactMessage').value.trim();
+                
+                if (!name || !email || !message) {
+                    alert('Please fill in all required fields.');
+                    return;
+                }
+                
+                button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...';
+                button.disabled = true;
+                
+                try {
+                    const response = await fetch('/api/contact', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, company, email, message })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        button.innerHTML = '✓ Message Sent!';
+                        button.style.background = '#22c55e';
+                        form.reset();
+                        
+                        setTimeout(() => {
+                            button.innerHTML = originalText;
+                            button.disabled = false;
+                            button.style.background = '';
+                        }, 3000);
+                    } else {
+                        throw new Error(data.message || 'Failed to send message');
+                    }
+                } catch (error) {
+                    console.error('Contact form error:', error);
+                    button.innerHTML = '✗ Failed to send';
+                    button.style.background = '#ef4444';
+                    
+                    setTimeout(() => {
+                        button.innerHTML = originalText;
+                        button.disabled = false;
+                        button.style.background = '';
+                    }, 3000);
+                }
+            });
+        }
+
+        // Initialize everything when page loads
+        window.addEventListener('load', () => {
+            initScrollAnimations();
+            initBalloon();
+            initAuth();
+            initContactForm();
+        });
     </script>
 
     <!-- Auth Scripts -->