*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#020617;
color:white;
line-height:1.6;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1180px;
margin:auto;
}

header{
position:sticky;
top:0;
background:rgba(2,6,23,.95);
border-bottom:1px solid rgba(255,255,255,.05);
z-index:1000;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo h1{
font-size:42px;
font-weight:800;
letter-spacing:-2px;
background:linear-gradient(to right,#fff,#60a5fa);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.logo p{
color:#94a3b8;
font-size:14px;
}

nav{
display:flex;
gap:26px;
}

nav a{
color:#cbd5e1;
text-decoration:none;
}

.hero{
padding:120px 0 90px;
background:
radial-gradient(circle at top right, rgba(37,99,235,.22), transparent 35%),
radial-gradient(circle at bottom left, rgba(59,130,246,.16), transparent 35%),
linear-gradient(rgba(2,6,23,.82),rgba(2,6,23,.92)),
url('images/hero-bg.webp') center/cover no-repeat;
}

.hero-grid,
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
margin-bottom:24px;
font-size:14px;
}

.hero h2{
font-size:68px;
line-height:.95;
font-weight:800;
letter-spacing:-3px;
margin-bottom:24px;
}

.hero p{
color:#cbd5e1;
font-size:18px;
}

.buttons{
display:flex;
gap:15px;
margin:36px 0;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:16px 28px;
border-radius:14px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

.btn-primary{
background:#2563eb;
color:white;
}

.btn-secondary{
background:#0f172a;
border:1px solid rgba(255,255,255,.08);
color:white;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.stat,
.card,
.contact-card,
.contact-form{
background:#0f172a;
border:1px solid rgba(255,255,255,.06);
border-radius:20px;
}

.stat{
padding:22px;
}

.stat h3{
font-size:36px;
color:#60a5fa;
}

.hero-image img{
width:100%;
border-radius:22px;
display:block;
}

.tech-row,
.services,
.about,
.contact{
padding:90px 0;
}

.tech-grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
}

.tech-grid span{
padding:12px 18px;
background:#0f172a;
border-radius:999px;
border:1px solid rgba(255,255,255,.05);
}

.section-title{
font-size:50px;
font-weight:800;
letter-spacing:-2px;
margin-bottom:24px;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

.card{
padding:30px;
}

.card h3{
margin-bottom:14px;
}

.card p,
.about p,
.about li{
color:#cbd5e1;
}

.about ul{
padding-left:22px;
margin-top:20px;
}

.contact-card{
padding:32px;
}

.center{
text-align:center;
}

.contact-form{
padding:36px;
max-width:760px;
margin:auto;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:18px;
margin-bottom:18px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:#020617;
color:white;
}

.contact-form textarea{
min-height:180px;
resize:vertical;
}

footer{
padding:42px 0;
border-top:1px solid rgba(255,255,255,.05);
}

.footer{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

.footer-links{
display:flex;
gap:20px;
}

.footer-links a{
color:#94a3b8;
text-decoration:none;
}

@media(max-width:900px){

.hero-grid,
.about-grid{
grid-template-columns:1fr;
}

.hero h2{
font-size:46px;
}

.stats{
grid-template-columns:1fr;
}

nav{
display:none;
}

.section-title{
font-size:38px;
}

}


body::before{
content:'';
position:fixed;
inset:0;
background:
linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
opacity:.4;
}

.hero{
position:relative;
overflow:hidden;
}

.hero::after{
content:'';
position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle, rgba(37,99,235,.18), transparent 70%);
top:-200px;
right:-150px;
filter:blur(50px);
pointer-events:none;
}

.card:hover,
.stat:hover{
transform:translateY(-4px);
transition:.25s ease;
box-shadow:0 20px 40px rgba(37,99,235,.12);
}