.hero {
  position: relative;
  background-color: var(--lfr-bg-alt);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 60px;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--lfr-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.hero__content {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__title {
  font-family: var(--lfr-font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}
.hero__title span {
  color: #ff4fd8;
}
.hero__subtitle {
  color: #e9eaf3;
  font-family: var(--lfr-font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  max-width: 640px;
}
.hero__cta {
  align-self: flex-start;
  margin-top: 16px;
}

.hero__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.feature-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 5px 16px rgba(8, 15, 52, 0.08);
}
.feature-card__icon {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.feature-card__icon img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature-card__title {
  font-family: var(--lfr-font-body);
  font-weight: 700;
  font-size: 20px;
  color: #131420;
  line-height: 1.2;
}
.feature-card__text {
  font-family: var(--lfr-font-body);
  font-weight: 400;
  font-size: 15px;
  color: #131420;
  line-height: 1.45;
}

@media (max-width: 1023px) {
  .hero__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }
  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .hero__cta {
    align-self: center;
  }
}
@media (max-width: 1080px) and (min-width: 1024px) {
  .hero__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .feature-card {
    padding: 20px;
    gap: 14px;
  }
  .feature-card__icon {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }
  .feature-card__icon img {
    width: 60px;
    height: 60px;
  }
  .feature-card__title {
    font-size: 18px;
  }
  .feature-card__text {
    font-size: 14px;
  }
}
@media (max-width: 1023px) {
  .hero__features {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .hero {
    padding: 56px 16px 40px;
    background-position: 70% center;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(19, 20, 32, 0.35) 0%,
      rgba(19, 20, 32, 0.85) 100%
    );
  }
  .hero__inner {
    gap: 36px;
  }
  .hero__features {
    grid-template-columns: 1fr;
  }
  .feature-card {
    padding: 18px;
  }
}