@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

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

:root {
  --green: #01a558;
  --green-dark: #018546;
  --amber: #ffb966;
  --amber-dark: #f18f20;
  --navy: #141d38;
  --teal: #034b5b;
  --body: #737887;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow', sans-serif;
    color: var(--navy);
    font-weight: 700;
    line-height: 1.2;
  }

  a {
    transition: color 0.3s ease;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 bg-green text-white font-display font-semibold text-sm uppercase tracking-wide px-7 py-4 rounded hover:bg-green-dark transition-colors duration-300;
  }

  .btn-outline {
    @apply inline-flex items-center gap-2 border border-white text-white font-display font-semibold text-sm uppercase tracking-wide px-7 py-4 rounded hover:bg-white hover:text-navy transition-all duration-300;
  }

  .btn-ghost {
    @apply inline-flex items-center gap-2 border border-green text-green font-display font-semibold text-sm uppercase tracking-wide px-7 py-4 rounded hover:bg-green hover:text-white transition-all duration-300;
  }

  .section-label {
    @apply text-green font-display font-semibold text-sm uppercase tracking-widest block mb-3;
  }

  .section-title {
    @apply font-display font-bold text-navy leading-tight;
  }

  .product-card {
    @apply bg-white rounded-2xl p-7 border border-border hover:border-green hover:shadow-xl transition-all duration-300 flex flex-col gap-4;
  }

  .badge-live {
    @apply inline-block text-xs font-semibold font-display uppercase tracking-wide bg-green/10 text-green border border-green/20 px-2.5 py-0.5 rounded-full;
  }

  .badge-beta {
    @apply inline-block text-xs font-semibold font-display uppercase tracking-wide bg-amber/10 text-amber-dark border border-amber/20 px-2.5 py-0.5 rounded-full;
  }

  .nav-link {
    @apply font-display font-semibold text-sm uppercase tracking-wide text-navy hover:text-green transition-colors duration-200;
  }

  .feature-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center text-2xl flex-shrink-0;
  }
}

/* Noise texture overlay for hero */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* Decorative gradient blobs */
.blob-green {
  background: radial-gradient(circle, rgba(1,165,88,0.15) 0%, transparent 70%);
}

.blob-amber {
  background: radial-gradient(circle, rgba(255,185,102,0.12) 0%, transparent 70%);
}

/* Smooth scroll offset for sticky nav */
[id] {
  scroll-margin-top: 80px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background: var(--green);
  border-radius: 3px;
}

/* Animated underline for links */
.underline-green {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
.underline-green:hover {
  background-size: 100% 2px;
}

/* Ecosystem connecting line decoration */
.ecosystem-grid {
  position: relative;
}

/* Form inputs */
.form-input {
  @apply w-full rounded-xl border border-border bg-smoke px-4 py-3 text-sm text-navy font-body placeholder:text-body/50 outline-none focus:border-green focus:ring-2 focus:ring-green/20 transition-all duration-200;
}

/* Green subtle background utility */
.bg-green-subtle {
  background-color: #e6f7f0;
}

/* ── Scroll-reveal ───────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }
[data-reveal-delay="7"] { transition-delay: 0.56s; }
[data-reveal-delay="8"] { transition-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}