:root {
      --c-primary: #d946ef;
      --c-secondary: #e879f9;
      --c-primary-text: #ffffff;
      scroll-behavior: smooth
    }

    body {
      font-family: sans-serif
    }

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

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

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

    .hover\:bg-secondary:hover {
      background-color: var(--c-secondary)
    }

    .ring-primary {
      --tw-ring-color: var(--c-primary)
    }

    @keyframes f {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

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

    .a-fade {
      animation: f .6s ease-out forwards
    }

    .shadow-soft {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    }

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

    body {
      font-family: 'Inter', sans-serif;
    }

    body {
      --hero-bg-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726a?q=80&w=2070&auto=format&fit=crop');
      --hero-overlay-color: rgba(0, 0, 0, 1);
      --hero-overlay-opacity: 0;
    }

    #hero {
      background-image: var(--hero-bg-image);
    }