.hero--vps-depth {
  --vps-scene-x: 0px;
  --vps-scene-y: 0px;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 0;
  background: #eaf4ff;
}

.hero--vps-depth::before { z-index: -3; height: 100%; background: #eaf4ff; }

.vps-hero-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.vps-hero-scene::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: url("/dev-v2/page-assets/img/datacentre/vps-rack-aisle-hero.webp") center 50% / cover no-repeat;
  opacity: .82;
  transform: translate3d(var(--vps-scene-x), var(--vps-scene-y), 0) scale(1.025);
  transition: transform 520ms cubic-bezier(.2, .75, .25, 1);
  will-change: transform;
}

.vps-hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(231, 243, 255, .93) 0%, rgba(231, 243, 255, .84) 39%, rgba(220, 239, 255, .44) 67%, rgba(207, 232, 252, .22) 100%),
    linear-gradient(180deg, rgba(224, 241, 255, .12) 48%, #eaf4ff 100%);
}

.vps-hosting .hero--vps-depth .hero__wrapper { margin-right: 0; padding-bottom: 46px; }

.vps-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(500px, 1.04fr);
  align-items: center;
  gap: clamp(44px, 5vw, 78px);
}

.vps-hero-copy,
.vps-panel-wrap { min-width: 0; }
.vps-hosting .hero--vps-depth .hero__content { position: relative; }
.vps-hosting .hero--vps-depth .section__header { max-width: 670px; }
.vps-hosting .hero--vps-depth .section__title { max-width: 690px; }

.vps-hosting .hero--vps-depth .hero__thumb {
  max-width: 620px;
  margin-left: auto;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.vps-hosting .hero--vps-depth .hero__thumb:hover { transform: translateY(-3px); box-shadow: 0 32px 70px rgba(3, 25, 58, .28); }
.vps-hosting .hero--vps-depth .hero__lotus-img { display: none !important; }

.vps-hero-feature-strip {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}

.vps-hero-feature-strip__inner {
  display: grid;
  min-height: 104px;
  padding: 17px 24px;
  border-top: 4px solid #16b7e7;
  border-radius: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #06366f;
  box-shadow: 0 20px 44px rgba(4, 43, 86, .2);
}

.vps-hero-feature {
  display: flex;
  min-width: 0;
  padding: 0 22px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  align-items: center;
  gap: 13px;
}

.vps-hero-feature:first-child { padding-left: 4px; }
.vps-hero-feature:last-child { padding-right: 4px; border-right: 0; }

.vps-hero-feature > img {
  width: 31px;
  height: 31px;
  padding: 6px;
  border-radius: 5px;
  background: rgba(31, 190, 232, .18);
  filter: brightness(0) invert(1);
}

.vps-hero-feature > span { display: grid; min-width: 0; gap: 3px; }
.vps-hero-feature strong,
.vps-hero-feature small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vps-hero-feature strong { color: #fff; font-size: 15px; font-weight: 700; }
.vps-hero-feature small { color: #bcd2ea; font-size: 11px; }
.vps-hosting .infrastructure { padding-top: 92px; }

@media (min-width: 992px) {
  .hero--vps-depth { overflow: visible; }

  .vps-hosting .hero--vps-depth .hero__wrapper { padding-bottom: 104px; }

  .vps-hero-feature-strip {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(50%);
  }

  .vps-hosting .header__link {
    color: #0b315c;
    font-weight: 650;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  }

  .vps-hosting .header__menu-item:hover > .header__link,
  .vps-hosting .header__menu-item:focus-within > .header__link { color: #005eb7; }
}

@media (max-width: 1299px) {
  .vps-hero-layout { grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr); gap: 34px; }
  .vps-hero-feature { padding-inline: 14px; }
  .vps-hero-feature strong { font-size: 14px; }
}

@media (max-width: 991px) {
  .hero--vps-depth { background: #e9f5ff; }

  .vps-hero-scene {
    right: 0;
    bottom: auto;
    left: 0;
    height: 470px;
  }

  .vps-hero-scene::before {
    inset: -18px -28px 0;
    background-position: 69% 46%;
    opacity: .5;
    transform: none;
    transition: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .72) 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .72) 72%, transparent 100%);
  }

  .vps-hero-scene::after {
    background:
      linear-gradient(180deg, rgba(235, 246, 255, .62) 0%, rgba(235, 246, 255, .74) 50%, #e9f5ff 100%),
      linear-gradient(90deg, rgba(232, 245, 255, .9) 0%, rgba(225, 241, 255, .58) 58%, rgba(218, 238, 254, .36) 100%);
  }

  .vps-hosting .hero--vps-depth .hero__wrapper { padding-bottom: 54px; }

  .vps-hero-layout {
    display: flex;
    max-width: 720px;
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .vps-hero-copy { display: contents; }
  .vps-hero-copy .section__header { order: 1; }
  .vps-panel-wrap { order: 2; margin: 4px 0 28px; }
  .vps-hero-copy .hero__pricing { order: 3; }
  .vps-hero-copy .vps-hero-actions { order: 4; }

  .vps-hosting .hero--vps-depth .hero__thumb { max-width: 650px; margin-inline: auto; }
  .vps-hosting .hero--vps-depth .hero__thumb:hover { transform: none; }
  .vps-hosting .infrastructure { padding-top: 84px; }
}

@media (max-width: 575px) {
  .vps-hosting .hero--vps-depth .hero__wrapper { padding-bottom: 40px; }
  .vps-panel-wrap { margin: 0 0 22px; }
  .vps-hosting .hero--vps-depth .section__header { margin-bottom: 22px !important; }
  .vps-hosting .hero--vps-depth .hero__pricing { margin-bottom: 20px; }
  .vps-hosting .infrastructure { padding-top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .vps-hero-scene::before,
  .vps-hosting .hero--vps-depth .hero__thumb { transition: none; transform: none; }
  .vps-hero-scene::before { animation: none; }
}