*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:#050816;
    color:white;
    overflow-x:hidden;
}


/* Background */

.gradient-bg{
    position:fixed;
    width:100%;
    height:100%;

    background:
    radial-gradient(circle at top left,
    rgba(0,212,255,.15),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(123,97,255,.15),
    transparent 40%);

    z-index:-1;
}


/* Navbar */

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

    padding:30px 8%;

    position:sticky;
    top:0;

    backdrop-filter:blur(20px);

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

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

    z-index:100;
}


.logo{
    font-size:28px;
    font-weight:800;
    letter-spacing:2px;

    background:
    linear-gradient(
    90deg,
    #00d4ff,
    #7b61ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


nav ul{
    display:flex;
    gap:40px;
    list-style:none;
}

nav ul li a{
    color:#d0d5dd;
    text-decoration:none;
    transition:.3s;
}

nav ul li a:hover{
    color:white;
}


/* Connect Wallet */

#connectButton{

    padding:15px 28px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
    90deg,
    #00d4ff,
    #7b61ff
    );

    color:white;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

}


#connectButton:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 30px
    rgba(0,212,255,.7);

}


/* Hero */

.hero{

    text-align:center;

    padding:160px 20px;

}


.hero h1{

    font-size:80px;

    line-height:1.1;

    margin-bottom:30px;

    font-weight:800;

}


.hero p{

    color:#98a2b3;

    font-size:22px;

}


/* Sections */

section{

    padding:100px 8%;

}


section h2{

    font-size:48px;

    text-align:center;

    margin-bottom:60px;

}


/* Grid */

.cards{

    display:grid;

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

    gap:30px;

}


/* Card */

.card{

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

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

    backdrop-filter:blur(20px);

    border-radius:28px;

    padding:35px;

    transition:.4s;

}


.card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(0,212,255,.5);

    box-shadow:
    0 0 40px
    rgba(0,212,255,.2);

}


.card h3{

    margin-bottom:20px;

    font-size:24px;

}


.card p{

    color:#98a2b3;

    line-height:1.8;

}


/* Dashboard */

.dashboard .card{

    text-align:center;

}


.dashboard p{

    font-size:18px;

}


/* Tokenomics */

.tokenomics .card h1{

    font-size:56px;

    background:
    linear-gradient(
    90deg,
    #00d4ff,
    #7b61ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* FAQ */

.faq .card{

    margin-bottom:25px;

}


/* Footer */

footer{

    padding:100px 20px;

    text-align:center;

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

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

}


footer h2{

    font-size:40px;

    margin-bottom:20px;

}


footer p{

    color:#98a2b3;

    margin-top:15px;

}


/* Scrollbar */

::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:#050816;

}


::-webkit-scrollbar-thumb{

    background:#00d4ff;

    border-radius:20px;

}


/* Mobile */

@media(max-width:900px){

    nav{

        flex-direction:column;

        gap:25px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }

    .hero h1{

        font-size:48px;

    }

    section h2{

        font-size:36px;

    }

}