body{

font-family:Inter;
background:#0e1425;
color:white;
margin:0;

}

.nav{

display:flex;
justify-content:space-between;
padding:20px 40px;

}

.menu a{

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

}

.hero{

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

}

.hero h1{

font-size:50px;

}

.hero p{

max-width:500px;
margin:auto;

}

.radar{

position:relative;
width:250px;
height:250px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.3);
margin:60px auto;

}

.human{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:30px;

}

.agent{

position:absolute;
background:#3a6cff;
padding:6px 12px;
border-radius:20px;
font-size:12px;

}

.a1{top:-10px;left:110px;}
.a2{top:110px;right:-20px;}
.a3{bottom:-10px;left:110px;}
.a4{top:110px;left:-20px;}

section{

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

}

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:40px;

}

.card{

background:#1c2545;
padding:30px;
border-radius:10px;

}

.dashboard{

display:flex;
justify-content:center;
gap:40px;
margin-top:40px;

}

.bar{

height:10px;
background:#2a3355;
border-radius:10px;

}

.value{

height:100%;
background:#3a6cff;
border-radius:10px;

}

input,textarea{

display:block;
margin:10px auto;
padding:12px;
width:280px;
border-radius:6px;
border:none;

}

button{

padding:12px 30px;
background:#3a6cff;
color:white;
border:none;
border-radius:6px;

}

footer{

padding:40px;
background:#0a1020;
text-align:center;

}