:root {
      --background: #ffffff;
      --foreground: #0f1a2a;
      --muted: #f3f5f7;
      --muted-foreground: #5b6675;
      --border: #e2e6ec;
      --primary: #1a8f4a;
      --primary-dark: #116534;
      --primary-foreground: #ffffff;
      --whatsapp: #25d366;
    }

    * {
      border-color: var(--border)
    }

    html,
    body {
      font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
      color: var(--foreground);
      background: var(--background)
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 700
    }

    .bg-primary {
      background-color: var(--primary)
    }

    .bg-primary:hover {
      background-color: var(--primary)
    }

    .hover\:bg-primary-dark:hover {
      background-color: var(--primary-dark)
    }

    .text-primary {
      color: var(--primary)
    }

    .text-primary-foreground {
      color: var(--primary-foreground)
    }

    .border-primary {
      border-color: var(--primary)
    }

    .bg-muted {
      background-color: var(--muted)
    }

    .text-muted-foreground {
      color: var(--muted-foreground)
    }

    .bg-whatsapp {
      background-color: var(--whatsapp)
    }

    .bg-footer {
      background-color: #0f1a26
    }

    .lucide {
      font-family: 'lucide' !important;
      font-style: normal;
      display: inline-block;
      line-height: 1;
      vertical-align: middle
    }

    .hide-scrollbar::-webkit-scrollbar {
      display: none
    }

    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none
    }

    /* Carousel nav buttons — always visible on mobile, hover-only on md+ */
    .carousel-btn {
      opacity: 1;
      transition: background-color 0.2s, opacity 0.2s;
    }

    @media (min-width: 768px) {
      .carousel-btn {
        opacity: 0;
      }

      .group:hover .carousel-btn {
        opacity: 1;
      }
    }

    /* ── Floating WhatsApp Button Animation ── */
    .wa-fab {
      animation: wa-expand 5s ease-in-out infinite;
      overflow: hidden;
      white-space: nowrap;
    }

    @keyframes wa-expand {

      0%,
      18% {
        width: 3.5rem;
      }

      28%,
      72% {
        width: 13.5rem;
      }

      82%,
      100% {
        width: 3.5rem;
      }
    }

    .wa-fab-text {
      opacity: 0;
      animation: wa-text-fade 5s ease-in-out infinite;
    }

    @keyframes wa-text-fade {

      0%,
      26% {
        opacity: 0;
      }

      36%,
      64% {
        opacity: 1;
      }

      74%,
      100% {
        opacity: 0;
      }
    }

    /* ── Hero Animations ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-title {
      animation: fadeUp .7s ease both;
    }

    .hero-desc {
      animation: fadeUp .7s .2s ease both;
    }

    .hero-cta {
      animation: fadeUp .7s .4s ease both;
    }

    /* ── Scroll Animations ── */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }