/* Depth pass for the sections below the hero. */
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top-color: rgba(214, 191, 245, .11);
}

.section::before,
.section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.proposal {
  background:
    radial-gradient(760px 440px at 78% 18%, rgba(135, 92, 210, .20), transparent 69%),
    radial-gradient(580px 350px at 8% 92%, rgba(93, 183, 164, .08), transparent 75%),
    linear-gradient(145deg, #231830 0%, #1b1327 72%, #19111f 100%);
  box-shadow: inset 0 1px rgba(239, 225, 255, .035), inset 0 -40px 90px rgba(6, 2, 12, .18);
}

.proposal::before {
  width: 600px;
  height: 600px;
  right: -310px;
  top: -300px;
  border: 1px solid rgba(198, 166, 255, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(182, 143, 250, .025), 0 0 0 125px rgba(182, 143, 250, .018);
}

.proposal::after {
  width: min(86vw, 1170px);
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(206, 180, 243, .28), transparent);
}

.path-flow {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(219, 196, 246, .085);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: 0 28px 62px rgba(5, 2, 10, .22), inset 0 1px rgba(255, 255, 255, .035);
}

.path-flow article {
  position: relative;
  overflow: hidden;
  border-color: rgba(221, 199, 248, .17);
  background: linear-gradient(145deg, rgba(48, 35, 65, .95), rgba(25, 17, 37, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 16px 30px rgba(5, 2, 10, .16);
}

.path-flow article::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  top: -95px;
  right: -62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 178, 255, .15), transparent 67%);
}

.path-flow article:nth-of-type(2) {
  border-color: rgba(224, 200, 255, .55);
  background: linear-gradient(145deg, #906dde, #6647a8 92%);
  box-shadow: 0 22px 46px rgba(91, 55, 158, .40), inset 0 1px rgba(255, 255, 255, .24);
}

.path-flow > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid rgba(199, 166, 242, .2);
  border-radius: 50%;
  background: rgba(32, 21, 45, .72);
  box-shadow: 0 8px 18px rgba(6, 3, 11, .25);
}

.disclaimer {
  padding: 12px 16px;
  border: 1px solid rgba(196, 165, 235, .11);
  border-radius: 12px;
  background: rgba(11, 7, 17, .18);
}

.audiences {
  background:
    radial-gradient(620px 430px at 88% 8%, rgba(120, 82, 188, .16), transparent 72%),
    linear-gradient(135deg, #15101d 0%, #1d1429 53%, #16101f 100%);
  box-shadow: inset 0 38px 70px rgba(5, 3, 9, .16), inset 0 -38px 65px rgba(5, 3, 9, .16);
}

.audiences::before {
  width: 520px;
  height: 520px;
  left: -330px;
  bottom: -320px;
  border: 1px solid rgba(189, 155, 239, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(189, 155, 239, .018), 0 0 0 112px rgba(189, 155, 239, .014);
}

.audience-grid {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(221, 199, 248, .075);
  border-radius: 31px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005));
  box-shadow: 0 28px 64px rgba(5, 2, 10, .22), inset 0 1px rgba(255, 255, 255, .03);
}

.audience-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(218, 194, 245, .16);
  background: linear-gradient(155deg, rgba(43, 31, 59, .96), rgba(25, 17, 37, .95));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 18px 32px rgba(4, 2, 9, .18);
}

.audience-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -92px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 146, 251, .16), transparent 67%);
  transition: transform .3s ease, opacity .3s ease;
}

.audience-card:hover {
  border-color: rgba(203, 175, 250, .56);
  background: linear-gradient(155deg, rgba(61, 43, 82, .98), rgba(28, 18, 41, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .085), 0 25px 46px rgba(4, 2, 9, .34), 0 0 0 1px rgba(197, 166, 248, .08);
}

.audience-card:hover::before { transform: scale(1.25); }
.audience-card:nth-child(2)::before { background: radial-gradient(circle, rgba(121, 217, 195, .13), transparent 67%); }
.audience-card:nth-child(3)::before { background: radial-gradient(circle, rgba(154, 111, 224, .20), transparent 67%); }
.audience-card h3,.audience-card p,.audience-card b,.audience-card .card-tag { position: relative; }

.build-section {
  background:
    radial-gradient(660px 420px at 11% 37%, rgba(129, 87, 199, .16), transparent 72%),
    linear-gradient(145deg, #261b34 0%, #1b1328 72%, #21162e 100%);
  box-shadow: inset 0 1px rgba(246, 232, 255, .04), inset 0 -40px 80px rgba(4, 1, 9, .18);
}

.build-section::before {
  width: 760px;
  height: 250px;
  right: -260px;
  bottom: -170px;
  border: 1px solid rgba(195, 158, 247, .1);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.build-steps {
  padding: 14px;
  border: 1px solid rgba(219, 196, 246, .09);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .008));
  box-shadow: 0 24px 55px rgba(5, 2, 11, .22), inset 0 1px rgba(255, 255, 255, .035);
}

.build-steps li {
  min-height: 190px;
  border-color: rgba(219, 196, 246, .12);
  background: linear-gradient(155deg, rgba(38, 28, 52, .78), rgba(24, 16, 36, .76));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.build-steps li:first-child { border-radius: 16px 0 0 16px; }
.build-steps li:last-child {
  border-radius: 0 16px 16px 0;
  border-color: rgba(205, 177, 247, .36);
  background: linear-gradient(145deg, #5c3f92, #3e2b65);
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 14px 28px rgba(59, 35, 100, .26);
}

.interest {
  background:
    radial-gradient(690px 480px at 50% 45%, rgba(118, 80, 183, .4), transparent 67%),
    linear-gradient(180deg, #171020, #120d18 100%);
}

.interest::before {
  width: 760px;
  height: 760px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(202, 174, 243, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(202, 174, 243, .018), 0 0 0 140px rgba(202, 174, 243, .012);
}

.form-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(232, 218, 255, .42);
  background: linear-gradient(135deg, #9a76df 0%, #7654bb 53%, #563d93 100%);
  box-shadow: 0 38px 95px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .32), inset 0 -34px 72px rgba(47, 23, 94, .22);
}

.form-card::after {
  content: "";
  position: absolute;
  width: 370px;
  height: 370px;
  top: -230px;
  right: -130px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .035), 0 0 0 110px rgba(255, 255, 255, .022);
}

.form-intro, .form-card form { position: relative; z-index: 1; }

@media(max-width:820px) {
  .path-flow,.audience-grid,.build-steps { padding: 12px; border-radius: 22px; }
  .path-flow > i { margin-left: 18px; }
  .build-steps li:first-child,.build-steps li:last-child { border-radius: 13px; }
}