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

.bg{
 position:fixed; inset:0;
 background:
 radial-gradient(circle at 20% 20%, #38bdf833, transparent 40%),
 radial-gradient(circle at 80% 30%, #a78bfa33, transparent 40%),
 radial-gradient(circle at 50% 80%, #22c55e33, transparent 40%);
 filter:blur(40px);
 z-index:-1;
}

h1{
 text-align:center;
 font-size:44px;
 margin:30px 0 6px;
 background:linear-gradient(90deg,#38bdf8,#a78bfa,#22c55e);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

.sub{
 text-align:center;
 color:#94a3b8;
 margin-bottom:25px;
}

.grid{
 max-width:1200px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:28px;
 padding:20px;
}

.card{
 background:#020617;
 border:1px solid #1f2a44;
 border-radius:20px;
 padding:26px;
 transition:.25s;
}

.card:hover{
 transform:translateY(-6px) scale(1.02);
 border-color:#38bdf8;
 box-shadow:0 0 30px #38bdf855;
}

.label{
 color:#7dd3fc;
 font-size:14px;
 letter-spacing:1px;
}

.value{
 font-size:54px;
 font-weight:800;
 margin-top:10px;
}

.live{
 color:#22c55e;
 text-shadow:0 0 12px #22c55e;
}

.footer{
 text-align:center;
 margin:30px 0 40px;
 color:#94a3b8;
 font-size:14px;
 line-height:1.7em;
}