Replace the entire page's background with a dark background with floating glowing particles animation

index.html

@@ -15,62 +15,71 @@
             scroll-behavior: smooth;
         }
         body {
-            background: linear-gradient(135deg, #0f0f15 0%, #1a1a2e 100%);
+            background: #0a0a0a;
             color: #F5F5F5;
             font-family: 'Poppins', sans-serif;
             min-height: 100vh;
             position: relative;
-            overflow-x: hidden;
+            overflow: hidden;
         }
         body::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at 20% 30%, rgba(255, 106, 0, 0.15) 0%, transparent 30%),
-                radial-gradient(circle at 80% 70%, rgba(0, 228, 255, 0.15) 0%, transparent 30%),
-                radial-gradient(circle at 40% 80%, rgba(60, 226, 122, 0.15) 0%, transparent 30%);
-            z-index: -1;
-            animation: gradientPulse 15s ease infinite alternate;
-        }
-
-        @keyframes gradientPulse {
-            0% { opacity: 0.5; }
-            100% { opacity: 0.8; }
-        }
-        .glass-card {
-            background: rgba(20, 20, 30, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(16px);
-            border-radius: 16px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            position: relative;
-            overflow: hidden;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
-            transform: translateY(0);
-        }
-        .glass-card:hover {
-            transform: translateY(-8px);
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
-            border-color: rgba(255, 255, 255, 0.2);
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 70% 30%, rgba(255, 106, 0, 0.1) 0%, transparent 40%);
+            z-index: -2;
         }
-        .glass-card::before {
-            content: '';
+        .floating-particles {
             position: absolute;
             top: 0;
-            left: -100%;
+            left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-            transition: 0.5s;
+            z-index: -1;
+            overflow: hidden;
         }
-        .glass-card:hover::before {
-            left: 100%;
+        .particle {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+            filter: blur(1px);
+            animation: float linear infinite;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(0) translateX(0);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(100px);
+                opacity: 0;
+            }
+        }
+.glass-card {
+            background: rgba(10, 10, 10, 0.7);
+            border: 1px solid rgba(255, 106, 0, 0.15);
+            backdrop-filter: blur(12px);
+            border-radius: 1rem;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
         }
-.chip {
+.glass-card:hover {
+            transform: translateY(-4px);
+            border-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 20px rgba(255, 106, 0, 0.2);
+        }
+        .chip {
             padding: 4px 12px;
             border-radius: 100px;
             font-size: 12px;
@@ -84,18 +93,14 @@
             border-radius: 100px;
             font-weight: 600;
             font-size: 14px;
-            padding: 12px 28px;
+            padding: 10px 24px;
             position: relative;
             overflow: hidden;
-            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-            text-shadow: 0 0 10px currentColor;
+            transition: all 0.3s ease;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
             z-index: 1;
-            transform: scale(1);
-        }
-        .pill-button:hover {
-            transform: scale(1.05);
         }
-.pill-button::before {
+        .pill-button::before {
             --a: 0turn;
             content: "";
             position: absolute;
@@ -155,30 +160,11 @@ animation: border-spin 3s linear infinite;
         }
         .big-number {
             font-family: 'Orbitron', sans-serif;
-            font-weight: 700;
+            font-weight: 600;
             line-height: 1.2;
-            text-shadow: 0 0 15px currentColor;
-            letter-spacing: 1px;
-            position: relative;
-            display: inline-block;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
         }
-        .big-number::after {
-            content: '';
-            position: absolute;
-            bottom: -5px;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: currentColor;
-            transform: scaleX(0);
-            transform-origin: right;
-            transition: transform 0.4s ease;
-        }
-        .glass-card:hover .big-number::after {
-            transform: scaleX(1);
-            transform-origin: left;
-        }
-.tooltip-wrapper {
+        .tooltip-wrapper {
             position: relative;
             display: inline-flex;
         }
@@ -270,36 +256,34 @@ animation: border-spin 3s linear infinite;
         }
     </style>
 </head>
-<body class="min-h-screen relative overflow-x-hidden">
-    <header class="relative w-full overflow-hidden" id="page-header">
-        <div class="absolute inset-0 bg-gradient-to-br from-[#1a1a2e] to-[#16213e] opacity-95"></div>
-        <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-12">
-            <div class="flex flex-col items-center text-center">
-                <h1 class="text-5xl md:text-7xl font-bold font-['Orbitron'] mb-6">
-                    <span class="relative inline-block">
-                        <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6A00] via-[#FFD600] to-[#3CE27A] animate-gradient-x">Nioplay Wallet</span>
-                        <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-[#FF6A00] via-[#FFD600] to-[#3CE27A] rounded-full"></span>
-                    </span>
+    <body class="min-h-screen relative overflow-x-hidden">
+        <div class="floating-particles" id="particles"></div>
+<header class="relative w-full overflow-hidden" id="page-header">
+        <div class="absolute inset-0 bg-gradient-to-b from-[#1a0d00] to-[#0a0a0a] opacity-90"></div>
+        <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16">
+<div class="flex flex-col items-center text-center">
+                <h1 class="text-4xl md:text-6xl font-bold font-['Orbitron'] mb-4" style="text-shadow: 0 0 15px rgba(255, 106, 0, 0.7);">
+                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6A00] to-[#FFD600]">Nioplay Wallet</span>
                 </h1>
-                <p class="text-xl md:text-2xl text-[#E0E0E0] max-w-3xl mb-8 leading-relaxed">
-                    Your <span class="text-[#FFD600] font-medium">secure gateway</span> to deposits, withdrawals, and <span class="text-[#00E4FF] font-medium">real-time</span> balance tracking
+                <p class="text-xl md:text-2xl text-[#B8B8B8] max-w-3xl mb-8">
+                    Your secure gateway to deposits, withdrawals, and real-time balance tracking
                 </p>
                 
-                <div class="flex flex-wrap justify-center gap-6 mb-8">
-                    <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg transform hover:-translate-y-1 transition-transform duration-300">
-                        <span class="text-white">Purchase SC</span>
-                    </button>
-                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg transform hover:-translate-y-1 transition-transform duration-300">
+                <div class="flex flex-wrap justify-center gap-4 mb-12">
+                <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg">
+                    <span class="text-white">Purchase SC</span>
+</button>
+                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg">
                         <span class="text-[#3CE27A]">Redeem Now</span>
                     </button>
-                </div>
-            </div>
-            
-            <div class="absolute inset-0 overflow-hidden z-0 pointer-events-none">
-                <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#FF6A00] blur-[120px] opacity-40 animate-pulse"></div>
-                <div class="absolute top-1/3 right-1/3 w-64 h-64 rounded-full bg-[#00E4FF] blur-[120px] opacity-30 animate-pulse animation-delay-2000"></div>
-                <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-[#3CE27A] blur-[120px] opacity-30 animate-pulse animation-delay-4000"></div>
-            </div>
+</div>
+            <div class="absolute -bottom-10 left-0 right-0 h-20 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10"></div>
+</div>
+        
+        <div class="absolute inset-0 overflow-hidden opacity-20">
+            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#FF6A00] blur-[100px]"></div>
+            <div class="absolute top-1/3 right-1/3 w-64 h-64 rounded-full bg-[#00E4FF] blur-[100px]"></div>
+            <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-[#3CE27A] blur-[100px]"></div>
         </div>
     </header>
 <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
@@ -526,76 +510,51 @@ animation: border-spin 3s linear infinite;
         
         
     </div>
-        <script>
-            // Initialize libraries
-            document.addEventListener('DOMContentLoaded', function() {
-                feather.replace();
-                AOS.init({
-                    duration: 800,
-                    easing: 'ease-out-quart',
-                    once: true,
-                    offset: 100
-                });
-                
-                // Smooth scroll animations for all links
-                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-                    anchor.addEventListener('click', function (e) {
-                        e.preventDefault();
-                        document.querySelector(this.getAttribute('href')).scrollIntoView({
-                            behavior: 'smooth'
-                        });
-                    });
+    <script>
+        // Initialize libraries
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            AOS.init({
+                duration: 600,
+                easing: 'ease-in-out',
+                once: true
+            });
+            
+            // Accordion functionality
+            const accordions = document.querySelectorAll('.accordion');
+            accordions.forEach(accordion => {
+                accordion.addEventListener('click', function() {
+                    const expanded = this.getAttribute('aria-expanded') === 'true';
+                    this.setAttribute('aria-expanded', !expanded);
                 });
+            });
+
+            // Create floating particles
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 50;
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
                 
-                // Button hover animations
-                document.querySelectorAll('.pill-button').forEach(button => {
-                    button.addEventListener('mouseenter', function() {
-                        anime({
-                            targets: this,
-                            scale: 1.05,
-                            duration: 300,
-                            easing: 'easeOutExpo'
-                        });
-                    });
-                    button.addEventListener('mouseleave', function() {
-                        anime({
-                            targets: this,
-                            scale: 1,
-                            duration: 300,
-                            easing: 'easeOutExpo'
-                        });
-                    });
-                });
+                const size = Math.random() * 3 + 1;
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100 + 100;
+                const duration = Math.random() * 20 + 10;
+                const delay = Math.random() * 10;
+                const opacity = Math.random() * 0.5 + 0.1;
                 
-                // Card hover animations
-                document.querySelectorAll('.glass-card').forEach(card => {
-                    card.addEventListener('mouseenter', function() {
-                        anime({
-                            targets: this,
-                            translateY: -15,
-                            duration: 400,
-                            easing: 'easeOutExpo'
-                        });
-                    });
-                    card.addEventListener('mouseleave', function() {
-                        anime({
-                            targets: this,
-                            translateY: 0,
-                            duration: 400,
-                            easing: 'easeOutExpo'
-                        });
-                    });
-                });
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}%`;
+                particle.style.top = `${posY}%`;
+                particle.style.animationDuration = `${duration}s`;
+                particle.style.animationDelay = `-${delay}s`;
+                particle.style.opacity = opacity;
                 
-                // Gradient animation for hero text
-                anime({
-                    targets: '.animate-gradient-x',
-                    backgroundPositionX: ['0%', '100%'],
-                    duration: 8000,
-                    easing: 'linear',
-                    loop: true
-                });
-            });
-        </script>
+                particlesContainer.appendChild(particle);
+            }
+        });
+    </script>
 </body>
 </html>