:root {

    --bg: #070711;
    --card: #11111f;
    --card-hover: #17172b;

    --purple: #5865f2;
    --purple-light: #7289ff;
    --cyan: #00ffff;

    --text: #f5f5ff;
    --muted: #a7a7c7;

}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;

}



/* BACKGROUND */

.background {

    position: fixed;
    inset: 0;
    z-index: -1;

    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(88,101,242,0.35),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 40%,
        rgba(0,255,255,0.15),
        transparent 30%
    ),

    radial-gradient(
        circle at 50% 90%,
        rgba(88,101,242,0.15),
        transparent 35%
    );

    filter: blur(50px);

}



/* NAVBAR */

nav {

    height: 90px;

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

    padding: 0 80px;

}



.logo {

    color: white;
    text-decoration: none;

    font-size: 28px;
    font-weight: 900;

    letter-spacing: -1px;

}


.logo span {

    color: var(--purple);

}



.nav-links {

    display: flex;
    gap: 40px;

}


.nav-links a {

    color: var(--muted);
    text-decoration: none;

    font-weight: 600;

    transition: .25s;

}


.nav-links a:hover {

    color: white;

}





/* HERO */


.hero {

    max-width: 1300px;

    margin: auto;

    padding: 100px 40px;

    display: grid;

    grid-template-columns: 1fr 430px;

    gap: 90px;

    align-items: center;

}



.badge {

    display: inline-block;

    padding: 9px 18px;

    border-radius: 999px;

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

    border: 1px solid rgba(88,101,242,.35);

    color: #d6d9ff;

    font-size: 14px;

    margin-bottom: 30px;

}





.hero h1 {

    font-size: 78px;

    line-height: 1.02;

    letter-spacing: -4px;

    font-weight: 900;

}



.hero h1 span {

    display: block;

    background:

    linear-gradient(
        90deg,
        #5865f2,
        #00ffff
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

}





.hero p {

    margin-top: 30px;

    max-width: 600px;

    font-size: 20px;

    line-height: 1.7;

    color: var(--muted);

}





.buttons {

    display: flex;

    gap: 15px;

    margin-top: 45px;

}



.btn {

    padding: 16px 32px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: .25s;

}



.primary {

    background: var(--purple);

    color:white;

    box-shadow:

    0 20px 60px rgba(88,101,242,.45);

}



.primary:hover {

    transform: translateY(-4px);

    background: var(--purple-light);

}





.secondary {

    border:

    1px solid rgba(255,255,255,.15);

    color:white;

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

}



.secondary:hover {

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

}





/* MINI STATS */


.mini-stats {

    display:flex;

    gap:55px;

    margin-top:70px;

}


.mini-stats strong {

    display:block;

    font-size:32px;

    font-weight:900;

    color:white;

}


.mini-stats div {

    color:var(--muted);

    font-size:14px;

}





/* DISCORD MOCKUP */


.discord-preview {

    background:

    linear-gradient(
        145deg,
        #161629,
        #0d0d18
    );

    border:

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

    border-radius:28px;

    padding:25px;

    box-shadow:

    0 40px 100px rgba(0,0,0,.6);

}



.discord-header {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}



.discord-header img {

    width:55px;

    height:55px;

    border-radius:50%;

}



.discord-header p {

    color:#43b581;

    font-size:13px;

    margin:0;

}





.message {

    display:flex;

    gap:14px;

    padding:15px;

    margin-top:15px;

    border-radius:16px;

    background:

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

}



.message img {

    width:45px;

    height:45px;

    border-radius:50%;

}


.message p {

    margin:5px 0 0;

    font-size:14px;

    color:var(--muted);

}





/* FEATURES */


.features {

    padding:120px 40px;

    text-align:center;

}



.features h2,
.reviews h2 {

    font-size:52px;

    letter-spacing:-2px;

    margin-bottom:60px;

}





.grid {

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}





.card {

    text-align:left;

    padding:35px;

    border-radius:26px;


    background:

    linear-gradient(
        145deg,
        #151526,
        #0d0d18
    );


    border:

    1px solid rgba(255,255,255,.07);


    transition:.3s;

}



.card:hover {

    transform:translateY(-10px);

    background:var(--card-hover);

    border-color:

    rgba(88,101,242,.5);


    box-shadow:

    0 20px 60px rgba(0,0,0,.4);

}





.card span {

    font-size:40px;

}



.card h3 {

    margin-top:20px;

    margin-bottom:12px;

    font-size:25px;

}



.card p {

    color:var(--muted);

    line-height:1.6;

}





/* REVIEWS */


.reviews {

    padding:120px 20px;

    text-align:center;

}



.reviews-row-wrap {

    overflow:hidden;

}



.reviews-row {

    display:flex;

    gap:20px;

    overflow-x:hidden;

}



.review-card {

    min-width:330px;

    padding:25px;

    border-radius:22px;

    background:

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


    border:

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

}



.review-avatar {

    width:55px;

    height:55px;

    border-radius:50%;

}



.review-name {

    margin-top:10px;

    font-weight:800;

}



.review-stars {

    color:#ffd700;

}



.review-quote {

    color:var(--muted);

    margin-top:10px;

    line-height:1.5;

}





/* FOOTER */


footer {

    border-top:

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

    padding:50px;

    text-align:center;

    color:#777;

}





/* COMMANDS PAGE SUPPORT */


.commands-page {

    max-width:1200px;

    margin:auto;

    padding:100px 30px;

}



.commands-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:20px;

}





.command-card {

    background:

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

    border:

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

    padding:25px;

    border-radius:20px;

    transition:.25s;

}



.command-card:hover {

    transform:translateY(-5px);

    border-color:var(--purple);

}



.command-name {

    color:var(--purple);

    font-weight:900;

}





/* MOBILE */


@media(max-width:900px) {


nav {

    padding:20px;

}



.nav-links {

    display:none;

}



.hero {

    grid-template-columns:1fr;

    padding-top:60px;

}



.hero h1 {

    font-size:48px;

    letter-spacing:-2px;

}



.mini-stats {

    gap:25px;

}



.features h2,
.reviews h2 {

    font-size:38px;

}



}

.commands-hero {

    text-align:center;

    padding:100px 20px 70px;

}


.commands-hero h1 {

    font-size:75px;

    font-weight:900;

    letter-spacing:-4px;

}


.commands-hero h1 span {

    background: linear-gradient(
        90deg,
        #5865f2,
        #00ffff
    );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

}



.commands-hero p {

    color:var(--muted);

    font-size:20px;

    margin-top:25px;

}



.command-stats {

    display:flex;

    justify-content:center;

    gap:70px;

    margin-top:60px;

}



.command-stats strong {

    display:block;

    font-size:35px;

}




.command-search {

    max-width:800px;

    margin:auto;

    text-align:center;

}



.search-box {

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 25px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:20px;


    backdrop-filter:blur(20px);

}



.search-box span {

    font-size:20px;

}



.search-box input {

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:16px;

}



#count {

    margin-top:15px;

    color:var(--muted);

}





.command-card {

    background:

    linear-gradient(
        145deg,
        #151526,
        #0d0d18
    );


    border:

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


    border-radius:22px;


    padding:25px;


    transition:.25s;

}



.command-card:hover {

    transform:translateY(-8px);


    border-color:#5865f2;


    box-shadow:

    0 20px 60px rgba(0,0,0,.4);

}



.command-name {

    color:#7289ff;

    font-size:20px;

    font-weight:900;

}



.command-desc {

    margin-top:10px;

    color:var(--muted);

}




@media(max-width:700px){


.commands-hero h1 {

    font-size:45px;

}


.command-stats {

    gap:25px;

}


}