body {
            box-sizing: border-box;
        }
        
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .futuristic-name {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #9ca3af 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }
        
        .futuristic-name::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            animation: shimmer 3s infinite ease-out;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }
        
        .slide-up {
            animation: slideUp 0.8s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .typing-animation {
            overflow: hidden;
            border-right: 2px solid #ffffff;
            white-space: nowrap;
            animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #ffffff; }
        }
        
        .skill-card:hover {
            transform: translateY(-10px) rotateX(5deg);
            transition: all 0.4s ease;
        }
        
        .project-card {
            transition: all 0.4s ease;
            transform-style: preserve-3d;
        }
        
        .project-card:hover {
            transform: scale(1.05) rotateY(5deg);
        }
        
        .message-bubble {
            animation: messageSlide 0.5s ease-out;
        }
        
        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .pulse-dot {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        /* Enhanced AI Animation Styles */
        .ai-grid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.05;
            background-image: 
                linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridMove 25s linear infinite;
        }
        
        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(40px, 40px); }
        }
        
        .ai-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
        
        .ai-particle:nth-child(1) {
            top: 15%;
            left: 10%;
            animation: particleFloat1 12s ease-in-out infinite;
        }
        
        .ai-particle:nth-child(2) {
            top: 70%;
            left: 85%;
            animation: particleFloat2 15s ease-in-out infinite;
        }
        
        .ai-particle:nth-child(3) {
            top: 85%;
            left: 15%;
            animation: particleFloat3 18s ease-in-out infinite;
        }
        
        .ai-particle:nth-child(4) {
            top: 25%;
            left: 75%;
            animation: particleFloat4 14s ease-in-out infinite;
        }
        
        .ai-particle:nth-child(5) {
            top: 60%;
            left: 45%;
            animation: particleFloat5 16s ease-in-out infinite;
        }
        
        .ai-particle:nth-child(6) {
            top: 40%;
            left: 20%;
            animation: particleFloat6 13s ease-in-out infinite;
        }
        
        @keyframes particleFloat1 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            25% { transform: translate(150px, -80px) scale(1.5); opacity: 1; }
            50% { transform: translate(80px, -150px) scale(1.2); opacity: 0.6; }
            75% { transform: translate(-50px, -100px) scale(1.3); opacity: 1; }
        }
        
        @keyframes particleFloat2 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            33% { transform: translate(-120px, -120px) scale(1.4); opacity: 1; }
            66% { transform: translate(-200px, 50px) scale(1.1); opacity: 0.7; }
        }
        
        @keyframes particleFloat3 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            20% { transform: translate(180px, -100px) scale(1.6); opacity: 1; }
            40% { transform: translate(120px, -200px) scale(1.2); opacity: 0.5; }
            60% { transform: translate(50px, -150px) scale(1.4); opacity: 0.9; }
            80% { transform: translate(100px, -50px) scale(1.1); opacity: 0.7; }
        }
        
        @keyframes particleFloat4 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            50% { transform: translate(-100px, 120px) scale(1.3); opacity: 1; }
        }
        
        @keyframes particleFloat5 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            25% { transform: translate(60px, -180px) scale(1.5); opacity: 1; }
            75% { transform: translate(-80px, -120px) scale(1.2); opacity: 0.6; }
        }
        
        @keyframes particleFloat6 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            33% { transform: translate(140px, 80px) scale(1.4); opacity: 1; }
            66% { transform: translate(200px, -60px) scale(1.1); opacity: 0.7; }
        }
        
        .ai-connection {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: connectionPulse 4s ease-in-out infinite;
        }
        
        @keyframes connectionPulse {
            0%, 100% { opacity: 0; transform: scaleX(0); }
            50% { opacity: 1; transform: scaleX(1); }
        }
        
        .neural-network {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            opacity: 0.08;
        }
        
        .neural-node {
            position: absolute;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255,255,255,0.6);
            animation: neuralPulse 3s ease-in-out infinite;
        }
        
        @keyframes neuralPulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(2); }
        }
        
        /* Academic Progress Styles */
        .progress-ring {
            transform: rotate(-90deg);
        }
        
        .progress-ring-circle {
            transition: stroke-dashoffset 2s ease-in-out;
        }
        
        .semester-card {
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }
        
        .semester-card:hover {
            transform: translateY(-5px) rotateX(10deg);
        }
        
        .semester-card.completed {
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
            border-color: #6b7280;
        }
        
        .semester-card.current {
            background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
            border-color: #ffffff;
            box-shadow: 0 0 20px rgba(255,255,255,0.1);
        }
        
        .semester-card.upcoming {
            background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
            border-color: #374151;
            opacity: 0.6;
        }
        
        /* Dynamic Chat Styles */
        .chat-input-fixed {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #000000 0%, #111111 100%);
            border-top: 1px solid #333;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            .futuristic-name {
                font-size: 1.25rem;
            }
            
            .hero-animation h1 {
                font-size: 2.5rem;
                line-height: 1.1;
                margin-bottom: 1rem;
            }
            
            .typing-animation {
                font-size: 0.8rem;
                line-height: 1.2;
                margin-bottom: 1.5rem;
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }
            
            /* Mobile hero section adjustments */
            #home {
                min-height: 100vh;
                padding: 80px 1rem 2rem;
                display: flex;
                align-items: center;
            }
            
            .hero-animation {
                text-align: center;
            }
            
            /* Mobile button adjustments */
            .hero-buttons {
                flex-direction: column;
                gap: 0.75rem;
                margin-top: 1.5rem;
            }
            
            .hero-buttons a, .hero-buttons button {
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
                padding: 0.875rem 1.5rem;
                font-size: 0.9rem;
            }
            
            /* Mobile description text */
            .hero-description {
                font-size: 1rem;
                line-height: 1.4;
                margin-bottom: 1.5rem;
                padding: 0 1rem;
            }
            
            .w-80.h-80 {
                width: 16rem;
                height: 16rem;
            }
            
            .semester-card {
                min-width: 240px;
            }
            
            .skill-card, .project-card {
                margin-bottom: 1rem;
            }
            
            .nav-link {
                font-size: 0.875rem;
            }
            
            .gradient-text {
                font-size: 2.5rem;
            }
            
            .chat-input-fixed {
                padding: 0.75rem 1rem;
            }
            
            .message-bubble {
                padding: 1rem 0.5rem;
            }
            
            /* Fix mobile menu z-index and visibility issues */
            nav {
                position: fixed !important;
                z-index: 9999 !important;
            }
            
            #mobileMenu {
                position: relative;
                z-index: 10000 !important;
                background: rgba(0, 0, 0, 0.98) !important;
                backdrop-filter: blur(20px) !important;
            }
            
            /* Prevent animations from affecting navigation */
            .futuristic-name::before {
                display: none;
            }
            
            /* Ensure hamburger menu stays visible */
            nav button {
                z-index: 10001 !important;
                position: relative;
            }
            
            /* Fix any overflow issues on mobile */
            body {
                overflow-x: hidden;
            }
            
            /* Prevent hero animations from interfering with nav */
            .hero-animation {
                z-index: 1 !important;
            }
            
            /* CRITICAL: Contain all animations within viewport bounds */
            .ai-particle, .ai-grid, .neural-network {
                z-index: 0 !important;
                /* Disable animations that extend beyond viewport */
                animation: none !important;
                display: none !important;
            }
            
            /* Show mobile-friendly animations only on mobile */
            .mobile-glow, .mobile-dots {
                display: block !important;
                z-index: 1 !important;
            }
            
            /* Disable floating animations on mobile */
            .hero-animation {
                animation: none !important;
            }
            
            /* Contain all particle animations */
            @keyframes particleFloat1, @keyframes particleFloat2, @keyframes particleFloat3, 
            @keyframes particleFloat4, @keyframes particleFloat5, @keyframes particleFloat6 {
                0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            }
            
            /* Disable grid movement on mobile */
            .ai-grid {
                animation: none !important;
                display: none !important;
            }
            
            /* Disable connection animations */
            .ai-connection {
                display: none !important;
            }
            
            /* Ensure sections don't overflow */
            section {
                overflow: hidden;
            }
            
            /* Contain holographic effects */
            .holographic-border::before {
                display: none;
            }
            
            /* Disable shimmer effects that might cause overflow */
            .futuristic-name::before {
                display: none !important;
            }
        }
        
        @media (max-width: 640px) {
            .hero-animation h1 {
                font-size: 2.5rem;
            }
            
            .w-80.h-80 {
                width: 12rem;
                height: 12rem;
            }
            
            .semester-card {
                min-width: 200px;
                padding: 1rem;
            }
            
            .gradient-text {
                font-size: 2rem;
            }
            
            .project-card .h-48 {
                height: 8rem;
            }
        }
        
        @media (max-width: 480px) {
            .hero-animation h1 {
                font-size: 2rem;
            }
            
            .typing-animation {
                font-size: 0.875rem;
            }
            
            .w-80.h-80 {
                width: 10rem;
                height: 10rem;
            }
            
            .gradient-text {
                font-size: 1.75rem;
            }
            
            .semester-card {
                min-width: 180px;
                padding: 0.75rem;
            }
            
            .skill-card, .project-card {
                padding: 1rem;
            }
        }
        
        .chat-messages-container {
            padding-bottom: 80px;
        }
        
        .typing-indicator {
            display: none;
            align-items: center;
            space-x-2;
        }
        
        .typing-indicator.show {
            display: flex;
        }
        
        .typing-dot {
            width: 8px;
            height: 8px;
            background: #6b7280;
            border-radius: 50%;
            animation: typingDots 1.4s infinite ease-in-out;
        }
        
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        
        @keyframes typingDots {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
        
        .complex-bg {
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.05) 0%, transparent 50%);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .holographic-border {
            position: relative;
            overflow: hidden;
        }
        
        .holographic-border::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            animation: holographicSweep 3s infinite;
        }
        
        @keyframes holographicSweep {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        /* Mobile-friendly subtle animations */
        .mobile-glow {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
            animation: mobileGlow 8s ease-in-out infinite;
            pointer-events: none;
        }
        
        .mobile-glow:nth-child(1) {
            top: 20%;
            left: -50px;
            animation-delay: 0s;
        }
        
        .mobile-glow:nth-child(2) {
            bottom: 30%;
            right: -50px;
            animation-delay: 4s;
        }
        
        @keyframes mobileGlow {
            0%, 100% { 
                opacity: 0.3; 
                transform: scale(1) translateY(0px);
            }
            50% { 
                opacity: 0.6; 
                transform: scale(1.2) translateY(-20px);
            }
        }
        
        .mobile-dots {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            animation: mobileDots 6s ease-in-out infinite;
        }
        
        .mobile-dots:nth-child(1) {
            top: 25%;
            left: 15%;
            animation-delay: 0s;
        }
        
        .mobile-dots:nth-child(2) {
            top: 60%;
            right: 20%;
            animation-delay: 2s;
        }
        
        .mobile-dots:nth-child(3) {
            bottom: 25%;
            left: 25%;
            animation-delay: 4s;
        }
        
        @keyframes mobileDots {
            0%, 100% { 
                opacity: 0.2; 
                transform: scale(1);
            }
            50% { 
                opacity: 0.8; 
                transform: scale(1.5);
            }
        }
        
        /* Hide mobile animations on desktop by default */
        .mobile-glow, .mobile-dots {
            display: none;
        }