@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h1 span {
        font-size: 3rem;
    }

    header .glass {
        padding: 0.75rem 1.5rem;
    }

    .nav-links {
        display: none;
        /* Hidden by default on mobile */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface-glass);
        backdrop-filter: blur(15px);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        text-align: center;
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }

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

    /* Add a hamburger icon placeholder - will need JS to generate or an element in HTML */
    .mobile-menu-btn {
        display: block;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
}