/* ==================== RESPONSIVE - TABLET (1024px) ==================== */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Acronym words - smaller spread on tablet */
    .word-d { --end-x: -140px; --end-y: -90px; }
    .word-e1 { --end-x: 130px; --end-y: -80px; }
    .word-v1 { --end-x: -150px; --end-y: 15px; }
    .word-a { --end-x: 140px; --end-y: 30px; }
    .word-v2 { --end-x: -120px; --end-y: 100px; }
    .word-e2 { --end-x: 130px; --end-y: 85px; }
    .word-b { --end-x: 0px; --end-y: 120px; }
}

/* ==================== RESPONSIVE - MOBILE (768px) ==================== */
@media (max-width: 768px) {
    .container { padding: 0 var(--space-4); }
    .section-header { margin-bottom: var(--space-8); }
    
    /* Navigation - Mobile Menu */
    .nav-container { justify-content: center; }
    .nav .nav-separator,
    .nav-menu .nav-separator,
    span.nav-separator { 
        display: none !important; 
        visibility: hidden !important; 
        width: 0 !important; 
        height: 0 !important;
        font-size: 0 !important;
        opacity: 0 !important;
    }
    .nav-menu { 
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 100%; 
        height: 100vh; 
        background: var(--color-primary-light); 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        padding: var(--space-8); 
        gap: var(--space-4); 
        transition: right var(--transition-normal); 
        box-shadow: -10px 0 30px rgba(0,0,0,0.5); 
    }
    .nav-menu.active { right: 0; }
    .nav-link { 
        width: auto; 
        padding: var(--space-3) var(--space-6); 
        text-align: center;
        border-bottom: none;
    }
    .nav-link.active { 
        background: rgba(59, 130, 246, 0.1); 
        border-color: var(--color-secondary);
    }
    .nav-link.active::after { display: none; }
    .nav-toggle { display: flex; z-index: 31; }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    
    /* Hero - Mobile */
    .hero { padding: var(--space-16) 0 var(--space-12); }
    .hero-content { 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-logo { 
        height: 280px; 
        width: 100%;
        margin-top: -60px;
        margin-bottom: var(--space-4);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .logo-circle-outer { width: 220px; height: 220px; }
    .logo-circle-inner { width: 180px; height: 180px; }
    .logo-square { width: 155px; height: 155px; }
    .vitruvian-man { width: 190px; height: 190px; }
    .logo-glow { width: 140px; height: 140px; }
    .logo-text-main { font-size: 1.5rem; }
    .logo-icon { margin-left: 6px; }
    
    /* Show scroll indicator on mobile */
    .hero-scroll { display: flex; }
    
    /* Planets - smaller orbits on mobile */
    .logo-orbit.mercury { width: 80px; height: 80px; }
    .logo-orbit.venus { width: 100px; height: 100px; }
    .logo-orbit.earth { width: 125px; height: 125px; }
    .logo-orbit.mars { width: 145px; height: 145px; }
    .logo-orbit.jupiter { width: 175px; height: 175px; }
    .logo-orbit.saturn { width: 205px; height: 205px; }
    .logo-orbit.uranus { width: 230px; height: 230px; }
    .logo-orbit.neptune { width: 250px; height: 250px; }
    
    /* Acronym words - mobile spread - FORCE ABSOLUTE POSITIONING */
    .acronym-words {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    .acronym-word { 
        font-size: 8px !important; 
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        white-space: nowrap !important;
        animation: word-spread 8s ease-out infinite !important;
    }
    .word-d { --end-x: -100px; --end-y: -70px; --end-rotate: -25deg; animation-delay: 0s !important; }
    .word-e1 { --end-x: 90px; --end-y: -60px; --end-rotate: 15deg; animation-delay: 0.3s !important; }
    .word-v1 { --end-x: -110px; --end-y: 10px; --end-rotate: -10deg; animation-delay: 0.6s !important; }
    .word-a { --end-x: 100px; --end-y: 20px; --end-rotate: 20deg; animation-delay: 0.9s !important; }
    .word-v2 { --end-x: -85px; --end-y: 75px; --end-rotate: -30deg; animation-delay: 1.2s !important; }
    .word-e2 { --end-x: 95px; --end-y: 65px; --end-rotate: 25deg; animation-delay: 1.5s !important; }
    .word-b { --end-x: 0px; --end-y: 90px; --end-rotate: 0deg; animation-delay: 1.8s !important; }
    
    /* DEVAVEB circular text - smaller on mobile */
    .devaveb-circle {
        width: 280px;
        height: 280px;
    }
    .circle-text {
        font-size: 8px;
        letter-spacing: 0.1em;
    }
    
    /* Lines - smaller on mobile */
    .logo-line-h, .logo-line-v, .logo-line-d1, .logo-line-d2 { width: 220px; }
    .logo-line-v { height: 220px; width: 1px; }
    
    .hero-title { font-size: clamp(1.5rem, 6vw, 2rem); text-align: center; }
    .hero-badge { font-size: var(--text-xs); }
    .hero-actions { flex-direction: column; width: 100%; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 280px; }
    .hero-scroll { display: flex; }
    
    /* About - Mobile */
    .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .about-visual { order: -1; }
    .about-content { padding: 0 var(--space-2); }
    .about-content p { max-width: 100%; }
    .about-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
    
    /* Services - Mobile */
    .services-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .service-card { padding: var(--space-8); }
    .service-icon { margin-top: 0; margin-bottom: var(--space-4); }
    .service-card p { margin-bottom: 0; }
    
    /* Projects - Mobile */
    .projects-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .project-filters { flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
    .project-content { text-align: center; }
    .tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
    .tech-tag { font-size: 10px; padding: var(--space-1) var(--space-2); }
    .tech-tag:nth-child(n+4) { display: none; }
    
    /* Skills - Mobile */
    .skills-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .skill-category { padding: var(--space-6); }
    .skill-category-title { text-align: center; margin-top: 0; margin-bottom: var(--space-6); }
    .skill-item { margin-bottom: var(--space-6); }
    .skill-item:last-child { margin-bottom: 0; }
    
    /* Contact - Mobile */
    .contact-wrapper { max-width: 100%; }
    .contact-form-wrapper { padding: var(--space-6); }
    .contact-footer { gap: var(--space-4); }
    .contact-location { font-size: var(--text-xs); text-align: center; }
    .contact-socials { gap: var(--space-2); }
    .social-link { width: 40px; height: 40px; font-size: var(--text-base); }
    
    /* Mobile line break helper */
    .mobile-break { display: block; }
    
    /* Footer - Mobile */
    .footer { padding: var(--space-8) 0 var(--space-6); }
    .footer-menu { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        align-items: center !important;
        gap: 0 !important;
    }
    .footer-separator { 
        display: inline-block !important;
        visibility: visible !important;
        margin: 0 var(--space-2) !important;
        opacity: 0.5;
    }
    .footer-link { 
        display: inline-block !important;
        font-size: 11px; 
        padding: var(--space-1) var(--space-2);
        border: none !important; 
        text-decoration: none !important; 
    }
    .footer-bottom { padding-top: var(--space-4); }
    .footer-copyright { font-size: var(--text-xs); text-align: center; }
}

/* ==================== RESPONSIVE - SMALL MOBILE (480px) ==================== */
@media (max-width: 480px) {
    section { padding: var(--space-12) 0; }
    .section-header { margin-bottom: var(--space-6); }
    .section-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .section-subtitle { font-size: var(--text-sm); }
    
    /* Hero - Small Mobile */
    .hero-content { 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-logo { 
        height: 240px; 
        width: 100%;
        margin-top: -40px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .logo-circle-outer { width: 180px; height: 180px; }
    .logo-circle-inner { width: 150px; height: 150px; }
    .logo-square { width: 125px; height: 125px; }
    .vitruvian-man { width: 160px; height: 160px; }
    .logo-glow { width: 120px; height: 120px; }
    .logo-text-main { font-size: 1.3rem; }
    .logo-icon { margin-left: 4px; }
    
    /* Planets - even smaller on small mobile */
    .logo-orbit.mercury { width: 65px; height: 65px; }
    .logo-orbit.venus { width: 80px; height: 80px; }
    .logo-orbit.earth { width: 100px; height: 100px; }
    .logo-orbit.mars { width: 115px; height: 115px; }
    .logo-orbit.jupiter { width: 140px; height: 140px; }
    .logo-orbit.saturn { width: 165px; height: 165px; }
    .logo-orbit.uranus { width: 185px; height: 185px; }
    .logo-orbit.neptune { width: 200px; height: 200px; }
    
    /* Acronym words - smaller spread - FORCE ABSOLUTE */
    .acronym-words {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    .acronym-word { 
        font-size: 7px !important; 
        letter-spacing: 0.1em !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        white-space: nowrap !important;
        animation: word-spread 8s ease-out infinite !important;
    }
    .word-d { --end-x: -75px; --end-y: -55px; --end-rotate: -25deg; animation-delay: 0s !important; }
    .word-e1 { --end-x: 70px; --end-y: -45px; --end-rotate: 15deg; animation-delay: 0.3s !important; }
    .word-v1 { --end-x: -80px; --end-y: 8px; --end-rotate: -10deg; animation-delay: 0.6s !important; }
    .word-a { --end-x: 75px; --end-y: 15px; --end-rotate: 20deg; animation-delay: 0.9s !important; }
    .word-v2 { --end-x: -65px; --end-y: 55px; --end-rotate: -30deg; animation-delay: 1.2s !important; }
    .word-e2 { --end-x: 70px; --end-y: 50px; --end-rotate: 25deg; animation-delay: 1.5s !important; }
    .word-b { --end-x: 0px; --end-y: 70px; --end-rotate: 0deg; animation-delay: 1.8s !important; }
    
    /* Lines - smaller */
    .logo-line-h, .logo-line-v, .logo-line-d1, .logo-line-d2 { width: 180px; }
    .logo-line-v { height: 180px; width: 1px; }
    
    /* About Stats - stack on small mobile */
    .about-stats { grid-template-columns: 1fr; gap: var(--space-3); }
    .stat { 
        display: flex; 
        align-items: center; 
        justify-content: center;
        gap: var(--space-3); 
        flex-direction: row;
    }
    .stat-value { font-size: var(--text-2xl); }
    .stat-label { font-size: var(--text-xs); }
    
    /* Cards - smaller padding */
    .service-card, .skill-category, .contact-form-wrapper { 
        padding: var(--space-6);
    }
    .project-card .project-content {
        padding: var(--space-4);
    }
    
    /* Footer - Small Mobile */
    .footer-menu { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .footer-separator { 
        display: inline-block !important; 
        visibility: visible !important;
        margin: 0 var(--space-1) !important;
        opacity: 0.5;
    }
    .footer-link { 
        display: inline-block !important;
        padding: var(--space-1) var(--space-2);
        font-size: 10px;
        border: none !important;
        text-decoration: none !important;
    }
}