@media screen and (max-width: 768px) {
    .nav-links {
        display: none; /* Hide by default on mobile, toggled via JS */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 80px;
        left: 0;
        background: #0a0a0a;
        padding: 2rem 0;
    }

    .nav-links.active {
        display: flex;
    }

    .burger-menu {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .burger-menu span {
        width: 25px;
        height: 3px;
        background: #fff;
        transition: 0.3s;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
}