.features {
  position: relative;
  height: 1288px;
  overflow: hidden;
  background: var(--color-dark);
}

.features__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 1288px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 100%),
    #020307;
}

.features__layer {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.features__glow {
  left: 0; top: 0; width: 1440px; height: 1288px;
  mix-blend-mode: lighten;
}
.features__svg {
  left: 0; top: 0; width: 1417px; height: 1288px;
}

.features__fade-top {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 280px;
  background: linear-gradient(180deg, #020307 0%, rgba(2, 3, 7, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.features__fade-bottom {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 260px;
  background: linear-gradient(180deg, rgba(2, 3, 7, 0) 0%, #020307 100%);
  pointer-events: none;
  z-index: 0;
}

.features__phone--left  { --ph-h: 566px; }
.features__phone--right { --ph-h: 583px; }

.features__phone--left,
.features__phone--right {
  height: var(--ph-h);
  pointer-events: auto;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translate3d(
    calc(var(--mx, 0) * var(--ph-depth, 18px)),
    calc(var(--shift, 0px) + var(--my, 0) * var(--ph-depth, 18px)),
    0);
}
.features__phone--left.is-hovered,
.features__phone--right.is-hovered { transition-duration: 0.15s; }

.features__phone--left {
  width: calc(var(--ph-h) * 0.6343);
  left: calc(445.57px - var(--ph-h) * 0.31715);
  top:  calc(713.63px - var(--ph-h) * 0.5);
}

.features__phone--right {
  width: calc(var(--ph-h) * 0.6604);
  left: calc(933.14px - var(--ph-h) * 0.3302);
  top:  calc(947.75px - var(--ph-h) * 0.5);
}

.features__card {
  position: absolute;
  z-index: 1;
}
.features__card--live     { left: 88px;      top: 500.95px; }
.features__card--heatmaps { left: 230.9px;   top: 211.38px; }
.features__card--h2h      { left: 598.4px;   top: 88.95px; }
.features__card--leagues  { left: 965.9px;   top: 211.38px; }
.features__card--clubs    { left: 1108.42px; top: 500.95px; }

.features__glow         { z-index: 0; }
.features__svg          { z-index: 0; }
.features__phone--left  { z-index: 2; }
.features__phone--right { z-index: 3; }

.features__card--clubs .feature-card { padding-inline: 24px; }

.features__card--h2h .feature-card { gap: 10px; }

.features__mobile-bg,
.features__mobile-svg,
.features__mobile-phone {
  display: none;
}

@media (max-width: 767px) {
  .features {
    height: 1158px;
    overflow: hidden;
  }

  .features__stage {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: 100%;

    min-height: 1158px;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 48px 16px;
  }

  .features__glow,
  .features__svg,
  .features__phone--left,
  .features__phone--right {
    display: none;
  }

  .features__fade-top,
  .features__fade-bottom {
    display: none;
  }

  .features__mobile-bg,
  .features__mobile-svg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    object-position: center calc(50% - 164px);
    pointer-events: none;
    z-index: 0;
  }

  .features__mobile-phone {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 2;
  }
  .features__mobile-phone--left {
    left: -11px;
    top: 802px;
    width: 151px;
    height: 238px;
  }
  .features__mobile-phone--right {
    left: 189px;
    top: 857px;
    width: 189px;
    height: 286px;
  }

  .features__fade-bottom {
    top: 898px;
    bottom: auto;
  }

  .features__card,
  .features__card--live,
  .features__card--heatmaps,
  .features__card--h2h,
  .features__card--leagues,
  .features__card--clubs {
    position: static;
    left: auto;
    top: auto;
  }

  .features__card--clubs .feature-card { padding-inline: 16px; }
  .features__card--h2h .feature-card { gap: 12px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .features {
    height: auto;
    overflow: hidden;
  }

  .features__stage {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 24px);
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 56px);
  }

  .features__glow,
  .features__svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    max-width: none;
  }

  .features__phone--left,
  .features__phone--right {
    display: none;
  }

  .features__card,
  .features__card--live,
  .features__card--heatmaps,
  .features__card--h2h,
  .features__card--leagues,
  .features__card--clubs {
    position: static;
    left: auto;
    top: auto;
  }

  .features__card--clubs {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }
  .features__card--clubs .feature-card {
    width: 100%;
    max-width: 380px;
  }
}