*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Rajdhani', sans-serif;
  background:#050505;
  color:white;
  min-height:100vh;
  overflow-x:hidden;
}

.background{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top, rgba(120,255,120,0.08), transparent 40%),
    #050505;
  z-index:-1;
}

header{
  text-align:center;
  padding-top:40px;
}

header h1{
  font-size:4rem;
  font-weight:700;
  letter-spacing:10px;
}

header h2{
  color:#8ea36f;
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:5px;
}

.logo-section{
  display:flex;
  justify-content:center;
  margin:30px 0;
}

.logo-section img{
  width:140px;
  filter:drop-shadow(0 0 15px rgba(120,255,120,0.15));
}

.dashboard{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  padding-bottom:50px;
}

.card{
  background:rgba(15,15,15,0.95);
  border:1px solid rgba(140,255,140,0.15);
  border-radius:22px;
  padding:35px 25px;
  text-decoration:none;
  color:white;
  transition:0.25s;
  backdrop-filter:blur(10px);
}

.card:hover{
  transform:translateY(-5px);
  border-color:#9ec27b;
  box-shadow:0 0 20px rgba(120,255,120,0.1);
}

.card svg{
  width:48px;
  height:48px;
  stroke:#9ec27b;
  margin-bottom:20px;
}

.card h3{
  font-size:2rem;
  margin-bottom:10px;
}

.card p{
  color:#9e9e9e;
  font-size:1rem;
}

footer{
  text-align:center;
  padding:30px;
  color:#6f6f6f;
}

#splash-screen{
  position:fixed;
  inset:0;
  background:#050505;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:9999;

  animation:fadeOut 1s ease forwards;
  animation-delay:2.2s;
}

#splash-screen img{
  width:140px;

  animation:
    logoFade 1.2s ease,
    pulseGlow 2s infinite;

  filter:drop-shadow(0 0 20px rgba(120,255,120,0.25));
}

#splash-screen h1{
  margin-top:25px;
  font-size:3rem;
  letter-spacing:8px;
}

#splash-screen p{
  color:#8ea36f;
  letter-spacing:5px;
  margin-top:10px;
}

@keyframes fadeOut{
  to{
    opacity:0;
    visibility:hidden;
  }
}

@keyframes logoFade{
  from{
    opacity:0;
    transform:scale(0.8);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes pulseGlow{
  0%{
    filter:drop-shadow(0 0 10px rgba(120,255,120,0.15));
  }

  50%{
    filter:drop-shadow(0 0 25px rgba(120,255,120,0.35));
  }

  100%{
    filter:drop-shadow(0 0 10px rgba(120,255,120,0.15));
  }
}