@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

html.dark {
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: #4b5563;
  background-color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark body {
  background-color: #0b0f17;
  color: #9ca3af;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

html.dark :where(h1, h2, h3, h4, h5, h6) {
  color: #f9fafb;
}

/* Ensure footer headings remain bright white regardless of light/dark mode */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #ffffff !important;
}

/* Hero heading */
.hero-title {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

nav a,
.btn {
  font-weight: 600;
  letter-spacing: -0.005em;
}

.badge {
  font-weight: 500;
  font-size: 0.875rem;
}

.stat-number {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-bounce-subtle {
  animation: bounceSubtle 3s ease-in-out infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}