@layer components {
  .burger-menu {
    @apply relative block h-[var(--nav-icon-size)] w-[var(--nav-icon-size)];
  }
  .burger-menu > div {
    @apply absolute top-[calc(50%-var(--nav-icon-border)/2)] h-[var(--nav-icon-border)] w-full bg-[#fff];
    transition: background-color 0.2s, top 0.2s, left 0.2s, transform 0.2s 0.15s;
    @apply before:absolute b:bottom-[calc(var(--nav-icon-size)/3)] b:left-0 b:h-[var(--nav-icon-border)] b:w-[66%] b:bg-[#fff];
    @apply after:absolute a:right-0 a:top-[calc(var(--nav-icon-size)/3)] a:h-[var(--nav-icon-border)] a:w-[66%] a:bg-[#fff];
  }
  .burger-menu > div:before {
    transition: bottom 0.2s 0.2s, left 0.1s, transform 0.2s, background-color 0.4s 0.2s;
  }
  .burger-menu > div:after {
    transition: top 0.2s 0.2s, right 0.1s, transform 0.2s, background-color 0.4s 0.2s;
  }
  .burger-menu.active > div {
    @apply bg-transparent;
    @apply b:bottom-0 b:left-[calc(var(--nav-icon-size)/6)] b:-rotate-45 b:bg-white;
    @apply a:right-[calc(var(--nav-icon-size)/6)] a:top-0 a:rotate-45 a:bg-white;
  }
  .burger-menu.active > div:before {
    transition: background-color 0.2s, bottom 0.2s, left 0.2s, transform 0.2s 0.15s;
  }
  .burger-menu.active > div:after {
    transition: background-color 0.2s, top 0.2s, right 0.2s, transform 0.2s 0.15s;
  }
  .button-border {
    @apply rounded-md border-2 border-gray-600/50 hfa:border-gray-400/30;
  }
  /*=============== HEADINGS ===============*/
  .heading-xxl {
    @apply mb-6 text-6xl font-extrabold leading-tight tracking-tight text-gray-900 md:text-7xl lg:text-8xl;
  }
  .heading-hero {
    @apply mb-4 text-5xl font-extrabold leading-tight text-gray-900 md:text-6xl lg:text-7xl;
  }
  .heading-hero strong {
    @apply bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-500 bg-clip-text text-transparent;
  }
  .subheading-hero {
    @apply mb-3 text-4xl font-bold leading-snug tracking-tight text-gray-800 md:text-5xl lg:text-6xl;
  }
  .heading-3xl {
    @apply mb-4 text-4xl font-bold leading-tight tracking-tight text-gray-900 md:text-5xl lg:text-6xl;
  }
  .heading-2xl {
    @apply mb-4 text-3xl font-bold leading-snug tracking-tight text-gray-900 md:text-4xl lg:text-5xl;
  }
  .heading-xl {
    @apply mb-3 text-2xl font-semibold leading-snug tracking-tight text-gray-900 sm:text-3xl lg:text-4xl;
  }
  .heading-lg {
    @apply mb-3 text-xl font-semibold leading-snug tracking-tight text-gray-900 sm:text-2xl md:text-3xl lg:text-4xl;
  }
  .heading-md {
    @apply mb-2 text-lg font-semibold leading-snug text-gray-800 md:text-xl lg:text-2xl;
  }
  .heading-base {
    @apply mb-2 text-base font-semibold text-gray-800 md:text-lg;
  }
  .heading-sm {
    @apply mb-1 text-sm font-semibold text-gray-700 md:text-base;
  }
  .heading-xs {
    @apply mb-1 text-xs font-semibold text-gray-700 md:text-sm;
  }
  /*=============== PARAGRAPH ===============*/
  .paragraph-xl {
    @apply max-w-3xl text-xl leading-relaxed text-gray-600 md:text-2xl xl:max-w-4xl [&>p+p]:mt-4;
  }
  .paragraph-lg {
    @apply max-w-2xl text-lg leading-relaxed text-gray-600 md:text-xl xl:max-w-3xl [&>p+p]:mt-4;
  }
  .paragraph-md {
    @apply max-w-2xl text-base leading-relaxed text-gray-600 md:text-lg [&>p+p]:mt-4;
  }
  .paragraph-sm {
    @apply max-w-xl text-sm leading-relaxed text-gray-500 md:text-base [&>p+p]:mt-4;
  }
  .paragraph-xs {
    @apply max-w-md text-xs leading-normal text-gray-500 md:text-sm [&>p+p]:mt-3;
  }
  .button,
  .button-secondary {
    @apply relative inline-flex min-w-fit cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap rounded-md px-4 py-3 text-sm font-medium leading-4 transition-all duration-100 f:outline-none f:ring-2 f:ring-accent-contrast/80 f:ring-offset-2;
  }
  .button:not(.button-secondary) {
    @apply border border-accent/80 bg-accent text-accent-contrast shadow-accent/25 h:bg-accent/70;
  }
  .button-secondary {
    @apply border border-accent/30 bg-gray-400/[0.04] text-gray-600 backdrop-blur-md hfa:border-accent/60 hfa:bg-gray-400/[0.07] hfa:text-gray-900;
  }
  .form-label {
    @apply mb-1.5 flex h-5 text-sm text-gray-700;
  }
  .form-input {
    @apply relative w-full rounded border border-gray-200 bg-bg py-2 pl-3 pr-10 text-left text-sm text-gray-600 placeholder-gray-400/60 transition-colors hfva:ring-transparent fa:border-gray-900 h:border-gray-400 f:h:border-gray-900;
  }
  .card {
    @apply rounded-md border border-gray-200 bg-bg p-3.5 transition-[border-color] hfa:border-gray-400/60;
  }
  .section {
    @apply mx-auto w-full max-w-8xl px-[var(--section-padding)];
  }
}
@layer base {
  :root {
    @apply [--section-padding:1rem] sm:[--section-padding:2rem] lg:[--section-padding:4rem];
  }
}
@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    background: transparent;
    width: 0;
    height: 0;
  }
}/*# sourceMappingURL=typography.css.map */