.button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.button:hover {
  background: var(--blue);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
  font-size: 16px;
}

.stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.stage::before {
  content: "";
  display: block;
  padding-bottom: 80%;
}

.stage img {
  position: absolute;
  top: 11%;
  left: 8%;
  width: 40%;
}

.stage img:last-child {
  left: auto;
  right: 8%;
}

.stage-noktis {
  background: var(--stage-noktis);
}

.stage-matter {
  background: var(--stage-matter);
}

.stage-auralyo {
  background: var(--stage-auralyo);
}

.stage-ivio {
  background: var(--stage-ivio);
}

.toptal {
  --hex: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);

  display: block;
  width: fit-content;
  padding: 6px;
  background: #25a9ef;
  -webkit-clip-path: var(--hex);
  clip-path: var(--hex);
}

.toptal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 200px;
  padding: 24px 0 40px;
  background: linear-gradient(153deg, #0667ff 18%, #204ecf 40%, #0f256e 80%);
  color: #fff;
  text-align: center;
  -webkit-clip-path: var(--hex);
  clip-path: var(--hex);
}

.toptal-title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.toptal-rule {
  width: 120px;
  height: 1px;
  background: #25a9ef;
}

.toptal-by {
  margin-bottom: -6px;
  font-size: 16px;
  opacity: 0.8;
}

.toptal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 20px;
  border-radius: 6px;
  background: #296bff;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}