.hero {
  position: relative;
  /* Hero's button uses its own slower ramp token (see decisions.md). */
  --button-cta-font-size: var(--font-size-button-l);
}

.hero__layout--mobile,
.hero__layout--desktop {
  padding-top: var(--header-height);
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .hero__layout--mobile,
  .hero__layout--desktop {
    padding-top: var(--header-height-mobile);
    padding-inline: var(--section-padding-x-mobile);
  }
}

.hero__layout--mobile {
  display: none;
}

.hero__layout--desktop {
  display: flex;
  flex-direction: row;

  align-items: flex-start;

  justify-content: center;

  gap: clamp(10px, calc(-0.405px + 1.48649vw), 21px);
  padding-bottom: var(--section-spacing);
}

.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 112px;

  flex: 0 1 650px;
  min-width: 580px;
  padding: clamp(30px, calc(26.29px + 0.952vw), 40px)
           clamp(30px, calc(18.86px + 2.857vw), 60px)
           clamp(30px, calc(18.86px + 2.857vw), 60px);
  background: var(--color-cards-bg);
  border-radius: var(--radius-big);
}

@media (max-width: 988px) {
  .hero__card {
    border-radius: var(--radius-big-mobile);
  }
}

.hero__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  gap: 112px;
}

.hero__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 4px;
}
.hero__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 15px;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-label-m);
  white-space: nowrap;
}
.hero__tag--accent {
  background: var(--color-accent);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
  color: var(--color-text);
}
.hero__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h1-hero);
  line-height: 0.97;
  letter-spacing: -0.01em;
}
.hero__body {
  margin: 0;
  width: 100%;
  max-width: 456px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero);
  line-height: 1.4;
}

.hero__actions {
  position: relative;
  width: 100%;
}

.hero__illustration {
  position: absolute;
  left: 20px;
  top: -59px;
  width: 132px;
  height: 71px;
  pointer-events: none;
}
.hero__illustration img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__video {
  flex: 1 1 300px;
  min-width: 280px;

  min-height: 0;
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .hero__layout--desktop {
    flex-direction: column;
  }
  .hero__card {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .hero__video {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: none;

    aspect-ratio: auto;

    height: auto;
  }
}

@media (max-width: 700px) {
  .hero__layout--desktop {
    display: none;
  }
  .hero__layout--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    padding-bottom: var(--section-spacing);
  }

  .hero__card {
    align-items: flex-start;
  }
  .hero__card-top {
    align-items: flex-start;

    gap: 36px;
  }
  .hero__text {
    align-items: flex-start;
    text-align: left;
  }

  .hero__badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero__badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    padding: 8px min(16px, 4.103vw);
    border-radius: 54px;
    background: #ffffff;
    color: #0f0f10;
    font-family: var(--font-primary);
    font-weight: 400;

    font-size: clamp(12px, 3.59vw, 14px);
    white-space: nowrap;
  }
  .hero__badge--wide {
    flex: none;
    width: 100%;
    padding: 8px min(10px, 2.564vw);
  }
}