diff --git a/index.html b/index.html
index 664d30346..8b433f791 100644
--- a/index.html
+++ b/index.html
@@ -22,10 +22,10 @@
     </div>
 
     
-    <div class="cursor-dot"></div>
-    <div class="cursor-outline"></div>
-
-   
+    <!-- Animated Background -->
+    <div class="animated-bg"></div>
+    
+    <!-- Particles -->
     <div id="particles-js"></div>
 
     <header id="header">
@@ -35,11 +35,26 @@
                 <span class="logo-dot"></span>
             </div>
             <ul class="nav-links" id="navLinks">
-                <li><a href="#home" onclick="scrollToSection('home')" onclick="void(0)" aria-lable="Home section" target="_self" target="_blank">Home</a></li>
-                <li><a href="#about" onclick="scrollToSection('about')" aria-label="About section" target="_self" target="_blank">About</a></li>
-                <li><a href="#skills" onclick="scrollToSection('skills')" aria-label="Skills section" target="_self" target="_blank">Skills</a></li>
-                <li><a href="#projects" onclick="scrollToSection('projects')" aria-label="Projects section" target="_self" target="_blank">Projects</a></li>
-                <li><a href="#contact" onclick="scrollToSection('contact')" aria-label="Contact section" target="_self" target="_blank">Contact</a></li>
+                <li><a href="#home" onclick="scrollToSection('home')" aria-label="Home section">
+                    <span class="nav-icon">🏠</span>
+                    <span class="nav-text">Home</span>
+                </a></li>
+                <li><a href="#about" onclick="scrollToSection('about')" aria-label="About section">
+                    <span class="nav-icon">👨‍💻</span>
+                    <span class="nav-text">About</span>
+                </a></li>
+                <li><a href="#skills" onclick="scrollToSection('skills')" aria-label="Skills section">
+                    <span class="nav-icon">⚡</span>
+                    <span class="nav-text">Skills</span>
+                </a></li>
+                <li><a href="#projects" onclick="scrollToSection('projects')" aria-label="Projects section">
+                    <span class="nav-icon">💼</span>
+                    <span class="nav-text">Projects</span>
+                </a></li>
+                <li><a href="#contact" onclick="scrollToSection('contact')" aria-label="Contact section">
+                    <span class="nav-icon">📧</span>
+                    <span class="nav-text">Contact</span>
+                </a></li>
             </ul>
             <div class="mobile-menu" onclick="toggleMobileMenu()" aria-label="Toggle navigation menu">
                 <span></span>
@@ -70,8 +85,7 @@ <h2 class="hero-subtitle">Full-Stack Developer & AI Enthusiast</h2>
                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg></div>
-                </svj>
+                            </svg>
                         </button>
                     </div>
                 </div>
@@ -98,8 +112,6 @@ <h2 class="section-title">About Me</h2>
                         <p>I specialize in the MERN stack and have experience building interactive web applications with advanced animations, AI-powered features, and responsive designs. I'm particularly interested in applying technology to address challenges in climate change, healthcare, and agriculture.</p>
                         <p>When I'm not coding, you'll find me exploring new web animation techniques, researching AI applications, or working on personal projects that push the boundaries of what's possible with modern web technologies.</p>
                         <div class="about-stats">
-                        </div>
-                
                             <div class="stat">
                                 <span class="stat-number" data-count="15">0</span>
                                 <span class="stat-label">Projects Completed</span>
@@ -235,7 +247,7 @@ <h3>Let's Connect</h3>
                                     <path d="M9 19C4 20.5 4 16.5 2 16M16 22V18.13C16.0375 17.6532 15.9731 17.1738 15.811 16.7238C15.6489 16.2738 15.3929 15.8634 15.06 15.52C18.2 15.17 21.5 13.98 21.5 8.52C21.4997 7.12383 20.9627 5.7812 20 4.77C20.4559 3.54851 20.4236 2.19835 19.91 1C19.91 1 18.73 0.65 16 2.48C13.708 1.85882 11.292 1.85882 9 2.48C6.27 0.65 5.09 1 5.09 1C4.57638 2.19835 4.54414 3.54851 5 4.77C4.03013 5.7887 3.49252 7.14346 3.5 8.55C3.5 13.97 6.8 15.16 9.94 15.55C9.611 15.89 9.35726 16.2954 9.19531 16.7399C9.03335 17.1844 8.96681 17.6581 9 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
                             </a>
-                            <a href="mailto:morgantaylor@gmail.com" title="Email' arialabel="Send email">
+                            <a href="mailto:morgantaylor@gmail.com" title="Email" aria-label="Send email">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -251,11 +263,11 @@ <h3>Let's Connect</h3>
                     <form class="contact-form" onsubmit="submitForm(event)">
                         <div class="form-group">
                             <label for="name">Name</label>
-                            <input type="text" id="name" name="name" required required  aria-required="true">
+                            <input type="text" id="name" name="name" required aria-required="true">
                         </div>
                         <div class="form-group">
                             <label for="email">Email</label>
-                            <input type="email" id="email" name="email" required required aria-required="true">
+                            <input type="email" id="email" name="email" required aria-required="true">
                         </div>
                         <div class="form-group">
                             <label for="subject">Subject</label>
@@ -265,7 +277,7 @@ <h3>Let's Connect</h3>
                             <label for="message">Message</label>
                             <textarea id="message" name="message" required placeholder="Let's collaborate on something amazing!" aria-required="true"></textarea>
                         </div>
-                        <button type="submit" class="submit-button" disabled="disabled">
+                        <button type="submit" class="submit-button">
                             <span>Send Message</span>
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/script.js b/script.js
index ed600de4e..5f04c5e3a 100644
--- a/script.js
+++ b/script.js
@@ -1,169 +1,136 @@
-document.addEventListener('DOMContentLoaded', function() {
-    
-    setInterval(() => {
-        console.log('Memory leak running...');
-    }, 1000);
-
-    setTimeout(() => {
-        document.getElementById('loading-screen').classList.add('fade-out');
-        setTimeout(() => {
-            document.getElementById('loading-screen').style.display = 'none';
-        }, 500);
-    }, 1500);
-
-
-    var cursorDot = document.querySelector('.cursor-dot');
-    var cursorOutline = document.querySelector('.cursor-outline');
-    
-    document.addEventListener('mousemove', (e) => {
-        cursorDot.style.left = `${e.clientX}px`;
-        cursorDot.style.top = `${e.clientY}px`;
-        
-    
-        cursorOutline.style.left = `${e.clientX}px`;
-        cursorOutline.style.top = `${e.clientY}px`;
-    });
+// ===== Modern Interactive Portfolio JavaScript =====
 
-    document.addEventListener('scroll', () => {
-        console.log('Scroll listener leak');
-    });
+class ModernPortfolio {
+    constructor() {
+        this.init();
+        this.setupEventListeners();
+        this.setupAnimations();
+        this.setupScrollEffects();
+        this.setupNavigation();
+    }
 
-    const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a');
-    
-    interactiveElements.forEach(element => {
-        element.addEventListener('mouseenter', () => {
-            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
-        });
+    init() {
+        // Initialize loading screen
+        this.showLoadingScreen();
         
-        element.addEventListener('mouseleave', () => {
-            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
-        });
-    });
-
-    const header = document.getElementById('header');
-    
-   
-    window.addEventListener('scroll', () => {
-        const height = header.offsetHeight;
-        if (window.scrollY > 100) {
-            header.classList.add('header-scrolled');
-        } else {
-            header.classList.remove('header-scrolled');
+        // Initialize particles if library is available
+        if (typeof particlesJS !== 'undefined') {
+            this.initParticles();
         }
         
-        const backToTop = document.getElementById('backToTop');
-        if (window.scrollY > 500) {
-            backToTop.classList.add('visible');
-        } else {
-            backToTop.classList.remove('visible');
-        }
-    });
-
- 
-    window.toggleMobileMenu = function() {
-        const navLinks = document.getElementById('navLinks');
-        const mobileMenu = document.querySelector('.mobile-menu');
+        // Setup intersection observer for animations
+        this.setupIntersectionObserver();
         
-        navLinks.classList.toggle('active');
-        mobileMenu.classList.toggle('active');
-    };
-
+        // Initialize stats counter
+        this.initStatsCounter();
+    }
 
-    window.scrollToSection = function(sectionId, unusedParam) {
-        const section = document.getElementById(sectionId);
-        const headerHeight = document.getElementById('header').offsetHeight;
-        
-      
-        window.scrollTo({
-            top: section.offsetTop - headerHeight,
-            behavior: 'auto'
-        });
+    showLoadingScreen() {
+        const loadingScreen = document.getElementById('loading-screen');
         
-        const navLinks = document.getElementById('navLinks');
-        const mobileMenu = document.querySelector('.mobile-menu');
-        
-        if (navLinks.classList.contains('active')) {
-            navLinks.classList.remove('active');
-            mobileMenu.classList.remove('active');
-        }
-    };
+        setTimeout(() => {
+            loadingScreen.classList.add('fade-out');
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+                document.body.style.overflow = 'visible';
+                this.revealContent();
+            }, 500);
+        }, 1500);
+    }
 
-    window.scrollToTop = function() {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
+    revealContent() {
+        // Trigger entrance animations
+        const elements = document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in');
+        elements.forEach((el, index) => {
+            setTimeout(() => {
+                el.classList.add('visible');
+            }, index * 100);
         });
-    };
+    }
 
-    
-    let current = 0;
-    const animateStats = function() {
-        const stats = document.querySelectorAll('.stat-number');
+    setupScrollEffects() {
+        const header = document.getElementById('header');
+        const backToTop = document.getElementById('backToTop');
         
-        stats.forEach(stat => {
-            const target = parseInt(stat.getAttribute('data-count'));
-            const duration = 2000;
-            const step = target / (duration / 16);
-            
-            const timer = setInterval(() => {
-                current += step;
-                
-                if (current >= target) {
-                    current = target;
-                
-                }
-                
-                stat.textContent = Math.floor(current);
-            }, 16);
-        });
-    };
+        let ticking = false;
 
-    const observerOptions = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.1
-    };
+        const updateScroll = () => {
+            const scrollY = window.scrollY;
+            
+            // Header scroll effect
+            if (scrollY > 100) {
+                header.classList.add('header-scrolled');
+            } else {
+                header.classList.remove('header-scrolled');
+            }
+            
+            // Back to top button
+            if (scrollY > 500) {
+                backToTop.classList.add('visible');
+            } else {
+                backToTop.classList.remove('visible');
+            }
+            
+            // Update active navigation
+            this.updateActiveNavigation();
+            
+            ticking = false;
+        };
 
-  
-    const observer = new IntersectionObserver((entries, unusedObserver) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-in');
-                
-                if (entry.target.id === 'about') {
-                    animateStats();
-                }
+        window.addEventListener('scroll', () => {
+            if (!ticking) {
+                requestAnimationFrame(updateScroll);
+                ticking = true;
             }
         });
-    }, observerOptions);
-
-    const sections = document.querySelectorAll('section');
-    sections.forEach(section => {
-        observer.observe(section);
-    });
+    }
 
-    window.submitForm = function(event) {
-        event.preventDefault();
+    updateActiveNavigation() {
+        const sections = document.querySelectorAll('section[id]');
+        const navLinks = document.querySelectorAll('.nav-links a');
         
-        const formData = new FormData(event.target);
-        const data = Object.fromEntries(formData);
+        let current = '';
         
-        console.log('Form submitted:', data);
-        console.log('Form submitted at: ' + new Date().toISOString());
-        console.log('User agent: ' + navigator.userAgent);
-        console.log('Screen size: ' + window.screen.width);
-        console.log('Form data processed');
-        console.log('Data object created');
-        console.log('Event prevented');
-        console.log('Starting form processing');
-      
-        alert('Thank you for your message! I will get back to you soon.');
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop - 100;
+            const sectionHeight = section.clientHeight;
+            
+            if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
+                current = section.getAttribute('id');
+            }
+        });
         
-        event.target.reset();
-    };
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === `#${current}`) {
+                link.classList.add('active');
+            }
+        });
+    }
+
+    setupNavigation() {
+        // Mobile menu toggle
+        window.toggleMobileMenu = () => {
+            const navLinks = document.getElementById('navLinks');
+            const mobileMenu = document.querySelector('.mobile-menu');
+            
+            navLinks.classList.toggle('active');
+            mobileMenu.classList.toggle('active');
+        };
 
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
+        // Smooth scroll to section
+        window.scrollToSection = (sectionId) => {
+            const section = document.getElementById(sectionId);
+            if (section) {
+                const targetPosition = section.offsetTop - 80;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+            
+            // Close mobile menu if open
             const navLinks = document.getElementById('navLinks');
             const mobileMenu = document.querySelector('.mobile-menu');
             
@@ -171,117 +138,246 @@ document.addEventListener('DOMContentLoaded', function() {
                 navLinks.classList.remove('active');
                 mobileMenu.classList.remove('active');
             }
-        }
-        
-        if (e.key === 'Tab') {
-            document.body.classList.add('keyboard-navigation');
-        }
-    });
-    
-    document.addEventListener('mousedown', () => {
-        document.body.classList.remove('keyboard-navigation');
-    });
-});
-
+        };
 
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('Duplicate DOMContentLoaded listener executed');
-});
+        // Scroll to top
+        window.scrollToTop = () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        };
+    }
 
+    setupIntersectionObserver() {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '-50px 0px'
+        };
 
-function typewriterEffect() {
-    const titles = ["Full-Stack Developer", "AI Enthusiast", "Problem Solver", "Tech Innovator"];
-    const element = document.querySelector('.hero-subtitle');
-    let currentIndex = 0;
-    let charIndex = 0;
-    let isDeleting = false;
-    
-    function type() {
-        const currentTitle = titles[currentIndex];
-        
-        if (isDeleting) {
-            element.textContent = currentTitle.substring(0, charIndex - 1);
-            charIndex--;
-        } else {
-            element.textContent = currentTitle.substring(0, charIndex + 1);
-            charIndex++;
-        }
-        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
 
-        if (charIndex > 100) charIndex = 0;
-        
-        if (!isDeleting && charIndex === currentTitle.length) {
-            isDeleting = true;
-            setTimeout(type, 2000);
-        } else if (isDeleting && charIndex === 0) {
-            isDeleting = false;
-            currentIndex = (currentIndex + 1) % titles.length;
-            setTimeout(type, 500);
-        } else {
-            setTimeout(type, isDeleting ? 50 : 100);
-        }
+        // Observe elements for scroll animations
+        const animatedElements = document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in');
+        animatedElements.forEach(el => observer.observe(el));
     }
-    
-    type();
-}
 
+    initStatsCounter() {
+        const statNumbers = document.querySelectorAll('.stat-number');
+        const counters = new Map();
 
-function initSkillParticles() {
-    const skillCards = document.querySelectorAll('.skill-card');
-    
-    skillCards.forEach(card => {
-        card.addEventListener('mouseenter', () => {
-            particlesJS('particles-js', {
-                particles: {
-                    color: { value: "#2ecc71" },
-                    line_linked: {
-                        color: "#2ecc71"
-                    }
+        const animateCounter = (element, target) => {
+            const increment = target / 200;
+            let current = 0;
+            
+            const updateCounter = () => {
+                current += increment;
+                if (current < target) {
+                    element.textContent = Math.floor(current);
+                    requestAnimationFrame(updateCounter);
+                } else {
+                    element.textContent = target;
+                }
+            };
+            
+            updateCounter();
+        };
+
+        const statsObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && !counters.has(entry.target)) {
+                    const target = parseInt(entry.target.getAttribute('data-count') || 0);
+                    counters.set(entry.target, true);
+                    setTimeout(() => {
+                        animateCounter(entry.target, target);
+                    }, 300);
                 }
             });
+        }, { threshold: 0.5 });
+
+        statNumbers.forEach(stat => statsObserver.observe(stat));
+    }
+
+    setupAnimations() {
+        // Add hover effects to cards
+        this.setupCardHoverEffects();
+    }
+
+    setupCardHoverEffects() {
+        const cards = document.querySelectorAll('.skill-card, .project-card');
+        
+        cards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.style.transform = 'translateY(-10px) rotateX(5deg)';
+                card.style.boxShadow = '0 20px 40px rgba(99, 102, 241, 0.3)';
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'translateY(0) rotateX(0)';
+                card.style.boxShadow = '';
+            });
         });
+    }
+
+    initParticles() {
+        if (typeof particlesJS === 'undefined') return;
         
-        card.addEventListener('mouseleave', () => {
-            particlesJS('particles-js', {
-                particles: {
-                    color: { value: "#3498db" },
-                    line_linked: {
-                        color: "#3498db"
+        particlesJS('particles-js', {
+            particles: {
+                number: {
+                    value: 80,
+                    density: {
+                        enable: true,
+                        value_area: 800
+                    }
+                },
+                color: {
+                    value: ['#6366f1', '#06b6d4', '#f59e0b']
+                },
+                shape: {
+                    type: 'circle',
+                    stroke: {
+                        width: 0,
+                        color: '#000000'
+                    }
+                },
+                opacity: {
+                    value: 0.3,
+                    random: true,
+                    anim: {
+                        enable: true,
+                        speed: 1,
+                        opacity_min: 0.1,
+                        sync: false
+                    }
+                },
+                size: {
+                    value: 3,
+                    random: true,
+                    anim: {
+                        enable: true,
+                        speed: 2,
+                        size_min: 0.1,
+                        sync: false
                     }
+                },
+                line_linked: {
+                    enable: true,
+                    distance: 150,
+                    color: '#6366f1',
+                    opacity: 0.2,
+                    width: 1
+                },
+                move: {
+                    enable: true,
+                    speed: 1,
+                    direction: 'none',
+                    random: false,
+                    straight: false,
+                    out_mode: 'out',
+                    bounce: false
                 }
-            });
+            },
+            interactivity: {
+                detect_on: 'canvas',
+                events: {
+                    onhover: {
+                        enable: true,
+                        mode: 'repulse'
+                    },
+                    onclick: {
+                        enable: true,
+                        mode: 'push'
+                    },
+                    resize: true
+                },
+                modes: {
+                    repulse: {
+                        distance: 100,
+                        duration: 0.4
+                    },
+                    push: {
+                        particles_nb: 4
+                    }
+                }
+            },
+            retina_detect: true
         });
-    });
-}
+    }
 
+    setupEventListeners() {
+        // Form submission
+        const contactForm = document.querySelector('.contact-form');
+        if (contactForm) {
+            contactForm.addEventListener('submit', this.handleFormSubmission.bind(this));
+        }
 
-let sharedCounter = 0;
-function createClosureIssue() {
-    const buttons = document.querySelectorAll('button');
-    buttons.forEach((btn, index) => {
-        btn.addEventListener('click', () => {
-            console.log('Button', sharedCounter, 'clicked');
-            sharedCounter++;
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                // Close mobile menu
+                const navLinks = document.getElementById('navLinks');
+                const mobileMenu = document.querySelector('.mobile-menu');
+                
+                if (navLinks && navLinks.classList.contains('active')) {
+                    navLinks.classList.remove('active');
+                    mobileMenu.classList.remove('active');
+                }
+            }
         });
-    });
-}
-
-
-async function loadData() {
-    const response = await fetch('/api/data');
-    const data = await response.json();
- 
-    document.getElementById('data').textContent = data.content;
-}
-
+    }
 
-function riskyOperation() {
-    return new Promise((resolve) => {
+    handleFormSubmission(e) {
+        e.preventDefault();
+        
+        const submitBtn = e.target.querySelector('.submit-button');
+        const originalText = submitBtn.innerHTML;
+        
+        // Show loading state
+        submitBtn.innerHTML = '<span>Sending...</span>';
+        submitBtn.disabled = true;
+        
+        // Simulate form submission
         setTimeout(() => {
-            resolve('Operation completed');
-        }, 1000);
-    });
+            submitBtn.innerHTML = '<span>Message Sent!</span> ✓';
+            submitBtn.style.background = 'var(--success)';
+            
+            setTimeout(() => {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+                submitBtn.style.background = '';
+                e.target.reset();
+            }, 3000);
+        }, 2000);
+    }
 }
 
-
-riskyOperation().then(console.log);
+// Initialize the application
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize main portfolio functionality
+    new ModernPortfolio();
+    
+    // Add CSS classes for animations
+    const elementsToAnimate = [
+        { selector: '.hero-text', class: 'slide-in-left' },
+        { selector: '.hero-visual', class: 'slide-in-right' },
+        { selector: '.about-text', class: 'fade-in' },
+        { selector: '.about-image', class: 'scale-in' },
+        { selector: '.skill-card', class: 'fade-in' },
+        { selector: '.project-card', class: 'scale-in' },
+        { selector: '.contact-info', class: 'slide-in-left' },
+        { selector: '.contact-form', class: 'slide-in-right' }
+    ];
+    
+    elementsToAnimate.forEach(({ selector, class: className }) => {
+        document.querySelectorAll(selector).forEach(el => {
+            el.classList.add(className);
+        });
+    });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 6826186ae..c9c99d2ce 100644
--- a/style.css
+++ b/style.css
@@ -1,77 +1,246 @@
+/* ===== Glassmorphism Theme Color Palette & Variables ===== */
+:root {
+    /* Glassmorphism Core Colors */
+    --primary: #ffffff;
+    --primary-dark: #f8fafc;
+    --primary-light: #ffffff;
+    --secondary: #e2e8f0;
+    --secondary-dark: #cbd5e1;
+    --secondary-light: #f1f5f9;
+    --accent: #3b82f6;
+    --accent-dark: #2563eb;
+    --accent-light: #60a5fa;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    
+    /* Glassmorphism Text Colors - High Contrast */
+    --text-primary: #ffffff;
+    --text-secondary: #f8fafc;
+    --text-muted: #e2e8f0;
+    --text-subtle: #cbd5e1;
+    --text-glass: #ffffff;
+    --text-glass-secondary: rgba(255, 255, 255, 0.9);
+    --text-accent: #fbbf24;
+    --text-highlight: #fde047;
+    --text-contrast: #1e293b;
+    
+    /* Glassmorphism Backgrounds */
+    --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --bg-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --bg-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --bg-glass: rgba(255, 255, 255, 0.15);
+    --bg-glass-light: rgba(255, 255, 255, 0.25);
+    --bg-glass-dark: rgba(255, 255, 255, 0.1);
+    --bg-glass-hover: rgba(255, 255, 255, 0.2);
+    
+    /* Glassmorphism Gradients */
+    --gradient-primary: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
+    --gradient-secondary: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+    --gradient-accent: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.1));
+    --gradient-rainbow: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
+    --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    
+    /* Glassmorphism Shadows and Effects */
+    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.37);
+    --shadow-glass-lg: 0 20px 60px rgba(31, 38, 135, 0.3);
+    --shadow-glass-xl: 0 25px 80px rgba(31, 38, 135, 0.4);
+    --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.3);
+    --shadow-glow-accent: 0 0 25px rgba(245, 158, 11, 0.4);
+    
+    /* Glass Borders */
+    --border-glass: 1px solid rgba(255, 255, 255, 0.18);
+    --border-glass-light: 1px solid rgba(255, 255, 255, 0.25);
+    --border-glass-dark: 1px solid rgba(255, 255, 255, 0.1);
+    
+    /* Backdrop Filters */
+    --blur-sm: blur(10px) saturate(150%);
+    --blur-md: blur(20px) saturate(180%);
+    --blur-lg: blur(30px) saturate(200%);
+    --blur-xl: blur(40px) saturate(220%);
+    
+    /* Borders and Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+    
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    
+    /* Transitions */
+    --transition-fast: 0.15s ease-out;
+    --transition-normal: 0.3s ease-out;
+    --transition-slow: 0.5s ease-out;
+    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    
+    /* Z-index layers */
+    --z-background: -10;
+    --z-particles: -5;
+    --z-content: 1;
+    --z-header: 100;
+    --z-modal: 1000;
+    --z-cursor: 9999;
+}
 
-#skills {
+/* ===== Base Styles & Reset ===== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 80px;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-glass);
+    line-height: 1.6;
+    overflow-x: hidden;
+    min-height: 100vh;
     position: relative;
-    overflow: hidden;
 }
 
-.skills-bg {
-    position: absolute;
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-lg);
+}
+
+/* ===== Glass Text Containers ===== */
+.glass-text-block {
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border: var(--border-glass);
+    border-radius: var(--radius-xl);
+    padding: var(--space-lg) var(--space-xl);
+    box-shadow: var(--shadow-glass);
+    margin-bottom: var(--space-lg);
+}
+
+.glass-text-block.hero-glass {
+    border-radius: 2rem;
+    padding: var(--space-xl) var(--space-2xl);
+    background: var(--bg-glass-light);
+}
+
+.glass-text-block.compact {
+    padding: var(--space-md) var(--space-lg);
+    border-radius: var(--radius-lg);
+}
+
+.glass-text-block.large {
+    padding: var(--space-2xl);
+    border-radius: 2.5rem;
+}
+
+.glass-text-inline {
+    background: var(--bg-glass-dark);
+    backdrop-filter: var(--blur-sm);
+    border: var(--border-glass-dark);
+    border-radius: var(--radius-lg);
+    padding: var(--space-sm) var(--space-md);
+    display: inline-block;
+    box-shadow: var(--shadow-glass);
+}
+
+/* ===== Animated Background ===== */
+#particles-js {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: var(--z-particles);
+}
+
+.animated-bg {
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent);
-    opacity: 0.1;
-    z-index: -1;
-    animation: gradientShift 8s ease infinite;
-    background-size: 400% 400%;
+    background: var(--gradient-bg);
+    z-index: var(--z-background);
+    opacity: 0.8;
 }
 
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+.floating-shapes {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: var(--z-particles);
 }
-:root {
-    --primary: #3498db;
-    --primary-dark: #2980b9;
-    --secondary: #2ecc71;
-    --secondary-dark: #27ae60;
-    --accent: #e74c3c;
-    --accent-dark: #c0392b;
-    --text: #e0e0e0;
-    --text-light: #b0b0b0;
-    --text-dark: #888;
-    --bg: #0a0a0a;
-    --bg-light: #1a1a2e;
-    --bg-lighter: #2a2a3e;
-    --shadow: rgba(0, 0, 0, 0.3);
-    --gradient: linear-gradient(135deg, var(--primary), var(--secondary),));
-    --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
+
+.shape {
+    position: absolute;
+    background: var(--gradient-rainbow);
+    border-radius: var(--radius-full);
+    opacity: 0.1;
+    animation: float 20s infinite linear;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+.shape-1 {
+    width: 100px;
+    height: 100px;
+    top: 20%;
+    left: 10%;
+    animation-delay: 0s;
 }
 
-html {
-    scroll-behavior: smooth;
+.shape-2 {
+    width: 60px;
+    height: 60px;
+    top: 60%;
+    right: 20%;
+    animation-delay: -7s;
 }
 
-body {
-    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    overflow-x: hidden;
-    line-height: 1.6;
+.shape-3 {
+    width: 80px;
+    height: 80px;
+    bottom: 20%;
+    left: 70%;
+    animation-delay: -14s;
 }
 
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-30px) rotate(120deg);
+    }
+    66% {
+        transform: translateY(30px) rotate(240deg);
+    }
+}
 
+/* ===== Loading Screen ===== */
 .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--bg);
+    background: var(--bg-primary);
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 9999;
-    z-index: 1;
-    transition: opacity 0.5s ease, visibility 0.5s ease;
+    z-index: var(--z-modal);
+    transition: opacity var(--transition-slow), visibility var(--transition-slow);
 }
 
 .loading-screen.fade-out {
@@ -81,17 +250,23 @@ body {
 
 .loading-animation {
     text-align: center;
+    animation: fadeInUp 1s ease-out;
 }
 
 .loading-ring {
     width: 60px;
     height: 60px;
-    border: 4px solid rgba(52, 152, 219, 0.2);
+    border: 4px solid rgba(99, 102, 241, 0.2);
     border-top: 4px solid var(--primary);
-    border-radius: 50%;
-    animation: spin 0s linear infinite;;
-    animation: fadeInUp 1s ease-out forwards; animation: fadeInUp;
-    margin: 0 auto 20px;
+    border-radius: var(--radius-full);
+    animation: spin 1s linear infinite;
+    margin: 0 auto var(--space-lg);
+}
+
+.loading-animation p {
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.5px;
 }
 
 @keyframes spin {
@@ -99,167 +274,234 @@ body {
     100% { transform: rotate(360deg); }
 }
 
-
-.cursor-dot, .cursor-outline {
-    position: fixed;
-    top: 0;
-    left: 0;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    z-index: 9999;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.5s ease;
-}
-
-.cursor-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--primary);
-}
-
-.cursor-outline {
-    width: 40px;
-    height: 40px;
-    border: 2px solid var(--primary);
-    transition: all 0.2s ease-out;
-}
-
-body:hover .cursor-dot,
-body:hover .cursor-outline {
-    opacity: 1;
-}
-
-#particles-js {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-}
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-
+/* ===== Floating Header & Navigation ===== */
 header {
     position: fixed;
-    width: 100%;
-    padding: 20px 50px;
-    background: rgba(10, 10, 10, 0.95);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    border-bottom: 2px solid rgba(52, 152, 219, 0.3);
-    transition: all 0.3s ease;
+    top: var(--space-lg);
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 4rem);
+    max-width: 1000px;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border: var(--border-glass);
+    border-radius: var(--radius-xl);
+    z-index: var(--z-header);
+    transition: all var(--transition-smooth);
+    box-shadow: var(--shadow-glass);
 }
 
 .header-scrolled {
-    padding: 15px 50px;
-    background: rgba(10, 10, 10, 0.98);
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    top: var(--space-md);
+    padding: var(--space-sm) var(--space-lg);
+    background: var(--bg-glass-light);
+    backdrop-filter: var(--blur-lg);
+    box-shadow: var(--shadow-glass-lg);
+    border: var(--border-glass-light);
 }
 
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    width: 100%;
 }
 
 .logo {
     display: flex;
     align-items: center;
-    font-size: 28px;
-    font-weight: bold;
+    font-size: 1.5rem;
+    font-weight: 700;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
 }
 
 .logo-text {
-    background: var(--gradient);
+    color: yellow;
+    background: white;
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
+    color: var(--text-glass);
 }
 
 .logo-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--secondary);
-    border-radius: 50%;
-    margin-left: 5px;
+    width: 6px;
+    height: 6px;
+    background: var(--accent);
+    border-radius: var(--radius-full);
+    margin-left: var(--space-sm);
     animation: pulse 2s infinite;
+    box-shadow: 0 0 10px var(--accent);
 }
 
 @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.3); }
 }
 
 .logo:hover {
     transform: scale(1.05);
+    background: var(--bg-glass-hover);
+    box-shadow: var(--shadow-glow);
+    border-radius: var(--radius-md);
 }
 
 .nav-links {
     display: flex;
-    gap: 30px;
+    gap: var(--space-sm);
     list-style: none;
+    background: var(--bg-glass-dark);
+    padding: var(--space-xs);
+    border-radius: var(--radius-lg);
+    border: var(--border-glass-dark);
+    backdrop-filter: var(--blur-sm);
+}
+
+.nav-links li {
+    position: relative;
 }
 
 .nav-links a {
-    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    color: var(--text-primary);
     text-decoration: none;
-    font-size: 16px;
-    font-weight: 500;
+    font-size: 0.9rem;
+    font-weight: 600;
     position: relative;
-    transition: all 0.3s ease;
+    transition: all var(--transition-smooth);
     cursor: pointer;
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: var(--blur-sm);
+    overflow: hidden;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-.nav-links a::after {
+.nav-links a::before {
     content: '';
     position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -5px;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-accent);
+    opacity: 0.1;
+    transition: all var(--transition-smooth);
+    z-index: -1;
+}
+
+.nav-icon {
+    font-size: 1rem;
+    transition: all var(--transition-smooth);
+    filter: grayscale(50%);
+}
+
+.nav-text {
+    transition: all var(--transition-smooth);
+    font-weight: 500;
+}
+
+.nav-links a:hover {
+    color: var(--text-accent);
+    transform: translateY(-2px) scale(1.05);
+    background: var(--bg-glass);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glow-sm);
+    backdrop-filter: var(--blur-md);
+    text-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.nav-links a:hover::before {
     left: 0;
-    background: var(--gradient);
-    transition: width 0.3s ease;
+    opacity: 0.2;
 }
 
-.nav-links a:hover::after,
-.nav-links a.active::after {
-    width: 100%;
+.nav-links a:hover .nav-icon {
+    filter: grayscale(0%) brightness(1.2);
+    transform: scale(1.1) rotate(5deg);
+}
+
+.nav-links a:hover .nav-text {
+    font-weight: 600;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
 }
 
-.nav-links a:hover,
 .nav-links a.active {
-    color: var(--primary);
-    transform: translateY(-2px);
+    color: var(--text-glass);
+    background: var(--bg-glass-light);
+    border: var(--border-glass-light);
+    box-shadow: var(--shadow-glass);
+}
+
+.nav-links a.active .nav-icon {
+    filter: grayscale(0%) brightness(1.3);
+}
+
+.nav-links a.active .nav-text {
+    font-weight: 600;
 }
 
 .mobile-menu {
     display: none;
     flex-direction: column;
     cursor: pointer;
+    gap: 4px;
+    padding: var(--space-sm);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-normal);
+}
+
+.mobile-menu:hover {
+    background: rgba(99, 102, 241, 0.1);
+    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
 }
 
 .mobile-menu span {
-    width: 25px;
-    height: 3px;
+    width: 22px;
+    height: 2px;
     background: var(--primary);
-    margin: 3px 0;
-    transition: 0.3s;
+    transition: var(--transition-normal);
+    border-radius: var(--radius-sm);
+}
+
+.mobile-menu.active span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.mobile-menu.active span:nth-child(2) {
+    opacity: 0;
 }
 
+.mobile-menu.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -6px);
+}
 
+/* ===== Hero Section ===== */
 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 50px;
+    padding: 0 var(--space-2xl);
     position: relative;
     overflow: hidden;
 }
@@ -270,28 +512,29 @@ nav {
     justify-content: space-between;
     max-width: 1200px;
     width: 100%;
-    gap: 50px;
+    gap: var(--space-2xl);
+    z-index: var(--z-content);
 }
 
 .hero-text {
+    margin-top: 55px;
     flex: 1;
-    z-index: 1;
-    opacity: 0;
-    transform: translateY(50px);
-    animation: fadeInUp 1s ease-out forwards;
-}
-
-@keyframes fadeInUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    animation: slideInLeft 0.8s ease-out;
+    background: var(--bg-glass-light);
+    backdrop-filter: var(--blur-lg);
+    border: var(--border-glass-light);
+    border-radius: 2rem;
+    padding: var(--space-2xl);
+    box-shadow: var(--shadow-glass-lg);
 }
 
 .hero-title {
-    font-size: 56px;
-    margin-bottom: -20px;
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    margin-bottom: var(--space-lg);
     line-height: 1.2;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 }
 
 .title-line {
@@ -299,285 +542,246 @@ nav {
 }
 
 .highlight {
-    background: var(--gradient);
+    background: linear-gradient(135deg, var(--text-accent), var(--text-highlight));
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
     position: relative;
-}
-
-.highlight::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background: var(--gradient);
-    transform: scaleX(0);
-    transform-origin: left;
-    animation: expandWidth 1.5s ease forwards 0.5s;
-}
-
-@keyframes expandWidth {
-    to {
-        transform: scaleX(1);
-    }
+    text-shadow: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }
 
 .hero-subtitle {
-    font-size: 32px;
-    color: var(--primary);
-    margin-bottom: 20px;
-    font-weight: 600;
+    font-size: clamp(1.25rem, 3vw, 1.5rem);
+    color: var(--text-primary);
+    margin-bottom: var(--space-lg);
+    font-weight: 500;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .hero-description {
-    font-size: 18px;
-    line-height: 1.6;
-    margin-bottom: 30px;
-    color: var(--text-light);
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    margin-bottom: var(--space-2xl);
     max-width: 600px;
+    line-height: 1.7;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .cta-buttons {
     display: flex;
-    gap: 20px;
+    gap: var(--space-lg);
     flex-wrap: wrap;
 }
 
 .cta-button {
     display: inline-flex;
     align-items: center;
-    gap: 10px;
-    padding: 15px 40px;
-    border-radius: 50px;
+    gap: var(--space-sm);
+    padding: var(--space-lg) var(--space-xl);
+    border: none;
+    border-radius: var(--radius-lg);
+    font-size: 1rem;
     font-weight: 600;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
     cursor: pointer;
-    border: none;
-    font-size: 16px;
+    transition: all var(--transition-normal);
     text-decoration: none;
+    position: relative;
+    overflow: hidden;
 }
 
 .cta-button.primary {
-    background: var(--gradient);
-    color: white;
+    background: var(--bg-glass-light);
+    color: var(--text-glass);
+    border: var(--border-glass-light);
+    backdrop-filter: var(--blur-md);
+    box-shadow: var(--shadow-glass);
 }
 
-.cta-button.secondary {
-    background: transparent;
-    border: 2px solid var(--primary);
-    color: var(--primary);
-}
-
-.cta-button::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.cta-button:hover::before {
-    width: 300px;
-    height: 300px;
+.cta-button.primary:hover {
+    transform: translateY(-3px);
+    background: var(--bg-glass-hover);
+    box-shadow: var(--shadow-glass-lg);
+    border: var(--border-glass-light);
 }
 
-.cta-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
+.cta-button.secondary {
+    background: transparent;
+    color: var(--text-glass);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: var(--blur-sm);
 }
 
 .cta-button.secondary:hover {
-    background: var(--gradient);
-    color: white;
+    background: var(--bg-glass);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-glass);
+    border: var(--border-glass-light);
 }
 
 .hero-visual {
     flex: 1;
     position: relative;
-    height: 400px;
-}
-
-.floating-shapes {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.shape {
-    position: absolute;
-    border-radius: 50%;
-    background: var(--gradient);
-    opacity: 0.7;
-    filter: blur(20px);
-    animation: float 6s ease-in-out infinite;
-}
-
-.shape-1 {
-    width: 100px;
-    height: 100px;
-    top: 20%;
-    left: 10%;
-    animation-delay: 0s;
-}
-
-.shape-2 {
-    width: 150px;
-    height: 150px;
-    top: 50%;
-    right: 10%;
-    animation-delay: 2s;
-}
-
-.shape-3 {
-    width: 80px;
-    height: 80px;
-    bottom: 20%;
-    left: 30%;
-    animation-delay: 4s;
-}
-
-@keyframes float {
-    0%, 100% {
-        transform: translate(0, 0) scale(1);
-    }
-    50% {
-        transform: translate(-20px, 20px) scale(1.1);
-    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .scroll-indicator {
     position: absolute;
-    bottom: 30px;
+    bottom: var(--space-2xl);
     left: 50%;
     transform: translateX(-50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    color: var(--text-light);
-    font-size: 14px;
-    opacity: 0;
-    animation: fadeIn 1s ease forwards 1.5s;
+    text-align: center;
+    animation: fadeInUp 1s ease-out 0.5s both;
 }
 
-@keyframes fadeIn {
-    to {
-        opacity: 1;
-    }
+.scroll-indicator span {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    display: block;
+    margin-bottom: var(--space-sm);
 }
 
 .scroll-arrow {
     width: 2px;
     height: 30px;
     background: var(--primary);
+    margin: 0 auto;
     position: relative;
+    animation: scrollBounce 2s infinite;
 }
 
 .scroll-arrow::after {
     content: '';
     position: absolute;
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 10px;
-    height: 10px;
-    border-right: 2px solid var(--primary);
+    left: -3px;
+    width: 8px;
+    height: 8px;
     border-bottom: 2px solid var(--primary);
-    transform: translateX(-50%) rotate(45deg);
-    animation: bounce 2s infinite;
+    border-right: 2px solid var(--primary);
+    transform: rotate(45deg);
 }
 
-@keyframes bounce {
+@keyframes scrollBounce {
     0%, 20%, 50%, 80%, 100% {
-        transform: translateX(-50%) rotate(45deg) translateY(0);
+        transform: translateY(0);
     }
     40% {
-        transform: translateX(-50%) rotate(45deg) translateY(-10px);
+        transform: translateY(-10px);
     }
     60% {
-        transform: translateX(-50%) rotate(45deg) translateY(-5px);
+        transform: translateY(-5px);
     }
 }
 
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
 
+/* ===== Section Styles ===== */
 section {
-    padding: 100px 0;
+    padding: var(--space-2xl) 0;
+    position: relative;
 }
 
 .section-title {
-    font-size: 42px;
+    font-size: clamp(2rem, 4vw, 3rem);
     text-align: center;
-    margin-bottom: 60px;
-    position: relative;
-    color: var(--text);
-}
-
-.section-title::after {
-    content: '';
-    position: absolute;
-    bottom: -15px;
-    left: 50%;
+    margin-bottom: var(--space-2xl);
+    font-weight: 700;
+    color: var(--text-primary);
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+    background: var(--bg-glass-light);
+    backdrop-filter: var(--blur-md);
+    border: var(--border-glass-light);
+    border-radius: var(--radius-xl);
+    padding: var(--space-lg) var(--space-xl);
+    box-shadow: var(--shadow-glass);
+    display: inline-block;
+    margin-left: 50%;
     transform: translateX(-50%);
-    width: 80px;
-    height: 4px;
-    background: var(--gradient);
-    border-radius: 2px;
 }
 
+/* ===== About Section ===== */
+#about {
+    background: transparent;
+}
 
 .about-content {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
     align-items: center;
-    gap: 60px;
 }
 
 .about-text {
-    flex: 1;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border: var(--border-glass);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+    box-shadow: var(--shadow-glass);
 }
 
 .about-text p {
-    margin-bottom: 20px;
-    font-size: 18px;
-    line-height: 1.6;
-    color: var(--text-light);
+    margin-bottom: var(--space-lg);
+    color: var(--text-primary);
+    font-size: 1.125rem;
+    line-height: 1.7;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .about-stats {
-    display: flex;
-    gap: 30px;
-    margin-top: 40px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-lg);
+    margin-top: var(--space-2xl);
 }
 
 .stat {
     text-align: center;
+    padding: var(--space-lg);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border-radius: var(--radius-lg);
+    border: var(--border-glass);
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-glass);
+}
+
+.stat:hover {
+    transform: translateY(-5px);
+    background: var(--bg-glass-hover);
+    box-shadow: var(--shadow-glass-lg);
+    border: var(--border-glass-light);
 }
 
 .stat-number {
     display: block;
-    font-size: 42px;
-    font-weight: bold;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 5px;
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--accent);
+    margin-bottom: var(--space-sm);
+    text-shadow: 0 0 10px var(--accent);
 }
 
 .stat-label {
-    font-size: 16px;
-    color: var(--text-light);
+    color: var(--text-glass-secondary);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
 .about-image {
-    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -590,174 +794,176 @@ section {
 }
 
 .profile-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    border-radius: 50%;
-    background: conic-gradient(var(--primary), var(--secondary), var(--primary));
-    padding: 10px;
+    border: 3px solid var(--primary);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-card);
+    position: relative;
     animation: rotate 10s linear infinite;
 }
 
 .profile-ring-inner {
-    width: 100%;
-    height: 100%;
-    background: var(--bg-light);
-    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    border-radius: var(--radius-full);
+    background: var(--gradient-primary);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .profile-initials {
-    font-size: 150px;
-    font-weight: bold;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    font-size: 4rem;
+    font-weight: 700;
+    color: white;
 }
 
-
 .profile-glow {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 320px;
-    height: 320px;
-    background: var(--primary);
-    border-radius: 50%;
-    filter: blur(40px);
+    top: -20px;
+    left: -20px;
+    right: -20px;
+    bottom: -20px;
+    background: var(--gradient-rainbow);
+    border-radius: var(--radius-full);
     opacity: 0.3;
     z-index: -1;
     animation: pulse 3s ease-in-out infinite;
 }
 
 @keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
 
+/* ===== Skills Section ===== */
+#skills {
+    position: relative;
+}
 
 .skills-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 30px;
+    gap: var(--space-xl);
 }
 
 .skill-card {
-    background: var(--bg-light);
-    padding: 40px 30px;
-    border-radius: 20px;
-    text-align: center;
-    transition: all 0.3s ease;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    padding: var(--space-2xl);
+    border-radius: var(--radius-xl);
+    border: var(--border-glass);
+    transition: all var(--transition-normal);
     position: relative;
     overflow: hidden;
-    border: 1px solid rgba(52, 152, 219, 0.1);
+    box-shadow: var(--shadow-glass);
 }
 
 .skill-card::before {
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
+    left: -100%;
     width: 100%;
-    height: 5px;
-    background: var(--gradient);
-    transform: scaleX(0);
-    transform-origin: left;
-    transform-origin: right;
-    transition: transform 0.3s ease;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transition: left 0.5s ease;
 }
 
 .skill-card:hover::before {
-    transform: scaleX(1);
+    left: 100%;
 }
 
 .skill-card:hover {
     transform: translateY(-10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+    background: var(--bg-glass-hover);
+    box-shadow: var(--shadow-glass-lg);
+    border: var(--border-glass-light);
 }
 
 .skill-icon {
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 20px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    background: var(--gradient-accent);
+    border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
+    margin-bottom: var(--space-lg);
+    color: white;
+    box-shadow: var(--shadow-glass);
 }
-.skill-icon { color: red !important; }
-
 
 .skill-card h3 {
-    font-size: 24px;
-    margin-bottom: 15px;
-    color: var(--text);
+    font-size: 1.5rem;
+    margin-bottom: var(--space-md);
+    color: var(--text-primary);
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .skill-card p {
-    color: var(--text-light);
-    margin-bottom: 20px;
-    transition: transform 0.3s
+    color: var(--text-secondary);
+    margin-bottom: var(--space-lg);
+    line-height: 1.6;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
-.skill-card:hover { transform: scale(1.1) }
+
 .skill-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
-    justify-content: center;
+    gap: var(--space-sm);
 }
 
-.skill-tagss {
-    background: rgba(52, 152, 219, 0.1);
-    color: var(--primary);
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 14px;
+.skill-tag {
+    background: var(--bg-glass-light);
+    color: var(--text-contrast);
+    padding: var(--space-xs) var(--space-sm);
+    border: var(--border-glass);
+    backdrop-filter: var(--blur-sm);
+    font-weight: 600;
+    text-shadow: none;
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
     font-weight: 500;
-    transition: all 0.3s ease;
 }
 
-.skill-tag:hover {
-    background: var(--primary);
-    color: white;
-    transform: translateY(-2px);
+/* ===== Projects Section ===== */
+#projects {
+    background: var(--bg-secondary);
 }
 
-
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 30px;
+    gap: var(--space-2xl);
 }
 
 .project-card {
-    background: var(--bg-light);
-    border-radius: 20px;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border-radius: var(--radius-xl);
     overflow: hidden;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(52, 152, 219, 0.1);
+    border: var(--border-glass);
+    transition: all var(--transition-normal);
+    position: relative;
+    box-shadow: var(--shadow-glass);
 }
 
 .project-card:hover {
     transform: translateY(-10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+    background: var(--bg-glass-hover);
+    box-shadow: var(--shadow-glass-lg);
+    border: var(--border-glass-light);
 }
 
 .project-image {
-    height: 200px;
-    background: var(--bg-lighter);
     position: relative;
+    height: 200px;
+    background: var(--gradient-rainbow);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -765,22 +971,21 @@ section {
 }
 
 .project-icon {
-    font-size: 60px;
+    font-size: 4rem;
 }
 
 .project-overlay {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(10, 10, 10, 0.9);
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 90;
-    opacity:1;
-    transition: all 0.3s ease;
+    opacity: 0;
+    transition: opacity var(--transition-normal);
 }
 
 .project-card:hover .project-overlay {
@@ -789,263 +994,372 @@ section {
 
 .project-links {
     display: flex;
-    gap: 15px;
+    gap: var(--space-md);
 }
 
 .project-link {
-    padding: 10px 20px;
-    background: var(--gradient);
+    background: var(--primary);
     color: white;
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--radius-md);
     text-decoration: none;
-    border-radius: 50px;
     font-weight: 500;
-    transition: all 0.3s ease;
+    transition: all var(--transition-normal);
 }
 
 .project-link:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+    background: var(--primary-dark);
+    transform: scale(1.05);
 }
 
 .project-content {
-    padding: 30px;
+    padding: var(--space-xl);
 }
 
 .project-content h3 {
-    font-size: 24px;
-    margin-bottom: 15px;
-    color: var(--text);
+    font-size: 1.5rem;
+    margin-bottom: var(--space-md);
+    color: var(--text-primary);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    display: inline-block;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .project-content p {
-    color: var(--text-light);
-    margin-bottom: 20px;
+    color: var(--text-primary);
+    margin-bottom: var(--space-lg);
+    line-height: 1.6;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .project-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: var(--space-sm);
 }
 
 .project-tag {
-    background: rgba(52, 152, 219, 0.1);
-    color: var(--primary);
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-weight: 500;
+    background: var(--bg-glass);
+    color: var(--text-accent);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border: 1px solid var(--glass-border);
+    backdrop-filter: var(--blur-sm);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-
-.contact-content {
-    display: flex;
-    gap: 60px;
-    align-items: flex-start;
+/* ===== Contact Section ===== */
+#contact {
+    position: relative;
 }
 
-.contact-info {
-    flex: 1;
+.contact-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
+    align-items: start;
 }
 
 .contact-info h3 {
-    font-size: 32px;
-    margin-bottom: 20px;
-    color: var(--text);
+    font-size: 2rem;
+    margin-bottom: var(--space-lg);
+    color: var(--text-primary);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    padding: var(--space-md) var(--space-lg);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--glass-border);
+    display: inline-block;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .contact-info p {
-    color: var(--text-light);
-    margin-bottom: 40px;
-    font-size: 18px;
+    color: var(--text-primary);
+    margin-bottom: var(--space-xl);
+    font-size: 1.125rem;
+    line-height: 1.7;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-lg);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .contact-details {
-    margin-bottom: 40px;
+    margin-bottom: var(--space-2xl);
 }
 
 .contact-item {
     display: flex;
     align-items: center;
-    gap: 20px;
-    margin-bottom: 25px;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-lg);
+    padding: var(--space-lg);
+    background: var(--bg-glass);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--glass-border);
+    backdrop-filter: var(--blur-md);
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-glass);
+}
+
+.contact-item:hover {
+    transform: translateX(10px);
+    border-color: var(--primary);
+    box-shadow: var(--shadow-glow);
 }
 
 .contact-icon {
     width: 50px;
     height: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
+    color: white;
+    flex-shrink: 0;
+}
+
+.contact-text {
+    display: flex;
+    flex-direction: column;
 }
 
 .contact-text span:first-child {
-    display: block;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
     font-weight: 600;
-    margin-bottom: 5px;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .contact-text span:last-child {
-    color: var(--text-light);
+    color: var(--text-accent);
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .social-links {
     display: flex;
-    gap: 15px;
+    gap: var(--space-md);
 }
 
 .social-links a {
     width: 50px;
     height: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
+    background: var(--bg-card);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
-    transition: all 0.3s ease;
-    transition: none;
+    color: var(--text-secondary);
+    transition: all var(--transition-normal);
 }
 
 .social-links a:hover {
-    background: var(--gradient);
+    background: var(--primary);
     color: white;
-    transform: translateY(-5px);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-glow);
 }
 
 .contact-form {
-    flex: 1;
-    background: var(--bg-light);
-    padding: 40px;
-    border-radius: 20px;
-    border: 1px solid rgba(52, 152, 219, 0.1);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    padding: var(--space-2xl);
+    border-radius: var(--radius-xl);
+    border: var(--border-glass);
+    box-shadow: var(--shadow-glass);
 }
 
 .form-group {
-    margin-bottom: 25px;
+    margin-bottom: var(--space-lg);
 }
 
 .form-group label {
     display: block;
-    margin-bottom: 10px;
-    font-weight: 500;
-    color: var(--text);
+    margin-bottom: var(--space-sm);
+    color: var(--text-primary);
+    font-weight: 600;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    display: inline-block;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .form-group input,
 .form-group textarea {
     width: 100%;
-    padding: 15px 20px;
-    background: var(--bg-lighter);
-    border: 1px solid rgba(52, 152, 219, 0.2);
-    border-radius: 10px;
-    color: var(--text);
-    font-size: 16px;
-    transition: all 0.3s ease;
+    padding: var(--space-lg);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 1rem;
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-glass);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+    color: rgba(255, 255, 255, 0.6);
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+    border: 1px solid var(--text-accent);
+    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), var(--shadow-glass);
+    background: var(--bg-glass);
+    color: var(--text-primary);
 }
 
 .form-group textarea {
-    min-height: 150px;
     resize: vertical;
+    min-height: 120px;
 }
 
 .submit-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 15px 40px;
-    background: var(--gradient);
-    color: white;
-    border: none;
-    border-radius: 50px;
+    width: 100%;
+    padding: var(--space-lg);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-md);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
+    border-radius: var(--radius-md);
+    font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 16px;
+    transition: all var(--transition-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--shadow-glass);
 }
 
 .submit-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
+    transform: translateY(-2px);
+    box-shadow: var(--glow-sm);
+    background: var(--bg-glass);
+    color: var(--text-accent);
+    text-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0, 0, 0, 0.6);
 }
 
+.submit-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
 
+/* ===== Footer ===== */
 footer {
-    background: var(--bg-light);
-    padding: 60px 0 30px;
-    border-top: 1px solid rgba(52, 152, 219, 0.1);
+    background: var(--bg-tertiary);
+    padding: var(--space-2xl) 0;
+    border-top: 1px solid rgba(99, 102, 241, 0.2);
 }
 
 .footer-content {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 40px;
+    align-items: center;
+    margin-bottom: var(--space-xl);
 }
 
 .footer-logo p {
-    color: var(--text-light);
-    margin-top: 10px;
+    color: var(--text-primary);
+    margin-top: var(--space-sm);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    display: inline-block;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .footer-links {
     display: flex;
-    gap: 30px;
+    gap: var(--space-xl);
 }
 
 .footer-links a {
-    color: var(--text-light);
+    color: var(--text-primary);
     text-decoration: none;
-    transition: all 0.3s ease;
-    cursor: pointer;
+    transition: all var(--transition-normal);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 .footer-links a:hover {
-    color: var(--primary);
-    transform: translateY(-2px);
+    color: var(--text-accent);
+    background: var(--bg-glass);
+    box-shadow: var(--glow-sm);
+    text-shadow: 0 0 8px currentColor, 0 1px 3px rgba(0, 0, 0, 0.6);
 }
 
 .footer-bottom {
     text-align: center;
-    padding-top: 30px;
-    border-top: 1px solid rgba(52, 152, 219, 0.1);
-    color: var(--text-light);
-    font-size: 14px;
-}
-
-.footer-bottom p:first-child {
-    margin-bottom: 10px;
+    padding-top: var(--space-xl);
+    border-top: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+.footer-bottom p {
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    margin-bottom: var(--space-sm);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--glass-border);
+    display: inline-block;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-
+/* ===== Back to Top Button ===== */
 .back-to-top {
     position: fixed;
-    bottom: 30px;
-    right: 30px;
+    bottom: var(--space-xl);
+    right: var(--space-xl);
     width: 50px;
     height: 50px;
-    background: var(--gradient);
-    color: white;
+    background: var(--gradient-primary);
     border: none;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    border-radius: var(--radius-full);
+    color: white;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
-    transition: all 0.3s ease;
-    z-index: 100;
+    transition: all var(--transition-normal);
+    z-index: var(--z-content);
+    box-shadow: var(--shadow-glow);
 }
 
 .back-to-top.visible {
@@ -1054,344 +1368,256 @@ footer {
 }
 
 .back-to-top:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-lg), var(--shadow-glow);
 }
 
-
-@media "max-width: 1024px":{
-    .hero-title {
-        font-size: 48px;
+/* ===== Responsive Design ===== */
+@media (max-width: 1024px) {
+    .container {
+        padding: 0 var(--space-md);
     }
     
-    .hero-subtitle {
-        font-size: 28px;
+    .hero-content {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-xl);
     }
     
     .about-content {
-        flex-direction: column;
-        text-align: center;
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
     }
     
     .contact-content {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+    
+    .footer-content {
         flex-direction: column;
+        gap: var(--space-lg);
+        text-align: center;
+    }
+    
+    .footer-links {
+        flex-wrap: wrap;
+        justify-content: center;
     }
 }
 
-@media "max-width: 768px": {
+@media (max-width: 768px) {
     header {
-        padding: 15px 20px;
+        top: var(--space-md);
+        width: calc(100% - 2rem);
+        padding: var(--space-sm) var(--space-md);
     }
     
     .header-scrolled {
-        padding: 10px 20px;
+        top: var(--space-xs);
+    }
+    
+    nav {
+        position: relative;
+    }
+    
+    .logo {
+        font-size: 1.25rem;
     }
     
     .nav-links {
         position: fixed;
-        top: 70px;
-        left: 0;
-        width: 100%;
-        background: var(--bg);
+        top: 5rem;
+        left: 50%;
+        transform: translateX(-50%) translateY(-100%);
+        width: calc(100% - 2rem);
+        max-width: 400px;
+        background: rgba(15, 15, 35, 0.95);
+        backdrop-filter: blur(40px) saturate(180%);
+        border: 1px solid rgba(99, 102, 241, 0.4);
+        border-radius: var(--radius-xl);
         flex-direction: column;
-        align-items: center;
-        padding: 20px 0;
-        gap: 20px;
-        transform: translateY(-100%);
+        gap: var(--space-xs);
+        padding: var(--space-lg);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+                    0 0 0 1px rgba(99, 102, 241, 0.3);
         opacity: 0;
         visibility: hidden;
-        transition: all 0.3s ease;
-        border-bottom: 2px solid rgba(52, 152, 219, 0.3);
+        transition: all var(--transition-smooth);
+        z-index: calc(var(--z-header) + 1);
     }
     
     .nav-links.active {
-        transform: translateY(0);
+        transform: translateX(-50%) translateY(0);
         opacity: 1;
         visibility: visible;
     }
     
-    .mobile-menu {
-        display: flex;
+    .nav-links li {
+        width: 100%;
     }
     
-    .mobile-menu.active span:nth-child(1) {
-        transform: rotate(45deg) translate(5px, 5px);
+    .nav-links a {
+        width: 100%;
+        justify-content: center;
+        padding: var(--space-md);
+        font-size: 1rem;
+        border-radius: var(--radius-lg);
     }
     
-    .mobile-menu.active span:nth-child(2) {
-        opacity: 0;
+    .nav-links a .nav-icon {
+        font-size: 1.2rem;
     }
     
-    .mobile-menu.active span:nth-child(3) {
-        transform: rotate(-45deg) translate(7px, -6px);
+    .mobile-menu {
+        display: flex;
     }
     
     .hero {
-        padding: 0 20px;
+        padding: calc(6rem + var(--space-xl)) var(--space-lg) 0;
+        text-align: center;
     }
     
-    .hero-content {
-        flex-direction: column;
-        text-align: center;
+    .cta-buttons {
+        justify-content: center;
     }
     
-    .hero-title {
-        font-size: 36px;
+    .about-stats {
+        grid-template-columns: 1fr;
+        gap: var(--space-md);
     }
     
-    .hero-subtitle {
-        font-size: 24px;
+    .skills-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
     }
     
-    .cta-buttons {
-        justify-content: center;
+    .projects-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
     }
     
-    .about-stats {
-        flex-direction: column;
-        gap: 20px;
+    .profile-container {
+        width: 250px;
+        height: 250px;
     }
     
-    .footer-content {
-        flex-direction: column;
-        gap: 30px;
-        text-align: center;
+    .profile-ring-inner {
+        width: 150px;
+        height: 150px;
     }
     
-    .footer-links {
-        justify-content: center;
+    .profile-initials {
+        font-size: 3rem;
     }
 }
 
-@media ('max-width: 480px") {
-    .hero-title {
-        font-size: 32px;
+@media (max-width: 480px) {
+    header {
+        width: calc(100% - 1rem);
+        padding: var(--space-xs) var(--space-sm);
     }
     
-    .hero-subtitle {
-        font-size: 20px;
+    .logo {
+        font-size: 1.1rem;
     }
     
-    .cta-button {
-        width: 100%;
-        justify-content: center;
+    .nav-links {
+        width: calc(100% - 1rem);
+        padding: var(--space-md);
+    }
+    
+    .nav-links a {
+        padding: var(--space-sm);
+        font-size: 0.9rem;
+    }
+    
+    .nav-links a .nav-icon {
+        font-size: 1.1rem;
+    }
+    
+    .hero-title {
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.125rem;
     }
     
     .section-title {
-        font-size: 32px;
+        font-size: 1.75rem;
     }
     
-    .projects-grid,
-    .skills-grid {
-        grid-template-columns: 1fr;
+    .cta-button {
+        padding: var(--space-md) var(--space-lg);
     }
     
+    .skill-card,
     .contact-form {
-        padding: 30px 20px;
+        padding: var(--space-lg);
     }
 }
-.skill-visualization {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-    gap: 20px;
-    margin-top: 40px;
-}
-
-.skill-icon-3d {
-    width: 80px;
-    height: 80px;
-    background: var(--bg-light);
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.skill-icon-3d::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;
-}
-
-.skill-icon-3d:hover::before {
-    left: 100%;
-}
-
-.skill-icon-3d:hover {
-    transform: translateY(-10px) scale(1.1);
-    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);
-}
-.timeline {
-    position: relative;
-    max-width: 800px;
-    margin: 50px auto;
-}
 
-.timeline::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 4px;
-    height: 100%;
-    background: var(--gradient);
-}
-
-.timeline-item {
-    margin: 40px 0;
+/* ===== Utility Classes ===== */
+.fade-in {
     opacity: 0;
-    transform: translateY(50px);
-    transition: all 0.6s ease;
+    transform: translateY(30px);
+    transition: all 0.6s ease-out;
 }
 
-.timeline-item.animate-in {
+.fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }
 
-.timeline-content {
-    background: var(--bg-light);
-    padding: 25px;
-    border-radius: 15px;
-    position: relative;
-    width: 45%;
-    border: 1px solid rgba(52, 152, 219, 0.2);
-}
-
-.timeline-item:nth-child(odd) .timeline-content {
-    margin-left: 55%;
-}
-
-.timeline-item:nth-child(even) .timeline-content {
-    margin-right: 55%;
-}
-.code-showcase {
-    background: #1e1e1e;
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    position: relative;
-    overflow: hidden;
-}
-
-.code-line {
-    display: block;
-    margin: 5px 0;
+.slide-in-left {
     opacity: 0;
-    transform: translateX(-20px);
-    animation: typeIn 0.5s ease forwards;
-}
-
-@keyframes typeIn {
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-.code-cursor {
-    display: inline-block;
-    width: 2px;
-    height: 1.2em;
-    background: var(--primary);
-    margin-left: 2px;
-    animation: blink 1s infinite;
-}
-
-@keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-.project-card {
-    perspective: 1000px;
-    height: 400px;
-}
-
-.project-card-inner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transform-style: preserve-3d;
-    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.project-card:hover .project-card-inner {
-    transform: rotateY(180deg);
+    transform: translateX(-50px);
+    transition: all 0.6s ease-out;
 }
 
-.project-card-front,
-.project-card-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    border-radius: 20px;
-    background: var(--bg-light);
-    overflow: hidden;
-}
-
-.project-card-back {
-    transform: rotateY(180deg);
-    padding: 30px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background: var(--gradient-dark);
+.slide-in-left.visible {
+    opacity: 1;
+    transform: translateX(0);
 }
 
-.tech-stack {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 20px 0;
+.slide-in-right {
+    opacity: 0;
+    transform: translateX(50px);
+    transition: all 0.6s ease-out;
 }
 
-.tech-item {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 5px 12px;
-    border-radius: 15px;
-    font-size: 12px;
-    color: white;
-}
-.skill-level {
-    margin-top: 15px;
+.slide-in-right.visible {
+    opacity: 1;
+    transform: translateX(0);
 }
 
-.skill-progress {
-    height: 6px;
-    background: var(--bg-lighter);
-    border-radius: 10px;
-    overflow: hidden;
-    position: relative;
+.scale-in {
+    opacity: 0;
+    transform: scale(0.8);
+    transition: all 0.6s ease-out;
 }
 
-.skill-progress-bar {
-    height: 100%;
-    background: var(--gradient);
-    border-radius: 10px;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 1.5s ease-out;
+.scale-in.visible {
+    opacity: 1;
+    transform: scale(1);
 }
 
-.skill-card.animate-in .skill-progress-bar {
-    transform: scaleX(1);
+/* ===== Smooth Scrolling Enhancements ===== */
+html {
+    scroll-behavior: smooth;
 }
 
-.skill-percentage {
-    position: absolute;
-    right: 0;
-    top: -20px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--primary);
-}
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+    
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
\ No newline at end of file