.htl-hero-has-ip{
  position:relative !important;
  overflow:hidden !important;
}

.htl-hero-ip-wrap{
  position:absolute;
  right:clamp(18px,4vw,72px);
  bottom:clamp(8px,2vw,28px);
  z-index:8;
  pointer-events:none;
}

.htl-hero-ip-glow{
  position:absolute;
  inset:auto auto 6% 8%;
  width:min(22vw,260px);
  height:min(22vw,260px);
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,.52) 0%,
      rgba(151,205,255,.35) 26%,
      rgba(74,144,255,.22) 48%,
      rgba(74,144,255,0) 72%);
  filter:blur(10px);
  transform:translate(10%,8%);
}

.htl-hero-ip{
  position:relative;
  display:block;
  width:min(26vw,300px);
  max-width:300px;
  min-width:150px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 42px rgba(11,71,174,.22));
  transform:translateY(0);
  transition:transform .25s ease, filter .25s ease;
}

.htl-hero-ip-wrap:hover .htl-hero-ip{
  transform:translateY(-3px);
  filter:drop-shadow(0 22px 50px rgba(11,71,174,.28));
}

.htl-header-ip{
  width:44px;
  height:44px;
  margin-left:10px;
  border-radius:999px;
  object-fit:cover;
  background:rgba(255,255,255,.18);
  box-shadow:0 10px 26px rgba(10,39,92,.12);
  padding:4px;
  backdrop-filter:blur(10px);
  flex:0 0 auto;
}

.htl-brand-with-ip{
  display:flex !important;
  align-items:center !important;
}

@media (max-width: 1024px){
  .htl-hero-ip{
    width:min(28vw,220px);
    min-width:120px;
  }
}

@media (max-width: 768px){
  .htl-hero-ip-wrap{
    right:10px;
    bottom:10px;
  }

  .htl-hero-ip{
    width:118px;
    min-width:118px;
  }

  .htl-hero-ip-glow{
    width:110px;
    height:110px;
  }

  .htl-header-ip{
    width:34px;
    height:34px;
    margin-left:8px;
    padding:3px;
  }
}