Imagine the network not as a flat animation, but as a floating 3D digital environment — a luminous purple nebula where energy threads weave through a living data cloud.

Every pixel contributes to depth and motion, making the user feel like they’re looking into a deep, glowing field of digital life.

🌫️ 1. Multi-Layered Depth Effect

Foreground Layer (Active Mesh):

This is the primary glowing web — the same purple node-and-line network.

It remains sharp, bright, and active with glowing points and dynamic connections.

Movement is more pronounced here — gentle oscillations and wave undulations that feel close to the viewer.

Mid Layer (Secondary Particles):

Fainter and smaller particles drift independently in the background.

They move slower and have slightly reduced opacity (~0.3–0.5), creating a soft parallax motion.

Some of these fade in and out slowly to simulate depth and energy fluctuations.

Far Background Layer (Haze & Nebula Glow):

A very subtle purple fog or nebula-like gradient spreads across the background.

This layer doesn’t move much — it glows faintly and flickers over long intervals, like distant energy pulses.

The haze gives the illusion that the network extends infinitely into dark digital space.

💡 2. Lighting Design and Glow Dynamics

Primary Light Color: Vibrant violet (#b366ff) — the dominant hue.

Accent Glow: Deeper purple (#6a00b8) mixed with soft magenta tones for gradients.

Glare & Halo: Each node emits a halo glow that diffuses gently into the darkness.

Dynamic Luminosity:

The brightness of both nodes and lines subtly fluctuates in sync with a slow “energy pulse” — like breathing.

Every 3–5 seconds, a ripple of brightness travels diagonally across the network, softly illuminating connected lines.

Energy Pulse Behavior:

The pulse does not flash abruptly; instead, it expands and fades with a sine-wave smoothness.

It creates a sense of continuity, as though information is flowing through the network’s veins.

🌊 3. Subtle Motion Layers

Primary Wave Motion:

The entire mesh moves in a low-frequency wave pattern, gently rolling along one axis — typically diagonal or horizontal.

The amplitude is small but consistent, giving a silky “liquid energy” flow.

Secondary Drift Motion:

A secondary movement slowly rotates or tilts the mesh as a whole (just a few degrees).

This slow, circular drift makes the structure appear to float freely in 3D space rather than being locked to the screen.

Background Particle Drift:

Tiny distant dots move slowly in random directions, adding life to the emptier regions.

These can have slightly different shades — lighter purple or soft gray-white — creating depth contrast.

🌠 4. Ambient Glow and Bloom Effect

A faint bloom effect surrounds brighter regions, simulating the way light diffuses in dark environments.

At connection points where several lines meet, the glow is stronger — these act like energy hubs.

Occasionally, faint lens flares or soft blur gradients can appear around dense clusters, imitating the visual diffusion of light in atmosphere.

🌌 5. Optional Cinematic Enhancements

If you want the most immersive, high-tech look, the animation can include these subtle layers:

Parallax Mouse Movement:

As the user moves the mouse, the entire network shifts slightly (just a few pixels) in the opposite direction, creating a 3D parallax illusion.

Depth Blur Gradient:

Nodes closer to the “viewer” are sharp; distant ones have a faint blur — mimicking camera focus.

Particle Trails (Optional):

When a node moves faster, a faint streak follows it briefly, fading out smoothly — like motion trails of energy.

Ambient Pulse Sound (Optional Visual Cue):

Even without actual sound, small waves of luminosity could pulse across the network in rhythm, hinting at energy resonance.

🎨 6. Overall Mood and Tone

The final visual atmosphere is:

Futuristic and ethereal — a balance of technology and elegance.

Calm yet alive — every movement is soft, continuous, and breathing-like.

Infinite in depth — thanks to multi-layered parallax, fading haze, and slow perspective drift.

Visually magnetic — glowing purple tones draw the eye naturally, symbolizing intelligence, energy, and mystery.

It should feel like standing before a living neural web — data energy shimmering and flowing endlessly in a cosmic void.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neural Glow
-emoji: 👁
-colorFrom: green
-colorTo: indigo
+title: Neural Glow ✨
+colorFrom: red
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

components/footer.js

@@ -0,0 +1,157 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(180deg, rgba(10, 10, 15, 0.9) 0%, #0a0a0f 100%);
+          color: #cbd5e0;
+          padding: 4rem 2rem 2rem;
+          border-top: 1px solid rgba(179, 102, 255, 0.1);
+        }
+        
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+        }
+        
+        .footer-column h3 {
+          color: white;
+          margin-bottom: 1.5rem;
+          font-size: 1.25rem;
+          position: relative;
+          padding-bottom: 0.5rem;
+        }
+        
+        .footer-column h3::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 50px;
+          height: 2px;
+          background: linear-gradient(90deg, #b366ff, #6a00b8);
+        }
+        
+        .footer-column ul {
+          list-style: none;
+          padding: 0;
+        }
+        
+        .footer-column ul li {
+          margin-bottom: 0.75rem;
+        }
+        
+        .footer-column ul li a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.3s ease;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .footer-column ul li a:hover {
+          color: #b366ff;
+        }
+        
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        
+        .social-links a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: rgba(179, 102, 255, 0.1);
+          color: #b366ff;
+          transition: all 0.3s ease;
+        }
+        
+        .social-links a:hover {
+          background: #b366ff;
+          color: white;
+          transform: translateY(-3px);
+        }
+        
+        .copyright {
+          max-width: 1200px;
+          margin: 3rem auto 0;
+          padding-top: 2rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.05);
+          text-align: center;
+          color: #64748b;
+          font-size: 0.9rem;
+        }
+        
+        @media (max-width: 768px) {
+          footer {
+            padding: 3rem 1rem 1rem;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-column">
+            <h3>Neural Glow</h3>
+            <p>Immersive 3D neural network visualization that transforms data into a luminous digital universe.</p>
+            <div class="social-links">
+              <a href="#"><i data-feather="twitter"></i></a>
+              <a href="#"><i data-feather="github"></i></a>
+              <a href="#"><i data-feather="linkedin"></i></a>
+              <a href="#"><i data-feather="instagram"></i></a>
+            </div>
+          </div>
+          
+          <div class="footer-column">
+            <h3>Explore</h3>
+            <ul>
+              <li><a href="/"><i data-feather="home"></i> Home</a></li>
+              <li><a href="#features"><i data-feather="layers"></i> Features</a></li>
+              <li><a href="#explore"><i data-feather="activity"></i> Interactive Demo</a></li>
+              <li><a href="#"><i data-feather="book"></i> Documentation</a></li>
+            </ul>
+          </div>
+          
+          <div class="footer-column">
+            <h3>Resources</h3>
+            <ul>
+              <li><a href="#"><i data-feather="download"></i> Download</a></li>
+              <li><a href="#"><i data-feather="help-circle"></i> Support</a></li>
+              <li><a href="#"><i data-feather="file-text"></i> API Docs</a></li>
+              <li><a href="#"><i data-feather="users"></i> Community</a></li>
+            </ul>
+          </div>
+          
+          <div class="footer-column">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="#"><i data-feather="info"></i> About Us</a></li>
+              <li><a href="#"><i data-feather="briefcase"></i> Careers</a></li>
+              <li><a href="#"><i data-feather="mail"></i> Contact</a></li>
+              <li><a href="#"><i data-feather="shield"></i> Privacy Policy</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="copyright">
+          <p>&copy; 2023 Neural Glow. All rights reserved. Transforming data into digital art.</p>
+        </div>
+      </footer>
+    `;
+    
+    // Initialize feather icons after a short delay to ensure DOM is ready
+    setTimeout(() => {
+      feather.replace();
+    }, 100);
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,139 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          top: 0;
+          width: 100%;
+          z-index: 1000;
+        }
+        
+        nav {
+          background: rgba(10, 10, 15, 0.8);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid rgba(179, 102, 255, 0.1);
+        }
+        
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .logo span {
+          color: #b366ff;
+        }
+        
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        
+        a {
+          color: #e2e8f0;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s ease;
+          position: relative;
+          padding: 0.5rem 0;
+        }
+        
+        a:hover {
+          color: #b366ff;
+        }
+        
+        a::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #b366ff, #6a00b8);
+          transition: width 0.3s ease;
+        }
+        
+        a:hover::after {
+          width: 100%;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background: rgba(10, 10, 15, 0.95);
+            backdrop-filter: blur(10px);
+            flex-direction: column;
+            padding: 1rem;
+            gap: 1rem;
+          }
+          
+          ul.active {
+            display: flex;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <i data-feather="cpu"></i>
+          <span>Neural</span>Glow
+        </div>
+        <button class="mobile-menu-btn" id="menuToggle">
+          <i data-feather="menu"></i>
+        </button>
+        <ul id="menu">
+          <li><a href="/"><i data-feather="home"></i> Home</a></li>
+          <li><a href="#features"><i data-feather="layers"></i> Features</a></li>
+          <li><a href="#explore"><i data-feather="activity"></i> Explore</a></li>
+          <li><a href="#"><i data-feather="user"></i> Account</a></li>
+        </ul>
+      </nav>
+    `;
+    
+    // Add mobile menu toggle functionality
+    setTimeout(() => {
+      const menuToggle = this.shadowRoot.getElementById('menuToggle');
+      const menu = this.shadowRoot.getElementById('menu');
+      
+      menuToggle.addEventListener('click', () => {
+        menu.classList.toggle('active');
+        const icon = menuToggle.querySelector('i');
+        if (menu.classList.contains('active')) {
+          icon.setAttribute('data-feather', 'x');
+        } else {
+          icon.setAttribute('data-feather', 'menu');
+        }
+        feather.replace();
+      });
+    }, 0);
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,149 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Glow - Immersive 3D Data Network</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+<body class="overflow-hidden">
+    <custom-navbar></custom-navbar>
+    
+    <!-- Hero Section with 3D Background -->
+    <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
+        <!-- Three.js Canvas Container -->
+        <div id="network-background" class="absolute inset-0 z-0"></div>
+        
+        <!-- Content Overlay -->
+        <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
+            <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
+                Digital <span class="text-purple-400">Neural</span> Universe
+            </h1>
+            <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
+                Step into a luminous purple nebula where energy threads weave through a living data cloud. 
+                Every pixel contributes to depth and motion, making you feel like you're looking into a deep, glowing field of digital life.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="#explore" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/30">
+                    Explore the Network
+                </a>
+                <a href="#features" class="bg-transparent border-2 border-purple-500 text-purple-300 hover:bg-purple-500/10 font-semibold py-3 px-8 rounded-full transition-all duration-300 shadow-lg shadow-purple-500/20">
+                    Learn More
+                </a>
+            </div>
+        </div>
+        
+        <!-- Scroll Indicator -->
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="text-white w-8 h-8"></i>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-gradient-to-b from-gray-900 to-black">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">Immersive Digital Experience</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    Our 3D neural network visualization combines cutting-edge technology with artistic design 
+                    to create an unparalleled digital environment.
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
+                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
+                        <i data-feather="layers" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-white mb-4">Multi-Layered Depth</h3>
+                    <p class="text-gray-400">
+                        Foreground mesh, mid-layer particles, and distant nebula glow create infinite depth 
+                        with parallax motion and energy fluctuations.
+                    </p>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
+                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
+                        <i data-feather="sun" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-white mb-4">Dynamic Lighting</h3>
+                    <p class="text-gray-400">
+                        Vibrant violet nodes emit halos that pulse with energy, creating a breathing-like 
+                        rhythm across the entire network.
+                    </p>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
+                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
+                        <i data-feather="activity" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-white mb-4">Subtle Motion</h3>
+                    <p class="text-gray-400">
+                        Gentle wave undulations and slow drift motions make the structure appear to float 
+                        freely in 3D space with liquid energy flow.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Interactive Demo Section -->
+    <section id="explore" class="py-20 relative">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-indigo-900/20"></div>
+        <div class="container mx-auto px-4 relative">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">Interactive Neural Network</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    Experience the network in motion. Move your cursor to influence the flow of energy 
+                    and watch as data pulses through the digital cosmos.
+                </p>
+            </div>
+            
+            <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-700 p-1 max-w-4xl mx-auto">
+                <div id="interactive-demo" class="h-96 rounded-xl overflow-hidden relative">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="text-center p-8">
+                            <div class="inline-block p-4 bg-purple-600/20 rounded-full mb-6">
+                                <i data-feather="mouse-pointer" class="text-purple-400 w-12 h-12"></i>
+                            </div>
+                            <h3 class="text-2xl font-bold text-white mb-2">Move Your Cursor</h3>
+                            <p class="text-gray-400">Interact with the neural network to see energy respond to your movements</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer CTA -->
+    <section class="py-20 bg-gradient-to-t from-gray-900 to-black">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-4xl font-bold text-white mb-6">Ready to Dive In?</h2>
+            <p class="text-gray-400 max-w-2xl mx-auto mb-10 text-xl">
+                Join thousands of explorers experiencing the future of digital visualization today.
+            </p>
+            <a href="#" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold py-4 px-10 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/30 text-lg">
+                Begin Your Journey
+            </a>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,170 @@
+// Shared JavaScript across all pages
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Three.js scene for the hero background
+    initNetworkBackground();
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                window.scrollTo({
+                    top: target.offsetTop,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+});
+
+function initNetworkBackground() {
+    // Get the container element
+    const container = document.getElementById('network-background');
+    
+    // Set up Three.js scene
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(renderer.domElement);
+    
+    // Create particle system for the network
+    const particles = 2000;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(particles * 3);
+    const colors = new Float32Array(particles * 3);
+    
+    // Create node positions
+    for (let i = 0; i < particles * 3; i += 3) {
+        positions[i] = (Math.random() - 0.5) * 200;
+        positions[i + 1] = (Math.random() - 0.5) * 200;
+        positions[i + 2] = (Math.random() - 0.5) * 200;
+    }
+    
+    // Create node colors (purple spectrum)
+    for (let i = 0; i < particles * 3; i += 3) {
+        colors[i] = Math.random() * 0.5 + 0.5;     // R
+        colors[i + 1] = Math.random() * 0.3;       // G
+        colors[i + 2] = Math.random() * 0.8 + 0.2; // B
+    }
+    
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+    
+    // Create material with custom shader for glow effect
+    const material = new THREE.PointsMaterial({
+        size: 2,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.8,
+        blending: THREE.AdditiveBlending
+    });
+    
+    const points = new THREE.Points(geometry, material);
+    scene.add(points);
+    
+    // Create connecting lines
+    const lineGeometry = new THREE.BufferGeometry();
+    const linePositions = [];
+    const lineColors = [];
+    
+    // Connect nearby nodes
+    for (let i = 0; i < particles; i++) {
+        for (let j = i + 1; j < particles; j++) {
+            const dx = positions[i * 3] - positions[j * 3];
+            const dy = positions[i * 3 + 1] - positions[j * 3 + 1];
+            const dz = positions[i * 3 + 2] - positions[j * 3 + 2];
+            const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+            
+            // Only connect relatively close nodes
+            if (distance < 20) {
+                linePositions.push(
+                    positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2],
+                    positions[j * 3], positions[j * 3 + 1], positions[j * 3 + 2]
+                );
+                
+                // Line color based on node colors
+                lineColors.push(
+                    colors[i * 3], colors[i * 3 + 1], colors[i * 3 + 2],
+                    colors[j * 3], colors[j * 3 + 1], colors[j * 3 + 2]
+                );
+            }
+        }
+    }
+    
+    lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
+    lineGeometry.setAttribute('color', new THREE.Float32BufferAttribute(lineColors, 3));
+    
+    const lineMaterial = new THREE.LineBasicMaterial({
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.3,
+        blending: THREE.AdditiveBlending
+    });
+    
+    const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
+    scene.add(lines);
+    
+    // Position camera
+    camera.position.z = 50;
+    
+    // Add subtle ambient light
+    const ambientLight = new THREE.AmbientLight(0x6a00b8, 0.2);
+    scene.add(ambientLight);
+    
+    // Add directional light for highlights
+    const directionalLight = new THREE.DirectionalLight(0xb366ff, 0.5);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    
+    // Handle window resize
+    window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    
+    // Mouse movement effect
+    let mouseX = 0;
+    let mouseY = 0;
+    
+    document.addEventListener('mousemove', (event) => {
+        mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+        mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+    });
+    
+    // Animation variables
+    let time = 0;
+    
+    // Animation loop
+    function animate() {
+        requestAnimationFrame(animate);
+        
+        time += 0.01;
+        
+        // Rotate the entire scene slowly
+        points.rotation.x = time * 0.05;
+        points.rotation.y = time * 0.03;
+        lines.rotation.x = time * 0.05;
+        lines.rotation.y = time * 0.03;
+        
+        // Apply mouse parallax effect
+        camera.position.x += (mouseX * 5 - camera.position.x) * 0.05;
+        camera.position.y += (mouseY * 5 - camera.position.y) * 0.05;
+        camera.lookAt(scene.position);
+        
+        // Pulsing effect for nodes
+        const positions = points.geometry.attributes.position.array;
+        for (let i = 0; i < positions.length; i += 3) {
+            positions[i + 1] += Math.sin(time + i * 0.01) * 0.02;
+        }
+        points.geometry.attributes.position.needsUpdate = true;
+        
+        renderer.render(scene, camera);
+    }
+    
+    animate();
+}

style.css

@@ -1,28 +1,97 @@
+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --primary-purple: #b366ff;
+  --secondary-purple: #6a00b8;
+  --accent-magenta: #ff66ff;
+  --dark-bg: #0a0a0f;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--dark-bg);
+  color: #fff;
+  overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(10, 10, 15, 0.5);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--primary-purple), var(--secondary-purple));
+  border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #c47bff, #7a00d8);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Three.js canvas container */
+#network-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Hero section enhancements */
+#hero {
+  position: relative;
+  isolation: isolate;
 }
+
+/* Feature cards animation */
+.group:hover .w-14 {
+  transform: translateY(-5px);
+  transition: transform 0.3s ease;
+}
+
+/* Interactive demo styling */
+#interactive-demo {
+  position: relative;
+  background: radial-gradient(circle at center, rgba(179, 102, 255, 0.1) 0%, transparent 70%);
+  border: 1px solid rgba(179, 102, 255, 0.2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #hero h1 {
+    font-size: 2.5rem;
+  }
+  
+  .feature-card {
+    margin-bottom: 2rem;
+  }
+}
+
+/* Animation keyframes */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(179, 102, 255, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(179, 102, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(179, 102, 255, 0);
+  }
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}