.cd-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  min-height:min(88vh,820px);
  padding-block:88px;
  overflow:clip
}

.cd-hero__background {
  position:absolute;
  inset:0;
  z-index:-2;
  background:#000
}

.cd-hero__background img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:82% center;
  opacity:.82
}

.cd-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,var(--cd-bg) 0%,rgb(8 9 11 / 83%) 34%,rgb(8 9 11 / 40%) 60%,transparent),linear-gradient(0deg,var(--cd-bg),transparent 38%)
}

.cd-hero__inner {
  position:relative
}

.cd-hero h1 {
  max-width:750px
}

.cd-hero h1 span {
  color:var(--cd-accent)
}

.cd-hero .cd-eyebrow {
  margin-bottom:22px
}

.cd-hero__description {
  max-width:490px;
  margin-top:26px;
  color:var(--cd-muted);
  font-size:clamp(17px,1.8vw,21px);
  line-height:1.65
}

.cd-hero__actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:36px
}

@media(max-width:767px) {
  .cd-hero {
    min-height:76svh;
    align-items:end;
    padding-block:120px 56px
  }
  .cd-hero__background img {
    object-position:64% center;
    opacity:.65
  }
  .cd-hero::after {
    background:linear-gradient(180deg,rgb(8 9 11 / 20%),rgb(8 9 11 / 68%) 45%,var(--cd-bg))
  }
  .cd-hero h1 {
    font-size:clamp(38px,8vw,56px)
  }
  .cd-hero__description {
    max-width:520px
  }
  .cd-hero__actions {
    gap:20px
  }
  .cd-hero__actions .cd-app-meta {
    font-size:12px
  }
}