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


body{
background:#06080d;
color:#fff;
overflow-x:hidden;
}



.bg{

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

background:
radial-gradient(circle at 15% 15%,rgba(45,255,179,.12),transparent 40%),
radial-gradient(circle at 85% 20%,rgba(184,120,80,.15),transparent 45%),
radial-gradient(circle at 50% 85%,rgba(20,40,60,.2),transparent 50%);

}





/* HEADER */


.header{

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

height:80px;

padding:0 50px;

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

background:rgba(6,8,13,.75);

backdrop-filter:blur(25px);

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

z-index:100;

}



.logo{

font-size:25px;
font-weight:900;

background:linear-gradient(90deg,#2dffb3,#b87850);

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

}



nav{

display:flex;
gap:30px;

}


nav a{

color:white;
text-decoration:none;

opacity:.7;

transition:.3s;

}


nav a:hover{

opacity:1;
color:#2dffb3;

}





/* MAIN */


.wrap{

max-width:1150px;

margin:auto;

padding:130px 20px 80px;

}



.hero{

text-align:center;

padding:70px 20px;

}



.hero h1{

font-size:clamp(40px,7vw,70px);

font-weight:900;

letter-spacing:-3px;

background:linear-gradient(#fff,#999);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.hero p{

margin-top:30px;

font-size:22px;

opacity:.7;

}





/* CARDS */


.grid-main{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}



.card{

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

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

border-radius:40px;

padding:45px;

text-align:center;

backdrop-filter:blur(25px);

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

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

}



.orange{

color:#ff8c42;

font-size:38px;

font-weight:900;

}



.green{

color:#2dffb3;

font-size:38px;

font-weight:900;

}





.price{

font-size:70px;

font-weight:900;

margin:20px 0;

background:linear-gradient(#fff,#999);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.label{

font-size:22px;

opacity:.5;

}





/* IMAGES */


.main-img{

height:300px;

max-width:100%;

object-fit:contain;

margin:35px auto;

display:block;

filter:drop-shadow(0 20px 50px rgba(45,255,179,.25));

}



.man{

width:170px;

margin:20px auto;

display:block;

filter:drop-shadow(0 15px 40px rgba(255,80,80,.3));

}




.arrow{

font-size:90px;

font-weight:900;

line-height:1;

}



.red{

color:#ff6550;

}



.green{

color:#2dffb3;

}





.phones{

display:grid;

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

gap:10px;

max-width:350px;

margin:20px auto;

}



.phones img{

width:55px;

margin:auto;

filter:drop-shadow(0 10px 20px rgba(255,140,0,.3));

transition:.3s;

}



.phones img:hover{

transform:scale(1.15);

}





/* INFO */


.card h2{

margin-bottom:25px;

}



.card p{

font-size:18px;

line-height:1.7;

opacity:.75;

}




.grid{

display:grid;

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

gap:25px;

}



.article{

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

padding:30px;

border-radius:25px;

}



.article h3{

color:#2dffb3;

margin-bottom:15px;

}





/* BUTTON */


.cta{

text-align:center;

padding:80px 20px;

}



.cta h2{

font-size:36px;

margin-bottom:35px;

}



.btn{

display:inline-block;

padding:24px 70px;

border-radius:100px;

background:linear-gradient(135deg,#2dffb3,#b87850);

color:#000;

font-size:22px;

font-weight:900;

text-decoration:none;

transition:.3s;

}



.btn:hover{

transform:scale(1.05);

}





/* FOOTER */


footer{

text-align:center;

padding:50px 20px;

background:#090c12;

}


footer a{

color:#fff;

text-decoration:none;

opacity:.7;

margin:5px;

}





/* COOKIE */


.cookie-box{

position:fixed;

bottom:20px;

left:20px;

right:20px;

max-width:500px;

margin:auto;

padding:25px;

background:#111722;

border-radius:25px;

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

z-index:200;

}



.cookie-box button{

margin-left:20px;

padding:10px 25px;

border:0;

border-radius:30px;

background:#2dffb3;

font-weight:800;

}





/* MOBILE */


@media(max-width:800px){


.header{

height:auto;

padding:20px;

flex-direction:column;

gap:15px;

}



nav{

gap:12px;

flex-wrap:wrap;

justify-content:center;

font-size:13px;

}



.grid-main{

grid-template-columns:1fr;

}



.card{

padding:30px 20px;

border-radius:30px;

}



.price{

font-size:55px;

}



.main-img{

height:240px;

}



.grid{

grid-template-columns:1fr;

}



.btn{

width:100%;

}



}