*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
scroll-behavior:smooth;
}

body{
background:#04060c;
color:white;
overflow-x:hidden;
}

.hero{
min-height:100vh;
padding:30px 8%;
position:relative;
background:linear-gradient(to bottom,#07101c,#04060c);
overflow:hidden;
}

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

.logo{
font-size:30px;
font-weight:bold;
color:#5ec2ff;
letter-spacing:2px;
}

.menu{
display:flex;
gap:25px;
list-style:none;
}

.menu a{
text-decoration:none;
color:white;
transition:0.3s;
}

.menu a:hover{
color:#5ec2ff;
}

.btn,.primary,.secondary{
padding:14px 24px;
border-radius:14px;
text-decoration:none;
transition:0.3s;
}

.btn,.primary{
background:#159cff;
color:white;
}

.secondary{
border:1px solid #159cff;
color:#5ec2ff;
}

.hero-content{
max-width:720px;
margin-top:140px;
position:relative;
z-index:2;
}

.badge{
background:#0d1524;
padding:12px 20px;
border-radius:50px;
border:1px solid #1b355b;
color:#70c9ff;
}

.hero h1{
font-size:72px;
margin:30px 0;
line-height:1.1;
}

.hero p{
font-size:22px;
color:#b9cadb;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
gap:20px;
}

.glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
}

.glow1{
width:340px;
height:340px;
background:#0c6dff;
top:120px;
right:80px;
}

.glow2{
width:240px;
height:240px;
background:#159cff;
bottom:100px;
left:60px;
}

.floating-card{
position:absolute;
background:rgba(13,19,32,0.9);
border:1px solid #1f3658;
padding:16px 24px;
border-radius:18px;
backdrop-filter:blur(10px);
color:#6ec9ff;
animation:float 4s ease-in-out infinite;
z-index:2;
}

.card1{
top:180px;
right:120px;
}

.card2{
top:320px;
right:60px;
animation-delay:1s;
}

.card3{
bottom:120px;
right:180px;
animation-delay:2s;
}

@keyframes float{
0%{transform:translateY(0px);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0px);}
}

.section{
padding:110px 8%;
}

.dark{
background:#07101c;
}

.title{
text-align:center;
margin-bottom:60px;
}

.title h2{
font-size:50px;
margin-bottom:15px;
}

.title p{
max-width:700px;
margin:auto;
color:#aebfd1;
}

.cards,.feedbacks,.faq{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card,.service,.feedback,.faq-item,.contact,.stat{
background:rgba(13,19,32,0.9);
padding:35px;
border-radius:24px;
border:1px solid #1c2e4d;
backdrop-filter:blur(10px);
transition:0.3s;
}

.card:hover,.service:hover,.feedback:hover,.faq-item:hover{
transform:translateY(-8px);
border-color:#159cff;
}

.card h3,.service h3,.faq-item h3{
color:#67c5ff;
margin-bottom:15px;
}

.card p,.service p,.feedback p,.faq-item p{
color:#c0cfdf;
}

.service{
margin-bottom:25px;
}

.stats{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.stat{
min-width:240px;
text-align:center;
}

.stat h1{
font-size:48px;
color:#59beff;
}

.feedback h4{
margin-top:15px;
color:#59beff;
}

.contact{
max-width:700px;
margin:auto;
text-align:center;
}

.contact p{
margin:15px 0;
font-size:18px;
color:#d9e4ef;
}

footer{
padding:40px;
text-align:center;
border-top:1px solid #162437;
color:#8293a9;
}

footer h2{
color:#59beff;
margin-bottom:10px;
}

.floating{
position:fixed;
bottom:25px;
right:25px;
width:65px;
height:65px;
background:#159cff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:38px;
color:white;
box-shadow:0 0 25px rgba(21,156,255,0.6);
}

@media(max-width:900px){

nav{
flex-direction:column;
gap:20px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:48px;
}

.hero-buttons{
flex-direction:column;
}

.floating-card{
display:none;
}

}