body{
margin:0;
font-family:'Inter',sans-serif;
background:#070b14;
color:white;
overflow-x:hidden;
}

.bg-grid{
position:fixed;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:60px 60px;
z-index:-2;
}

.language-switcher{
position:fixed;
top:20px;
right:30px;
display:flex;
gap:14px;
font-weight:600;
cursor:pointer;
z-index:1000;
}

#particles-js{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.logo{
width:260px;
margin-bottom:30px;
}

.gradient{
font-size:54px;
background:linear-gradient(90deg,#635bff,#00d4ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-sub{
font-size:20px;
opacity:0.8;
margin-bottom:40px;
}

.cta-btn{
background:linear-gradient(90deg,#635bff,#00d4ff);
border:none;
padding:16px 36px;
font-size:18px;
border-radius:12px;
color:white;
cursor:pointer;
box-shadow:0 0 18px rgba(0,212,255,0.4);
}

.services{
max-width:1200px;
margin:auto;
padding:100px 20px;
text-align:center;
}

.services-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:28px;
margin-top:50px;
}

.service-card{
background:rgba(18,24,38,0.7);
padding:30px;
border-radius:14px;
text-align:left;
border:1px solid rgba(255,255,255,0.05);
}

.service-card h3{
margin-top:0;
}

.service-card ul{
padding-left:18px;
}

.tech-stack{
margin-top:80px;
padding:20px;
background:#05070f;
overflow:hidden;
}

.tech-scroll{
white-space:nowrap;
animation:scroll 30s linear infinite;
opacity:0.7;
}

@keyframes scroll{
0%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-content{
background:#0f172a;
padding:35px;
border-radius:16px;
width:90%;
max-width:420px;
box-shadow:0 0 40px rgba(0,0,0,0.6);
}

.modal-content input,
.modal-content textarea{
width:100%;
padding:12px;
margin-top:12px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.08);
background:#020617;
color:white;
}

.modal-content textarea{
min-height:120px;
resize:vertical;
}

.send-btn{
margin-top:18px;
background:linear-gradient(90deg,#635bff,#00d4ff);
border:none;
padding:12px;
width:100%;
border-radius:10px;
color:white;
font-size:16px;
cursor:pointer;
}

.close{
cursor:pointer;
float:right;
font-size:22px;
}

.mail-success{
display:none;
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%);
background:#16a34a;
padding:12px 20px;
border-radius:6px;
}

footer{
text-align:center;
padding:40px;
opacity:0.6;
}

@media(max-width:1100px){
.services-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:700px){
.services-grid{grid-template-columns:1fr;}
.gradient{font-size:38px;}
.logo{width:180px;}
}