*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:Arial, Helvetica, sans-serif;

background:#050008;

color:white;

overflow-x:hidden;

}





/* ==========================
        HEADER
========================== */


header{

position:fixed;

top:0;

width:100%;


height:90px;


display:flex;

justify-content:space-between;

align-items:center;


padding:0 8%;


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

backdrop-filter:blur(15px);


border-bottom:

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


z-index:100;


}



.brand{

display:flex;

align-items:center;

gap:20px;

}



.header-logo{


width:60px;

height:60px;


object-fit:contain;


filter:

drop-shadow(0 0 20px #ff00cc);


transition:.4s;


}



.header-logo:hover{


transform:scale(1.1);


}



.brand span{


font-size:22px;


letter-spacing:5px;


font-weight:bold;


}



nav a{


color:white;


text-decoration:none;


margin-left:35px;


font-weight:bold;


transition:.3s;


}



nav a:hover{


color:#ff00cc;


}





/* ==========================
        HERO
========================== */


.hero{


height:100vh;


display:flex;


justify-content:center;


align-items:center;


text-align:center;


position:relative;


overflow:hidden;



background:


url("images/background.jpg");



background-size:cover;


background-position:center;



animation:

backgroundZoom 25s infinite alternate;


}





.background-overlay{


position:absolute;


inset:0;


background:


linear-gradient(

180deg,

rgba(0,0,0,.45),

rgba(5,0,8,.95)

);



}



.hero-content{


position:relative;


z-index:2;


max-width:1100px;


}




.logo-wrapper{


animation:

logoFloat 5s infinite ease-in-out;


}




.main-logo{


width:230px;


height:230px;


object-fit:contain;


filter:


drop-shadow(0 0 35px #ff00cc)

drop-shadow(0 0 70px #6600ff);



}



.pre-title{


margin-top:35px;


font-size:14px;


letter-spacing:10px;


color:#ff00cc;


font-weight:bold;


}




.hero h1{


font-size:100px;


letter-spacing:20px;


margin:20px 0;


font-weight:900;



text-shadow:


0 0 25px rgba(255,0,200,.5);



}




.hero h2{


font-size:38px;


font-weight:300;


max-width:900px;


margin:auto;


}




.description{


margin-top:30px;


font-size:20px;


color:#ddd;


}





.buttons{


display:flex;


justify-content:center;


gap:25px;


}



button{


margin-top:45px;


padding:18px 50px;


background:


linear-gradient(

90deg,

#ff0099,

#6600ff

);



color:white;


border:none;


font-weight:bold;


letter-spacing:2px;


cursor:pointer;


transition:.4s;


}



button:hover{


transform:

translateY(-5px)

scale(1.05);



box-shadow:


0 0 40px #ff00cc;



}




button.secondary{


background:transparent;


border:

1px solid #ff00cc;


}




.scroll{


position:absolute;


bottom:35px;


font-size:12px;


letter-spacing:6px;


color:#aaa;


}



.scroll span{


display:block;


width:2px;


height:40px;


background:#ff00cc;


margin:auto;


margin-bottom:10px;


animation:

scrollMove 1.5s infinite;


}







/* ==========================
        ABOUT
========================== */


.about{


padding:140px 15%;


background:#09000f;


}



.section-title p{


color:#ff00cc;


letter-spacing:8px;


}



.about h2{


font-size:45px;


margin-top:25px;


}



.about-text{


margin-top:40px;


max-width:900px;


}



.about-text p{


font-size:20px;


line-height:1.8;


color:#ccc;


margin-bottom:20px;


}







/* ==========================
        PROJECT
========================== */


.timeline{


padding:120px 10%;


text-align:center;


}




.timeline h2{


font-size:45px;


}




.cards{


display:flex;


justify-content:center;


gap:30px;


margin-top:60px;


}




.card{


width:300px;


padding:45px;


background:


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



border:

1px solid rgba(255,0,200,.2);



backdrop-filter:blur(10px);



transition:.4s;


}




.card:hover{


transform:

translateY(-15px);



border-color:#ff00cc;



box-shadow:


0 0 35px rgba(255,0,200,.35);


}




.card h3{


font-size:60px;


color:#ff00cc;


}




.card span{


display:block;


font-size:22px;


font-weight:bold;


margin-top:15px;


}




.card p{


margin-top:15px;


color:#aaa;


}







/* ==========================
        COMMUNITY
========================== */


.community{


padding:130px;


text-align:center;


background:#050008;


}



.community img{


width:160px;


filter:


drop-shadow(0 0 40px #ff00cc);



animation:

logoFloat 5s infinite;


}




.community h2{


font-size:45px;


margin-top:30px;


}



.community p{


margin-top:20px;


color:#aaa;


}







/* ==========================
        FOOTER
========================== */


footer{


padding:30px;


background:black;


text-align:center;


color:#777;


}






/* ==========================
        PARTICULAS
========================== */


.particles{


position:fixed;


inset:0;


pointer-events:none;


z-index:1;


overflow:hidden;


}




.particles::before{


content:"";


position:absolute;


width:5px;


height:5px;


background:#ff00cc;


border-radius:50%;



box-shadow:


100px 200px #ff00cc,

300px 400px #6600ff,

700px 250px #ff00cc,

1000px 500px #6600ff,

1200px 150px #ff00cc;



animation:

particlesMove 15s infinite linear;


}







/* ==========================
        ANIMACIONES
========================== */



@keyframes backgroundZoom{


from{

transform:scale(1);

}


to{

transform:scale(1.1);

}


}




@keyframes logoFloat{


50%{

transform:

translateY(-12px);


}


}




@keyframes scrollMove{


50%{


transform:

translateY(15px);


}


}




@keyframes particlesMove{


from{


transform:

translateY(200px);


opacity:0;


}



50%{


opacity:1;


}



to{


transform:

translateY(-1000px);


opacity:0;


}



}







/* ==========================
        MOVIL
========================== */


@media(max-width:900px){



header{


padding:0 5%;


}



nav{


display:none;


}




.hero h1{


font-size:50px;


letter-spacing:8px;


}



.hero h2{


font-size:25px;


}



.main-logo{


width:160px;


height:160px;


}




.buttons{


flex-direction:column;


align-items:center;


}



.cards{


flex-direction:column;


align-items:center;


}



.about h2,

.timeline h2,

.community h2{


font-size:32px;


}

.buttons a,
.community a {

text-decoration:none;

display:inline-block;

}


}