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

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

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

  body {
    @apply font-sans text-slate-800 antialiased;
  }
}

@layer components {
  .section-padding {
    @apply py-20 md:py-28 px-6;
  }

  .section-container {
    @apply max-w-5xl mx-auto w-full;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl
           bg-brand-500 text-white font-semibold text-sm
           shadow-lg shadow-brand-500/25
           hover:bg-brand-600 hover:shadow-brand-500/40
           transition-all duration-200 ease-out;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl
           border-2 border-brand-500 text-brand-500 font-semibold text-sm
           hover:bg-brand-50 transition-all duration-200 ease-out;
  }

  .nav-link {
    @apply text-slate-600 font-medium text-[15px] hover:text-brand-500 transition-colors duration-200;
  }

  .nav-link-active {
    @apply text-brand-500 font-semibold;
  }

  .feature-card {
    @apply p-6 rounded-2xl bg-white border border-slate-100 shadow-card
           hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300;
  }

  .contact-card {
    @apply flex gap-5 items-start p-6 rounded-2xl bg-slate-50 border border-slate-100
           hover:border-brand-100 hover:shadow-card transition-all duration-300;
  }
}

html::-webkit-scrollbar {
  width: 6px;
}

html::-webkit-scrollbar-thumb {
  @apply bg-slate-300 rounded-full;
}

.hero_image {
  animation: profile_animate 8s ease-in-out infinite 1s;
}

@keyframes profile_animate {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@media screen and (max-width: 950px) {
  .menu { display: none; }
  .bar { display: flex; }
  .nav-download { display: none; }
}

@media screen and (max-width: 950px) {
  .hero-grid {
    @apply flex-col-reverse text-center;
  }
  .hero-ctas {
    @apply justify-center;
  }
  .trust-badges {
    @apply justify-center;
  }
}

@media screen and (max-width: 630px) {
  .download-badges {
    @apply flex-col items-center;
  }
}

@media screen and (max-width: 565px) {
  .footer-inner {
    @apply flex-col gap-6 text-center;
  }
}