.skill-tree-container {
  padding: 120px 0;
  color: #e6fef8;
  background: radial-gradient(circle at top, #0b1a1a, #050a0f 70%);
}

.skill-tree-header .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(0,255,180,.12);
  color: #4dffe1;
  border: 1px solid rgba(0,255,180,.35);
}

.skill-tree-header h1 {
  margin: 16px 0 8px;
}


.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}

.skill-card
 {
    background: linear-gradient(145deg, rgba(11, 14, 19, 0.75) -42%, rgba(52, 163, 146, 0.35) 159%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgb(0 255 180);
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.6), 0 0 25px rgb(52 163 146 / 29%);
    transition: all 0.3s ease;
}


.skill-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(52, 163, 146, 0.35);
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgb(32 69 78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60d9fb;
    border: 1px solid #2e6674;
}

.icon-box svg {
  width: 28px;
  height: 28px;
}

.level-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,180,.4);
  color: #4dffe1;
}

.level-tag.accent {
  background: rgba(0,255,180,.18);
}

.skill-card h3 {
  margin: 20px 0 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tags span {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 999px;
    background: rgb(8 26 28);
}