.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu {
        position: absolute;
        top: 130px;
        left: 0;
        width: 100%;
        background-color: #010521;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
        z-index: 999;
    }

    .mobile-menu.open {
        max-height: 400px;
    }

    .mobile-menu ul {
        list-style: none;
        margin: 0;
        padding: 8px 0;
    }

    .mobile-menu li {
        width: 100%;
    }

    .mobile-menu a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 0.95rem;
        color: #e4f1ff;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus {
        background: linear-gradient(90deg, rgba(34, 229, 255, 0.18) 0%, rgba(255, 59, 191, 0.26) 100%);
    }
}

@media (max-width: 480px) {
    .mobile-menu a {
        font-size: 0.9rem;
        padding: 11px 18px;
    }
}