@media (max-width: 1080px) {
    .header { width: min(100% - 36px, 1400px); }
    .brand-name { display: none; }
    .nav { gap: 18px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .mode-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .header {
        height: auto;
        padding: 18px 0;
        flex-wrap: wrap;
    }
    .server-status { margin-left: auto; }
    .nav {
        order: 3;
        width: 100%;
        margin: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: 11px 20px;
        padding-top: 5px;
    }
    .nav > a:not(.nav-button) { font-size: 12px; }
    .nav-button { padding: 7px 15px; font-size: 11px; }
    .hero { width: min(100% - 36px, 1400px); min-height: 78vh; padding-top: 40px; }
    .section { width: min(100% - 36px, 1240px); padding-top: 80px; }
    .section-heading .line { display: none; }
    .admin-grid { grid-template-columns: 1fr; }
    .footer { width: min(100% - 36px, 1240px); grid-template-columns: 1fr; }
    .footer-logo { grid-row: auto; margin-bottom: 12px; }
    .footer p { text-align: left; }
}

@media (max-width: 620px) {
    .hero h1 { font-size: clamp(48px, 17vw, 74px); }
    .hero h2 { letter-spacing: 1.5px; line-height: 1.55; }
    .hero-description { font-size: 14px; }
    .hero-actions { flex-direction: column; }
    .primary-button, .secondary-button { width: 100%; }
    .feature-grid { grid-template-columns: 1fr; }
    .mode-card { padding: 25px; }
    .admin-card { padding: 24px; flex-direction: column; align-items: flex-start; }
    .discord-banner { flex-direction: column; align-items: flex-start; }
    .media { right: 12px; bottom: 12px; }
    .media a { width: 38px; height: 38px; }
    .media img { width: 23px; height: 23px; }
}

@media (max-width: 420px) {
    .server-status { display: none; }
    .nav { justify-content: flex-start; }
    .nav a.active { display: none; }
    .hero { padding-top: 25px; }
    .section-heading h2 { font-size: 30px; }
}