body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes floatA {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(0.5deg); }
}

@keyframes floatB {
  0%, 100% { transform: translateY(-8px) rotate(0deg); }
  50%       { transform: translateY(8px) rotate(-0.5deg); }
}

@keyframes floatC {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Hero entrance animations ───────────────────────────────────────────── */
.anim-1 { animation: fadeInUp 0.65s cubic-bezier(0.22,1,0.36,1) both; }
.anim-2 { animation: fadeInUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.anim-3 { animation: fadeInUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
.anim-4 { animation: fadeInUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.32s both; }
.anim-right { animation: fadeIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.45s both; }

/* ── Floating decorative cards ───────────────────────────────────────────── */
.float-a { animation: floatA 5s ease-in-out infinite; }
.float-b { animation: floatB 5s ease-in-out 0.9s infinite; }
.float-c { animation: floatC 4.5s ease-in-out 0.4s infinite; }

/* ── Scroll-reveal ────────────────────────────────────────────────────────*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for the card grid rows */
#units-grid .unit-card.reveal:nth-child(3n+2) { transition-delay: 0.09s; }
#units-grid .unit-card.reveal:nth-child(3n+3) { transition-delay: 0.18s; }

/* Steps stagger */
.step-item:nth-child(2).reveal { transition-delay: 0.14s; }
.step-item:nth-child(3).reveal { transition-delay: 0.28s; }

/* ── UI helpers ──────────────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(145deg, #071a0e 0%, #0e2d19 30%, #163d25 55%, #1e5535 75%, #2c8b51 100%);
}

.card-placeholder {
  background: linear-gradient(135deg, #edfcf3 0%, #b9efcd 100%);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide scrollbar on pill row but keep scroll */
.pills-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pills-scroll::-webkit-scrollbar { display: none; }

/* Custom select arrow */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Back-to-top button transition */
#back-to-top {
  transition: opacity 0.3s, transform 0.3s;
}

/* Image load shimmer */
.img-shimmer {
  background: linear-gradient(90deg, #f0fdf4 25%, #dcf8e9 50%, #f0fdf4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #37ae65; border-radius: 9999px; }

/* ── Brand-color fallbacks (in case Tailwind CDN misses custom utilities) ── */
.bg-brand-500  { background-color: #37ae65; }
.bg-brand-600  { background-color: #2c8b51; }
.bg-brand-700  { background-color: #226c3f; }
.bg-brand-50   { background-color: #edfcf3; }
.bg-brand-100  { background-color: #dcf8e9; }
.bg-brand-950  { background-color: #0a1f12; }

.text-brand-300 { color: #8fe0ac; }
.text-brand-500 { color: #37ae65; }
.text-brand-600 { color: #2c8b51; }
.text-brand-700 { color: #226c3f; }

.border-brand-200 { border-color: #b9efcd; }
.border-brand-500 { border-color: #37ae65; }
.ring-brand-100   { --tw-ring-color: #dcf8e9; }
.ring-brand-200   { --tw-ring-color: #b9efcd; }