/* BASE */
body{
background:#000;
color:#fff;
font-family:Inter, sans-serif;
margin:0;
}

/* GRID BACKGROUND */
body::before{
content:"";
position:fixed;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:40px 40px;
z-index:-2;
}

/* CONTAINER */
.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}

/* GLOW */
.glow{
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(255,255,255,0.08), transparent);
filter:blur(80px);
z-index:-1;
}

/* CARDS */
.card{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
padding:24px;
transition:0.3s;
}
.card:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,0.2);
}

/* BUTTONS */
.btn{
background:white;
color:black;
padding:12px 24px;
border-radius:10px;
font-weight:500;
display:inline-block;
}
.btn-outline{
border:1px solid rgba(255,255,255,0.2);
padding:12px 24px;
border-radius:10px;
display:inline-block;
}

/* TEXT */
h1,h2{
letter-spacing:-0.5px;
}

/* DASHBOARD */
.dashboard{
margin-top:60px;
border-radius:16px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
padding:20px;
overflow:hidden;
}

.stat{
background:rgba(255,255,255,0.05);
padding:16px;
border-radius:12px;
}

.bar{
width:6px;
background:white;
margin:0 4px;
border-radius:4px;
animation:grow 1.5s infinite ease-in-out alternate;
}

.bar:nth-child(2){animation-delay:0.2s}
.bar:nth-child(3){animation-delay:0.4s}
.bar:nth-child(4){animation-delay:0.6s}
.bar:nth-child(5){animation-delay:0.8s}

@keyframes grow{
from{height:20px;opacity:0.4}
to{height:80px;opacity:1}
}