.features {
  padding: 16px 12px;
  animation: fadeIn 1.5s;
}

.features h2 {
  color: #c084fc;
  font-size: 1.5rem;
  margin-bottom: 12px;
  text-shadow: 0 0 8px #a855f744;
}

.features ul {
  list-style: none;
  padding: 0;
  color: #f3e8ff;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.features li {
  background: rgba(26, 11, 46, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(168, 85, 247, 0.1);
}

.features li:hover {
  transform: translateY(-2px);
}

@media (min-width: 700px) {
  .features {
    padding: 28px 20px;
  }

  .features h2 {
    font-size: 1.8rem;
    margin-bottom: 18px;
  }

  .features ul {
    font-size: 1.1rem;
    gap: 18px 32px;
  }

  .features li {
    padding: 10px 18px;
    border-radius: 14px;
  }
}