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

html{
    scroll-behavior:smooth;
}

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

a{
    color:white;
    text-decoration:none;
}


/* NAVBAR */

.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    padding:24px 8%;

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

    z-index:1000;

    background:rgba(5,5,5,.9);

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

}


.logo{

    font-family:'Space Grotesk';
    font-size:25px;
    font-weight:900;
    letter-spacing:4px;

}


nav{

    display:flex;
    gap:35px;

}


nav a{

    color:#aaa;
    font-size:14px;
    transition:.3s;

}


nav a:hover{

    color:#39ff88;

}



/* HERO */


.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:140px 8% 80px;

    position:relative;

}


.hero-bg{

    position:absolute;

    width:500px;
    height:500px;

    right:-200px;
    top:150px;

    background:#39ff88;

    opacity:.08;

    filter:blur(80px);

}


.hero-content{

    position:relative;

    z-index:2;

}


.small-title{

    color:#39ff88;

    letter-spacing:5px;

    font-size:12px;

    margin-bottom:30px;

}



.hero h1{

    font-family:'Space Grotesk';

    font-size:clamp(60px,10vw,140px);

    line-height:.85;

    letter-spacing:-5px;

}



.hero-text{

    max-width:550px;

    margin-top:35px;

    color:#aaa;

    font-size:20px;

    line-height:1.7;

}



/* BUTTONS */


.main-button,
.join-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:40px;

    padding:17px 38px;

    border-radius:100px;

    font-weight:800;

    background:#39ff88;

    color:#000;

    transition:.3s;

}


.main-button:hover,
.join-button:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(57,255,136,.25);

}


.scroll{

    position:absolute;

    bottom:40px;

    left:8%;

    color:#777;

    letter-spacing:4px;

    font-size:12px;

}



/* ARTICLES */


.articles{

    padding:100px 8%;

}


.section-head p{

    color:#39ff88;

    letter-spacing:5px;

    font-size:12px;

}


.section-head h2{

    font-family:'Space Grotesk';

    font-size:70px;

    margin:20px 0 60px;

}



.article-grid{

    display:grid;

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

    gap:35px;

}



.card{

    background:#0b0b0b;

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

    border-radius:25px;

    overflow:hidden;

    transition:.35s;

}



.card:hover{

    transform:translateY(-8px);

    border-color:#39ff88;

}



.card img{

    width:100%;

    height:260px;

    object-fit:cover;

}



.card-content{

    padding:30px;

}


.card-content span{

    color:#39ff88;

    font-size:11px;

    letter-spacing:4px;

}


.card-content h3{

    font-family:'Space Grotesk';

    font-size:30px;

    margin:15px 0;

}



.card-content p{

    color:#999;

    line-height:1.7;

}



.card-content a{

    display:inline-block;

    margin-top:25px;

    color:#39ff88;

    font-weight:700;

}



/* FEATURE */


.feature{

    padding:80px 8%;

}


.feature-box{

    padding:80px;

    border-radius:35px;

    background:#0b0b0b;

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

}



.feature h2{

    font-family:'Space Grotesk';

    font-size:clamp(45px,7vw,90px);

    line-height:.9;

}


.feature p{

    margin-top:25px;

    color:#aaa;

}



/* JOIN */


.join-section{

    padding:80px 8%;

}


.join-box{

    text-align:center;

    padding:80px 30px;

    border-radius:35px;

    background:#0b0b0b;

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

}


.join-small{

    color:#39ff88;

    letter-spacing:5px;

}



.join-box h2{

    font-family:'Space Grotesk';

    font-size:clamp(40px,6vw,75px);

    margin:25px 0;

}



.join-box p{

    color:#aaa;

    line-height:1.8;

}



/* ARTICLE PAGE */


.article-page{

    padding:150px 8% 80px;

    max-width:1200px;

    margin:auto;

}



#article-category{

    color:#39ff88;

    letter-spacing:5px;

}



#article-title{

    font-family:'Space Grotesk';

    font-size:clamp(45px,7vw,90px);

    line-height:.95;

    margin:25px 0;

}



.article-main-image{

    width:100%;

    border-radius:30px;

    margin:50px 0;

}



.article-content{

    max-width:800px;

    margin:auto;

}


.article-content h2{

    font-family:'Space Grotesk';

    font-size:40px;

    margin:60px 0 20px;

}


.article-content p{

    color:#ccc;

    font-size:19px;

    line-height:1.9;

}



/* FOOTER */


footer{

    padding:60px 8%;

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

    text-align:center;

}



.footer-logo{

    font-size:25px;

    font-weight:900;

    letter-spacing:4px;

}


.footer-links{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:25px 0;

}


footer p{

    color:#777;

}



/* MOBILE */


@media(max-width:850px){


.navbar{

    padding:20px 5%;

}


.logo{

    font-size:18px;

}


nav{

    gap:15px;

}


nav a{

    font-size:11px;

}


.hero{

    padding:130px 5% 80px;

}



.hero h1{

    font-size:60px;

    letter-spacing:-3px;

}



.articles,
.feature,
.join-section{

    padding-left:5%;

    padding-right:5%;

}



.section-head h2{

    font-size:50px;

}



.article-grid{

    grid-template-columns:1fr;

}



.feature-box{

    padding:40px 25px;

}



.article-page{

    padding:120px 5% 60px;

}



.article-content h2{

    font-size:30px;

}



.article-content p{

    font-size:17px;

}


footer{

    padding:40px 5%;

}


}