.homepage-hero-bg {
  background: radial-gradient(ellipse at 30% 20%, hsla(206, 100%, 41%, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, hsla(183, 100%, 21%, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.homepage-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.homepage-feature-icon {
  width: 48px;
  height: 48px;
  color: white;
}
.homepage-feature-icon svg {
  width: 24px;
  height: 24px;
}
.homepage-feature-icon.homepage-feature-icon-accessibility {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.homepage-feature-icon.homepage-feature-icon-css {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}
.homepage-feature-icon.homepage-feature-icon-rtl {
  background: linear-gradient(135deg, #10b981, #059669);
}
.homepage-feature-icon.homepage-feature-icon-themes {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.homepage-feature-icon.homepage-feature-icon-vscode {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.homepage-feature-icon.homepage-feature-icon-npm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.homepage-feature-icon.homepage-feature-icon-layouts {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.homepage-feature-icon.homepage-feature-icon-testing {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.homepage-quickstart-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .homepage-quickstart-grid {
    grid-template-columns: 1fr 1fr;
  }
}