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

body {
  background: #090817;
  color: white;
  font-family: Arial, sans-serif;
  padding-bottom: 30px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
  background: #15132a;
  border-bottom: 1px solid #292044;
}

.logo {
  font-size: 19px;
  font-weight: bold;
  color: #ffd166;
}

.logo span {
  color: #bd75ff;
}

.credits {
  background: #292044;
  padding: 9px 12px;
  border-radius: 20px;
  color: #ffd166;
  font-size: 12px;
}

.hero {
  margin: 20px 14px;
  padding: 35px 20px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #24104b, #35104b, #17132e);
  border: 1px solid #56358c;
}

.badge {
  display: inline-block;
  color: #e4b5ff;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 30px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero h1 span {
  background: linear-gradient(90deg, #a56bff, #ff5ac8);
  -webkit-background-clip: text;
  color: transparent;
}

.hero p {
  color: #c1b8d6;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 22px;
}

button {
  background: linear-gradient(90deg, #895cff, #e34ccf);
  border: none;
  color: white;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 20px 14px 30px;
}

.stat {
  background: #15132a;
  border: 1px solid #292044;
  border-radius: 13px;
  padding: 17px 5px;
  text-align: center;
}

.stat h2 {
  color: #d28aff;
  font-size: 21px;
}

.stat p {
  color: #aaa1bd;
  font-size: 11px;
  margin-top: 7px;
}

.section-title {
  font-size: 19px;
  margin: 20px 16px;
}

.tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 14px;
}

.tool {
  background: #15132a;
  border: 1px solid #30254b;
  border-radius: 15px;
  padding: 19px 13px;
  cursor: pointer;
  transition: 0.2s;
}

.tool:active {
  transform: scale(0.96);
  border-color: #b76aff;
}

.tool div {
  font-size: 28px;
  margin-bottom: 13px;
}

.tool h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.tool p {
  color: #aaa1bd;
  font-size: 11px;
  line-height: 1.5;
}

.workspace {
  display: none;
  margin: 20px 14px;
  background: #15132a;
  border: 1px solid #56358c;
  padding: 22px;
  border-radius: 15px;
}

.workspace h2 {
  margin-bottom: 15px;
  color: #d28aff;
}

.workspace p {
  color: #aaa1bd;
  margin-bottom: 20px;
}

footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: #ffd166;
}

footer small {
  color: #aaa1bd;
  display: block;
  margin-top: 8px;
}