/* ==========================================
   MOBILE (992px and below)
========================================== */

@media (max-width:992px){

.container{

width:92%;

margin:auto;

}

.hero-container{

display:flex;

flex-direction:column;

gap:60px;

text-align:center;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;

margin-top:40px;

}

.hero-stats div{

padding:18px;

background:rgba(255,255,255,.04);

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.features-grid{

grid-template-columns:1fr;

}

.dashboard-section{

display:flex;

flex-direction:column;

gap:45px;

}

.dashboard-left,
.dashboard-right{

width:100%;

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

/* ==========================================
   PHONE (768px and below)
========================================== */

@media (max-width:768px){

.hero h1{

font-size:54px;

line-height:1.05;

}

.hero p{

font-size:18px;

}

.hero-stats{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.command-list{

justify-content:center;

}

.command-list button{

flex:1 1 45%;

}

.dashboard-window{

overflow-x:auto;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:38px;

}

}

/* ==========================================
   SMALL DEVICES
========================================== */

@media (max-width:480px){

.hero h1{

font-size:44px;

}

.section-heading h2{

font-size:38px;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.hero-badge{

margin:auto;

}

.bot-card{

width:100%;

max-width:320px;

}

}

/* ==========================================
   MOBILE NAVBAR
========================================== */

@media (max-width: 992px) {

    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(5, 8, 22, 0.96);
        backdrop-filter: blur(25px);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 28px;

        transition: .35s ease;

        z-index: 9999;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 22px;
    }

    .mobile-invite {
        display: inline-flex;
        padding: 14px 26px;
        border-radius: 14px;
        background: var(--gradient);
        color: white;
        margin-top: 15px;
    }

    .menu-toggle {
        display: block;
    }

}

@media (min-width: 993px) {

    .menu-toggle {
        display: none;
    }

    .mobile-invite {
        display: none;
    }

}

/* ==========================================
   DOCUMENTATION MOBILE
========================================== */

@media (max-width:992px){

.docs-page{

grid-template-columns:1fr;

padding:120px 20px 60px;

gap:30px;

}

.docs-sidebar{

position:relative;

top:0;

}

.doc-card{

padding:24px;

}

.doc-card h1{

font-size:34px;

}

.doc-card h2{

font-size:28px;

}

.command-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.legal-grid{

grid-template-columns:1fr;

}

.legal-sidebar{

position:relative;

top:0;

margin-bottom:30px;

}

.legal-meta{

flex-direction:column;

align-items:center;

}

.legal-hero h1{

font-size:2.8rem;

}

}

@media (max-width:992px){

    .nav-links{

        position:fixed !important;
        top:0 !important;
        right:-100% !important;

        width:280px !important;
        height:100vh !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;

        background:#0a1224 !important;

        z-index:99999 !important;

        transition:right .35s ease !important;

    }

    .nav-links.active{

        right:0 !important;

    }

}

/* ==========================================
   COMMANDS PAGE MOBILE
========================================== */

@media (max-width:992px){

.commands-hero{

padding:120px 0 60px;

text-align:center;

}

.commands-hero h1{

font-size:46px;

line-height:1.1;

margin-bottom:18px;

}

.commands-hero p{

font-size:17px;

line-height:1.7;

max-width:100%;

margin:auto;

}

.command-pill{

margin:0 auto 20px;

}

.search-box{

margin:35px auto;

width:100%;

height:58px;

padding:0 20px;

border-radius:18px;

}

.search-box input{

font-size:17px;

}

.category-row{

display:flex;

flex-wrap:nowrap;

overflow-x:auto;

gap:12px;

padding-bottom:10px;

scrollbar-width:none;

-webkit-overflow-scrolling:touch;

}

.category-row::-webkit-scrollbar{

display:none;

}

.category-row button{

flex:0 0 auto;

padding:12px 22px;

font-size:15px;

}

.stats-row{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:35px;

}

.stat-card{

padding:24px;

border-radius:18px;

}

.stat-card h2{

font-size:38px;

}

.commands-page{

padding:50px 0 80px;

}

.commands-grid{

grid-template-columns:1fr;

gap:18px;

}

.command-card{

padding:20px;

border-radius:20px;

}

.command-top{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.command-top h3{

font-size:24px;

}

.command-card p{

font-size:15px;

line-height:1.7;

margin:18px 0;

}

.command-bottom{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

.command-bottom button{

width:100%;

height:46px;

font-size:15px;

}

.command-modal .modal-card{

width:94%;

max-height:88vh;

overflow-y:auto;

padding:28px;

border-radius:24px;

}

.modal-buttons button{

width:100%;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:480px){

.commands-hero{

padding-top:105px;

}

.commands-hero h1{

font-size:38px;

}

.commands-hero p{

font-size:16px;

}

.search-box{

height:54px;

}

.stat-card h2{

font-size:32px;

}

.command-top h3{

font-size:21px;

}

.category-row button{

padding:10px 18px;

font-size:14px;

}

}

/* ==========================================
   FORCE MOBILE NAVBAR
========================================== */

@media (max-width: 992px) {

    #navbar {
        width: 100%;
        padding: 12px 0;
    }

    .nav-container {
        width: 92%;
        margin: 0 auto;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        font-size: 1.5rem;
    }

    .logo span {
        font-size: 28px;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        font-size: 30px;

        background: transparent;
        border: none;
        color: white;
        cursor: pointer;

        z-index: 10001;
    }

    .nav-links {

        position: fixed !important;

        top: 0;
        right: -100%;

        width: 280px;
        height: 100vh;

        background: #08111f;

        display: flex !important;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 24px;

        transition: right .35s ease;

        z-index: 10000;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 20px;
    }

}


/* ==========================================
   DOCUMENTATION V2 RESPONSIVE
========================================== */

@media (max-width:992px){

.docs-hero{

padding:130px 0 60px;

}

.docs-hero h1{

font-size:52px;

}

.docs-hero p{

font-size:18px;

max-width:100%;

}

.docs-layout{

display:flex;

flex-direction:column;

gap:28px;

}

.docs-sidebar{

position:relative;

top:0;

width:100%;

padding:22px;

border-radius:22px;

}

.docs-sidebar nav{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:10px;

}

.docs-sidebar a{

padding:12px 14px;

font-size:15px;

text-align:center;

}

.docs-content{

width:100%;

}

.doc-card{

padding:26px;

border-radius:20px;

}

.command-grid{

grid-template-columns:1fr;

}

.feature-list{

grid-template-columns:1fr;

}

.docs-search{

height:56px;

font-size:16px;

}

.code-block{

font-size:14px;

overflow-x:auto;

white-space:pre;

}

}

@media (max-width:768px){

.docs-hero{

padding:115px 0 50px;

}

.docs-badge{

font-size:13px;

padding:8px 16px;

}

.docs-hero h1{

font-size:42px;

line-height:1.1;

}

.docs-hero p{

font-size:16px;

line-height:1.7;

}

.docs-sidebar{

padding:18px;

}

.docs-sidebar h3{

text-align:center;

margin-bottom:18px;

}

.docs-sidebar nav{

display:flex;

flex-direction:column;

gap:10px;

}

.docs-sidebar a{

width:100%;

padding:14px 18px;

border-radius:14px;

font-size:15px;

}

.doc-card{

padding:22px;

}

.doc-card h2{

font-size:28px;

}

.doc-card h3{

font-size:20px;

}

.doc-card p{

font-size:15px;

line-height:1.8;

}

.doc-card ol,

.doc-card ul{

font-size:15px;

}

.command-box{

padding:18px;

}

.command-box strong{

font-size:18px;

}

.code-block{

padding:18px;

font-size:13px;

}

.faq-item{

padding:18px;

}

}

@media (max-width:480px){

.docs-hero{

padding-top:105px;

}

.docs-hero h1{

font-size:34px;

}

.docs-hero p{

font-size:15px;

}

.docs-search{

height:52px;

padding:0 18px;

}

.docs-sidebar{

padding:16px;

}

.docs-sidebar a{

padding:12px;

font-size:14px;

}

.doc-card{

padding:18px;

border-radius:18px;

}

.doc-card h2{

font-size:24px;

}

.doc-card h3{

font-size:18px;

}

.command-box{

padding:16px;

}

.feature-list li{

padding:12px 14px;

}

.code-block{

font-size:12px;

}

}

/* ==========================================
   HOMEPAGE MOBILE IMPROVEMENTS
========================================== */

@media (max-width:768px){

#hero{

min-height:auto;

padding-top:120px;

padding-bottom:70px;

}

.hero-container{

gap:40px;

}

.hero-left h1{

font-size:56px;

line-height:1.02;

}

.hero-left p{

font-size:17px;

line-height:1.8;

max-width:100%;

}

.hero-badge{

font-size:14px;

padding:10px 18px;

}

.hero-buttons{

width:100%;

display:flex;

flex-direction:column;

gap:14px;

}

.hero-buttons .btn{

width:100%;

height:58px;

font-size:18px;

}

.stats-grid{

gap:18px;

}

.stat-card{

padding:24px 20px;

border-radius:22px;

}

.stat-card h3{

font-size:42px;

}

.logo-icon{

width:56px;

height:56px;

}

.logo span{

font-size:34px;

font-weight:800;

}

}

/* ==========================================
   HOMEPAGE MOBILE IMPROVEMENTS
========================================== */

@media (max-width:768px){

#hero{

min-height:auto;

padding-top:120px;

padding-bottom:70px;

}

.hero-container{

gap:40px;

}

.hero-left h1{

font-size:56px;

line-height:1.02;

}

.hero-left p{

font-size:17px;

line-height:1.8;

max-width:100%;

}

.hero-badge{

font-size:14px;

padding:10px 18px;

}

.hero-buttons{

width:100%;

display:flex;

flex-direction:column;

gap:14px;

}

.hero-buttons .btn{

width:100%;

height:58px;

font-size:18px;

}

.stats-grid{

gap:18px;

}

.stat-card{

padding:24px 20px;

border-radius:22px;

}

.stat-card h3{

font-size:42px;

}

.logo-icon{

width:56px;

height:56px;

}

.logo span{

font-size:34px;

font-weight:800;

}

}