:root {
  --hm-black: #030303;
  --hm-dark: #07110d;
  --hm-green: #5ee6b4;
  --hm-greenDark: #28b987;
  --hm-white: #ffffff;
  --hm-page: #f4f1ea;
  --hm-text: #111815;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--hm-page);
    color:var(--hm-text);
    overflow-x:hidden;
}

/* ==========================
   HEADER SCROLL
========================== */

#site-header{
    transition:
        padding .35s ease,
        transform .35s ease;
}

#site-header.is-scrolled{
    padding-top:.55rem;
    padding-bottom:.55rem;
}

/* ==========================
   MOBILE MENU
========================== */

.navbar-menu.is-open{
    display:flex;
}

.nav-dropdown.is-open .dropdown-menu{
    display:block;
}

.nav-dropdown.is-open .dropdown-arrow{
    transform:rotate(180deg);
}

.mobile-menu-btn{
    gap:4px;
}

.mobile-menu-btn span{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:999px;
    opacity:1;
    transition:
        transform .28s ease,
        opacity .28s ease;
    transform-origin:center;
}

.navbar.mobile-open .mobile-menu-btn span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.navbar.mobile-open .mobile-menu-btn span:nth-child(2){
    opacity:0;
}

.navbar.mobile-open .mobile-menu-btn span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

@media (min-width:1024px){

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0) scale(1);
    }

    .nav-dropdown:hover .dropdown-arrow,
    .nav-dropdown:focus-within .dropdown-arrow{
        transform:rotate(180deg);
    }

}

/* ==========================
   SCROLL / LANDING ANIMATIONS
========================== */

.reveal,
.reveal-item,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal,
.reveal-item {
  transform: translateY(22px);
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .55s cubic-bezier(.22, 1, .36, 1);
}

.reveal-scale {
  transform: translateY(18px) scale(.975);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1),
    transform .6s cubic-bezier(.22, 1, .36, 1);
}

.reveal.visible,
.reveal-item.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Desktop delays */
.delay-1 { transition-delay: .06s; }
.delay-2 { transition-delay: .12s; }
.delay-3 { transition-delay: .18s; }
.delay-4 { transition-delay: .24s; }
.delay-5 { transition-delay: .30s; }
.delay-6 { transition-delay: .36s; }

/* Mobile: faster delays so animations don't feel late */
@media (max-width: 767px) {
  .reveal,
  .reveal-item {
    transform: translateY(16px);
    transition-duration: .45s;
  }

  .reveal-scale {
    transform: translateY(14px) scale(.985);
    transition-duration: .48s;
  }

  .delay-1 { transition-delay: .03s; }
  .delay-2 { transition-delay: .06s; }
  .delay-3 { transition-delay: .09s; }
  .delay-4,
  .delay-5,
  .delay-6 { transition-delay: .12s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-item,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* ==========================
   REDUCED MOTION
========================== */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }

}
@media (max-width: 767px) {
  .reveal,
  .reveal-item,
  .reveal-scale {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}
@media (max-width: 767px) {
  #site-header .navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(2, 3, 2, 0.97) !important;
  }
}
@media (max-width: 767px) {
  .blur-3xl {
    filter: blur(20px) !important;
  }

  .shadow-2xl {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important;
  }
}