*{

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

}


html{

scroll-behavior:smooth;

}


body{

background:#050816;
color:white;

overflow-x:hidden;

}



.bg{

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

}



.blob{

position:absolute;
border-radius:50%;
filter:blur(120px);

animation:float 10s infinite alternate;

}



.b1{

width:400px;
height:400px;
background:#00d9ff;
top:-100px;
left:-100px;

}



.b2{

width:500px;
height:500px;
background:#7b5cff;
right:-150px;
bottom:-150px;

}



.b3{

width:300px;
height:300px;
background:#00ff99;
top:40%;
left:40%;

}



@keyframes float{

to{

transform:translateY(60px);

}

}





nav{

position:fixed;

top:0;

width:100%;

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 10%;


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

backdrop-filter:blur(20px);

z-index:10;

}



.logo{

font-size:30px;
font-weight:800;

background:linear-gradient(90deg,#00d9ff,#7b5cff);

-webkit-background-clip:text;

color:transparent;

}



.links{

display:flex;
gap:35px;

}



.links a{

color:white;

text-decoration:none;

opacity:.8;

}



.nav-btn,
.main-btn,
.download{


background:linear-gradient(90deg,#00d9ff,#7b5cff);

padding:15px 35px;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:bold;

}







.hero{


min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

padding:120px 10% 50px;

}



.hero-text{

max-width:600px;

}



.hero h1{

font-size:70px;

}



.hero h1 span{

background:linear-gradient(90deg,#00d9ff,#7b5cff);

-webkit-background-clip:text;

color:transparent;

}



.hero p{

font-size:20px;

opacity:.7;

line-height:1.7;

margin:30px 0;

}



.buttons{

display:flex;

gap:20px;

}



.second-btn{

padding:15px 35px;

border:1px solid white;

border-radius:50px;

color:white;

text-decoration:none;

}





.download-card{

width:400px;

padding:40px;

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

border-radius:30px;

backdrop-filter:blur(25px);

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

}



.file-title{

display:flex;

gap:18px;

align-items:center;

margin-bottom:10px;

}


.file-title h2{

font-size:24px;

margin-bottom:5px;

}


.file-title p{

font-size:14px;

opacity:.6;

}



.file-logo{


width:65px;

height:65px;


display:flex;

align-items:center;

justify-content:center;


border-radius:18px;


background:

linear-gradient(
135deg,
#00d9ff,
#7b5cff
);


font-size:18px;

font-weight:800;


color:white;


box-shadow:

0 0 30px rgba(0,217,255,.35);


}



.file-title p{

opacity:.6;

}




.status{

margin:30px 0;

padding:15px;

background:rgba(0,255,100,.1);

border-radius:15px;

color:#00ff88;

}



.status span{

display:inline-block;

width:10px;

height:10px;

background:#00ff88;

border-radius:50%;

}



.details{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}



.details div{

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

padding:20px;

border-radius:20px;

text-align:center;

}



.details p{

opacity:.6;

}



.line{

height:6px;

background:linear-gradient(90deg,#00d9ff,#7b5cff);

margin:30px 0;

border-radius:50px;

}




.download{

display:block;

text-align:center;

}





.gallery,
.faq{

padding:100px 10%;

}



.gallery h2,
.faq h2{

text-align:center;

font-size:45px;

margin-bottom:50px;

}



.images{

display:flex;

gap:30px;

justify-content:center;

}



.images img{

width:45%;

max-width:600px;

height:300px;

object-fit:cover;

border-radius:25px;

transition:.4s;

}



.images img:hover{

transform:scale(1.05);

}





.faq-box{

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

border-radius:20px;

margin-bottom:20px;

overflow:hidden;

}



.question{

padding:25px;

display:flex;

justify-content:space-between;

cursor:pointer;

font-size:20px;

}



.answer{

max-height:0;

padding:0 25px;

opacity:0;

transition:.4s;

}



.faq-box.active .answer{

max-height:100px;

padding-bottom:25px;

opacity:1;

}



footer{

text-align:center;

padding:40px;

opacity:.6;

}




@media(max-width:900px){


.links{

display:none;

}


.hero{

flex-direction:column;

gap:50px;

}


.hero h1{

font-size:45px;

}


.download-card{

width:100%;

}


.images{

flex-direction:column;

}


.images img{

width:100%;

}


}

.hero h1 span{

white-space: nowrap;

}

/* ======================
 INSTALL SECTION
====================== */


.install{

padding:120px 10%;

}


.install h2{

text-align:center;

font-size:45px;

margin-bottom:15px;

}



.install-subtitle{

text-align:center;

opacity:.7;

font-size:20px;

margin-bottom:70px;

}




.steps{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:25px;

}





.step{

display:flex;

gap:30px;

align-items:flex-start;


background:

rgba(255,255,255,.06);


border:

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


padding:35px;


border-radius:30px;


backdrop-filter:blur(20px);


transition:.4s;


}



.step:hover{


transform:translateX(10px);


border-color:#00d9ff;


box-shadow:

0 0 35px rgba(0,217,255,.15);


}





.number{


font-size:45px;

font-weight:800;


background:

linear-gradient(
90deg,
#00d9ff,
#7b5cff
);


-webkit-background-clip:text;

color:transparent;


min-width:90px;


}



.step h3{

font-size:25px;

margin-bottom:12px;

}



/* ======================
 SMALL INSTALL SECTION
====================== */


.install{

padding:70px 10%;

}


.install h2{

text-align:center;

font-size:34px;

margin-bottom:10px;

}



.install-subtitle{

text-align:center;

opacity:.7;

font-size:16px;

margin-bottom:40px;

}




.steps{

max-width:750px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}





.step{

display:flex;

gap:20px;

align-items:flex-start;


background:

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


border:

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


padding:22px;


border-radius:20px;


backdrop-filter:blur(15px);


transition:.3s;


}



.step:hover{


transform:translateX(5px);


border-color:#00d9ff;


}





.number{


font-size:30px;

font-weight:800;


background:

linear-gradient(
90deg,
#00d9ff,
#7b5cff
);


-webkit-background-clip:text;

color:transparent;


min-width:55px;


}



.step h3{

font-size:19px;

margin-bottom:8px;

}



.step p{

opacity:.7;

line-height:1.5;

font-size:14px;

}



@media(max-width:700px){


.step{

padding:18px;

}


.number{

font-size:28px;

}


.step h3{

font-size:17px;

}


}