:root {
  --brand-green: #059669;
  --brand-blue: #0284c7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero background image + rich gradient overlay */
.hero-bg {
  background-size: cover;
  background-position: center;
  background-color: #0f2b28;
}
.hero-overlay {
  background:
    linear-gradient(120deg, rgba(6,78,59,0.92) 0%, rgba(12,74,110,0.82) 55%, rgba(8,47,73,0.75) 100%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}

/* Staggered hero reveal on load */
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Slow recycle spin for the waste stat */
.animate-spin-slow {
  animation: spin 2.4s linear infinite;
  color: #34d399;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Nicer focus + selection */
::selection { background: rgba(5,150,105,0.25); }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand-green), var(--brand-blue));
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-item, .animate-spin-slow, .animate-pulse { animation: none !important; }
  .reveal-item { opacity: 1; transform: none; }
}