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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f8fafc;
  color: #0f172a;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 142 71% 36%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 24 95% 53%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 142 71% 36%;
    --radius: 0.875rem;
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "cv11", "ss01", "ss03";
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: "Poppins", "Inter", sans-serif;
    letter-spacing: -0.01em;
  }
}

@layer components {
  .gradient-text {
    background: linear-gradient(
      135deg,
      #f97316 0%,
      #a855f7 35%,
      #3b82f6 65%,
      #16a34a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.55);
  }

  .glass-dark {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .grid-bg {
    background-image:
      linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-ibh-green px-6 py-3 text-sm font-semibold text-white shadow-glow transition-all duration-300 hover:bg-ibh-greenDark hover:-translate-y-0.5 hover:shadow-[0_25px_60px_-20px_rgba(22,163,74,0.6)];
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition-all duration-300 hover:border-slate-300 hover:-translate-y-0.5 hover:shadow-soft;
  }

  .btn-ghost-dark {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:bg-white/10 hover:-translate-y-0.5;
  }

  .chip {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/70 px-3 py-1 text-xs font-medium text-slate-600;
  }

  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-soft;
  }

  .section {
    @apply mx-auto max-w-7xl px-6 lg:px-8;
  }

  .reveal {
    animation: fadeUp 0.7s ease-out both;
  }
}

::selection {
  background: rgba(22, 163, 74, 0.2);
  color: #0f172a;
}

/* Hide scrollbar in marquee */
.marquee {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}
[id="emergent-badge"],
a[href*="emergent"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}