@media (max-width: 768px) {
    :root {
        --space-xl: 3rem;
        --space-lg: 1.25rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-xl));
        padding-bottom: var(--space-xl);
    }

    .hero__cta {
        flex-direction: column;
    }

    .hero__cta .btn {
        text-align: center;
        justify-content: center;
    }

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

    .contact__form {
        max-width: 100%;
    }
}

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

    .hero__title {
        font-size: 1rem;
    }

    .hero__tagline {
        font-size: 0.95rem;
    }

    .skills__tag {
        font-size: 0.75rem;
    }
}