.technology {
  padding: 110px 5%;
  background: var(--white);
}
.technology-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 6rem;
  align-items: center;
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tag {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.45rem 1rem;
  border-radius: 100px;
  border: 1.5px solid var(--blue-pale);
  color: var(--blue-primary);
  background: var(--blue-ghost);
  cursor: default;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.tag:hover {
  background: var(--blue-primary);
  border-color: var(--blue-primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26, 79, 140, 0.18);
}
.tag.featured {
  background: var(--orange-pale);
  border-color: rgba(232, 120, 9, 0.35);
  color: var(--orange-deep);
  font-weight: 600;
}
.tag.featured:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(232, 120, 9, 0.25);
}

@media (max-width: 900px) {
  .technology-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}