style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #eab308; /* yellow-500 */
  --secondary-color: #000000; /* black */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #111827; /* gray-900 */
  color: #f9fafb; /* gray-50 */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Feather icons styling */
.feather {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Custom button hover effect */
.btn-primary:hover {
  box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    padding-top: 2rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
a:focus, button:focus {
  outline: 2px dashed var(--primary-color);
  outline-offset: 2px;
}