body{

font-family:Inter;
background:#ffffff;
color:#1c2b4a;
margin:0;

}

.nav{

display:flex;
justify-content:space-between;
padding:20px 40px;
background:white;
border-bottom:2px solid #e6edf7;

}

.logo{

font-weight:600;
font-size:20px;
color:#003a8f;

}

.menu a{

margin-left:20px;
text-decoration:none;
color:#003a8f;

}

.hero{

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

}

.hero h1{

font-size:54px;
color:#003a8f;

}

.hero p{

max-width:600px;
margin:auto;
color:#4c6aa6;

}


.radar{

position:relative;
width:260px;
height:260px;
border-radius:50%;
border:2px solid #cfd9ed;
margin:60px auto;

}

.human{

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

}

.agent{

position:absolute;
background:#003a8f;
color:white;
padding:6px 12px;
border-radius:20px;
font-size:12px;

}

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

section{

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

}

.grid{

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

}

.card{

background:white;
padding:30px;
border-radius:12px;
border:1px solid #e4ebf7;

}

.dashboard{

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

}

.bar{

height:12px;
background:#e8eef9;
border-radius:10px;

}

.value{

height:100%;
background:#003a8f;
border-radius:10px;

}

input,textarea{

display:block;
margin:12px auto;
padding:12px;
width:280px;
border-radius:6px;
border:1px solid #ccd7ef;

}

button{

padding:12px 30px;
background:#003a8f;
color:white;
border:none;
border-radius:6px;

}

footer{

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

}