body {
  font-family: "Inter", sans-serif;
}

.bg-gradient-conic {
  background-image: conic-gradient(from 180deg at 50% 50%, #3b82f6 0deg, #8b5cf6 180deg, #3b82f6 360deg);
}

.hero {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%230099ff" fill-opacity="0.08" d="M0,32L48,37.3C96,43,192,53,288,80C384,107,480,149,576,165.3C672,181,768,171,864,144C960,117,1056,75,1152,64C1248,53,1344,75,1392,85.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
  background-size: cover;
  background-position: center bottom;
}

.features svg {
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.grid h2 {
  color: #1E90FF; /* Lighter Blue */
}

@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}