#blm-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  cursor: pointer;
  background: #111214;
  border-radius: 10px 0 0 10px;
  box-shadow: -3px 0 18px rgb(232 25 75 / .4), -1px 0 0 rgb(232 25 75 / .25);
  padding: 14px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.25s, box-shadow 0.25s;
  opacity: 0;
  pointer-events: none
}

#blm-tab img {
  width: 118px;
  height: auto;
  display: block
}

#blm-tab:hover {
  background: #1a1a1f;
  transform: translateY(-50%) translateX(-3px);
  box-shadow: -5px 0 26px rgb(232 25 75 / .65)
}

#blm-tab.visible {
  opacity: 1;
  pointer-events: auto;
  animation: blmTabPulse 2.5s ease-in-out infinite
}

@keyframes blmTabPulse {

  0%,
  100% {
    box-shadow: -3px 0 18px rgb(232 25 75 / .4), -1px 0 0 rgb(232 25 75 / .25)
  }

  50% {
    box-shadow: -6px 0 28px rgb(232 25 75 / .75), -1px 0 0 rgb(232 25 75 / .4)
  }
}

#blm-banner {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  z-index: 8999;
  width: 320px;
  max-width: calc(100vw - 44px);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -6px 0 50px rgb(0 0 0 / .9), -1px 0 0 rgb(232 25 75 / .35);
  transition: transform 0.75s cubic-bezier(.22, 1, .36, 1)
}

#blm-banner.open {
  transform: translateY(-50%) translateX(0%)
}

#blm-banner .blm-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / .55);
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
  z-index: 10
}

#blm-banner .blm-close:hover {
  background: rgb(232 25 75 / .35);
  color: #fff
}

#blm-banner .blm-inner {
  background: #111214;
  position: relative;
  padding: 26px 22px 22px;
  border-left: 1px solid rgb(232 25 75 / .2)
}

#blm-banner .blm-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

#blm-banner .blm-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(232 25 75 / .15) 0%, transparent 70%);
  top: -80px;
  right: -60px
}

#blm-banner .blm-arch {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: .05
}

#blm-banner .blm-logo {
  margin-bottom: 18px;
  position: relative
}

#blm-banner .blm-divider {
  height: 1px;
  background: linear-gradient(90deg, rgb(232 25 75 / .6), rgb(232 25 75 / .1), transparent);
  margin-bottom: 16px
}

#blm-banner .blm-headline {
  font-size: 25px;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 5px
}

#blm-banner .blm-headline .acc {
  color: #ff335e
}

#blm-banner .blm-sub {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .38);
  margin-bottom: 18px
}

#blm-banner .blm-features {
  list-style: none;
  margin-bottom: 20px;
  padding: 0
}

#blm-banner .blm-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: .8rem;
  color: rgb(255 255 255 / .68);
  padding: 5px 0;
  border-bottom: 1px solid rgb(255 255 255 / .04)
}

#blm-banner .blm-features li:last-child {
  border-bottom: none
}

#blm-banner .blm-features li .mk {
  color: #ff335e;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 1px
}

#blm-banner .blm-cta {
  display: block;
  width: 100%;
  background: #ff335e;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 900;
  font-size: .83rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgb(232 25 75 / .4), inset 0 1px 0 rgb(255 255 255 / .1)
}

#blm-banner .blm-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent);
  transition: left 0.55s
}

#blm-banner .blm-cta:hover::before {
  left: 150%
}

#blm-banner .blm-cta:hover {
  background: #ff2257;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgb(232 25 75 / .55)
}

#blm-banner .blm-cta:active {
  transform: translateY(0)
}

#blm-banner .blm-foot {
  text-align: center;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: .66rem;
  color: rgb(255 255 255 / .18);
  margin-top: 10px;
  letter-spacing: .1em;
  text-transform: uppercase
}

#blm-banner.open .blm-headline {
  animation: blmIn 0.45s 0.15s ease both
}

#blm-banner.open .blm-sub {
  animation: blmIn 0.45s 0.22s ease both
}

#blm-banner.open .blm-features {
  animation: blmIn 0.45s 0.30s ease both
}

#blm-banner.open .blm-cta {
  animation: blmIn 0.45s 0.38s ease both
}

#blm-banner.open .blm-foot {
  animation: blmIn 0.45s 0.44s ease both
}

#blm-banner .blm-headline,
#blm-banner .blm-sub,
#blm-banner .blm-features,
#blm-banner .blm-cta,
#blm-banner .blm-foot {
  opacity: 0;
  transform: translateX(18px)
}

@keyframes blmIn {
  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@media (max-width:540px) {
  #blm-tab {
    top: auto;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    border-radius: 10px 10px 0 0;
    padding: 10px 18px;
    box-shadow: 0 -3px 18px rgb(232 25 75 / .4), 0 -1px 0 rgb(232 25 75 / .25)
  }

  #blm-tab img {
    transform: none;
    width: auto;
    height: 30px
  }

  #blm-tab:hover {
    transform: translateX(50%) translateY(-3px)
  }

  #blm-tab.visible {
    animation: blmTabPulseMob 2.5s ease-in-out infinite
  }

  @keyframes blmTabPulseMob {

    0%,
    100% {
      box-shadow: 0 -3px 18px rgb(232 25 75 / .4), 0 -1px 0 rgb(232 25 75 / .25)
    }

    50% {
      box-shadow: 0 -7px 28px rgb(232 25 75 / .75), 0 -1px 0 rgb(232 25 75 / .4)
    }
  }

  #blm-banner {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 40px rgb(0 0 0 / .9), 0 -1px 0 rgb(232 25 75 / .35);
    transition: transform 0.75s cubic-bezier(.22, 1, .36, 1);
    max-height: 88vh;
    overflow-y: auto
  }

  #blm-banner.open {
    transform: translateY(0%)
  }

  #blm-banner .blm-inner {
    border-left: none;
    border-top: 1px solid rgb(232 25 75 / .2);
    padding: 22px 20px 32px
  }

  #blm-banner .blm-logo img {
    height: 46px !important
  }

  #blm-banner .blm-headline {
    font-size: 2.1rem
  }

  #blm-banner .blm-features li {
    font-size: .85rem;
    padding: 8px 0
  }

  #blm-banner .blm-cta {
    padding: 17px 20px;
    font-size: .9rem
  }

  #blm-banner.open .blm-headline {
    animation: blmInMob 0.45s 0.15s ease both
  }

  #blm-banner.open .blm-sub {
    animation: blmInMob 0.45s 0.22s ease both
  }

  #blm-banner.open .blm-features {
    animation: blmInMob 0.45s 0.30s ease both
  }

  #blm-banner.open .blm-cta {
    animation: blmInMob 0.45s 0.38s ease both
  }

  #blm-banner.open .blm-foot {
    animation: blmInMob 0.45s 0.44s ease both
  }

  #blm-banner .blm-headline,
  #blm-banner .blm-sub,
  #blm-banner .blm-features,
  #blm-banner .blm-cta,
  #blm-banner .blm-foot {
    transform: translateY(14px)
  }

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