@media (max-width: 1180px){
    .ws-menu{
        gap:12px;
        font-size:var(--fs-xs);
    }

    .hero-grid{
        gap:48px;
    }
}

@media (max-width: 992px){
    .ws-nav-toggle{
        display:inline-flex;
    }

    .ws-menu{
        position:fixed;
        top:76px;
        left:20px;
        right:20px;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:18px;
        border:1px solid var(--ws-border);
        border-radius:var(--radius-lg);
        background:var(--ws-white);
        box-shadow:var(--shadow-lg);
    }

    .ws-menu.is-open{
        display:flex;
    }

    .ws-menu li,
    .ws-menu a{
        width:100%;
    }

    .ws-menu a{
        display:block;
        padding:12px;
    }

    .hero-grid,
    .workflow-grid,
    .split-section,
    .marketplace-grid,
    .faq-grid{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:auto;
    }

    .hero-panel{
        max-width:620px;
    }

    .stats-grid,
    .feature-grid,
    .pricing-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 720px){
    section{
        padding:76px 0;
    }

    .container{
        width:min(calc(100% - 28px),var(--container));
    }

    .ws-navbar{
        min-height:68px;
    }

    .ws-menu{
        top:68px;
        left:14px;
        right:14px;
    }

    .ws-logo-text small,
    .ws-login{
        display:none;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .section-heading,
    .section-heading.align-left{
        margin-bottom:34px;
    }

    .section-heading h2,
    .cta-panel h2{
        font-size:2.1rem;
    }

    .stats-grid,
    .feature-grid,
    .pricing-grid,
    .hero-dashboard-grid{
        grid-template-columns:1fr;
    }

    .cta-panel{
        padding:34px 24px;
    }

    .ws-footer-grid,
    .ws-footer-bottom{
        grid-template-columns:1fr;
        flex-direction:column;
    }
}

@media (max-width: 480px){
    .ws-actions .ws-btn{
        display:none;
    }

    .ws-btn{
        width:100%;
    }

    .hero-buttons{
        width:100%;
    }

    .hero h1{
        font-size:2.35rem;
    }

    .hero-panel-body,
    .academy-panel{
        padding:18px;
    }
}