@media (max-width: 768px) {
    :root {
        --base-unit: 0.875rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .nav-links {
        display: none;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }

    .social-btn {
        width: 100%;
        max-width: calc(300px / var(--golden-ratio));
        justify-content: center;
    }

    .spotify-section {
        padding: 2rem 1rem;
    }

    .social-section {
        padding: 3rem 1rem;
    }
}