/* ==========================================================================
   RESPONSIVE DESIGN OVERRIDES
   ========================================================================== */

/* Large Tablets and Laptops */
@media (max-width: 1024px) {
    .navbar {
        padding: 15px 25px;
    }
    
    .navbar__links {
        gap: 20px;
    }
}

/* Tablets & Small Screens */
@media (max-width: 768px) {
    .navbar {
        padding: 12px 20px;
    }

    .navbar__links {
        display: none; /* We can toggle a menu or rely on simplified links */
    }

    /* Standard mobile-friendly responsive menu */
    .navbar.mobile-active .navbar__links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(10, 3, 28, 0.95);
        border-bottom: 1px solid var(--glass-border);
        padding: 20px;
        gap: 15px;
        box-shadow: 0 10px 25px var(--glass-shadow);
        animation: menu-slide-down 0.3s ease-out forwards;
    }

    @keyframes menu-slide-down {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .navbar__hamburger {
        display: block !important;
        background: none;
        border: none;
        color: var(--text-light);
        cursor: pointer;
        font-size: 24px;
        padding: 5px;
    }

    .countdown {
        padding: 15px 20px;
        gap: 12px;
    }

    .countdown__unit {
        min-width: 50px;
    }

    .hero-card {
        padding: 30px 20px;
        margin: 0 10px;
    }

    .inner-page {
        padding-top: 100px;
    }
}

/* Tiny Mobile Phones */
@media (max-width: 480px) {
    .countdown {
        gap: 8px;
        padding: 12px 15px;
    }
    
    .countdown__unit {
        min-width: 42px;
    }
    
    .countdown__digits {
        font-size: 1.8rem;
    }

    .locked-name {
        font-size: 3rem;
    }

    .hero-btn {
        padding: 10px 25px;
        font-size: 10px;
    }
}