@media (max-width: 768px) {
    .site-header {
        padding: 16px 20px;
    }

    .site-header.is-scrolled {
        padding: 10px 20px;
    }

    .header-inner {
        flex-direction: column;
        gap: 14px;
    }

    .logo {
        font-size: 22px;
        text-align: center;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    nav a {
        margin-left: 0;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .site-header {
        padding: 14px 16px;
    }

    .site-header.is-scrolled {
        padding: 9px 16px;
    }

    .logo {
        font-size: 20px;
    }

    nav {
        gap: 10px;
    }

    nav a {
        font-size: 13px;
    }
}