:root {
  --bg: #1c0901;
  --card: #28170e;
  --accent: #ffb703;
  --muted: #3c1f15;
  --gray: #cecfe3;
}

body {
  margin: 0;
  background: var(--bg);
  padding: 2rem 0;
  color: var(--gray);
  font-family: "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 1rem 0;
}

a {
  text-decoration: none;
  color: var(--gray);
}

.pry_btn {
  background: var(--accent);
  color: var(--bg);
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: 1rem;
}

.accent_btn {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--muted);
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: background .3s ease;
}

.accent_btn:hover {
  background: var(--muted);
  color: var(--gray);
  border: 1px solid var(--muted);
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: 1rem;
}

.muted-card {
  background: var(--muted);
  padding: 1rem;
  border-radius: .5rem;
  text-align: center;

  .small {
    color: var(--gray);
    font-size: .75rem;
    margin: 0;
  }

  h4 {
    color: var(--accent);
    text-transform: uppercase;
    margin: 0;
  }
}

.divider {
  height: 1px;
  background: var(--muted);
  margin: 1rem 0;
}

.card {
  background: var(--card);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid var(--muted);
}

.flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  max-width: 80vw;
  margin: auto;

  .logo {
    display: flex;
    align-items: center;
    gap: 1rem;

    img {
      border: 1px solid var(--accent);
    }

    .name {
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: 0.15rem;
      margin: 0;
    }

    p {
      font-size: 0.75rem;
    }
  }

  .links {
    display: flex;
    gap: 1rem;
    align-items: center;

    a:hover {
      color: var(--accent);
      transition: color 0.3s ease;
    }
  }
}

main, footer {
  max-width: 80vw;
  margin: auto;
}

.hero {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;

  .token {
    ul, li {
      list-style: none;
      padding: 0;
    }
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* #tokenomics {
  margin-top: 2rem;
} */

#features {
  margin-top: 2rem;

  img {
    width: 100%;
    border-radius: 1rem;
  }
}

#roadmap {
  margin-top: 2rem;

  .grid-3 div h3 {
    color: var(--accent);
  }
  .grid-2{
    margin-top: 2rem;
    div h3 {
      color: var(--accent);
    }
  } 
}

#community {
  margin-top: 2rem;
}


@media screen and (max-width: 800px){
  main, footer {
    max-width: 85vw;
    margin: auto
  }

  nav {
    justify-content: center;
    .links {
      display: none;
    }
  }

  .flex {
    flex-wrap: wrap;
  }

  .hero {
    grid-template-columns: 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}