diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/homepage/Home script.js b/homepage/Home script.js
new file mode 100644
index 0000000..7fb9015
--- /dev/null
+++ b/homepage/Home script.js	
@@ -0,0 +1,401 @@
+// OpenDots - Stunning Homepage JavaScript
+
+const CHAR_SPEED   = 28;   // faster = lower number
+const LINE_PAUSE   = 500;  // gap between the two lines
+const START_DELAY  = 600;  // wait before typing begins
+document.addEventListener('DOMContentLoaded', function() {
+    
+   
+    // SMOOTH SCROLLING
+   
+    const links = document.querySelectorAll('a[href^="#"]');
+    
+    links.forEach(link => {
+        link.addEventListener('click', function(e) {
+            const href = this.getAttribute('href');
+            
+            if (href === '#') {
+                e.preventDefault();
+                return;
+            }
+            
+            const target = document.querySelector(href);
+            
+            if (target) {
+                e.preventDefault();
+                const navHeight = document.querySelector('.navbar').offsetHeight;
+                const targetPosition = target.offsetTop - navHeight - 20;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    
+   
+    // NAVBAR SCROLL EFFECT
+   
+    const navbar = document.querySelector('.navbar');
+    let lastScroll = 0;
+    
+    window.addEventListener('scroll', function() {
+        const currentScroll = window.pageYOffset;
+        
+        if (currentScroll > 100) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+        
+        lastScroll = currentScroll;
+    });
+    
+   
+    // INTERSECTION OBSERVER FOR ANIMATIONS
+   
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -100px 0px'
+    };
+    
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+    
+    // Observe elements for scroll animation
+    const animatedElements = document.querySelectorAll('.feature-card, .use-case-card, .tech-category');
+    animatedElements.forEach((element, index) => {
+        element.style.opacity = '0';
+        element.style.transform = 'translateY(50px)';
+        element.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+        observer.observe(element);
+    });
+    
+   
+    // DYNAMIC GRADIENT ORB MOVEMENT
+   
+    const orbs = document.querySelectorAll('.gradient-orb');
+    let mouseX = 0;
+    let mouseY = 0;
+    
+    document.addEventListener('mousemove', function(e) {
+        mouseX = e.clientX / window.innerWidth;
+        mouseY = e.clientY / window.innerHeight;
+        
+        orbs.forEach((orb, index) => {
+            const speed = (index + 1) * 0.5;
+            const x = (mouseX - 0.5) * 50 * speed;
+            const y = (mouseY - 0.5) * 50 * speed;
+            
+            orb.style.transform = `translate(${x}px, ${y}px)`;
+        });
+    });
+    
+   
+    // FLOATING CARDS PARALLAX
+   
+    const floatingCards = document.querySelectorAll('.floating-card');
+    
+    window.addEventListener('scroll', function() {
+        const scrolled = window.pageYOffset;
+        
+        floatingCards.forEach((card, index) => {
+            const speed = (index + 1) * 0.1;
+            const yPos = -(scrolled * speed);
+            card.style.transform = `translateY(${yPos}px)`;
+        });
+    });
+    
+   
+    // ANIMATED NUMBERS (Stats Counter)
+   
+    const stats = document.querySelectorAll('.stat-number');
+    let hasAnimated = false;
+    
+    const statsObserver = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting && !hasAnimated) {
+                hasAnimated = true;
+                animateStats();
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    const heroStats = document.querySelector('.hero-stats');
+    if (heroStats) {
+        statsObserver.observe(heroStats);
+    }
+    
+    function animateStats() {
+        stats.forEach(stat => {
+            const text = stat.textContent;
+            // Only animate if it's a number
+            if (!isNaN(text.replace('%', ''))) {
+                const target = parseInt(text);
+                let current = 0;
+                const increment = target / 50;
+                
+                const timer = setInterval(() => {
+                    current += increment;
+                    if (current >= target) {
+                        stat.textContent = text;
+                        clearInterval(timer);
+                    } else {
+                        stat.textContent = Math.floor(current) + (text.includes('%') ? '%' : '');
+                    }
+                }, 30);
+            }
+        });
+    }
+    
+   
+    // BUTTON RIPPLE EFFECT
+   
+    const buttons = document.querySelectorAll('.btn');
+    
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            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;
+            
+            ripple.style.cssText = `
+                position: absolute;
+                width: ${size}px;
+                height: ${size}px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.6);
+                left: ${x}px;
+                top: ${y}px;
+                pointer-events: none;
+                transform: scale(0);
+                animation: ripple-animation 0.6s ease-out;
+            `;
+            
+            this.style.position = 'relative';
+            this.style.overflow = 'hidden';
+            this.appendChild(ripple);
+            
+            setTimeout(() => ripple.remove(), 600);
+        });
+    });
+    
+    // Add ripple animation CSS
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes ripple-animation {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+    
+   
+    // FEATURE CARDS TILT EFFECT
+   
+    const featureCards = document.querySelectorAll('.feature-card');
+    
+    featureCards.forEach(card => {
+        card.addEventListener('mousemove', function(e) {
+            const rect = this.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;
+            
+            this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-12px)`;
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = '';
+        });
+    });
+    
+   
+    // PROGRESS BAR ANIMATION
+   
+    const progressBars = document.querySelectorAll('.progress-fill');
+    
+    progressBars.forEach(bar => {
+        const animate = () => {
+            bar.style.width = '0%';
+            setTimeout(() => {
+                bar.style.transition = 'width 2s ease-in-out';
+                bar.style.width = '70%';
+            }, 100);
+        };
+        
+        animate();
+        setInterval(animate, 3000);
+    });
+    
+   
+    // TECH TAGS WAVE ANIMATION
+   
+    const techTags = document.querySelectorAll('.tech-tag');
+    
+    techTags.forEach((tag, index) => {
+        setTimeout(() => {
+            tag.style.opacity = '0';
+            tag.style.transform = 'translateY(10px)';
+            tag.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+            
+            setTimeout(() => {
+                tag.style.opacity = '1';
+                tag.style.transform = 'translateY(0)';
+            }, 50);
+        }, index * 50);
+    });
+    
+   
+    // LAZY LOADING OPTIMIZATION
+   
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    img.classList.remove('lazy');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        const images = document.querySelectorAll('img[data-src]');
+        images.forEach(img => imageObserver.observe(img));
+    }
+    
+   
+    // PERFORMANCE MONITORING
+   
+    if ('requestIdleCallback' in window) {
+        requestIdleCallback(() => {
+            // Preload critical resources
+            const criticalLinks = document.querySelectorAll('a[href="index.html"]');
+            criticalLinks.forEach(link => {
+                const preloadLink = document.createElement('link');
+                preloadLink.rel = 'prefetch';
+                preloadLink.href = link.getAttribute('href');
+                document.head.appendChild(preloadLink);
+            });
+        });
+    }
+    
+   
+    // EASTER EGGS
+   
+    console.log('%c🚀 OpenDots', 'font-size: 32px; font-weight: bold; background: linear-gradient(135deg, #000 0%, #666 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;');
+    console.log('%c✨ Stunning Black & White Design', 'font-size: 16px; color: #666;');
+    console.log('%c🎨 Featuring: Gradients • Glassmorphism • Animations', 'font-size: 14px; color: #999;');
+    console.log('%c💻 GitHub: https://github.com/multiverseweb/OpenDots', 'font-size: 14px; color: #000; font-weight: bold;');
+    console.log('%c🤝 Interested in contributing? We\'d love to have you!', 'font-size: 14px; color: #22c55e; font-weight: bold;');
+    
+    // Konami Code Easter Egg
+    let konamiCode = [];
+    const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+    
+    document.addEventListener('keydown', (e) => {
+        konamiCode.push(e.key);
+        konamiCode = konamiCode.slice(-konamiSequence.length);
+        
+        if (konamiCode.join('') === konamiSequence.join('')) {
+            console.log('%c🎮 KONAMI CODE ACTIVATED! 🎮', 'font-size: 24px; color: #000; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);');
+            console.log('%c🌟 You found the secret! Thanks for exploring!', 'font-size: 16px; color: #666;');
+            
+            // Add fun visual effect
+            document.body.style.animation = 'rainbow 2s ease-in-out';
+            setTimeout(() => {
+                document.body.style.animation = '';
+            }, 2000);
+        }
+    });
+    
+    // Rainbow animation for easter egg
+    const rainbowStyle = document.createElement('style');
+    rainbowStyle.textContent = `
+        @keyframes rainbow {
+            0%, 100% { filter: hue-rotate(0deg); }
+            50% { filter: hue-rotate(360deg); }
+        }
+    `;
+    document.head.appendChild(rainbowStyle);
+    
+   
+    // ACCESSIBILITY ENHANCEMENTS
+   
+    // Add keyboard navigation for cards
+    const interactiveCards = document.querySelectorAll('.feature-card, .use-case-card, .tech-category');
+    
+    interactiveCards.forEach(card => {
+        card.setAttribute('tabindex', '0');
+        
+        card.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                card.click();
+            }
+        });
+    });
+    
+   
+    // PAGE LOAD PERFORMANCE
+   
+    window.addEventListener('load', () => {
+        // Remove loading class if exists
+        document.body.classList.remove('loading');
+        
+        // Log performance metrics
+        if ('performance' in window) {
+            const perfData = window.performance.timing;
+            const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+            console.log(`%c⚡ Page loaded in ${pageLoadTime}ms`, 'color: #22c55e; font-weight: bold;');
+        }
+    });
+});
+
+// ============================================
+// UTILITY FUNCTIONS
+// ============================================
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+function throttle(func, limit) {
+    let inThrottle;
+    return function(...args) {
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+
+// Export for potential module use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { debounce, throttle };
+}
\ No newline at end of file
diff --git a/homepage/Home style.css b/homepage/Home style.css
new file mode 100644
index 0000000..eb29710
--- /dev/null
+++ b/homepage/Home style.css	
@@ -0,0 +1,1759 @@
+/* ============================================
+   STUNNING BLACK & WHITE THEME - OPENDOTS
+   Modern • Gradient • Glassmorphism • Animated
+   ============================================ */
+
+/* ============================================
+   CSS VARIABLES
+   ============================================ */
+:root {
+  /* Core Colors */
+  --black: #000000;
+  --white: #ffffff;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #e5e5e5;
+  --gray-300: #d4d4d4;
+  --gray-400: #a3a3a3;
+  --gray-500: #737373;
+  --gray-600: #525252;
+  --gray-700: #404040;
+  --gray-800: #262626;
+  --gray-900: #171717;
+  
+  /* Gradients */
+  --gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --gradient-light: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
+  --gradient-gray: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
+  --gradient-radial: radial-gradient(circle at 50% 50%, #ffffff 0%, #f5f5f5 100%);
+  
+  /* Typography */
+  --font-main: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  
+  /* Spacing */
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  
+  /* Effects */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  
+  --blur-sm: blur(8px);
+  --blur-md: blur(16px);
+  --blur-lg: blur(24px);
+}
+
+/* ============================================
+   RESET & BASE
+   ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-main);
+  background: var(--white);
+  color: var(--gray-900);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* ============================================
+   ANIMATED BACKGROUND
+   ============================================ */
+.bg-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.3;
+  animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 70%);
+  top: -200px;
+  left: -200px;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(0,0,0,0.15) 0%, transparent 70%);
+  bottom: -150px;
+  right: -150px;
+  animation-delay: 7s;
+}
+
+.orb-3 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 70%);
+  top: 40%;
+  right: 20%;
+  animation-delay: 14s;
+}
+
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
+  background-size: 50px 50px;
+  opacity: 0.4;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+/* ============================================
+   NAVIGATION
+   ============================================ */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  backdrop-filter: var(--blur-md);
+  background: rgba(255, 255, 255, 0.8);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar.scrolled {
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: var(--shadow-lg);
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--space-md) var(--space-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.logo-wrapper {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+.logo-icon {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.logo-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 70%);
+  filter: blur(10px);
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.logo-text {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--black);
+  letter-spacing: -0.02em;
+}
+
+.logo-badge {
+  padding: 0.25rem 0.5rem;
+  background: var(--black);
+  color: var(--white);
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.nav-link {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--gray-700);
+  text-decoration: none;
+  position: relative;
+  transition: color 0.3s ease;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--black);
+  transition: width 0.3s ease;
+}
+
+.nav-link:hover {
+  color: var(--black);
+}
+
+.nav-link:hover::after {
+  width: 100%;
+}
+
+.btn-github {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 0.5rem 1rem;
+  background: var(--black);
+  color: var(--white);
+  border-radius: 8px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+}
+
+.btn-github:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
+}
+
+/* ============================================
+   HERO SECTION
+   ============================================ */
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: var(--space-3xl) var(--space-lg);
+  margin-top: 80px;
+}
+
+.hero-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3xl);
+  align-items: center;
+}
+
+.hero-badge-wrapper {
+  position: relative;
+  display: inline-flex;
+  margin-bottom: var(--space-lg);
+}
+
+.pulse-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  border: 2px solid var(--black);
+  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.3);
+    opacity: 0;
+  }
+}
+
+.hero-badge {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-md);
+  background: rgba(0, 0, 0, 0.05);
+  backdrop-filter: var(--blur-sm);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 100px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.badge-icon {
+  font-size: 1.25rem;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  margin-bottom: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+}
+
+.title-line {
+  color: var(--gray-900);
+}
+
+.title-highlight {
+  background: linear-gradient(135deg, var(--black) 0%, var(--gray-700) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  position: relative;
+  display: inline-block;
+}
+
+.title-highlight::after {
+  content: '';
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0;
+  right: 0;
+  height: 0.75rem;
+  background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 100%);
+  z-index: -1;
+  border-radius: 4px;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--gray-600);
+  margin-bottom: var(--space-xl);
+  max-width: 540px;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 12px;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
+.btn-primary {
+  background: var(--black);
+  color: var(--white);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-2xl);
+}
+
+.btn-secondary {
+  background: var(--white);
+  color: var(--black);
+  border: 2px solid var(--black);
+}
+
+.btn-secondary:hover {
+  background: var(--black);
+  color: var(--white);
+  transform: translateY(-3px);
+}
+
+.btn-large {
+  padding: 1.25rem 2.5rem;
+  font-size: 1.125rem;
+}
+
+.hero-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  background: rgba(0, 0, 0, 0.02);
+  backdrop-filter: var(--blur-sm);
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.stat-icon {
+  font-size: 2rem;
+}
+
+.stat-number {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--black);
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* ============================================
+   HERO VISUAL - FLOATING CARDS
+   ============================================ */
+.hero-visual {
+  position: relative;
+  height: 600px;
+}
+
+.visual-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.floating-card {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: var(--blur-md);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  padding: var(--space-lg);
+  box-shadow: var(--shadow-xl);
+  transition: all 0.3s ease;
+}
+
+.floating-card:hover {
+  transform: translateY(-10px);
+  box-shadow: var(--shadow-2xl);
+}
+
+.card-1 {
+  top: 10%;
+  left: 0;
+  width: 280px;
+  animation: float-1 6s ease-in-out infinite;
+}
+
+.card-2 {
+  top: 40%;
+  right: 0;
+  width: 300px;
+  animation: float-2 7s ease-in-out infinite;
+}
+
+.card-3 {
+  bottom: 10%;
+  left: 10%;
+  width: 260px;
+  animation: float-3 5s ease-in-out infinite;
+}
+
+@keyframes float-1 {
+  0%, 100% { transform: translateY(0) rotate(-2deg); }
+  50% { transform: translateY(-20px) rotate(2deg); }
+}
+
+@keyframes float-2 {
+  0%, 100% { transform: translateY(0) rotate(2deg); }
+  50% { transform: translateY(-25px) rotate(-2deg); }
+}
+
+@keyframes float-3 {
+  0%, 100% { transform: translateY(0) rotate(-1deg); }
+  50% { transform: translateY(-15px) rotate(1deg); }
+}
+
+.card-glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(0,0,0,0.05) 0%, transparent 70%);
+  filter: blur(30px);
+  z-index: -1;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-md);
+}
+
+.card-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  background: #22c55e;
+  border-radius: 50%;
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+.mini-chart {
+  height: 80px;
+  background: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 100%);
+  border-radius: 8px;
+  margin-bottom: var(--space-md);
+  position: relative;
+  overflow: hidden;
+}
+
+.chart-line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60%;
+  background: linear-gradient(135deg, var(--black) 0%, var(--gray-700) 100%);
+  clip-path: polygon(0 70%, 20% 50%, 40% 60%, 60% 30%, 80% 40%, 100% 20%, 100% 100%, 0 100%);
+  animation: chart-wave 3s ease-in-out infinite;
+}
+
+@keyframes chart-wave {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.metric {
+  padding: 0.25rem 0.5rem;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
+}
+
+.code-preview {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.code-line {
+  color: var(--gray-700);
+  margin-bottom: 0.25rem;
+}
+
+.code-keyword {
+  color: var(--black);
+  font-weight: 600;
+}
+
+.code-number {
+  color: var(--gray-600);
+}
+
+.code-string {
+  color: var(--gray-500);
+}
+
+.ai-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-sm);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.ai-pulse {
+  width: 8px;
+  height: 8px;
+  background: var(--black);
+  border-radius: 50%;
+  animation: pulse-dot 1s ease-in-out infinite;
+}
+
+.progress-bar {
+  height: 8px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--black) 0%, var(--gray-700) 100%);
+  width: 70%;
+  animation: progress 2s ease-in-out infinite;
+}
+
+@keyframes progress {
+  0% { width: 0%; }
+  50% { width: 70%; }
+  100% { width: 0%; }
+}
+
+.geometric-shape {
+  position: absolute;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  animation: rotate-shape 20s linear infinite;
+}
+
+.shape-1 {
+  width: 100px;
+  height: 100px;
+  top: 5%;
+  right: 5%;
+  animation-duration: 15s;
+}
+
+.shape-2 {
+  width: 80px;
+  height: 80px;
+  bottom: 30%;
+  right: 15%;
+  animation-duration: 20s;
+  animation-direction: reverse;
+}
+
+.shape-3 {
+  width: 60px;
+  height: 60px;
+  top: 50%;
+  left: 5%;
+  animation-duration: 25s;
+}
+
+@keyframes rotate-shape {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ============================================
+   SECTIONS
+   ============================================ */
+.features,
+.tech-stack,
+.use-cases {
+  position: relative;
+  z-index: 1;
+  padding: var(--space-3xl) var(--space-lg);
+}
+
+.features {
+  background: var(--gradient-light);
+}
+
+.tech-stack {
+  background: var(--white);
+}
+
+.use-cases {
+  background: var(--gradient-gray);
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--space-3xl);
+}
+
+.section-tag {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: var(--black);
+  color: var(--white);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  border-radius: 6px;
+  margin-bottom: var(--space-md);
+}
+
+.section-title {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: var(--space-md);
+}
+
+.title-gradient {
+  background: linear-gradient(135deg, var(--black) 0%, var(--gray-600) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.section-description {
+  font-size: 1.125rem;
+  color: var(--gray-600);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* ============================================
+   FEATURES GRID
+   ============================================ */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--space-xl);
+}
+
+.feature-card {
+  position: relative;
+  padding: var(--space-xl);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: var(--blur-md);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--black), var(--gray-700));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.4s ease;
+}
+
+.feature-card:hover::before {
+  transform: scaleX(1);
+}
+
+.feature-card:hover {
+  transform: translateY(-12px);
+  box-shadow: var(--shadow-2xl);
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.feature-number {
+  position: absolute;
+  top: var(--space-lg);
+  right: var(--space-lg);
+  font-size: 3rem;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.03);
+  line-height: 1;
+}
+
+.feature-icon {
+  margin-bottom: var(--space-md);
+  color: var(--black);
+}
+
+.feature-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: var(--space-sm);
+  color: var(--black);
+}
+
+.feature-description {
+  color: var(--gray-600);
+  line-height: 1.6;
+}
+
+.feature-hover-effect {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  background: linear-gradient(0deg, rgba(0,0,0,0.02), transparent);
+  transition: height 0.4s ease;
+}
+
+.feature-card:hover .feature-hover-effect {
+  height: 100%;
+}
+
+/* ============================================
+   TECH STACK
+   ============================================ */
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-xl);
+}
+
+.tech-category {
+  padding: var(--space-xl);
+  background: var(--gradient-light);
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.tech-category:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--shadow-lg);
+}
+
+.tech-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-md);
+}
+
+.tech-heading {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+}
+
+.tech-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.tech-tag {
+  padding: 0.5rem 1rem;
+  background: var(--white);
+  color: var(--black);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  cursor: default;
+}
+
+.tech-tag:hover {
+  background: var(--black);
+  color: var(--white);
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   USE CASES
+   ============================================ */
+.use-cases-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--space-lg);
+}
+
+.use-case-card {
+  padding: var(--space-xl);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: var(--blur-md);
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.use-case-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--shadow-xl);
+}
+
+.use-case-icon {
+  font-size: 3.5rem;
+  margin-bottom: var(--space-md);
+}
+
+.use-case-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: var(--space-sm);
+}
+
+.use-case-description {
+  color: var(--gray-600);
+  line-height: 1.6;
+}
+
+/* ============================================
+   CTA SECTION
+   ============================================ */
+.cta {
+  position: relative;
+  padding: var(--space-3xl) var(--space-lg);
+  background: var(--gradient-dark);
+  color: var(--white);
+  overflow: hidden;
+}
+
+.cta-container {
+  position: relative;
+  z-index: 1;
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.cta-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  filter: blur(60px);
+}
+
+.cta-title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+  line-height: 1.2;
+}
+
+.cta-description {
+  font-size: 1.25rem;
+  margin-bottom: var(--space-xl);
+  color: var(--gray-300);
+}
+
+.cta-buttons {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.cta .btn-primary {
+  background: var(--white);
+  color: var(--black);
+}
+
+.cta .btn-primary:hover {
+  background: var(--gray-100);
+}
+
+.cta .btn-secondary {
+  background: transparent;
+  color: var(--white);
+  border-color: var(--white);
+}
+
+.cta .btn-secondary:hover {
+  background: var(--white);
+  color: var(--black);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+.footer {
+  background: var(--white);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: var(--space-3xl) var(--space-lg) var(--space-lg);
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: var(--space-xl);
+  margin-bottom: var(--space-xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
+}
+
+.footer-logo-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.footer-logo-text {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.footer-tagline {
+  color: var(--gray-600);
+  margin-bottom: var(--space-md);
+  line-height: 1.6;
+}
+
+.footer-social {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--black);
+  color: var(--white);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.social-link:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+}
+
+.footer-heading {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+}
+
+.footer-list {
+  list-style: none;
+}
+
+.footer-list li {
+  margin-bottom: var(--space-xs);
+}
+
+.footer-list a {
+  color: var(--gray-600);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-list a:hover {
+  color: var(--black);
+}
+
+.footer-bottom {
+  text-align: center;
+}
+
+.footer-copyright {
+  color: var(--gray-600);
+  font-size: 0.875rem;
+}
+
+.footer-copyright a {
+  color: var(--gray-800);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.3s ease;
+}
+
+.footer-copyright a:hover {
+  color: var(--black);
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  .hero-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .hero-visual {
+    height: 500px;
+    order: -1;
+  }
+  
+  .footer-content {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-links {
+    gap: var(--space-md);
+  }
+  
+  .btn-github span {
+    display: none;
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-buttons {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .hero-stats {
+    flex-direction: column;
+  }
+  
+  .stat-divider {
+    width: 100%;
+    height: 1px;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .footer-content {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-title {
+    font-size: 2rem;
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .hero-visual {
+    height: 400px;
+  }
+  
+  .floating-card {
+    padding: var(--space-md);
+  }
+}
+/* ============================================
+   DARK MODE VARIABLES & OVERRIDES
+   ============================================ */
+:root {
+  --dm-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
+}
+
+html.dark {
+  --white: #0d0d0d;
+  --black: #f5f5f5;
+  --gray-50: #111111;
+  --gray-100: #1a1a1a;
+  --gray-200: #242424;
+  --gray-300: #2e2e2e;
+  --gray-400: #555555;
+  --gray-500: #777777;
+  --gray-600: #aaaaaa;
+  --gray-700: #cccccc;
+  --gray-800: #e0e0e0;
+  --gray-900: #f5f5f5;
+  --gradient-dark: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
+  --gradient-light: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
+  --gradient-gray: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
+}
+
+html.dark body {
+  background: #0d0d0d;
+  color: #f5f5f5;
+}
+
+html.dark .navbar {
+  background: rgba(13, 13, 13, 0.85);
+  border-bottom-color: rgba(255,255,255,0.08);
+}
+
+html.dark .navbar.scrolled {
+  background: rgba(13, 13, 13, 0.97);
+}
+
+html.dark .hero-badge {
+  background: rgba(255,255,255,0.07);
+  border-color: rgba(255,255,255,0.12);
+}
+
+html.dark .floating-card {
+  background: rgba(30,30,30,0.9);
+  border-color: rgba(255,255,255,0.08);
+}
+
+html.dark .feature-card {
+  background: rgba(20,20,20,0.9);
+  border-color: rgba(255,255,255,0.07);
+}
+
+html.dark .tech-category {
+  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
+  border-color: rgba(255,255,255,0.07);
+}
+
+html.dark .tech-tag {
+  background: #0d0d0d;
+  color: #f5f5f5;
+  border-color: rgba(255,255,255,0.1);
+}
+
+html.dark .tech-tag:hover {
+  background: #f5f5f5;
+  color: #0d0d0d;
+}
+
+html.dark .use-case-card {
+  background: rgba(20,20,20,0.9);
+  border-color: rgba(255,255,255,0.07);
+}
+
+html.dark .footer {
+  background: #0d0d0d;
+  border-top-color: rgba(255,255,255,0.08);
+}
+
+html.dark .footer-content {
+  border-bottom-color: rgba(255,255,255,0.08);
+}
+
+html.dark .grid-overlay {
+  background-image: 
+    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+}
+
+html.dark .orb-1 { background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); }
+html.dark .orb-2 { background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%); }
+html.dark .orb-3 { background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%); }
+
+html.dark .preview-browser {
+  background: #181818;
+  border-color: rgba(255,255,255,0.1);
+  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+}
+
+html.dark .browser-bar {
+  background: #111;
+  border-bottom-color: rgba(255,255,255,0.08);
+}
+
+html.dark .browser-url {
+  background: #1a1a1a;
+  color: #aaa;
+  border-color: rgba(255,255,255,0.08);
+}
+
+html.dark .preview-badge {
+  background: rgba(20,20,20,0.9);
+  border-color: rgba(255,255,255,0.08);
+}
+
+html.dark .faq-item {
+  border-color: rgba(255,255,255,0.08);
+  background: rgba(20,20,20,0.6);
+}
+
+html.dark .faq-question {
+  color: #f5f5f5;
+}
+
+html.dark .faq-item.open {
+  border-color: rgba(255,255,255,0.2);
+  background: rgba(30,30,30,0.8);
+}
+
+html.dark .faq-answer p {
+  color: #aaa;
+}
+
+html.dark .faq-answer a {
+  color: #ddd;
+}
+
+html.dark .section-tag {
+  background: rgba(255,255,255,0.07);
+  color: #999;
+  border-color: rgba(255,255,255,0.1);
+}
+
+/* ============================================
+   DARK MODE TOGGLE BUTTON
+   ============================================ */
+.dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(0,0,0,0.15);
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.dark-mode-toggle:hover {
+  background: rgba(0,0,0,0.05);
+  transform: rotate(20deg);
+}
+
+html.dark .dark-mode-toggle {
+  border-color: rgba(255,255,255,0.15);
+}
+
+html.dark .dark-mode-toggle:hover {
+  background: rgba(255,255,255,0.07);
+}
+
+.toggle-icon {
+  position: absolute;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.sun-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.moon-icon {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+html.dark .sun-icon {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+html.dark .moon-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ============================================
+   PREVIEW SECTION
+   ============================================ */
+.preview-section {
+  position: relative;
+  z-index: 1;
+  padding: var(--space-3xl) var(--space-lg);
+  background: var(--gray-50);
+}
+
+.preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+.preview-browser {
+  width: 100%;
+  max-width: 1000px;
+  border-radius: 16px;
+  border: 1px solid rgba(0,0,0,0.12);
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.preview-browser:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 60px 100px rgba(0,0,0,0.18);
+}
+
+.browser-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 0.75rem 1rem;
+  background: #f5f5f5;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+}
+
+.browser-dots {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.browser-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.dot-red { background: #ff5f57; }
+.dot-yellow { background: #ffbd2e; }
+.dot-green { background: #28c840; }
+
+.browser-url {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.3rem 0.75rem;
+  background: white;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: #666;
+  font-family: var(--font-mono);
+  border: 1px solid rgba(0,0,0,0.08);
+}
+
+.browser-actions {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.preview-screen {
+  position: relative;
+  overflow: hidden;
+  max-height: 540px;
+}
+
+.preview-screenshot {
+  width: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: top;
+  transition: transform 6s ease;
+}
+
+.preview-browser:hover .preview-screenshot {
+  transform: translateY(-5%);
+}
+
+.preview-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--space-xl);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.preview-browser:hover .preview-overlay {
+  opacity: 1;
+}
+
+.preview-cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0.75rem 1.5rem;
+  background: white;
+  color: black;
+  border-radius: 50px;
+  font-weight: 700;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.preview-cta-btn:hover {
+  transform: scale(1.05);
+}
+
+.preview-badges {
+  display: flex;
+  gap: var(--space-lg);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.preview-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: rgba(255,255,255,0.9);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+}
+
+.preview-badge:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+}
+
+.pbadge-icon {
+  font-size: 1.75rem;
+}
+
+.pbadge-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--gray-900);
+}
+
+.pbadge-sub {
+  font-size: 0.8rem;
+  color: var(--gray-500);
+}
+
+/* ============================================
+   FAQ SECTION
+   ============================================ */
+.faq-section {
+  position: relative;
+  z-index: 1;
+  padding: var(--space-3xl) var(--space-lg);
+  background: var(--white);
+}
+
+.faq-grid {
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.faq-item {
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(8px);
+}
+
+.faq-item.open {
+  border-color: rgba(0,0,0,0.2);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+  background: rgba(255,255,255,0.95);
+}
+
+.faq-question {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-main);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  text-align: left;
+  gap: var(--space-md);
+  transition: color 0.2s ease;
+}
+
+.faq-question:hover {
+  color: var(--black);
+}
+
+.faq-icon {
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--gray-500);
+}
+
+.faq-item.open .faq-icon {
+  transform: rotate(45deg);
+  color: var(--black);
+}
+
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
+}
+
+.faq-item.open .faq-answer {
+  max-height: 300px;
+}
+
+.faq-answer p {
+  padding: 0 1.5rem 1.25rem;
+  color: var(--gray-600);
+  line-height: 1.7;
+  font-size: 0.9375rem;
+}
+
+.faq-answer a {
+  color: var(--gray-800);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.faq-answer a:hover {
+  color: var(--black);
+}
+
+@media (max-width: 768px) {
+  .preview-badges {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .browser-url span {
+    display: none;
+  }
+  
+  .faq-question {
+    font-size: 0.9375rem;
+    padding: 1rem 1.25rem;
+  }
+}
+
+/* ============================================
+   TYPING ANIMATION CURSOR
+   ============================================ */
+.typing-cursor {
+  display: inline-block;
+  font-weight: 300;
+  color: var(--gray-500);
+  margin-left: 1px;
+  vertical-align: baseline;
+  user-select: none;
+  animation: none; /* controlled via JS */
+}
+
+#heroTyping {
+  min-height: 3.4em; /* reserve space so layout doesn't jump */
+}
\ No newline at end of file
diff --git a/homepage/OPENDOT.jpg b/homepage/OPENDOT.jpg
new file mode 100644
index 0000000..6099f62
Binary files /dev/null and b/homepage/OPENDOT.jpg differ
diff --git a/homepage/home.html b/homepage/home.html
new file mode 100644
index 0000000..4bd6619
--- /dev/null
+++ b/homepage/home.html
@@ -0,0 +1,685 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenDots - Transform IoT Data Into Intelligence</title>
+    <link rel="shortcut icon" href="app/resrc/images/OpenDots.png" type="image/x-icon">
+    <link rel="stylesheet" href="Home style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <!-- Animated Background -->
+    <div class="bg-animation">
+        <div class="gradient-orb orb-1"></div>
+        <div class="gradient-orb orb-2"></div>
+        <div class="gradient-orb orb-3"></div>
+        <div class="grid-overlay"></div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="nav-logo">
+                <div class="logo-wrapper">
+                    <div class="logo-glow"></div>
+                </div>
+                <span class="logo-text">OpenDots</span>
+                <span class="logo-badge">v1.0</span>
+            </div>
+            <div class="nav-links">
+                <a href="#features" class="nav-link">Features</a>
+                <a href="#tech" class="nav-link">Technology</a>
+                <a href="#use-cases" class="nav-link">Use Cases</a>
+                <a href="#faq" class="nav-link">FAQ</a>
+                <a href="https://opendots.gitbook.io/docs/" target="_blank" class="nav-link">Docs</a>
+                <button class="dark-mode-toggle" id="darkModeToggle" aria-label="Toggle dark mode">
+                    <span class="toggle-icon sun-icon">☀️</span>
+                    <span class="toggle-icon moon-icon">🌙</span>
+                </button>
+                <a href="https://github.com/multiverseweb/OpenDots" target="_blank" class="btn-github">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                    <span>GitHub</span>
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-container">
+            <div class="hero-content">
+                <div class="hero-badge-wrapper">
+                    <div class="pulse-ring"></div>
+                    <div class="hero-badge">
+                        <span class="badge-icon">⚡</span>
+                        <span>Open Source • Real-Time • AI-Powered</span>
+                    </div>
+                </div>
+                
+                <h1 class="hero-title">
+                    <span class="title-line">Transform Your</span>
+                    <span class="title-highlight">IoT Data</span>
+                    <span class="title-line">Into Intelligence</span>
+                </h1>
+                
+                <p class="hero-description" id="heroTyping"></p>
+                
+                <div class="hero-buttons">
+                    <a href="../index.html" class="btn btn-primary">
+                        <span class="btn-text">Launch Platform</span>
+                        <span class="btn-icon">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </span>
+                    </a>
+                    <a href="https://opendots.gitbook.io/docs/" target="_blank" class="btn btn-secondary">
+                        <span class="btn-text">Documentation</span>
+                    </a>
+                </div>
+                
+                <div class="hero-stats">
+                    <div class="stat-item">
+                        <div class="stat-icon">🚀</div>
+                        <div class="stat-content">
+                            <div class="stat-number">100%</div>
+                            <div class="stat-label">Open Source</div>
+                        </div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-icon">⚡</div>
+                        <div class="stat-content">
+                            <div class="stat-number">Real-Time</div>
+                            <div class="stat-label">Data Streaming</div>
+                        </div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-icon">🤖</div>
+                        <div class="stat-content">
+                            <div class="stat-number">AI-Powered</div>
+                            <div class="stat-label">Insights</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="hero-visual">
+                <div class="visual-wrapper">
+                    <div class="floating-card card-1">
+                        <div class="card-glow"></div>
+                        <div class="card-content">
+                            <div class="card-header">
+                                <span class="card-title">Live Dashboard</span>
+                                <div class="status-dot"></div>
+                            </div>
+                            <div class="mini-chart">
+                                <div class="chart-line"></div>
+                            </div>
+                            <div class="card-footer">
+                                <span class="metric">24°C</span>
+                                <span class="metric">65%</span>
+                                <span class="metric">Active</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="floating-card card-2">
+                        <div class="card-glow"></div>
+                        <div class="card-content">
+                            <div class="code-preview">
+                                <div class="code-line"><span class="code-keyword">const</span> data = sensors.read();</div>
+                                <div class="code-line"><span class="code-keyword">if</span> (data.temp > <span class="code-number">25</span>) {</div>
+                                <div class="code-line">  alert.send(<span class="code-string">"High temp"</span>);</div>
+                                <div class="code-line">}</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="floating-card card-3">
+                        <div class="card-glow"></div>
+                        <div class="card-content">
+                            <div class="ai-indicator">
+                                <div class="ai-pulse"></div>
+                                <span>AI Analyzing...</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill"></div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="geometric-shape shape-1"></div>
+                    <div class="geometric-shape shape-2"></div>
+                    <div class="geometric-shape shape-3"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Preview Section -->
+    <section class="preview-section" id="preview">
+        <div class="section-container">
+            <div class="section-header">
+                <span class="section-tag">Preview</span>
+                <h2 class="section-title">
+                    See OpenDots <span class="title-gradient">In Action</span>
+                </h2>
+                <p class="section-description">
+                    Real-time air quality monitoring with AI-powered insights — powered by OpenDots
+                </p>
+            </div>
+            <div class="preview-wrapper">
+                <div class="preview-browser">
+                    <div class="browser-bar">
+                        <div class="browser-dots">
+                            <span class="browser-dot dot-red"></span>
+                            <span class="browser-dot dot-yellow"></span>
+                            <span class="browser-dot dot-green"></span>
+                        </div>
+                        <div class="browser-url">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                            <span>multiverseweb.github.io/OpenDots</span>
+                        </div>
+                        <div class="browser-actions">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+                        </div>
+                    </div>
+                    <div class="preview-screen">
+                        <img src="OPENDOT.jpg" alt="OpenDots Dashboard - Air Quality Monitoring with AI Insights" class="preview-screenshot" />
+                        <div class="preview-overlay">
+                            <a href="../../index.html" class="preview-cta-btn">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                                Launch Dashboard
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="preview-badges">
+                    <div class="preview-badge">
+                        <span class="pbadge-icon">📡</span>
+                        <div>
+                            <div class="pbadge-title">Live Data</div>
+                            <div class="pbadge-sub">WebSocket streaming</div>
+                        </div>
+                    </div>
+                    <div class="preview-badge">
+                        <span class="pbadge-icon">🤖</span>
+                        <div>
+                            <div class="pbadge-title">Infinity AI</div>
+                            <div class="pbadge-sub">Chat-based insights</div>
+                        </div>
+                    </div>
+                    <div class="preview-badge">
+                        <span class="pbadge-icon">📊</span>
+                        <div>
+                            <div class="pbadge-title">Multi-sensor</div>
+                            <div class="pbadge-sub">6+ chart types</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features" id="features">
+        <div class="section-container">
+            <div class="section-header">
+                <span class="section-tag">Features</span>
+                <h2 class="section-title">
+                    <span class="title-gradient">Powerful Tools</span> for Your IoT Journey
+                </h2>
+                <p class="section-description">
+                    Everything you need to collect, visualize, and analyze IoT data in one unified platform
+                </p>
+            </div>
+            
+            <div class="features-grid">
+                <div class="feature-card" data-index="1">
+                    <div class="feature-number">01</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="14" width="7" height="7"></rect>
+                            <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">Customizable Dashboards</h3>
+                    <p class="feature-description">
+                        Build pixel-perfect dashboards with drag-and-drop widgets. Flexible layouts, 
+                        real-time updates, and beautiful visualizations.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+                
+                <div class="feature-card" data-index="2">
+                    <div class="feature-number">02</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">Real-Time Streaming</h3>
+                    <p class="feature-description">
+                        WebSocket-powered live data streams. See sensor changes instantly with 
+                        zero latency and automatic reconnection.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+                
+                <div class="feature-card" data-index="3">
+                    <div class="feature-number">03</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+                            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                            <line x1="12" y1="22.08" x2="12" y2="12"></line>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">AI-Powered Insights</h3>
+                    <p class="feature-description">
+                        Ask questions in natural language. Get trends, anomalies, and predictions 
+                        powered by advanced AI models.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+                
+                <div class="feature-card" data-index="4">
+                    <div class="feature-number">04</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="2" y1="12" x2="22" y2="12"></line>
+                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">Platform Integration</h3>
+                    <p class="feature-description">
+                        Seamlessly connect with ThingSpeak, Adafruit IO, Blynk, Grafana, and 
+                        any MQTT broker. Works with your existing setup.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+                
+                <div class="feature-card" data-index="5">
+                    <div class="feature-number">05</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">Share & Collaborate</h3>
+                    <p class="feature-description">
+                        Create public project pages. Perfect for academic research, student projects, 
+                        and community monitoring initiatives.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+                
+                <div class="feature-card" data-index="6">
+                    <div class="feature-number">06</div>
+                    <div class="feature-icon">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                            <circle cx="12" cy="13" r="4"></circle>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title">Camera Support</h3>
+                    <p class="feature-description">
+                        Integrate live video feeds alongside sensor data. Monitor visual and 
+                        numerical data in perfect synchronization.
+                    </p>
+                    <div class="feature-hover-effect"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <!-- Use Cases -->
+    <section class="use-cases" id="use-cases">
+        <div class="section-container">
+            <div class="section-header">
+                <span class="section-tag">Use Cases</span>
+                <h2 class="section-title">
+                    Real-World <span class="title-gradient">Applications</span>
+                </h2>
+            </div>
+            
+            <div class="use-cases-grid">
+                <div class="use-case-card">
+                    <div class="use-case-icon">🎓</div>
+                    <h3 class="use-case-title">Academic Projects</h3>
+                    <p class="use-case-description">
+                        Student and research projects with easy data sharing and professional visualization
+                    </p>
+                </div>
+                
+                <div class="use-case-card">
+                    <div class="use-case-icon">🌱</div>
+                    <h3 class="use-case-title">Environmental Monitoring</h3>
+                    <p class="use-case-description">
+                        Track air quality, weather patterns, and environmental data for communities
+                    </p>
+                </div>
+                
+                <div class="use-case-card">
+                    <div class="use-case-icon">🔬</div>
+                    <h3 class="use-case-title">Research Data</h3>
+                    <p class="use-case-description">
+                        Real-time monitoring and analysis for scientific experiments and studies
+                    </p>
+                </div>
+                
+                <div class="use-case-card">
+                    <div class="use-case-icon">🏠</div>
+                    <h3 class="use-case-title">Smart Systems</h3>
+                    <p class="use-case-description">
+                        Home automation, energy monitoring, and industrial IoT dashboards
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section class="faq-section" id="faq">
+        <div class="section-container">
+            <div class="section-header">
+                <span class="section-tag">FAQ</span>
+                <h2 class="section-title">
+                    Frequently Asked <span class="title-gradient">Questions</span>
+                </h2>
+                <p class="section-description">
+                    Everything you need to know about OpenDots
+                </p>
+            </div>
+            <div class="faq-grid">
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>What is OpenDots?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>OpenDots is an open-source, integrated IoT data visualization and insight platform. It helps users turn raw sensor data into meaningful, real-time visuals and AI-powered insights. It is hardware-agnostic, data-first, and easy to extend.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>Which IoT platforms does OpenDots support?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>OpenDots integrates with ThingSpeak, Adafruit IO, Blynk, and Grafana out of the box. It also supports Arduino-based systems, MQTT brokers, and any platform that can send HTTP/WebSocket data.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>Is OpenDots free to use?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Yes! OpenDots is 100% open-source under the MIT License. You can use it freely for personal, academic, and commercial projects. Contributions from the community are always welcome.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>What is Infinity AI?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Infinity AI is OpenDots' built-in chat-based assistant. You can ask it natural-language questions about your sensor data — it provides trends, summaries, anomaly detection, and predictions based on your live data stream.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>What tech stack does OpenDots use?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>The frontend is built with HTML, CSS, JavaScript, and React.js. The backend uses Node.js and Express.js with MongoDB for storage. Real-time communication is handled via WebSockets, and AI features are powered by Python and LLM integrations.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>How can I contribute to OpenDots?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Head over to the <a href="https://github.com/multiverseweb/OpenDots" target="_blank">GitHub repository</a>, fork the project, and submit a pull request. You can also open issues for bugs or feature requests. All contributors are credited on the project page.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>Does it support live camera feeds?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Yes! OpenDots supports live camera feed integration alongside sensor data, allowing you to monitor visual and numerical data in perfect synchronization on the same dashboard.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question" aria-expanded="false">
+                        <span>Can I deploy OpenDots on my own server?</span>
+                        <span class="faq-icon">+</span>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Absolutely. OpenDots supports deployment on Vercel, Netlify, and standard cloud hosting. Check the documentation for step-by-step deployment guides including environment variable configuration and database setup.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+        <div class="cta-container">
+            <div class="cta-glow"></div>
+            <h2 class="cta-title">Ready to Transform Your Data?</h2>
+            <p class="cta-description">
+                Join developers and researchers building the future of IoT visualization
+            </p>
+            <div class="cta-buttons">
+                <a href="../index.html" class="btn btn-primary btn-large">
+                    <span class="btn-text">Launch OpenDots</span>
+                    <span class="btn-icon">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M5 12h14M12 5l7 7-7 7"/>
+                        </svg>
+                    </span>
+                </a>
+                <a href="https://github.com/multiverseweb/OpenDots" target="_blank" class="btn btn-secondary btn-large">
+                    <span class="btn-text">View on GitHub</span>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <div class="footer-logo">
+                        <span class="footer-logo-text">OpenDots</span>
+                    </div>
+                    <p class="footer-tagline">
+                        Open-source IoT data platform for the modern world
+                    </p>
+                    <div class="footer-social">
+                        <a href="https://github.com/multiverseweb/OpenDots" target="_blank" class="social-link">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="footer-section">
+                        <h4 class="footer-heading">Platform</h4>
+                        <ul class="footer-list">
+                            <li><a href="../index.html">Dashboard</a></li>
+                            <li><a href="#features">Features</a></li>
+                            <li><a href="https://opendots.gitbook.io/docs/" target="_blank">Documentation</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h4 class="footer-heading">Community</h4>
+                        <ul class="footer-list">
+                            <li><a href="https://github.com/multiverseweb/OpenDots" target="_blank">GitHub</a></li>
+                            <li><a href="https://github.com/multiverseweb/OpenDots/issues" target="_blank">Issues</a></li>
+                            <li><a href="https://github.com/multiverseweb/OpenDots/pulls" target="_blank">Pull Requests</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h4 class="footer-heading">Resources</h4>
+                        <ul class="footer-list">
+                            <li><a href="https://github.com/multiverseweb/OpenDots#readme" target="_blank">README</a></li>
+                            <li><a href="https://opendots.gitbook.io/docs/" target="_blank">API Docs</a></li>
+                            <li><a href="https://github.com/multiverseweb/OpenDots/blob/main/LICENSE" target="_blank">License</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p class="footer-copyright">
+                    © 2025 OpenDots. Open source under MIT License. 
+                   
+                </p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="Home script.js"></script>
+    <script>
+    // Dark Mode Toggle
+    const toggle = document.getElementById('darkModeToggle');
+    const html = document.documentElement;
+    
+    // Load saved preference
+    if (localStorage.getItem('darkMode') === 'true') {
+        html.classList.add('dark');
+    }
+    
+    toggle.addEventListener('click', () => {
+        html.classList.toggle('dark');
+        localStorage.setItem('darkMode', html.classList.contains('dark'));
+    });
+
+    // FAQ Accordion
+    document.querySelectorAll('.faq-question').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const item = btn.closest('.faq-item');
+            const isOpen = item.classList.contains('open');
+            
+            // Close all
+            document.querySelectorAll('.faq-item').forEach(i => {
+                i.classList.remove('open');
+                i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
+            });
+            
+            // Open clicked if it was closed
+            if (!isOpen) {
+                item.classList.add('open');
+                btn.setAttribute('aria-expanded', 'true');
+            }
+        });
+    });
+    </script>
+    <script>
+    // ============================================
+    // TYPING ANIMATION — Hero Subtitle
+    // ============================================
+    (function() {
+        const el = document.getElementById('heroTyping');
+        if (!el) return;
+
+        const lines = [
+            "An integrated platform that unifies data collection, visualization, and AI-powered analysis for IoT projects.",
+            "Hardware-agnostic. Data-first. Built for the future."
+        ];
+
+        const CHAR_SPEED   = 28;   // ms per character
+        const LINE_PAUSE   = 500;  // ms pause between lines
+        const CURSOR_BLINK = 530;  // ms cursor blink interval
+        const START_DELAY  = 600;  // ms before typing begins
+
+        let cursorVisible = true;
+        const cursorEl = document.createElement('span');
+        cursorEl.className = 'typing-cursor';
+        cursorEl.textContent = '|';
+
+        // Blink cursor
+        const blinkInterval = setInterval(() => {
+            cursorVisible = !cursorVisible;
+            cursorEl.style.opacity = cursorVisible ? '1' : '0';
+        }, CURSOR_BLINK);
+
+        function typeLine(text, container, onDone) {
+            let i = 0;
+            const node = document.createTextNode('');
+            container.appendChild(node);
+
+            const interval = setInterval(() => {
+                node.textContent += text[i];
+                i++;
+                if (i >= text.length) {
+                    clearInterval(interval);
+                    onDone();
+                }
+            }, CHAR_SPEED);
+        }
+
+        function start() {
+            el.innerHTML = '';
+            el.appendChild(cursorEl);
+
+            // Line 1
+            const span1 = document.createElement('span');
+            el.insertBefore(span1, cursorEl);
+
+            typeLine(lines[0], span1, () => {
+                setTimeout(() => {
+                    // Line 2 — add a space then second line
+                    const br = document.createElement('br');
+                    el.insertBefore(br, cursorEl);
+                    const span2 = document.createElement('span');
+                    span2.style.opacity = '0.75';
+                    el.insertBefore(span2, cursorEl);
+
+                    typeLine(lines[1], span2, () => {
+                        // Done — stop blinking, fade cursor out
+                        setTimeout(() => {
+                            clearInterval(blinkInterval);
+                            cursorEl.style.transition = 'opacity 0.8s ease';
+                            cursorEl.style.opacity = '0';
+                            setTimeout(() => cursorEl.remove(), 900);
+                        }, 1200);
+                    });
+                }, LINE_PAUSE);
+            });
+        }
+
+        setTimeout(start, START_DELAY);
+    })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file