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

body{
  font-family:'Inter',sans-serif;
  background:#050505;
  color:white;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

.background-glow{
  position:absolute;
  width:700px;
  height:700px;

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,0.16) 0%,
      rgba(0,0,0,0) 70%
    );

  filter:blur(60px);

  animation:floatGlow 7s ease-in-out infinite;
}

@keyframes floatGlow{

  0%{
    transform:translateY(0px) scale(1);
  }

  50%{
    transform:translateY(-25px) scale(1.08);
  }

  100%{
    transform:translateY(0px) scale(1);
  }

}

.container{
  position:relative;
  z-index:2;

  width:90%;
  max-width:420px;

  text-align:center;

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-height:100vh;

  padding:40px 0;
}

.logo-wrapper{
  margin-bottom:40px;
}

.logo-image{
  width:260px;
  max-width:82%;

  margin-bottom:35px;

  opacity:0;

  animation:fadeUp 1.2s ease forwards;
}

.subtitle{
  color:#d8d8d8;

  letter-spacing:6px;

  font-size:12px;

  text-transform:uppercase;

  font-weight:300;

  opacity:0;

  animation:fadeUp 1.5s ease forwards;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.card{
  position:relative;

  text-decoration:none;

  color:white;

  padding:20px;

  border-radius:24px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  overflow:hidden;

  transition:all .45s ease;

  opacity:0;

  animation:fadeUp 1s ease forwards;
}

.card:nth-child(1){
  animation-delay:0.2s;
}

.card:nth-child(2){
  animation-delay:0.35s;
}

.card:nth-child(3){
  animation-delay:0.5s;
}

.card:nth-child(4){
  animation-delay:0.65s;
}

.card::before{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.10),
      transparent
    );

  transform:translateX(-120%);

  transition:0.9s;
}

.card:hover::before{
  transform:translateX(120%);
}

.card:hover{

  transform:
    translateY(-5px)
    scale(1.02);

  border:1px solid rgba(212,175,55,0.45);

  box-shadow:
    0 0 25px rgba(212,175,55,0.15),
    0 0 60px rgba(212,175,55,0.06);

}

.card span{
  position:relative;

  z-index:2;

  font-size:18px;

  font-weight:500;

  letter-spacing:1px;
}

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@media(max-width:480px){

  .logo-image{
    width:220px;
    margin-bottom:30px;
  }

  .subtitle{
    letter-spacing:4px;
    font-size:11px;
  }

  .card{
    padding:18px;
    border-radius:22px;
  }

  .card span{
    font-size:17px;
  }

}