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

body{

font-family:Inter,system-ui;
background:#0f172a;
color:white;
line-height:1.6;

}


.container{

max-width:1100px;
margin:auto;
padding:20px;

}



.header{

background:#0b1220;
position:sticky;
top:0;

}


.header-inner{

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

}

nav a{

margin-left:20px;
text-decoration:none;
color:white;
opacity:0.8;

}

nav a:hover{

opacity:1;

}



.hero{

background:linear-gradient(135deg,#4f46e5,#7c3aed);

padding:120px 20px;
text-align:center;

}

.hero h1{

font-size:48px;
margin-bottom:20px;

}

.hero p{

max-width:600px;
margin:auto;
opacity:0.9;

}

.hero-buttons{

margin-top:30px;

}

.btn-primary{

background:white;
color:#4f46e5;
padding:14px 26px;
border-radius:10px;
margin-right:10px;
text-decoration:none;
font-weight:600;

}

.btn-secondary{

border:1px solid white;
padding:14px 26px;
border-radius:10px;
color:white;
text-decoration:none;

}



.tools{

padding:80px 0;
background:#111827;

}

.tools-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;

margin-top:40px;

}



.tool-card{

background:#1f2937;
padding:30px;
border-radius:14px;

}

.tool-card input{

width:100%;
padding:10px;
margin-top:10px;
margin-bottom:10px;

border:none;
border-radius:6px;

}

.tool-card button{

width:100%;
padding:12px;

border:none;
border-radius:6px;

background:#4f46e5;
color:white;

cursor:pointer;

}

.result{

margin-top:15px;
font-weight:600;

}



.services{

padding:80px 0;

}

.services-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;

margin-top:40px;

}

.service-card{

background:#1f2937;
padding:30px;
border-radius:14px;

}



.about{

padding:80px 0;
background:#111827;

}



.contact{

padding:80px 0;
text-align:center;

}



footer{

padding:40px;
text-align:center;
background:#020617;

}