@media (max-width: 1024px) {
    .content-split { width: 90%; }
    .text-col { width: 65%; }
    .cards-stack-container { transform: translateY(-50%) scale(0.7); right: 5%; }
    .carousel-container { height: 480px; }
    .skill-card { width: 280px; height: 420px; }
    .portfolio-grid, .tech-grid, .contact-grid, .process-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-title, .store-title { font-size: 6vw; }
}

@media (max-width: 768px) {
    /* Рівний Header */
    .top-header {
        top: 20px !important;
        left: 20px !important;
        right: 20px !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: absolute !important;
        display: flex !important;
    }
    .top-header .lang-switch,
    .top-header .hire-btn-barcode,
    .top-header .step-counter,
    .top-header .back-btn {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }
    .top-header .lang-switch {
        transform: scale(0.85) !important;
        transform-origin: left center !important;
    }
    .top-header .hire-btn-barcode,
    .top-header .back-btn {
        transform: scale(0.6) !important;
        transform-origin: right center !important;
    }
    .top-header .logo {
        font-size: 20px !important;
        position: absolute !important;
        left: 50% !important;
        margin: 0 !important;
    }

    /* Типографіка заголовків */
    .main-title {
        font-size: 16px !important;
        letter-spacing: 2px !important;
        line-height: 1.5 !important;
        width: 100% !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
    body.ua-lang .main-title { font-size: 16px !important; letter-spacing: 2px !important; }
    body.ua-lang .hero-title { font-size: 26px !important; letter-spacing: 3px !important; }

    /* Полагоджена карусель */
    .carousel-container {
        perspective: 1000px !important;
        height: 420px !important;
    }
    .skill-card {
        width: 240px !important;
        height: 380px !important;
    }
    .skill-card-inner {
        padding: 25px 15px !important; 
    }
    .skill-card.left-card {
        transform: translateX(-80%) translateZ(-150px) scale(0.85) rotateY(15deg) !important;
    }
    .skill-card.right-card {
        transform: translateX(80%) translateZ(-150px) scale(0.85) rotateY(-15deg) !important;
    }
    .skill-card.center-card {
        transform: translateX(0) translateZ(40px) scale(1) rotateY(0deg) !important;
    }
    .skill-card.left-card:hover {
        transform: translateX(-85%) translateZ(-120px) scale(0.88) rotateY(10deg) !important;
    }
    .skill-card.right-card:hover {
        transform: translateX(85%) translateZ(-120px) scale(0.88) rotateY(-10deg) !important;
    }

    /* Інші елементи */
    #lastHire { font-size: 30px !important; letter-spacing: 3px !important; }
    #lastHireBar { font-size: 50px !important; margin-top: 15px !important; }
    body.ua-lang #lastHire { font-size: 30px !important; letter-spacing: 3px !important; }
    body.ua-lang #lastHireBar { font-size: 50px !important; margin-top: 15px !important; }
    
    .contact-corner-btn {
        bottom: 85px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        width: max-content;
    }
    .contact-corner-btn:hover { transform: translateX(50%) translateY(-3px) !important; }
    .final-footer { bottom: 25px !important; }
    
    .works-barcode, .creationbarcode, .portfoliobar, .price-barcode { font-size: 45px !important; }
    .portfoliotext, .creationbarcodetext { font-size: 14px !important; letter-spacing: 6px !important; }
    body.ua-lang .portfoliotext, body.ua-lang .creationbarcodetext { letter-spacing: 6px !important; }
    
    .content-split { width: 95%; flex-direction: column; text-align: center; align-items: center; }
    .text-col { width: 100%; text-align: center; }
    .cards-stack-container { display: none; }
    .contact-container, .store-container { padding: 100px 15px 40px 15px !important; }
    .service-card, .tech-card { width: 100%; max-width: 100%; padding: 30px 20px; }
}

@media (max-width: 480px) {
    .top-header {
        top: 15px !important;
        left: 10px !important;
        right: 10px !important;
    }
    .top-header .logo { font-size: 18px !important; }
    .top-header .lang-switch { transform: scale(0.8) !important; }
    .top-header .hire-btn-barcode, .top-header .back-btn { transform: scale(0.55) !important; }
    
    .hero-title { font-size: 34px !important; }
    body.ua-lang .hero-title { font-size: 38px !important; letter-spacing: 4px !important; }
    
    .skill-card {
        width: 220px !important;
        height: 340px !important;
    }
    .skill-card.left-card {
        transform: translateX(-75%) translateZ(-150px) scale(0.8) rotateY(15deg) !important;
    }
    .skill-card.right-card {
        transform: translateX(75%) translateZ(-150px) scale(0.8) rotateY(-15deg) !important;
    }
    .skill-card-inner {
        padding: 20px 10px !important;
    }
    .skill-body p {
        font-size: 9px !important;
        line-height: 1.5 !important;
        letter-spacing: 1px !important;
    }
    body.ua-lang .card-text {
        letter-spacing: 1px !important;
    }
}

.burger-btn {
    display: none;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 35px;
    text-align: center;
    z-index: 2;
}

.mobile-link {
    font-family: 'Lexend Zetta', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    letter-spacing: 8px;
    text-transform: uppercase;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.4s ease, 
                text-shadow 0.4s ease;
}

.mobile-menu.open .mobile-link {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.25s; }

.mobile-link:active {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

body.ua-lang .mobile-link {
    font-family: 'KyivTypeVar', sans-serif !important;
    font-weight: 400;
    letter-spacing: 6px;
}
@media (max-width: 950px) {
    .top-header .hire-btn-barcode,
    .top-header .back-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .burger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 12px;
        position: fixed !important;
        right: 20px !important;
        top: 24px !important;
        z-index: 1000000 !important;
        cursor: pointer;
    }

    .burger-btn span {
        width: 100%;
        height: 1.5px;
        background: #ffffff;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center;
    }

    .burger-btn.open span:nth-child(1) {
        transform: translateY(5.25px) rotate(45deg);
    }

    .burger-btn.open span:nth-child(2) {
        transform: translateY(-5.25px) rotate(-45deg);
    }
    .top-header .step-counter,
    .top-header .back-btn {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 480px) {
    .burger-btn {
        top: 18px !important;
        right: 15px !important;
    }
}