:root{

    --background:#0b0f16;
    --background-light:#131a24;
    --card:#171f2b;
    --card-hover:#1d2736;

    --primary:#5865F2;
    --primary-hover:#6a75ff;

    --text:#ffffff;
    --muted:#9ca3af;

    --border:rgba(255,255,255,.08);

    --radius:18px;

    --transition:.25s ease;

    --shadow:
        0 20px 45px rgba(0,0,0,.35);

}


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:
        radial-gradient(circle at top,#1b2844 0%,#0b0f16 45%);

    color:var(--text);

    font-family:'Inter',sans-serif;

    line-height:1.6;

    overflow-x:hidden;

}



::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-thumb{

    background:#2d3748;

    border-radius:20px;

}


::-webkit-scrollbar-track{

    background:#0b0f16;

}



.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    padding:0 80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    backdrop-filter:blur(20px);

    background:rgba(11,15,22,.65);

    border-bottom:1px solid rgba(255,255,255,.05);

    z-index:999;

}



.nav-left{

    display:flex;

    align-items:center;

    gap:28px;

}



.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:white;

    font-weight:700;

    font-size:21px;

}



.logo img{

    width:42px;

    height:42px;

    border-radius:50%;

}



.dropdown{

    position:relative;

}



.dropdown-btn{

    background:none;

    border:none;

    color:white;

    cursor:pointer;

    font-size:16px;

    font-family:inherit;

    display:flex;

    align-items:center;

    gap:6px;

    padding:10px 0;

}


.dropdown-btn svg{

    transition:.25s;

}


.dropdown.active svg{

    transform:rotate(180deg);

}


.dropdown-menu{

    position:absolute;

    top:55px;

    left:0;

    width:340px;

    background:#161d28;

    border:1px solid var(--border);

    border-radius:18px;

    padding:12px;

    display:none;

    box-shadow:var(--shadow);

    animation:dropdown .25s;

}


.dropdown.active .dropdown-menu{

    display:block;

}


.dropdown-menu a{

    display:block;

    text-decoration:none;

    color:white;

    padding:14px;

    border-radius:14px;

    transition:.2s;

}


.dropdown-menu a:hover{

    background:#202a3b;

}


.dropdown-menu h4{

    font-size:15px;

}


.dropdown-menu p{

    color:var(--muted);

    font-size:13px;

    margin-top:3px;

}


@keyframes dropdown{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.invite-btn,
.primary-btn{

    background:var(--primary);

    color:white;

    text-decoration:none;

    padding:14px 26px;

    border-radius:14px;

    transition:var(--transition);

    font-weight:600;

}


.invite-btn:hover,
.primary-btn:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}


.secondary-btn{

    color:white;

    text-decoration:none;

    border:1px solid var(--border);

    padding:14px 26px;

    border-radius:14px;

    transition:.25s;

}


.secondary-btn:hover{

    background:#1d2736;

}




.hero{

    width:100%;

    min-height:100vh;

    padding:170px 80px 100px;

    display:grid;

    grid-template-columns:1fr 500px;

    align-items:center;

    gap:90px;

}



.badge{

    display:inline-block;

    background:rgba(88,101,242,.15);

    color:#8ea3ff;

    padding:8px 18px;

    border-radius:999px;

    margin-bottom:24px;

    font-weight:600;

}



.hero h1{

    font-size:64px;

    line-height:1.05;

    margin-bottom:22px;

}



.hero p{

    color:var(--muted);

    font-size:18px;

    max-width:620px;

}



.hero-buttons{

    margin-top:38px;

    display:flex;

    gap:18px;

}





.discord-card{

    background:var(--card);

    border-radius:24px;

    padding:30px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}



.card-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:28px;

}



.card-header img{

    width:55px;

    height:55px;

    border-radius:50%;

}



.card-header span{

    display:block;

    color:#53d769;

    font-size:14px;

    margin-top:4px;

}



.card-body p{

    background:#202a3b;

    padding:15px;

    border-radius:12px;

    margin-bottom:12px;

}





.features{

    max-width:1400px;

    margin:auto;

    padding:120px 80px;

}



.features h2{

    text-align:center;

    font-size:44px;

    margin-bottom:60px;

}



.feature-grid{

    display:grid;

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

    gap:28px;

}



.feature-card{

    background:var(--card);

    border-radius:20px;

    padding:34px;

    border:1px solid var(--border);

    transition:.25s;

}



.feature-card h3{

    margin-bottom:14px;

}



.feature-card p{

    color:var(--muted);

}





footer{

    margin-top:120px;

    border-top:1px solid rgba(255,255,255,.06);

    padding:50px 80px;

}



.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-links{

    display:flex;

    gap:28px;

}



.footer-links a{

    color:var(--muted);

    text-decoration:none;

}



.footer-links a:hover{

    color:white;

}
@media(max-width:1000px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-buttons{

    justify-content:center;

}



.discord-card{

    margin:auto;

}



.feature-grid{

    grid-template-columns:1fr;

}



.footer-content{

    flex-direction:column;

    gap:30px;

}



.navbar{

    padding:0 25px;

}



.hero{

    padding:150px 25px 70px;

}



.features{

    padding:70px 25px;

}



.hero h1{

    font-size:44px;

}



.dropdown-menu{

    width:300px;

}



}





.page-header{

    padding:170px 40px 90px;

    text-align:center;

}



.page-header h1{

    font-size:56px;

    margin:18px 0;

}



.page-header p{

    max-width:700px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

}





.docs-container{

    max-width:1200px;

    margin:auto;

    padding:20px 40px 100px;

}





.faq-section{

    max-width:900px;

    margin:auto;

    padding:20px 30px 100px;

}



.faq-container{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.faq-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

}



.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    color:white;

    padding:24px 28px;

    cursor:pointer;

    font-size:18px;

    font-family:inherit;

    font-weight:600;

}



.faq-question span{

    font-size:28px;

    transition:.3s;

}



.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}



.faq-answer p{

    padding:0 28px 28px;

    color:var(--muted);

}



.faq-card.open .faq-answer{

    max-height:300px;

}



.faq-card.open .faq-question span{

    transform:rotate(45deg);

}





.status-container{

    max-width:1200px;

    margin:auto;

    padding:20px 40px 100px;

}



.overall-status{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:var(--card);

    padding:28px;

    border-radius:20px;

    border:1px solid var(--border);

    margin:0 auto 45px;

    max-width:900px;

}


.overall-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}


.overall-status h2{

    margin:0;

    line-height:1.2;

}


.overall-status p{

    color:var(--muted);

    margin-top:5px;

    line-height:1.4;

}





.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    flex-shrink:0;

    animation:statusPulse 2s infinite;

}





.status-dot.operational{

    background:#2ecc71;

    box-shadow:0 0 14px #2ecc71;

}





.status-dot.maintenance{

    background:#3498db;

    box-shadow:0 0 14px #3498db;

}





.status-dot.degraded{

    background:#f39c12;

    box-shadow:0 0 14px #f39c12;

}





.status-dot.offline{

    background:#7f8c8d;

    box-shadow:0 0 14px #7f8c8d;

}





@keyframes statusPulse{


    0%{

        transform:scale(1);

        opacity:1;

    }


    50%{

        transform:scale(1.35);

        opacity:.55;

    }


    100%{

        transform:scale(1);

        opacity:1;

    }


}





.status-grid{

    display:grid;

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

    gap:25px;

}





.status-card{

    background:var(--card);

    padding:28px;

    border-radius:18px;

    border:1px solid var(--border);

    transition:.25s;

}




.status-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    font-weight:600;

    font-size:18px;

}





.status-card p{

    color:var(--muted);

}





@media(max-width:900px){


    .status-grid{

        grid-template-columns:1fr;

    }


}
.search-box{

    margin-bottom:40px;

}



.search-box input{

    width:100%;

    padding:18px 22px;

    font-size:16px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:16px;

    outline:none;

    color:white;

    font-family:inherit;

    transition:.2s;

}



.search-box input:focus{

    border-color:var(--primary);

}



.variable-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}



.variable-card{

    background:var(--card);

    padding:28px;

    border-radius:18px;

    border:1px solid var(--border);

    transition:.25s;

}



.variable-card h3{

    margin-bottom:12px;

    font-size:22px;

}



.variable-card p{

    margin-bottom:18px;

    color:var(--muted);

}



.variable-card code{

    display:block;

    padding:14px;

    background:#10151d;

    border-radius:10px;

    font-size:15px;

    color:#8ea3ff;

    font-family:Consolas, monospace;

    overflow-x:auto;

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

}





.variable-section{

    margin-top:70px;

}



.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    padding-bottom:18px;

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

}



.section-title h2{

    font-size:34px;

    font-weight:700;

}



.section-title span{

    color:var(--muted);

    font-size:15px;

}



.premium-section{

    margin-top:100px;

}



.variable-card.premium{

    border:1px solid rgba(255,215,0,.25);

    background:linear-gradient(
        180deg,
        rgba(255,215,0,.06),
        var(--card)
    );

}



.variable-card.premium code{

    color:#FFD54A;

}





.updates-filter-dropdown{

    position:relative;

}



.updates-filter-btn{

    background:#161d28;

    border:1px solid var(--border);

    color:white;

    cursor:pointer;

    font-size:15px;

    font-family:inherit;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:12px;

    transition:.25s;

}



.updates-filter-btn:hover{

    background:#202a3c;

}



.updates-filter-btn svg{

    transition:.25s;

}



.updates-filter-dropdown.active 
.updates-filter-btn svg{

    transform:rotate(180deg);

}



.updates-filter-menu{

    position:absolute;

    right:0;

    top:55px;

    width:300px;

    background:#161d28;

    border:1px solid var(--border);

    border-radius:18px;

    padding:12px;

    display:none;

    box-shadow:var(--shadow);

    animation:dropdown .25s;

    z-index:50;

}



.updates-filter-dropdown.active 
.updates-filter-menu{

    display:block;

}



.updates-filter-menu a{

    display:block;

    text-decoration:none;

    color:white;

    padding:14px;

    border-radius:14px;

    cursor:pointer;

    transition:.2s;

}



.updates-filter-menu a:hover{

    background:#202a3b;

}



.updates-filter-menu h4{

    font-size:15px;

    margin:0;

}



.updates-filter-menu p{

    color:var(--muted);

    font-size:13px;

    margin-top:3px;

}
.nav-right{

    display:flex;

    align-items:center;

    gap:14px;

}



.premium-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:14px 26px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        #ff424d,
        #ff7b54
    );

    transition:.25s;

}



.premium-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(255,66,77,.35);

}





code{

    background:rgba(255,255,255,0.08);

    padding:4px 8px;

    border-radius:6px;

    font-family:monospace;

    color:white;

}





.slash-command{

    color:#5865f2;

    padding:4px 8px;

    border-radius:6px;

    font-weight:600;

    font-family:monospace;

}





.card-header > div{

    display:flex;

    flex-direction:column;

}





.card-header strong{

    display:flex;

    align-items:center;

    gap:5px;

    white-space:nowrap;

}





.app-badge{

    background:#5865f2;

    color:white;

    font-size:11px;

    padding:2px 5px;

    border-radius:4px;

    display:inline-flex;

    align-items:center;

    line-height:1;

    white-space:nowrap;

}





.discord-mention{

    color:#5865f2;

    font-weight:600;

    margin-bottom:8px;

}





.embed-preview{

    background:#242429;

    border-left:4px solid #00a884;

    padding:16px;

    border-radius:6px;

}





.embed-preview h4{

    margin:0 0 12px;

    font-size:16px;

}





.embed-preview p{

    color:#dbdee1;

    margin:10px 0;

}





.embed-preview strong{

    color:white;

}





.embed-preview .channels span{

    background:#313338;

    color:#5865f2;

    padding:2px 5px;

    border-radius:3px;

}





.embed-preview small{

    color:#b5bac1;

    font-weight:600;

}





.update-card{

    margin-bottom:40px;

}





.update-card:last-child{

    margin-bottom:0;

}





.update-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}





.update-header h3{

    margin-bottom:6px;

}





.update-header span{

    opacity:.7;

    font-size:14px;

}





@media(max-width:600px){


.navbar{

    padding:0 14px;

}



.nav-left{

    width:auto;

    justify-content:flex-start;

    gap:14px;

}



.nav-right{

    display:flex;

    align-items:center;

    gap:8px;

}



.invite-btn{

    display:none;

}



.premium-btn{

    padding:8px 12px;

    font-size:13px;

}



.dropdown{

    margin-left:0;

}



.dropdown-btn{

    font-size:15px;

}



.dropdown-menu{

    position:fixed;

    top:72px;

    left:14px;

    right:14px;

    width:auto;

    max-width:none;

    margin:0;

    max-height:70vh;

    overflow-y:auto;

}



.logo img{

    width:36px;

    height:36px;

}



.logo{

    font-size:18px;

}



.navbar{

    background:rgba(11,15,22,.85);

}





.section-title{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}



.updates-filter-menu{

    position:fixed;

    top:72px;

    left:14px;

    right:14px;

    width:auto;

    max-width:none;

    max-height:70vh;

    overflow-y:auto;

}



footer{

    padding:45px 25px;

}



.footer-content{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:30px;

}



.footer-links{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    width:100%;

}



.footer-links a{

    display:block;

    width:100%;

}


}

.incident-card{

    cursor:pointer;

}


.incident-card:hover{

    transform:
        translateY(-8px)
        scale(1.015);

    background:var(--card-hover);

    border-color:#5865F2;

    box-shadow:

        0 25px 60px rgba(0,0,0,.5),

        0 0 25px rgba(88,101,242,.15);

}





#status-modal{

    display:none;

}





#status-modal.active{

    display:block;

}





.status-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    padding:20px;

}





.status-popup{

    position:relative;

    width:100%;

    max-width:500px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

    animation:statusPopup .25s ease;

}





.status-popup h2{

    margin-bottom:12px;

    font-size:28px;

}





.popup-status{

    color:var(--muted);

    font-weight:600;

    margin-bottom:20px;

}





.popup-description{

    color:var(--text);

    line-height:1.7;

    white-space:pre-wrap;

}





.status-close{

    position:absolute;

    top:15px;

    right:18px;

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

    opacity:.7;

    transition:.2s;

}





.status-close:hover{

    opacity:1;

}





@keyframes statusPopup{


    from{

        opacity:0;

        transform:scale(.95) translateY(10px);

    }


    to{

        opacity:1;

        transform:scale(1) translateY(0);

    }


}

#history-container{

    display:flex;

    flex-direction:column;

    gap:25px;

}





.status-history-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:28px;

    transition:.25s;

}





.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

}





.history-header h3{

    font-size:22px;

    margin-bottom:5px;

}





.history-header span{

    color:var(--muted);

    font-size:14px;

}





.history-status{

    padding:8px 16px;

    border-radius:999px;

    font-weight:600;

    font-size:14px;

}





.history-status.offline{

    background:rgba(239,68,68,.15);

    color:#ef4444;

}





.history-status.maintenance{

    background:rgba(52,152,219,.15);

    color:#3498db;

}





.history-status.degraded{

    background:rgba(243,156,18,.15);

    color:#f39c12;

}





.history-description{

    color:var(--text);

    line-height:1.7;

    margin-bottom:22px;

}





.history-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--muted);

    font-size:14px;

}





@media(max-width:700px){


    .history-header{

        flex-direction:column;

        align-items:flex-start;

    }


    .history-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }


}

.section-title a{

    text-decoration:none;

    color:var(--muted);

    font-size:15px;

}


.variable-section > .variable-card + .variable-card {
    margin-top:25px;
}

.features-home-layout{

    max-width:1100px;

    margin:auto;

    padding:20px 40px 100px;

}

.features-home-link:hover{

    transform:
        translateY(-8px)
        scale(1.015);

    background:var(--card-hover);

    border-color:#5865F2;

    box-shadow:

        0 25px 60px rgba(0,0,0,.5),

        0 0 25px rgba(88,101,242,.15);

}



.features-home-content{

    display:flex;

    flex-direction:column;

    gap:25px;

}





.features-home-card{

    display:block;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:32px;

    text-decoration:none;

    color:white;

    transition:
        transform .3s cubic-bezier(.4,0,.2,1),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}



.features-home-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:18px;

}





.features-home-header h2{

    font-size:26px;

}





.features-home-header span{

    color:var(--muted);

    font-size:14px;

}





.features-home-card p{

    color:var(--muted);

    line-height:1.7;

}





.features-home-box{

    margin-top:25px;

    background:#10151d;

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

    padding:14px 18px;

    border-radius:12px;

}





.features-home-box p{

    color:white;

    font-weight:600;

}





@media(max-width:700px){


    .features-home-layout{

        padding:20px 25px 70px;

    }



    .features-home-header{

        flex-direction:column;

        align-items:flex-start;

    }


}

.channels a {
    color: inherit;
    text-decoration: none;
}

.channels a:hover {
    text-decoration: underline;
}

/* =========================================
   FEATURES / LEGAL / STATUS SUBMENUS
========================================= */

.features-dropdown,
.dropdown-submenu {
    position: relative;
}


/* Main dropdown items */

.features-dropdown > a,
.dropdown-submenu > a {
    display: block;

    text-decoration: none;

    color: white;

    padding: 14px;

    border-radius: 14px;

    transition: .2s;
}


.features-dropdown > a:hover,
.dropdown-submenu > a:hover {
    background: #202a3b;
}


/* =========================================
   FEATURES SUBMENU
========================================= */

.features-menu,
.dropdown-submenu-menu {
    position: absolute;

    top: -12px;
    left: calc(100% + 14px);

    width: 280px;

    background: #161d28;

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 12px;

    box-shadow: var(--shadow);

    opacity: 0;
    visibility: hidden;

    transform: translateX(-8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 1000;
}


/* =========================================
   INVISIBLE HOVER BRIDGE
========================================= */

.features-menu::before,
.dropdown-submenu-menu::before {
    content: "";

    position: absolute;

    top: 0;
    left: -14px;

    width: 14px;
    height: 100%;
}


/* =========================================
   OPEN SUBMENUS
========================================= */

.features-dropdown:hover .features-menu,
.dropdown-submenu:hover .dropdown-submenu-menu {
    opacity: 1;

    visibility: visible;

    transform: translateX(0);
}


/* =========================================
   SUBMENU LINKS
========================================= */

.features-menu a,
.dropdown-submenu-menu a {
    display: block;

    text-decoration: none;

    color: white;

    padding: 14px;

    border-radius: 14px;

    transition: .2s;
}


.features-menu a:hover,
.dropdown-submenu-menu a:hover {
    background: #202a3b;
}


/* Remove unwanted arrow styling */

.features-menu a::after,
.dropdown-submenu-menu a::after {
    display: none;
}


/* =========================================
   SUBMENU HEADINGS
========================================= */

.features-menu h4,
.dropdown-submenu-menu h4 {
    font-size: 15px;

    margin: 0;
}


/* =========================================
   SUBMENU DESCRIPTIONS
========================================= */

.features-menu p,
.dropdown-submenu-menu p {
    color: var(--muted);

    font-size: 13px;

    margin-top: 3px;

    line-height: 1.5;
}


/* =========================================
   MAIN DROPDOWN ITEMS
========================================= */

.dropdown-menu > a {
    display: block;

    text-decoration: none;

    color: white;

    padding: 14px;

    border-radius: 14px;

    transition: .2s;
}


.dropdown-menu > a:hover {
    background: #202a3b;
}


.dropdown-menu > a div {
    display: block;
}


.dropdown-menu > a h4 {
    font-size: 15px;

    margin: 0;
}


.dropdown-menu > a p {
    color: var(--muted);

    font-size: 13px;

    margin-top: 3px;

    line-height: 1.5;
}
@media(max-width:600px){

    /* Disable desktop submenu popouts on mobile */
    .features-menu,
    .dropdown-submenu-menu{

        display:none !important;

    }

    /* Make the main Legal / Status / Features links clickable normally */
    .features-dropdown > a,
    .dropdown-submenu > a{

        display:block;

    }

    /* Prevent hover from opening anything */
    .features-dropdown:hover .features-menu,
    .dropdown-submenu:hover .dropdown-submenu-menu{

        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;

    }

}

.feature-directory {
    width: min(900px, calc(100% - 40px));
    margin: 10px auto 70px;
    background: #0f0e17;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
}

.feature-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 28px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.feature-directory-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8f8d9b;
}

.feature-directory-header h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
}

.feature-directory-header p {
    margin: 6px 0 0;
    color: #8f8d9b;
    font-size: 14px;
    line-height: 1.5;
}

.feature-count {
    flex-shrink: 0;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: #aaa8b4;
    font-size: 12px;
    font-weight: 600;
}

.feature-directory-list {
    display: flex;
    flex-direction: column;
}

.feature-directory-item {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 82px;
    padding: 16px 22px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    transition:
        background 0.18s ease,
        padding 0.18s ease;
}

.feature-directory-item:last-child {
    border-bottom: 0;
}

.feature-directory-item:hover {
    background: rgba(255, 255, 255, 0.025);
    padding-left: 27px;
}

.feature-directory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    font-size: 19px;
}

.feature-directory-info {
    min-width: 0;
    flex: 1;
}

.feature-directory-info h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 650;
}

.feature-directory-info p {
    margin: 0;
    color: #85838f;
    font-size: 13px;
    line-height: 1.45;
}

.feature-directory-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #777582;
    font-size: 18px;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.feature-directory-item:hover .feature-directory-arrow {
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 700px) {

    .feature-directory {
        width: calc(100% - 28px);
        margin-top: 5px;
    }

    .feature-directory-header {
        align-items: flex-start;
        padding: 22px;
    }

    .feature-count {
        display: none;
    }

    .feature-directory-item {
        padding: 15px 17px;
    }

    .feature-directory-item:hover {
        padding-left: 20px;
    }

    .feature-directory-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .feature-directory-info p {
        font-size: 12px;
    }

}


/* =========================================================
   JOINLY — GRAPHITE SAAS VISUAL OVERHAUL
   Visual-only override layer.
   Existing selectors, interactions and responsive behaviour
   remain available underneath this layer.
   ========================================================= */

:root {
    --background: #08090b;
    --background-light: #0d0f12;
    --card: #111316;
    --card-hover: #17191d;

    --primary: #8b8f98;
    --primary-hover: #b2b6bf;

    --text: #f2f3f5;
    --muted: #92969f;
    --muted-strong: #b7bbc2;

    --border: rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.13);

    --radius: 14px;
    --transition: .22s cubic-bezier(.2,.8,.2,1);

    --shadow:
        0 24px 70px rgba(0,0,0,.42);

    --shadow-soft:
        0 12px 35px rgba(0,0,0,.25);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--background);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -12%, rgba(255,255,255,.055), transparent 34%),
        linear-gradient(180deg, #0a0b0d 0%, #08090b 52%, #070809 100%);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(255,255,255,.16);
    color: #fff;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #08090b;
}

::-webkit-scrollbar-thumb {
    background: #292c31;
    border: 2px solid #08090b;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3b3f46;
}

/* ---------- Navigation ---------- */

.navbar {
    height: 72px;
    padding: 0 56px;
    background: rgba(8,9,11,.78);
    border-bottom: 1px solid rgba(255,255,255,.055);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.nav-left {
    gap: 30px;
}

.logo {
    gap: 11px;
    color: #f5f5f6;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.logo img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}

.dropdown-btn {
    color: #aeb2b9;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--transition);
}

.dropdown-btn:hover {
    color: #fff;
}

.dropdown-menu,
.updates-filter-menu {
    background: rgba(17,19,22,.97);
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    padding: 7px;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    backdrop-filter: blur(22px);
}

.dropdown-menu a,
.dropdown-menu > a,
.features-dropdown > a,
.dropdown-submenu > a,
.features-menu a,
.dropdown-submenu-menu a,
.updates-filter-menu a {
    color: #dfe1e5;
    padding: 12px;
    border-radius: 9px;
}

.dropdown-menu a:hover,
.dropdown-menu > a:hover,
.features-dropdown > a:hover,
.dropdown-submenu > a:hover,
.features-menu a:hover,
.dropdown-submenu-menu a:hover,
.updates-filter-menu a:hover {
    background: rgba(255,255,255,.065);
}

.dropdown-menu h4,
.features-menu h4,
.dropdown-submenu-menu h4,
.updates-filter-menu h4 {
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.dropdown-menu p,
.features-menu p,
.dropdown-submenu-menu p,
.updates-filter-menu p {
    color: #777b84;
    font-size: 12px;
}

/* ---------- Buttons ---------- */

.invite-btn,
.primary-btn {
    background: #e7e8ea;
    color: #0a0b0d;
    border: 1px solid #f0f0f1;
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}

.invite-btn:hover,
.primary-btn:hover {
    background: #fff;
    color: #050506;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

.secondary-btn {
    color: #dfe1e5;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border-strong);
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
}

.secondary-btn:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}

.premium-btn {
    padding: 11px 18px;
    border-radius: 9px;
    background: #d7d9dd;
    color: #090a0c;
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: none;
}

.premium-btn:hover {
    transform: translateY(-1px);
    background: #f0f1f2;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

/* ---------- Hero ---------- */

.hero {
    max-width: 1440px;
    min-height: 92vh;
    margin: auto;
    padding: 150px 56px 100px;
    grid-template-columns: minmax(0,1fr) 470px;
    gap: 80px;
}

.badge {
    background: rgba(255,255,255,.045);
    color: #bfc2c8;
    border: 1px solid rgba(255,255,255,.09);
    padding: 6px 11px;
    border-radius: 7px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
}

.hero h1 {
    max-width: 760px;
    font-size: clamp(48px, 6vw, 76px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 760;
}

.hero p {
    max-width: 600px;
    color: #969aa2;
    font-size: 17px;
    line-height: 1.7;
}

.hero-buttons {
    margin-top: 32px;
    gap: 10px;
}

/* ---------- Cards ---------- */

.discord-card,
.feature-card,
.status-card,
.variable-card,
.faq-card,
.overall-status,
.status-history-card,
.features-home-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
        #111316;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.discord-card {
    padding: 24px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.025);
}

.card-header {
    gap: 12px;
    margin-bottom: 22px;
}

.card-header img {
    width: 46px;
    height: 46px;
    border-radius: 11px;
}

.card-header span {
    color: #9fa4ab;
    font-size: 12px;
}

.card-body p {
    background: #191b1f;
    border: 1px solid rgba(255,255,255,.045);
    padding: 13px 14px;
    border-radius: 9px;
    color: #c5c8ce;
}

.features {
    max-width: 1280px;
    padding: 110px 40px;
}

.features h2 {
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -.04em;
}

.feature-grid {
    gap: 14px;
}

.feature-card {
    padding: 28px;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

/* ---------- Page headers / content ---------- */

.page-header {
    padding: 150px 30px 70px;
}

.page-header h1 {
    font-size: clamp(42px, 5vw, 60px);
    letter-spacing: -.05em;
    font-weight: 750;
}

.page-header p {
    color: #92969e;
    font-size: 16px;
}

.docs-container,
.status-container {
    max-width: 1120px;
}

.search-box input {
    padding: 15px 17px;
    background: #101215;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: #f2f3f5;
}

.search-box input::placeholder {
    color: #676b73;
}

.search-box input:focus {
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 0 0 3px rgba(255,255,255,.035);
}

.section-title {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.section-title h2 {
    font-size: 28px;
    letter-spacing: -.035em;
}

.section-title span,
.section-title a {
    color: #777b84;
}

/* ---------- FAQ ---------- */

.faq-section {
    max-width: 920px;
}

.faq-container {
    gap: 10px;
}

.faq-card {
    overflow: hidden;
    box-shadow: none;
}

.faq-question {
    padding: 20px 22px;
    color: #e4e6e9;
    font-size: 15px;
}

.faq-question span {
    color: #7e828a;
    font-size: 22px;
}

.faq-answer p {
    padding: 0 22px 22px;
    color: #8f939b;
    font-size: 14px;
}

/* ---------- Status ---------- */

.overall-status {
    padding: 24px;
    max-width: 900px;
}

.status-card {
    padding: 22px;
}

.status-title {
    margin-bottom: 12px;
    font-size: 15px;
}

.status-card p {
    color: #858991;
    font-size: 14px;
}

.status-dot {
    width: 9px;
    height: 9px;
}

.status-dot.operational {
    background: #8d9490;
    box-shadow: 0 0 12px rgba(141,148,144,.45);
}

.status-dot.maintenance {
    background: #a1a5ab;
    box-shadow: 0 0 12px rgba(161,165,171,.4);
}

.status-dot.degraded {
    background: #b1a88f;
    box-shadow: 0 0 12px rgba(177,168,143,.4);
}

.status-dot.offline {
    background: #656970;
    box-shadow: 0 0 12px rgba(101,105,112,.35);
}

/* ---------- Variables / code ---------- */

.variable-grid {
    gap: 14px;
}

.variable-card {
    padding: 24px;
}

.variable-card h3 {
    font-size: 19px;
}

.variable-card p {
    color: #858991;
}

.variable-card code {
    padding: 12px 13px;
    background: #0b0d0f;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    color: #c6c9cf;
}

code {
    background: rgba(255,255,255,.065);
    color: #d8dbe0;
    border: 1px solid rgba(255,255,255,.045);
}

.slash-command,
.discord-mention {
    color: #c8cbd1;
}

.premium-section .variable-card.premium {
    border-color: rgba(255,255,255,.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent),
        #111316;
}

.variable-card.premium code {
    color: #d5d7db;
}

/* ---------- Discord-style preview ---------- */

.embed-preview {
    background: #191b1f;
    border-left: 3px solid #777c84;
    border-radius: 7px;
    padding: 15px;
}

.embed-preview p {
    color: #c5c8cd;
}

.embed-preview .channels span {
    background: #24272b;
    color: #c4c7cd;
}

/* ---------- Updates ---------- */

.updates-filter-btn {
    background: #111316;
    border: 1px solid rgba(255,255,255,.08);
    color: #c9ccd1;
    padding: 9px 13px;
    border-radius: 9px;
}

.updates-filter-btn:hover {
    background: #181a1e;
}

.update-header span {
    color: #777b83;
}

/* ---------- Feature directory ---------- */

.feature-directory {
    width: min(900px, calc(100% - 40px));
    margin: 10px auto 70px;
    background: #0e1012;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

.feature-directory-header {
    padding: 24px 26px;
    border-bottom-color: rgba(255,255,255,.065);
}

.feature-directory-label {
    color: #696d75;
    font-size: 10px;
}

.feature-directory-header h2 {
    font-size: 19px;
    letter-spacing: -.025em;
}

.feature-directory-header p {
    color: #777b83;
}

.feature-count {
    border-color: rgba(255,255,255,.09);
    color: #8b8f97;
}

.feature-directory-item {
    min-height: 74px;
    padding: 14px 20px;
    border-bottom-color: rgba(255,255,255,.05);
}

.feature-directory-item:hover {
    background: rgba(255,255,255,.035);
    padding-left: 25px;
}

.feature-directory-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.07);
    border-radius: 9px;
    filter: grayscale(1);
}

.feature-directory-info h3 {
    font-size: 14px;
}

.feature-directory-info p {
    color: #777b83;
}

.feature-directory-arrow {
    color: #5f636a;
}

/* ---------- Incidents / modal ---------- */

.incident-card:hover {
    background: #15171a;
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 25px 60px rgba(0,0,0,.42);
}

.status-overlay {
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(12px);
}

.status-popup {
    max-width: 520px;
    padding: 30px;
    background: #111316;
    border-color: rgba(255,255,255,.1);
    border-radius: 14px;
}

.status-popup h2 {
    font-size: 25px;
    letter-spacing: -.025em;
}

.popup-status {
    color: #858991;
}

.popup-description {
    color: #c7cacf;
}

.status-close {
    color: #aaaeb5;
}

/* ---------- History ---------- */

.status-history-card {
    padding: 24px;
}

.history-status {
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    color: #b8bbc1;
}

.history-status.offline,
.history-status.maintenance,
.history-status.degraded {
    background: rgba(255,255,255,.045);
    color: #b8bbc1;
}

.history-description {
    color: #c2c5ca;
}

.history-footer {
    color: #72767e;
}

/* ---------- Footer ---------- */

footer {
    margin-top: 90px;
    padding: 42px 56px;
    background: #08090b;
    border-top: 1px solid rgba(255,255,255,.055);
}

.footer-links {
    gap: 22px;
}

.footer-links a {
    color: #747880;
    font-size: 13px;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: #e1e3e6;
}

/* ---------- Mobile polish ---------- */

@media (max-width: 1000px) {
    .hero {
        padding: 140px 30px 80px;
        gap: 45px;
    }

    .features {
        padding: 80px 25px;
    }
}

@media (max-width: 600px) {
    .navbar {
        height: 66px;
        padding: 0 14px;
    }

    .logo {
        font-size: 17px;
    }

    .logo img {
        width: 34px;
        height: 34px;
    }

    .hero {
        min-height: auto;
        padding: 120px 20px 70px;
    }

    .hero h1 {
        font-size: clamp(40px, 12vw, 54px);
    }

    .hero p {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons a {
        width: 100%;
        text-align: center;
    }

    .page-header {
        padding: 125px 20px 55px;
    }

    .page-header h1 {
        font-size: 42px;
    }

    .docs-container,
    .status-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .discord-card {
        padding: 19px;
    }

    .feature-directory {
        width: calc(100% - 28px);
    }

    footer {
        padding: 40px 20px;
    }
}


/* ---------- Status icons removed ---------- */

.status-dot {
    display: none !important;
}


/* =========================================================
   JOINLY — MOBILE MAIN PAGE FIX
   ========================================================= */

@media (max-width: 1000px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        text-align: center;
        padding: 140px 30px 80px;
        gap: 45px;
    }

    .hero > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero h1,
    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .discord-card {
        width: 100%;
        max-width: 470px;
        margin: 0 auto;
        box-sizing: border-box;
    }

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

    .features {
        padding: 80px 25px;
    }

    .footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .navbar {
        padding: 0 25px;
    }
}

@media (max-width: 700px) {
    .navbar {
        padding: 0 14px;
        height: 66px;
    }

    .nav-left {
        width: auto;
        justify-content: flex-start;
        gap: 14px;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .invite-btn {
        display: none;
    }

    .premium-btn {
        display: flex;
        padding: 8px 12px;
        font-size: 13px;
    }

    .dropdown {
        margin-left: 0;
    }

    .dropdown-btn {
        font-size: 15px;
    }

    .dropdown-menu {
        position: fixed;
        top: 72px;
        left: 14px;
        right: 14px;
        width: auto;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
    }

    .logo {
        font-size: 18px;
    }

    .logo img {
        width: 36px;
        height: 36px;
    }

    .hero {
        min-height: auto;
        padding: 120px 20px 70px;
        gap: 35px;
    }

    .hero h1 {
        font-size: clamp(40px, 12vw, 54px);
        line-height: 1;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .discord-card {
        max-width: 100%;
        padding: 19px;
    }

    .card-header {
        gap: 10px;
        margin-bottom: 18px;
    }

    .card-header img {
        width: 42px;
        height: 42px;
    }

    .features {
        padding: 70px 20px;
    }

    .features h2 {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.05;
        margin-bottom: 35px;
    }

    .feature-card {
        padding: 22px;
    }

    footer {
        padding: 40px 20px;
    }

    .footer-content {
        align-items: center;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .footer-links a {
        display: block;
        width: 100%;
    }

    .features-menu,
    .dropdown-submenu-menu {
        display: none !important;
    }

    .features-dropdown:hover .features-menu,
    .dropdown-submenu:hover .dropdown-submenu-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (max-width: 400px) {
    .hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .features {
        padding-left: 16px;
        padding-right: 16px;
    }

    .premium-btn {
        padding: 7px 9px;
        font-size: 12px;
    }
}


/* =========================================================
   STATUS CARD GRID
   4 cards = 2x2
   5 cards = 2x2 + centered fifth card
   ========================================================= */

.status-grid,
.status-cards,
.status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Center the fifth card underneath the first four */
.status-grid > :nth-child(5):last-child,
.status-cards > :nth-child(5):last-child,
.status-list > :nth-child(5):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
}

/* Mobile: one card per row */
@media (max-width: 700px) {
    .status-grid,
    .status-cards,
    .status-list {
        grid-template-columns: 1fr;
    }

    .status-grid > :nth-child(5):last-child,
    .status-cards > :nth-child(5):last-child,
    .status-list > :nth-child(5):last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}