body{
margin:0;
font-family:Arial,sans-serif;
background:#020617;
color:white;
overflow-x:hidden;
}

.bg-grid{
position:fixed;
inset:0;
background:
radial-gradient(circle at center,#0f172a,#020617),
linear-gradient(rgba(0,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,.04) 1px, transparent 1px);
background-size:auto,40px 40px,40px 40px;
z-index:-1;
}

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

.hero{
display:flex;
justify-content:center;
align-items:center;
gap:60px;
flex-wrap:wrap;
}

.radar{
width:320px;
height:320px;
border-radius:50%;
position:relative;
border:1px solid rgba(0,255,255,.2);
overflow:hidden;
}

.ring{
position:absolute;
inset:20px;
border:1px solid rgba(0,255,255,.15);
border-radius:50%;
}

.r2{ inset:70px; }
.r3{ inset:120px; }

.sweep{
position:absolute;
width:50%;
height:2px;
background:#00e5ff;
left:50%;
top:50%;
transform-origin:left center;
animation:spin 4s linear infinite;
box-shadow:0 0 20px #00e5ff;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

.stats{
display:flex;
gap:20px;
}

.stat{
background:rgba(255,255,255,.05);
padding:25px;
border-radius:18px;
min-width:140px;
text-align:center;
backdrop-filter:blur(10px);
}

.stat span{
font-size:40px;
display:block;
}

.routes{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:16px;
padding:30px;
}

.card{
background:rgba(255,255,255,.05);
border-radius:18px;
padding:18px;
backdrop-filter:blur(12px);
transition:.25s;
}

.card:hover{
transform:translateY(-4px);
}

.name{
font-weight:bold;
margin-bottom:12px;
}

.dot{
width:12px;
height:12px;
border-radius:50%;
display:inline-block;
margin-right:8px;
}

.green{background:#00ff9d;box-shadow:0 0 10px #00ff9d;}
.yellow{background:#ffd500;box-shadow:0 0 10px #ffd500;}
.orange{background:#ff8c00;box-shadow:0 0 10px #ff8c00;}
.red{background:#ff3b5c;box-shadow:0 0 10px #ff3b5c;}