#why {
  background-color: var(--bg-base);
  position: relative;
  overflow: hidden;
}

#why::before {
  content: '';
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 54, 187, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

.why-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--surface-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all var(--transition);
}

.why-item:hover {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  transform: translateX(4px);
}

.why-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.why-content h4 {
  margin-bottom: 0.35rem;
}

.why-content p {
  font-size: 0.9rem;
  line-height: 1.6;
}