.customer-hero {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  padding: 40px 80px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: radial-gradient(circle at 90% 10%, rgba(202, 242, 114, 0.16), transparent 22%), linear-gradient(135deg, #7038e8 0%, #8d52fb 57%, #7b44f2 100%);
  border-radius: 0 0 64px 64px;
}

.customer-hero .customer-logo {
  position: absolute;
  z-index: 7;
  top: 40px;
  left: 80px;
}

.customer-hero__content {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: max(80px, (100vw - 1996px) / 2);
  width: min(1191px, 47vw);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
}

.customer-hero__content h1 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: normal;
  font-size: clamp(40px, 32.9411764706px + 1.9607843137vw, 48px);
  font-weight: 700;
}
@media (min-width: 768px) {
  .customer-hero__content h1 {
    font-size: clamp(48px, 29.7142857143px + 2.380952381vw, 64px);
  }
}
@media (min-width: 1440px) {
  .customer-hero__content h1 {
    font-size: clamp(64px, 16px + 3.3333333333vw, 80px);
  }
}
@media (min-width: 1920px) {
  .customer-hero__content h1 {
    font-size: clamp(80px, 32px + 2.5vw, 96px);
  }
}

.customer-hero__content p {
  margin: 20px 0 0;
  color: #f2f2f2;
  line-height: 1.3;
  font-size: clamp(18px, 16.2352941176px + 0.4901960784vw, 20px);
  font-weight: 400;
}
@media (min-width: 768px) {
  .customer-hero__content p {
    font-size: clamp(20px, 15.4285714286px + 0.5952380952vw, 24px);
  }
}
@media (min-width: 1440px) {
  .customer-hero__content p {
    font-size: clamp(24px, 0px + 1.6666666667vw, 32px);
  }
}
@media (min-width: 1920px) {
  .customer-hero__content p {
    font-size: clamp(32px, 8px + 1.25vw, 40px);
  }
}

.customer-hero__content .customer-button {
  min-height: 0;
  padding: 12px 32px;
  margin-top: 32px;
  border-radius: 12px;
  box-shadow: none;
  font-size: 20px;
  line-height: 1.3;
}

.customer-hero__decorations {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.customer-hero__decoration {
  position: absolute;
  display: block;
  overflow: hidden;
  background-image: url("../assets/customer/hero-decorations.webp");
  background-repeat: no-repeat;
}

.customer-hero__decoration--primary {
  top: 12.5%;
  left: 58.7%;
  width: 120px;
  height: 135px;
  background-position: -216px -15px;
  background-size: 887px 729px;
}

.customer-hero__decoration--right {
  top: 37.38%;
  right: 1.5%;
  width: 140px;
  height: 156px;
  background-position: -828px -262px;
  background-size: 1121px 921px;
}

.customer-hero__decoration--small {
  bottom: 14%;
  left: 44%;
  width: 44px;
  height: 48px;
  background-position: -9px -375px;
  background-size: 641px 527px;
}

.customer-hero__decoration--blob {
  right: -5.7%;
  bottom: -1%;
  width: 280px;
  height: 316px;
  background-position: -567px -378px;
  background-size: 853px 702px;
}

.customer-hero__visual {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: calc(50% + 20.46vw);
  width: clamp(393.333px, 9.8032941176px + 106.5360294118vw, 828px);
  height: auto;
  max-width: none;
  pointer-events: none;
  transform: translate3d(-50%, var(--customer-hero-parallax-y, 0), 0);
  will-change: transform;
}

.customer-hero__messages {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.customer-hero__message {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.customer-hero__message--request {
  bottom: 145px;
  right: 25.5%;
  width: 28.75%;
}

.customer-hero__message--response {
  bottom: 115px;
  right: 39.83%;
  width: 29.06%;
}

.customer-ribbon {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.customer-ribbon--top {
  top: -39px;
  right: -30px;
  width: 220px;
}

.customer-ribbon--bottom {
  top: 76%;
  bottom: auto;
  left: -39%;
  width: 457px;
}

.customer-hero .customer-logo {
  animation: customer-hero-logo-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both;
}

.customer-hero__content > * {
  animation: customer-hero-content-in 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.customer-hero__content h1 {
  animation-delay: 120ms;
}

.customer-hero__content p {
  animation-delay: 220ms;
}

.customer-hero__content .customer-button {
  animation-delay: 340ms;
}

.customer-hero__decoration {
  animation: customer-hero-decor-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.customer-hero__decoration--primary {
  animation-delay: 260ms;
}

.customer-hero__decoration--right {
  animation-delay: 360ms;
}

.customer-hero__decoration--small {
  animation-delay: 460ms;
}

.customer-hero__decoration--blob {
  animation-delay: 180ms;
}

.customer-hero__visual {
  animation: customer-hero-person-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.customer-ribbon--top {
  animation: customer-hero-ribbon-top-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 280ms both;
}

.customer-ribbon--bottom {
  animation: customer-hero-ribbon-bottom-in 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 380ms both;
}

.customer-hero__messages {
  animation: customer-hero-messages-in 700ms ease-out 620ms both;
}

.customer-hero__message--request {
  animation: customer-hero-message-request-float 4.8s ease-in-out 1.1s infinite;
}

.customer-hero__message--response {
  animation: customer-hero-message-response-float 5.4s ease-in-out 400ms infinite;
}

@keyframes customer-hero-logo-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes customer-hero-content-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes customer-hero-decor-in {
  from {
    opacity: 0;
    transform: scale(0.78);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes customer-hero-person-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, calc(var(--customer-hero-parallax-y, 0px) + 36px), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, var(--customer-hero-parallax-y, 0px), 0);
  }
}

@keyframes customer-hero-ribbon-top-in {
  from {
    opacity: 0;
    transform: translate3d(28px, -24px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes customer-hero-ribbon-bottom-in {
  from {
    opacity: 0;
    transform: translate3d(-36px, 24px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes customer-hero-messages-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes customer-hero-message-request-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(7px, -8px, 0) rotate(0.45deg);
  }
}

@keyframes customer-hero-message-response-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(-6px, 7px, 0) rotate(-0.4deg);
  }
}
@media (min-width: 481px) {
  .customer-hero__content {
    top: calc(50% - 114px);
    left: 24px;
    width: calc(100% - 48px);
  }
  .customer-hero__visual {
    left: calc(50% + 25.91vw);
    width: clamp(828px, 625.7142857143px + 26.3392857143vw, 1005px);
  }
  .customer-hero__message--request {
    top: 64.06%;
    right: 50.49%;
    width: 32.76%;
  }
  .customer-hero__message--response {
    top: 71.57%;
    right: 39.86%;
    width: 33.31%;
  }
  .customer-ribbon--top {
    top: -70px;
    right: -50px;
    width: 400px;
  }
  .customer-ribbon--bottom {
    top: 55%;
    bottom: auto;
    left: -25%;
    width: 501px;
  }
}

@media (min-width: 901px) {
  .customer-hero__content {
    top: 50%;
    left: max(80px, (100vw - 1996px) / 2);
    width: clamp(758px, 422px + 23.3333333333vw, 870px);
  }
  .customer-hero__visual {
    left: calc(50% + clamp(321.5px, 2.39px + 22.1604166667vw, 427.87px));
    width: clamp(1005px, -126.969px + 78.6089583333vw, 1382.323px);
  }
  .customer-hero__message--request {
    top: 63.12%;
    right: 27.23%;
    width: 320px;
  }
  .customer-hero__message--response {
    top: 71.75%;
    right: 35.06%;
    width: 320px;
  }
  .customer-ribbon--top {
    top: -8%;
    right: -6%;
    width: 600px;
  }
  .customer-ribbon--bottom {
    top: 53%;
    bottom: 10%;
    left: 0%;
    width: 500px;
  }
}
@media (min-width: 1920px) {
  .customer-hero__content {
    width: clamp(870px, -93px + 50.15625vw, 1191px);
  }
  .customer-hero__content .customer-button {
    padding: clamp(12px, 0px + 0.625vw, 16px) clamp(32px, -16px + 2.5vw, 48px);
    margin-top: clamp(32px, 8px + 1.25vw, 40px);
    border-radius: clamp(12px, -12px + 1.25vw, 20px);
    font-size: clamp(24px, 0px + 1.25vw, 32px);
  }
  .study-customer .customer-hero__visual {
    left: calc(50% + clamp(427.87px, -0.02px + 22.2859375vw, 570.5px));
    width: clamp(1382.323px, 0.001px + 71.9959375vw, 1843.097px);
    max-width: 132svh;
  }
  .customer-hero__message--request {
    top: 48.57%;
    right: 27.25%;
    width: 16.14%;
  }
  .customer-hero__message--response {
    top: 57.36%;
    right: 35.33%;
    width: 16.39%;
  }
  .customer-ribbon--top {
    top: -12%;
    width: 800px;
  }
  .customer-ribbon--bottom {
    top: 25%;
    left: 0;
    width: 800px;
  }
}
@media (max-width: 1440px) {
  .customer-hero {
    padding: 32px 80px;
    border-radius: 0 0 40px 40px;
  }
  .customer-hero .customer-logo {
    top: 32px;
  }
}
@media (min-width: 1441px) and (max-width: 1919px) {
  .customer-hero {
    border-radius: 0 0 56px 56px;
  }
  .customer-hero__content .customer-button {
    font-size: clamp(20px, 8px + 0.8333333333vw, 24px);
  }
}
@media (max-width: 768px) {
  .customer-hero {
    padding: 28px 24px;
  }
  .customer-hero .customer-logo {
    top: 28px;
    left: 24px;
  }
  .customer-hero__decoration--primary {
    top: 5.5%;
    left: 50%;
    width: 82px;
    height: 92px;
    background-position: -148px -10px;
    background-size: 607px 499px;
  }
  .customer-hero__decoration--right {
    top: 36%;
    right: -4%;
    width: 88px;
    height: 98px;
    background-position: -520px -164px;
    background-size: 704px 578px;
  }
  .customer-hero__decoration--small {
    bottom: 8%;
    left: 37%;
  }
  .customer-hero__decoration--blob {
    right: -20%;
    bottom: 3%;
    width: 220px;
    height: 248px;
    background-position: -445px -297px;
    background-size: 670px 552px;
  }
}
@media (max-width: 480px) {
  .customer-hero {
    min-height: 700px;
    padding: 24px 16px;
    border-radius: 0 0 24px 24px;
  }
  .customer-hero .customer-logo {
    top: 24px;
    left: 16px;
  }
  .customer-hero__content {
    top: calc(50% - 87.5px);
    left: 16px;
    width: calc(100% - 32px);
  }
  .customer-hero__content h1 {
    line-height: 1.3;
  }
  .customer-hero__content p {
    margin-top: 16px;
  }
  .customer-hero__content .customer-button {
    padding: 12px 32px;
    margin-top: 24px;
    font-size: 16px;
  }
  .customer-hero__decoration--primary {
    top: 6%;
    left: 58%;
    width: 50px;
    height: 56px;
    background-position: -90px -6px;
    background-size: 370px 304px;
  }
  .customer-hero__decoration--right {
    top: 42%;
    right: -3%;
    width: 54px;
    height: 60px;
    background-position: -319px -101px;
    background-size: 432px 355px;
  }
  .customer-hero__decoration--small {
    bottom: 8%;
    left: 19%;
    width: 36px;
    height: 39px;
    background-position: -7px -307px;
    background-size: 523px 430px;
  }
  .customer-hero__decoration--blob {
    right: -43%;
    bottom: 11%;
    width: 180px;
    height: 203px;
    background-position: -365px -244px;
    background-size: 549px 452px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .customer-hero .customer-logo,
  .customer-hero__content > *,
  .customer-hero__decoration,
  .customer-hero__visual,
  .customer-ribbon,
  .customer-hero__messages,
  .customer-hero__message {
    opacity: 1;
    animation: none;
  }

  .customer-hero__visual {
    transform: translate3d(-50%, 0, 0);
  }

  .customer-hero__message {
    transform: none;
  }
}