@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap");

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

body {
  background: radial-gradient(circle, #063d29, #000);
  color: #d7a84b;
  font-family: "Cinzel", serif;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(212, 175, 55, 0.15),
    transparent
  );
  animation: silk 8s infinite;
}

@keyframes silk {
  50% {
    transform: translateX(100%);
  }
}

header {
  position: absolute;
  top: 30px;
  left: 40px;
}

.logo {
  width: 140px;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand img {
  width: 250px;
  font-size: 120px;
  letter-spacing: 10px;
  color: #d4a24c;
  text-shadow: 0 0 30px #d4a24c;
  animation: glow 3s infinite;
}

@keyframes glow {
  50% {
    text-shadow: 0 0 60px gold;
  }
}

.brand h2 {
  font-size: 28px;
}

.brand p {
  color: white;
  letter-spacing: 8px;
  margin-top: 15px;
}

.gem-container {
  margin: 40px;
}

.gem {
  width: 20px;
  filter: drop-shadow(0 0 40px #00ffcc);
  animation: float 4s infinite;
}

@keyframes float {
  50% {
    transform: translateY(-20px) rotateY(180deg);
  }
}

.hero h3 {
  font-size: 40px;
}

.countdown {
  display: flex;

  gap: 20px;

  margin: 30px;
}

.countdown div {
  width: 120px;

  padding: 20px;

  border: 1px solid #d4a24c;

  background: #0008;

  backdrop-filter: blur(10px);

  border-radius: 15px;
}

.countdown span {
  font-size: 45px;

  display: block;
}

.launch-date {
  margin: 20px;
}

.whatsapp {
  padding: 15px 40px;

  border: 1px solid gold;

  border-radius: 40px;

  color: white;

  text-decoration: none;

  background: #063d29;
}

.social {
  position: fixed;

  right: 30px;

  top: 40%;

  display: flex;

  flex-direction: column;

  gap: 20px;
}

.social a {
  width: 55px;

  height: 55px;

  border-radius: 50%;

  border: 1px solid gold;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #d4a24c;

  font-size: 25px;
}

.features {
  display: flex;

  justify-content: center;

  gap: 30px;

  padding: 50px;
}

.features div {
  width: 300px;

  padding: 30px;

  border: 1px solid #806020;

  background: #00150d;

  text-align: center;
}

.features i {
  font-size: 40px;
}

footer {
  text-align: center;

  padding: 30px;

  color: #aaa;
}

@media (max-width: 700px) {



  .logo {
  width: 80px;
};


  .brand img {
    width: 200px;
  }

  .brand h2 {
    font-size: 18px;
  }

  .brand p {
    font-size: 9px;
  }

  .hero h3 {
    font-size: 30px;
  }

  .countdown {
    flex-wrap: wrap;
    justify-content: center;
  }

  .social {
    display: none;
  }

  .features {
    flex-direction: column;

    align-items: center;
  }
}