@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --soko-green: #1F4D2C;
  --soko-yellow: #F4C430;
  --soko-grey: #6B6B6B;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

.font-grotesk { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.eyebrow-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(31, 77, 44, 0.08);
  color: #1F4D2C;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-gradient {
  background: linear-gradient(135deg, #f0fdf4 0%, #fef9c3 100%);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.32, 0.72, 0, 1), transform 0.8s cubic-bezier(0.32, 0.72, 0, 1), filter 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 768px) {
  .reveal { transform: translateY(16px); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1F4D2C; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #163a20; }

.float-wa {
  animation: float-wa 3s ease-in-out infinite;
}
@keyframes float-wa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .bento-grid > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

input, select, textarea {
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--soko-green);
  outline-offset: 1px;
}