/* Option 3: soft curved layers and diffuse brand-color light. */
.home-intro {
  position: relative;
  isolation: isolate;
  /* Clip decorative curves without creating an internally scrollable ancestor. */
  overflow: clip;
  background:
    radial-gradient(ellipse at 92% 12%, rgba(250, 138, 5, .18), transparent 36%),
    radial-gradient(ellipse at 5% 65%, rgba(5, 117, 250, .09), transparent 42%),
    #f3f5f7;
}

.home-intro::before,
.home-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.home-intro::before {
  width: 145%;
  height: 76%;
  top: -28%;
  left: -55%;
  background: linear-gradient(135deg, #fff 15%, #fafbfc 65%, #edf0f4);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 22px 32px 70px rgba(36, 53, 77, .045), 2px 8px 20px rgba(36, 53, 77, .035);
}

.home-intro::after {
  width: 115%;
  height: 65%;
  right: -48%;
  bottom: -27%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(229, 235, 243, .4));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: -20px -20px 65px rgba(36, 53, 77, .035);
}

.home-intro .hero,
.home-intro .services {
  background: transparent;
}

.home-intro .service-card {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 3px 8px rgba(36, 53, 77, .035), 0 20px 44px -20px rgba(36, 53, 77, .23);
}

.home-intro .service-card:hover {
  border-color: rgba(250, 138, 5, .3);
  box-shadow: 0 6px 12px rgba(36, 53, 77, .04), 0 28px 48px -18px rgba(36, 53, 77, .27);
}

@media (max-width: 600px) {
  .home-intro {
    background:
      radial-gradient(ellipse at 100% 18%, rgba(250, 138, 5, .14), transparent 26%),
      radial-gradient(ellipse at 0% 60%, rgba(5, 117, 250, .08), transparent 35%),
      #f3f5f7;
  }

  .home-intro::before {
    width: 210%;
    height: 34%;
    top: -10%;
    left: -115%;
  }

  .home-intro::after {
    width: 180%;
    height: 38%;
    right: -110%;
    bottom: -12%;
  }
}

/* One continuous orange layer spans both sections. */
.home-people {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse at 95% 8%, rgba(5, 117, 250, .055), transparent 42%),
    linear-gradient(180deg, #f7f8fa, #edf1f5 70%, #f7f8fa);
}

.home-people::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 150%;
  height: 48%;
  top: 24%;
  left: -25%;
  border-radius: 50%;
  transform: rotate(-12deg);
  background:
    radial-gradient(ellipse at 25% 20%, rgba(255, 230, 190, .4), transparent 60%),
    linear-gradient(120deg, #ffac38, #fa8a05 55%, #ef8007);
  box-shadow: 0 26px 65px -28px rgba(158, 85, 0, .24), inset 0 2px 0 rgba(255, 255, 255, .3);
}

.home-people #sobre,
.home-people #depoimentos {
  background: transparent;
}

.home-people #sobre::before,
.home-people #depoimentos::before {
  content: none;
}

.home-people .about-copy > p:not(.eyebrow),
.home-people .section-heading > p {
  color: #383838;
}

.home-people #depoimentos .section-heading .eyebrow,
.home-people #sobre .eyebrow {
  color: #713500;
}

.home-people .testimonial {
  box-shadow: 0 18px 38px -22px rgba(30, 45, 65, .22);
}

@media (max-width: 900px) {
  .home-people::before {
    width: 190%;
    left: -45%;
    top: 22%;
    height: 55%;
    transform: rotate(-9deg);
  }
}

@media (max-width: 600px) {
  .home-people::before {
    width: 240%;
    left: -70%;
    top: 19%;
    height: 60%;
    transform: rotate(-7deg);
  }
}
