:root{
  --accent:#46c2ff;
  --accent-glow:#46c2ff55;
  --text:#e6edf3;
  --muted:#9aa0a6;
}


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

body{
  font-family:'Nunito',sans-serif;
  color:var(--text);
  overflow-x:hidden;
}


.bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(8,10,14,.75),rgba(8,10,14,.95)),
    url("assets/background.png") center/cover no-repeat;
  z-index:-1;
  transition:transform .2s ease-out;
}


nav{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0 80px;
  background:rgba(10,15,22,0.55);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

nav img{
  position:absolute;
  left:80px;
  height:65px;
}

.nav-links{
  display:flex;
  gap:80px;
}

.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  color:var(--muted);
  transition:.25s;
  position:relative;
}

.nav-links a::after{
  display:none;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--accent);
}


.hero{
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 20px;
}

.hero h1{
  font-size:60px;
  font-weight:900;
  margin-bottom:25px;
}

.hero-desc{
  max-width:800px;
  font-size:20px;
  line-height:1.8;
  color:var(--muted);
}

.discord-btn{
  margin-top:45px;
  padding:18px 45px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent),#1e90ff);
  color:white;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 0 30px var(--accent-glow);
}

.discord-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 0 40px var(--accent-glow);
}


@keyframes float{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-12px);}
  100%{transform:translateY(0px);}
}

.floating{
  animation:float 6s ease-in-out infinite;
}

.floating-delay{
  animation:float 6s ease-in-out infinite;
  animation-delay:1s;
}

.floating-delay2{
  animation:float 6s ease-in-out infinite;
  animation-delay:2s;
}


.lore{
  padding:140px 20px;
  text-align:center;
  background:linear-gradient(
    180deg,
    rgba(10,15,22,0.4),
    rgba(5,10,18,0.85)
  );
}

.lore h2{
  font-size:40px;
  margin-bottom:40px;
}

.lore-text{
  max-width:900px;
  margin:auto;
  font-size:18px;
  line-height:1.9;
  color:var(--muted);
}


.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 80px;
  background:rgba(5,10,18,0.8);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.05);
}

.icons img{
  height:32px;
  margin-left:25px;
  transition:.3s;
  opacity:.75;
}

.icons a{
  text-decoration:none;
}

.icons img:hover{
  opacity:1;
  transform:scale(1.15);
}


@media(max-width:900px){

  nav{
    padding:0 25px;
  }

  nav img{
    left:25px;
  }

  .hero h1{
    font-size:38px;
  }

  .hero-desc{
    font-size:17px;
  }

  .footer{
    flex-direction:column;
    gap:15px;
    text-align:center;
  }
}