body{
margin:0;
font-family:Inter;
background:#f8fafc;
color:#0f172a;
}

.nav{
display:flex;
justify-content:space-between;
padding:20px 40px;
background:white;
border-bottom:1px solid #e2e8f0;
}

.logo{
font-family:Sora;
font-weight:800;
font-size:20px;
}
.logo span{color:#2563eb}

.hero{
text-align:center;
padding:80px 20px;
}
h1{
font-family:Sora;
font-size:56px;
}
h1 span{color:#2563eb}

.dashboard{
display:flex;
gap:20px;
justify-content:center;
padding:40px;
}

.card{
background:white;
padding:20px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
width:300px;
}

.ring-wrap{
position:relative;
width:180px;
height:180px;
margin:auto;
}

svg{transform:rotate(-90deg)}

.bg{
stroke:#e2e8f0;
fill:none;
stroke-width:14;
}

.progress{
stroke:#2563eb;
fill:none;
stroke-width:14;
stroke-linecap:round;
stroke-dasharray:502;
transition:.8s;
}

.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}

.center div{
font-size:32px;
font-weight:700;
}

.pill{
margin-top:10px;
background:#e0f2fe;
color:#0369a1;
padding:6px 12px;
border-radius:20px;
display:inline-block;
}

.tabs button{
margin-right:10px;
}