@media (max-width: 640px) {
    :root {
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
    }
    
    section {
        padding: var(--space-lg) 0;
    }
    
    .navbar {
        height: 56px;
        padding: 0 var(--space-md);
    }
    
    .navbar-logo {
        font-size: 0.9375rem;
        left: var(--space-md);
    }
    
    .hamburger {
        width: 32px;
        height: 32px;
    }
    
    aside {
        width: 100%;
        max-width: 280px;
        top: 0;
        height: 100vh;
        padding: var(--space-md);
        padding-top: 15px;
    }
    
    main {
        margin-top: 56px;
        padding: var(--space-xl) var(--space-md);
    }
    
    .hero-section {
        min-height: auto;
        padding: var(--space-xl) 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .hero-visual {
        height: 350px;
        order: -1;
    }
    
    .hero-shape-mask {
        width: 100%;
        height: 100%;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta .button-hero {
        width: 100%;
        justify-content: center;
    }
    
    .hero-location {
        justify-content: center;
    }
    
    .hero-status-indicator {
        bottom: 5%;
        left: 5%;
        font-size: 0.6875rem;
    }
    
    .floating-element {
        display: none;
    }
    
    .hero-scroll-indicator {
        bottom: var(--space-md);
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .project-item {
        padding: var(--space-lg);
    }
    
    .contact-section {
        text-align: right;
    }
    
    .contact-intro {
        margin-left: 0;
        margin-right: 0;
        text-align: right;
    }
    
    .login-form {
        padding: var(--space-md);
        max-width: 100%;
    }
    
    .button {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
    
    footer {
        padding: var(--space-md);
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem var(--space-sm);
    }
    
    .about-visual {
        grid-template-columns: 1fr;
    }
    
    .contact-intro-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-email-card {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-scroll-hint {
        display: none;
    }
    
    .svg-html,
    .svg-css,
    .svg-js,
    .svg-code {
        width: 120px;
        height: 120px;
    }
    
    .section-svg-bg {
        opacity: 0.02;
    }
}

@media (max-width: 768px) {
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta .button {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .hero-visual {
        order: -1;
    }
    
    .svg-html,
    .svg-css,
    .svg-js,
    .svg-code {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .svg-html,
    .svg-css,
    .svg-js,
    .svg-code {
        width: 80px;
        height: 80px;
        opacity: 0.02;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    main {
        padding: var(--space-xl) var(--space-md);
    }
    
    aside {
        width: 240px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .hero-visual {
        height: 500px;
        order: -1;
    }
    
    .hero-shape-mask {
        width: 95%;
        height: 95%;
    }
    
    .floating-element-2,
    .floating-element-3 {
        display: none;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    aside.show + main {
        margin-right: 260px;
    }
    
    .sidebar-overlay {
        display: none;
    }
    
    main {
        max-width: 1400px;
    }
    
    .hero-visual {
        height: clamp(600px, 65vh, 750px);
    }
    
    .hero-shape-mask {
        width: 100%;
        height: 100%;
    }
    
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .hero-container {
        gap: clamp(4rem, 8vw, 8rem);
    }
    
    .hero-gradient-orb {
        width: 800px;
        height: 800px;
        top: -400px;
        right: -400px;
    }
    
    main {
        max-width: 900px;
        padding: var(--space-2xl) var(--space-xl);
    }
}