* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}


body {
    background: #050505;
    color: white;
}


/* Header */

header {

    height: 75px;

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

    padding: 0 8%;

    background: #080808;

    border-bottom: 1px solid #39ff14;

    box-shadow: 0 0 20px #39ff14;

}


.logo img {

    width: 200px;
    height: 100px;

    object-fit: contain;

    filter:
    drop-shadow(0 0 10px #39ff14);

    transition: .3s;

}


.logo img:hover {

    transform: scale(1.1);

    filter:
    drop-shadow(0 0 25px #39ff14);

}



nav a {

    color: white;

    text-decoration: none;

    margin-left: 25px;

    transition: .3s;

}


nav a:hover {

    color: #39ff14;

    text-shadow:
    0 0 10px #39ff14;

}




/* Hero */

.hero {

    min-height: 85vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:

    radial-gradient(
        circle,
        rgba(57,255,20,.25),
        transparent 50%
    ),

    linear-gradient(
        #000,
        #050505
    );

}



.hero h1 {

    font-size:60px;

    color:#39ff14;

    text-shadow:

    0 0 10px #39ff14,
    0 0 30px #39ff14;


    margin-bottom:20px;

}



.hero p {

    font-size:22px;

    color:#ccc;

}



.button {

    display:inline-block;

    margin-top:35px;

    padding:15px 40px;


    background:#39ff14;

    color:black;


    border-radius:8px;


    font-weight:bold;

    text-decoration:none;


    box-shadow:

    0 0 10px #39ff14,
    0 0 30px #39ff14;


    transition:.3s;

}



.button:hover {

    transform:scale(1.08);

    box-shadow:

    0 0 30px #39ff14,
    0 0 70px #39ff14;

}





section {

    padding:90px 10%;

    text-align:center;

}



h2 {

    font-size:40px;

    color:#39ff14;

    margin-bottom:50px;


    text-shadow:

    0 0 15px #39ff14;

}




/* Cards */


.cards {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.card {

    width:300px;

    padding:35px;


    background:#111;

    border:1px solid #39ff14;


    border-radius:15px;


    box-shadow:

    0 0 15px rgba(57,255,20,.3);


    transition:.3s;

}



.card:hover {

    transform:translateY(-10px);


    box-shadow:

    0 0 30px #39ff14;

}



.card h3 {

    color:#39ff14;

    margin-bottom:15px;

}




/* Community Stats */


.stats {

    display:flex;

    justify-content:center;

    gap:100px;

}



.stats strong {

    font-size:50px;

    color:#39ff14;


    text-shadow:

    0 0 20px #39ff14;

}




.text {

    max-width:800px;

    margin:auto;

    color:#ccc;

    font-size:20px;

}





footer {

    background:#000;

    border-top:1px solid #39ff14;

    padding:30px;

    text-align:center;

    color:#888;

}





/* Mobile */

@media(max-width:700px){

    header {

        flex-direction:column;

        height:auto;

        padding:20px;

    }


    nav {

        margin-top:20px;

    }


    .hero h1 {

        font-size:38px;

    }


    .stats {

        flex-direction:column;

        gap:40px;

    }

}