/* Homepage marketing hero component. */

.homepage-marketing-hero {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--site-accent) 12%, transparent) 0 36%, transparent 36%),
    radial-gradient(ellipse at 72% 18%, color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 18%, transparent), transparent 34rem),
    linear-gradient(145deg, color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 86%, #070a10), #05070b 100%);
  color: var(--cc-neutral-white);
  min-height: min(52rem, calc(100svh - var(--navbar-height, 0px)));
  overflow: hidden;
  padding: clamp(8rem, 13vw, 12rem) 0 clamp(4rem, 8vw, 6.5rem);
  position: relative;
}

.homepage-marketing-hero__backdrop {
  background:
    linear-gradient(180deg, rgba(var(--cc-rgb-white), .055), transparent 42%),
    linear-gradient(90deg, rgba(var(--cc-rgb-white), .04), transparent 46%);
  inset: 0;
  opacity: .9;
  pointer-events: none;
  position: absolute;
}

.homepage-marketing-hero .container {
  position: relative;
  z-index: 1;
}

.homepage-marketing-hero__layout {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
}

.homepage-marketing-hero__content {
  max-width: 58rem;
}

.homepage-marketing-hero .section-eyebrow {
  background: rgba(var(--cc-rgb-white), .075);
  border: 1px solid rgba(var(--cc-rgb-white), .14);
  border-radius: 999px;
  color: color-mix(in srgb, var(--cc-neutral-white) 84%, var(--site-accent));
  display: inline-flex;
  margin-bottom: 1.15rem;
  padding: .52rem .78rem .46rem;
}

.homepage-marketing-hero__title {
  color: color-mix(in srgb, var(--cc-neutral-white) 94%, var(--site-accent));
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: 5.5rem;
  font-weight: var(--site-heading-weight, 900);
  letter-spacing: 0;
  line-height: .86;
  margin: 0;
  max-width: 11ch;
}

.homepage-marketing-hero__lead {
  color: rgba(var(--cc-rgb-white), .8);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  font-weight: 780;
  line-height: 1.28;
  margin: clamp(1.35rem, 2.8vw, 2rem) 0 0;
  max-width: 40rem;
}

.homepage-marketing-hero__copy {
  color: rgba(var(--cc-rgb-white), .66);
  font-size: 1.05rem;
  line-height: 1.72;
  margin: 1.15rem 0 0;
  max-width: 42rem;
}

.homepage-marketing-hero .action-row {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.homepage-marketing-hero .btn-secondary {
  background: rgba(var(--cc-rgb-white), .08);
  border-color: rgba(var(--cc-rgb-white), .2);
  color: var(--cc-neutral-white);
}

.homepage-marketing-hero__stage {
  display: grid;
  gap: .65rem;
  isolation: isolate;
  position: relative;
}

.homepage-marketing-hero__stage::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--site-accent) 30%, transparent), transparent);
  content: "";
  height: 100%;
  inset: 14% 12% auto;
  opacity: .48;
  position: absolute;
  transform: skewY(-8deg);
  z-index: -1;
}

.homepage-marketing-hero__floaters {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.homepage-marketing-hero__floaters span {
  align-items: center;
  animation: homepage-floater-drift var(--hero-floater-duration, 9s) ease-in-out infinite alternate;
  animation-delay: var(--hero-floater-delay, 0s);
  border: 1px solid rgba(var(--cc-rgb-white), .1);
  border-radius: 999px;
  color: rgba(var(--cc-rgb-white), .26);
  display: inline-flex;
  font-size: .76rem;
  height: 1.85rem;
  justify-content: center;
  opacity: .58;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(var(--hero-floater-scale, 1)) rotate(var(--hero-floater-rotate, 0deg));
  width: 1.85rem;
}

@keyframes homepage-floater-drift {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(var(--hero-floater-scale, 1))
      rotate(var(--hero-floater-rotate, 0deg));
  }

  100% {
    transform:
      translate3d(var(--hero-floater-x, .35rem), var(--hero-floater-y, -.45rem), 0)
      scale(var(--hero-floater-scale, 1))
      rotate(calc(var(--hero-floater-rotate, 0deg) + var(--hero-floater-spin, 4deg)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-marketing-hero__floaters span {
    animation: none;
  }
}

.homepage-marketing-hero__floaters--people span {
  background: color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 13%, transparent);
}

.homepage-marketing-hero__floaters--people span:nth-child(1) {
  --hero-floater-duration: 8.5s;
  --hero-floater-rotate: -8deg;
  --hero-floater-x: .45rem;
  --hero-floater-y: -.65rem;
  left: 4%;
  top: 4%;
}

.homepage-marketing-hero__floaters--people span:nth-child(2) {
  --hero-floater-delay: -1.8s;
  --hero-floater-duration: 10s;
  --hero-floater-rotate: 7deg;
  --hero-floater-x: -.4rem;
  --hero-floater-y: .55rem;
  right: 8%;
  top: 10%;
}

.homepage-marketing-hero__floaters--people span:nth-child(3) {
  --hero-floater-delay: -3.2s;
  --hero-floater-duration: 9.5s;
  --hero-floater-rotate: 5deg;
  --hero-floater-scale: .88;
  --hero-floater-x: .55rem;
  --hero-floater-y: .35rem;
  left: 42%;
  top: -4%;
}

.homepage-marketing-hero__floaters--people span:nth-child(4) {
  --hero-floater-delay: -2.4s;
  --hero-floater-duration: 11s;
  --hero-floater-rotate: -5deg;
  --hero-floater-scale: .9;
  --hero-floater-x: -.5rem;
  --hero-floater-y: -.35rem;
  left: 17%;
  top: 18%;
}

.homepage-marketing-hero__floaters--people span:nth-child(5) {
  --hero-floater-delay: -4.1s;
  --hero-floater-duration: 9s;
  --hero-floater-rotate: 10deg;
  --hero-floater-scale: .82;
  --hero-floater-x: .35rem;
  --hero-floater-y: -.5rem;
  right: 24%;
  top: -2%;
}

.homepage-marketing-hero__floaters--people span:nth-child(6) {
  --hero-floater-delay: -5.2s;
  --hero-floater-duration: 12s;
  --hero-floater-rotate: -11deg;
  --hero-floater-scale: .78;
  --hero-floater-x: -.35rem;
  --hero-floater-y: .45rem;
  right: 3%;
  top: 25%;
}

.homepage-marketing-hero__floaters--money span {
  background: color-mix(in srgb, var(--site-accent) 11%, transparent);
  color: rgba(var(--cc-rgb-white), .22);
}

.homepage-marketing-hero__floaters--money span:nth-child(1) {
  --hero-floater-delay: -1.2s;
  --hero-floater-duration: 8.8s;
  --hero-floater-rotate: 7deg;
  --hero-floater-x: .35rem;
  --hero-floater-y: .55rem;
  bottom: 3%;
  left: 9%;
}

.homepage-marketing-hero__floaters--money span:nth-child(2) {
  --hero-floater-delay: -2.7s;
  --hero-floater-duration: 10.5s;
  --hero-floater-rotate: -8deg;
  --hero-floater-scale: .92;
  --hero-floater-x: -.5rem;
  --hero-floater-y: -.45rem;
  bottom: -1%;
  right: 14%;
}

.homepage-marketing-hero__floaters--money span:nth-child(3) {
  --hero-floater-delay: -4.4s;
  --hero-floater-duration: 9.7s;
  --hero-floater-rotate: 6deg;
  --hero-floater-scale: .84;
  --hero-floater-x: -.35rem;
  --hero-floater-y: .45rem;
  bottom: 10%;
  right: 2%;
}

.homepage-marketing-hero__floaters--money span:nth-child(4) {
  --hero-floater-delay: -3.6s;
  --hero-floater-duration: 11.2s;
  --hero-floater-rotate: -4deg;
  --hero-floater-scale: .88;
  --hero-floater-x: .45rem;
  --hero-floater-y: -.35rem;
  bottom: 16%;
  left: 24%;
}

.homepage-marketing-hero__floaters--money span:nth-child(5) {
  --hero-floater-delay: -5.1s;
  --hero-floater-duration: 9.2s;
  --hero-floater-rotate: 9deg;
  --hero-floater-scale: .8;
  --hero-floater-x: -.4rem;
  --hero-floater-y: .3rem;
  bottom: -5%;
  left: 38%;
}

.homepage-marketing-hero__floaters--money span:nth-child(6) {
  --hero-floater-delay: -6.3s;
  --hero-floater-duration: 12.5s;
  --hero-floater-rotate: -10deg;
  --hero-floater-scale: .78;
  --hero-floater-x: .4rem;
  --hero-floater-y: -.5rem;
  bottom: 22%;
  right: 31%;
}

.homepage-marketing-hero__channels,
.homepage-marketing-hero__signals,
.homepage-marketing-hero__routes {
  display: flex;
  flex-wrap: wrap;
}

.homepage-marketing-hero__channels {
  gap: .65rem;
  justify-content: center;
  margin-inline: auto;
  max-width: 35rem;
}

.homepage-marketing-hero__connector {
  display: flex;
  gap: clamp(.9rem, 3vw, 1.6rem);
  height: auto;
  justify-content: center;
  position: relative;
}

.homepage-marketing-hero__connector span {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--site-accent) 58%, rgba(var(--cc-rgb-white), .22)), transparent);
  border-radius: 999px;
  display: block;
  height: 2.6rem;
  transform: rotate(var(--hero-line-tilt, 0deg));
  width: 2px;
}

.homepage-marketing-hero__connector span:nth-child(1) {
  --hero-line-tilt: -14deg;
}

.homepage-marketing-hero__connector span:nth-child(3) {
  --hero-line-tilt: 14deg;
}

.homepage-marketing-hero__connector--top {
  height: 4.2rem;
  margin-bottom: -.35rem;
}

.homepage-marketing-hero__connector--top::before,
.homepage-marketing-hero__connector--top::after {
  background: linear-gradient(180deg, rgba(var(--cc-rgb-white), .08), color-mix(in srgb, var(--site-accent) 58%, rgba(var(--cc-rgb-white), .26)), transparent);
  border-radius: 999px;
  content: "";
  height: 4.1rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform-origin: bottom center;
  width: 2px;
}

.homepage-marketing-hero__connector--top::before {
  transform: translateX(-4.8rem) rotate(-22deg);
}

.homepage-marketing-hero__connector--top::after {
  transform: translateX(4.8rem) rotate(22deg);
}

.homepage-marketing-hero__connector--top span {
  display: none;
}

.homepage-marketing-hero__connector--bottom {
  height: 2.5rem;
}

.homepage-marketing-hero__channels span {
  --hero-bubble-accent: var(--site-accent);
  align-items: center;
  background:
    linear-gradient(145deg, rgba(var(--cc-rgb-white), .92), rgba(var(--cc-rgb-white), .58)),
    color-mix(in srgb, var(--hero-bubble-accent) 16%, var(--site-surface, var(--cc-neutral-white)));
  border: 1px solid color-mix(in srgb, var(--hero-bubble-accent) 32%, rgba(var(--cc-rgb-white), .62));
  border-radius: 999px;
  box-shadow: 0 .65rem 1.4rem color-mix(in srgb, var(--hero-bubble-accent) 14%, transparent);
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 88%, var(--hero-bubble-accent));
  display: inline-flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: clamp(.78rem, 1.5vw, .95rem);
  font-weight: 900;
  gap: .38rem;
  line-height: 1;
  min-height: 2.35rem;
  padding: .58rem .82rem;
  transform: translateY(var(--hero-bubble-offset, 0)) rotate(var(--hero-bubble-tilt, 0deg));
  white-space: nowrap;
}

.homepage-marketing-hero__channels span:nth-child(1),
.homepage-marketing-hero__channels span:nth-child(6) {
  --hero-bubble-accent: var(--site-accent-strong, var(--site-accent));
  --hero-bubble-offset: .45rem;
  --hero-bubble-tilt: -3deg;
}

.homepage-marketing-hero__channels span:nth-child(2),
.homepage-marketing-hero__channels span:nth-child(7) {
  --hero-bubble-accent: var(--site-accent-highlight, var(--site-accent));
  --hero-bubble-offset: -.25rem;
  --hero-bubble-tilt: 2deg;
}

.homepage-marketing-hero__channels span:nth-child(3),
.homepage-marketing-hero__channels span:nth-child(8) {
  --hero-bubble-accent: var(--site-primary, var(--site-accent));
  --hero-bubble-offset: .15rem;
  --hero-bubble-tilt: 3deg;
}

.homepage-marketing-hero__channels span:nth-child(4) {
  --hero-bubble-accent: var(--site-accent-soft, var(--site-accent));
  --hero-bubble-offset: -.45rem;
  --hero-bubble-tilt: -2deg;
}

.homepage-marketing-hero__channels span:nth-child(5) {
  --hero-bubble-accent: var(--site-accent-muted, var(--site-accent));
  --hero-bubble-offset: .35rem;
}

.homepage-marketing-hero__screen {
  animation: homepage-screen-brand 12s linear infinite;
  background:
    linear-gradient(145deg, rgba(var(--cc-rgb-white), .13), rgba(var(--cc-rgb-white), .055)),
    color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 20%, transparent);
  border: 1px solid rgba(var(--cc-rgb-white), .16);
  border-radius: var(--site-card-radius, 1.35rem);
  box-shadow: 0 2rem 4.5rem rgba(var(--cc-rgb-black), .34);
  display: grid;
  gap: 1.15rem;
  isolation: isolate;
  min-height: 26rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.45rem);
  position: relative;
}

.homepage-marketing-hero__screen::before {
  animation: homepage-screen-sheen 12s linear infinite;
  background: linear-gradient(115deg, transparent 0 32%, rgba(var(--cc-rgb-white), .42) 44%, rgba(var(--cc-rgb-white), .1) 52%, transparent 66%);
  content: "";
  inset: -22% -48%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-52%);
  z-index: 1;
}

.homepage-marketing-hero__screen::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-accent) 72%, var(--cc-neutral-white)), transparent),
    rgba(var(--cc-rgb-white), .06);
  border-radius: inherit;
  content: "";
  inset: auto 1.45rem 1.45rem;
  height: .22rem;
  opacity: .75;
  position: absolute;
  z-index: 2;
  transform: translateY(12px);
}

.homepage-marketing-hero__screen > * {
  position: relative;
  z-index: 2;
}

@keyframes homepage-screen-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background:
      linear-gradient(145deg, rgba(var(--cc-rgb-white), .13), rgba(var(--cc-rgb-white), .055)),
      color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 20%, transparent);
    border-color: rgba(var(--cc-rgb-white), .16);
    box-shadow: 0 2rem 4.5rem rgba(var(--cc-rgb-black), .34);
  }

  3.25%,
  26% {
    background:
      radial-gradient(circle at 88% 18%, rgba(93, 198, 143, .34), transparent 12rem),
      radial-gradient(circle at 72% 78%, rgba(74, 122, 198, .38), transparent 14rem),
      linear-gradient(115deg, rgba(8, 25, 55, .98) 0 38%, rgba(17, 54, 99, .9) 58%, rgba(93, 198, 143, .42) 100%);
    border-color: rgba(93, 198, 143, .38);
    box-shadow: 0 2rem 4.8rem rgba(8, 25, 55, .36);
  }

  39.8%,
  65% {
    background:
      radial-gradient(circle at 88% 8%, rgba(79, 140, 255, .14), transparent 11rem),
      radial-gradient(circle at 10% 88%, rgba(40, 214, 184, .08), transparent 12rem),
      linear-gradient(145deg, rgba(32, 36, 42, .96), rgba(17, 19, 24, .94));
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 2rem 4.8rem rgba(17, 19, 24, .34);
  }

  71.7%,
  97% {
    background:
      radial-gradient(circle at 82% 14%, rgba(255, 184, 77, .24), transparent 12rem),
      radial-gradient(circle at 14% 88%, rgba(127, 90, 240, .24), transparent 13rem),
      linear-gradient(145deg, rgba(26, 28, 45, .9), rgba(86, 45, 92, .82));
    border-color: rgba(255, 184, 77, .28);
    box-shadow: 0 2rem 4.8rem rgba(127, 90, 240, .24);
  }
}

@keyframes homepage-screen-sheen {
  0%,
  2.6% {
    opacity: 0;
    transform: translateX(-52%);
  }

  4.8% {
    opacity: .72;
    transform: translateX(0);
  }

  6.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  7% {
    opacity: 0;
    transform: translateX(-52%);
  }

  25% {
    opacity: 0;
    transform: translateX(52%);
  }

  27% {
    opacity: .72;
    transform: translateX(0);
  }

  30% {
    opacity: 0;
    transform: translateX(-52%);
  }

  31%,
  39% {
    opacity: 0;
    transform: translateX(-52%);
  }

  41.6% {
    opacity: .72;
    transform: translateX(0);
  }

  43.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  44% {
    opacity: 0;
    transform: translateX(-52%);
  }

  62% {
    opacity: 0;
    transform: translateX(52%);
  }

  63% {
    opacity: .72;
    transform: translateX(0);
  }

  66% {
    opacity: 0;
    transform: translateX(-52%);
  }

  67%,
  71% {
    opacity: 0;
    transform: translateX(-52%);
  }

  74% {
    opacity: .72;
    transform: translateX(0);
  }

  76.8% {
    opacity: 0;
    transform: translateX(52%);
  }

  77% {
    opacity: 0;
    transform: translateX(-52%);
  }

  93% {
    opacity: 0;
    transform: translateX(52%);
  }

  95% {
    opacity: .72;
    transform: translateX(0);
  }

  98%,
  99%,
  100% {
    opacity: 0;
    transform: translateX(-52%);
  }
}

.homepage-marketing-hero__screen-top {
  align-items: center;
  border-bottom: 1px solid rgba(var(--cc-rgb-white), .1);
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
  padding-bottom: .95rem;
}

.homepage-marketing-hero__screen-top span {
  background: rgba(var(--cc-rgb-white), .34);
  border-radius: 999px;
  height: .52rem;
  width: .52rem;
}

.homepage-marketing-hero__screen-brand {
  align-items: center;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex;
  height: 1.65rem !important;
  margin-right: auto;
  position: relative;
  width: auto !important;
}

.homepage-marketing-hero__screen-brand-logo {
  animation: homepage-screen-brand-logo-light 12s linear infinite;
  display: block;
  height: 100%;
  max-width: 9.5rem;
  object-fit: contain;
  width: auto;
}

.homepage-marketing-hero__screen-brand-logo--dark {
  animation-name: homepage-screen-brand-logo-dark;
  inset: 0 auto auto 0;
  opacity: 0;
  position: absolute;
}

@keyframes homepage-screen-brand-logo-light {
  0%,
  3.2%,
  27%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 1;
  }

  3.25%,
  26%,
  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 0;
  }
}

@keyframes homepage-screen-brand-logo-dark {
  0%,
  3.2%,
  27%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  3.25%,
  26%,
  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 1;
  }
}

.homepage-marketing-hero__profile {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  justify-items: start;
  margin-top: .6rem;
}

.homepage-marketing-hero__site-header {
  animation: homepage-avatar-brand 12s linear infinite;
  align-items: center;
  background: linear-gradient(225deg, color-mix(in srgb, var(--site-accent) 78%, var(--cc-neutral-white)), var(--site-accent-highlight, var(--site-accent)));
  border: 1px solid rgba(var(--cc-rgb-white), .16);
  border-radius: .9rem;
  color: var(--site-button-text, var(--cc-neutral-white));
  display: flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: 1.05rem;
  font-weight: 900;
  gap: 1rem;
  height: 4.35rem;
  justify-content: space-between;
  overflow: hidden;
  padding: .65rem .8rem;
  position: relative;
  width: 100%;
}

.homepage-marketing-hero__site-header::before {
  animation: homepage-screen-sheen 12s linear infinite;
  background: linear-gradient(115deg, transparent 0 30%, rgba(var(--cc-rgb-white), .58) 44%, rgba(var(--cc-rgb-white), .12) 54%, transparent 68%);
  content: "";
  inset: -35%;
  opacity: 0;
  position: absolute;
  transform: translateX(-52%);
  z-index: 1;
}

.homepage-marketing-hero__site-logo {
  align-items: center;
  display: flex;
  height: 100%;
  min-width: clamp(6.8rem, 18vw, 11.5rem);
  position: relative;
  z-index: 2;
}

.homepage-marketing-hero__site-logo-mark {
  align-items: center;
  animation: homepage-avatar-logo 12s linear infinite;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
}

.homepage-marketing-hero__site-logo-mark img {
  display: block;
  filter: drop-shadow(0 .35rem .8rem rgba(var(--cc-rgb-black), .16));
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.homepage-marketing-hero__site-logo-mark--adam img {
  max-width: 96%;
}

.homepage-marketing-hero__site-logo-mark--load img {
  max-width: 92%;
}

.homepage-marketing-hero__site-logo-mark--custom {
  align-items: flex-start;
  color: #FFF7D6;
  flex-direction: column;
  font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
  gap: .08rem;
  justify-content: center;
  line-height: .88;
  text-transform: uppercase;
}

.homepage-marketing-hero__site-logo-mark--custom span {
  color: rgba(255, 247, 214, .72);
  display: block;
  font-size: clamp(.58rem, 1.4vw, .78rem);
  font-weight: 800;
  letter-spacing: .16em;
}

.homepage-marketing-hero__site-logo-mark--custom strong {
  color: #FFF7D6;
  display: block;
  font-size: clamp(1.3rem, 3vw, 2.05rem);
  font-weight: 900;
  letter-spacing: .01em;
}

.homepage-marketing-hero__site-logo-mark:nth-child(1) {
  animation-name: homepage-avatar-logo-adam;
}

.homepage-marketing-hero__site-logo-mark:nth-child(2) {
  animation-name: homepage-avatar-logo-load;
}

.homepage-marketing-hero__site-logo-mark:nth-child(3) {
  animation-name: homepage-avatar-logo-custom;
}

.homepage-marketing-hero__site-header-nav {
  align-items: center;
  display: flex;
  flex: 0 1 10rem;
  gap: .45rem;
  justify-content: flex-end;
  max-width: 42%;
  position: relative;
  z-index: 2;
}

.homepage-marketing-hero__site-header-nav span {
  background: rgba(var(--cc-rgb-white), .45);
  border-radius: 999px;
  display: block;
  height: .42rem;
  width: clamp(1.25rem, 4vw, 2.15rem);
}

@keyframes homepage-avatar-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background: linear-gradient(225deg, color-mix(in srgb, var(--site-accent) 78%, var(--cc-neutral-white)), var(--site-accent-highlight, var(--site-accent)));
    border-color: rgba(var(--cc-rgb-white), .16);
    color: var(--site-button-text, var(--cc-neutral-white));
  }

  3.25%,
  26% {
    background:
      radial-gradient(circle at 88% 22%, rgba(93, 198, 143, .46), transparent 7rem),
      linear-gradient(105deg, #081935 0 42%, #173E70 66%, #5DC68F 100%);
    border-color: rgba(93, 198, 143, .42);
    color: #FFFFFF;
  }

  39.8%,
  65% {
    background: linear-gradient(135deg, #2D333B, #15181D);
    border-color: rgba(79, 140, 255, .22);
    color: #FFFFFF;
  }

  71.7%,
  97% {
    background: linear-gradient(135deg, #7F5AF0, #FFB84D);
    border-color: rgba(255, 184, 77, .34);
    color: #1A1C2D;
  }
}

@keyframes homepage-avatar-logo-adam {
  0%,
  3.2% {
    opacity: 0;
  }

  3.25%,
  26% {
    opacity: 1;
  }

  27%,
  100% {
    opacity: 0;
  }
}

@keyframes homepage-avatar-logo-load {
  0%,
  39.7%,
  66%,
  100% {
    opacity: 0;
  }

  39.8%,
  65% {
    opacity: 1;
  }
}

@keyframes homepage-avatar-logo-custom {
  0%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  71.7%,
  97% {
    opacity: 1;
  }
}

.homepage-marketing-hero__typed {
  display: block;
  min-height: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}

.homepage-marketing-hero__typed strong {
  --typed-characters: 9;
  animation: homepage-typed-name 12s steps(var(--typed-characters), end) infinite;
  animation-delay: var(--typed-delay, 0s);
  border-right: .08em solid color-mix(in srgb, var(--site-accent-highlight, var(--site-accent)) 82%, var(--cc-neutral-white));
  color: var(--cc-neutral-white);
  display: block;
  font-family: var(--cc-font-primary);
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  font-style: normal;
  font-weight: 900;
  left: 0;
  line-height: .95;
  max-width: max-content;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 0;
}

.homepage-marketing-hero__typed strong:nth-child(1) {
  --typed-characters: 9;
  --typed-delay: 0s;
  animation-name: homepage-typed-name-short;
}

.homepage-marketing-hero__typed strong:nth-child(2) {
  --typed-characters: 18;
  --typed-delay: 4s;
  animation-name: homepage-typed-name;
}

.homepage-marketing-hero__typed strong:nth-child(3) {
  --typed-characters: 10;
  --typed-delay: 8s;
  animation-name: homepage-typed-name-medium;
  font-family: var(--cc-font-primary);
}

@keyframes homepage-typed-name {
  0%,
  3% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .045em;
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  13% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .045em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  15%,
  22% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .045em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  30.5% {
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .045em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * .2ch);
  }

  32% {
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  33%,
  100% {
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    opacity: 0;
    text-transform: none;
    width: 0;
  }
}

@keyframes homepage-typed-name-short {
  0%,
  3% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 1;
    text-transform: uppercase;
    width: 0;
  }

  6.5% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  9.5% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  10%,
  22% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * 1ch);
  }

  26% {
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 1;
    text-transform: uppercase;
    width: calc(var(--typed-characters) * .2ch);
  }

  27% {
    font-family: var(--cc-font-primary);
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  28%,
  100% {
    font-family: var(--cc-font-primary);
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    opacity: 0;
    text-transform: none;
    width: 0;
  }
}

@keyframes homepage-typed-name-medium {
  0%,
  3% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .015em;
    opacity: 1;
    text-transform: none;
    width: 0;
  }

  10.1% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .015em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  12%,
  22% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .015em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * 1ch);
  }

  28.5% {
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    letter-spacing: .015em;
    opacity: 1;
    text-transform: none;
    width: calc(var(--typed-characters) * .2ch);
  }

  29.8% {
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    opacity: 1;
    width: 0;
  }

  30.8%,
  100% {
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    opacity: 0;
    width: 0;
  }
}

.homepage-marketing-hero__profile-caption {
  display: block;
  min-height: 1.25rem;
  margin-top: .3rem;
  position: relative;
}

.homepage-marketing-hero__profile-caption span {
  animation: homepage-caption-brand 12s linear infinite;
  color: rgba(var(--cc-rgb-white), .62);
  display: block;
  font-family: var(--cc-font-primary);
  font-size: .94rem;
  font-style: normal;
  font-weight: 800;
  left: 0;
  letter-spacing: 0;
  opacity: 0;
  position: absolute;
  text-transform: none;
  top: 0;
  white-space: nowrap;
}

.homepage-marketing-hero__profile-caption span:nth-child(1) {
  animation-name: homepage-caption-brand, homepage-caption-creator;
  opacity: 1;
}

.homepage-marketing-hero__profile-caption span:nth-child(2) {
  animation-name: homepage-caption-brand, homepage-caption-studio;
}

.homepage-marketing-hero__profile-caption span:nth-child(3) {
  animation-name: homepage-caption-brand, homepage-caption-custom;
}

@keyframes homepage-caption-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    color: rgba(var(--cc-rgb-white), .62);
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    text-transform: none;
  }

  3.25%,
  26% {
    color: rgba(244, 251, 255, .74);
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
  }

  39.8%,
  65% {
    color: rgba(255, 255, 255, .7);
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  71.7%,
  97% {
    color: rgba(255, 247, 214, .74);
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: .015em;
    text-transform: none;
  }
}

@keyframes homepage-caption-creator {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    opacity: 1;
  }

  39.8%,
  65%,
  71.7%,
  97% {
    opacity: 0;
  }
}

@keyframes homepage-caption-studio {
  0%,
  39.7%,
  66%,
  100% {
    opacity: 0;
  }

  39.8%,
  65% {
    opacity: 1;
  }
}

@keyframes homepage-caption-custom {
  0%,
  71.6%,
  98%,
  100% {
    opacity: 0;
  }

  71.7%,
  97% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-marketing-hero__screen,
  .homepage-marketing-hero__screen::before,
  .homepage-marketing-hero__site-header,
  .homepage-marketing-hero__site-header::before,
  .homepage-marketing-hero__site-logo-mark,
  .homepage-marketing-hero__profile-caption span,
  .homepage-marketing-hero__routes span {
    animation: none;
  }

  .homepage-marketing-hero__site-logo-mark {
    opacity: 0;
  }

  .homepage-marketing-hero__site-logo-mark:first-child {
    opacity: 1;
  }

  .homepage-marketing-hero__profile-caption span {
    opacity: 0;
  }

  .homepage-marketing-hero__profile-caption span:first-child {
    opacity: 1;
  }

  .homepage-marketing-hero__typed strong {
    animation: none;
    border-right: 0;
    opacity: 0;
    width: 0;
  }

  .homepage-marketing-hero__typed strong:last-child {
    opacity: 1;
    position: relative;
    width: auto;
  }
}

.homepage-marketing-hero__feature-line {
  background: rgba(var(--cc-rgb-white), .12);
  border-radius: 999px;
  height: .78rem;
  max-width: 62%;
}

.homepage-marketing-hero__feature-line--wide {
  max-width: 88%;
}

.homepage-marketing-hero__routes {
  align-content: end;
  margin-top: auto;
}

.homepage-marketing-hero__routes span {
  animation: homepage-route-brand 12s linear infinite;
  background: rgba(var(--cc-rgb-white), .09);
  border: 1px solid rgba(var(--cc-rgb-white), .11);
  border-radius: .7rem;
  color: rgba(var(--cc-rgb-white), .82);
  flex: 1 1 8rem;
  font-family: var(--cc-font-primary);
  font-size: .82rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  padding: .9rem;
}

@keyframes homepage-route-brand {
  0%,
  3.2%,
  27%,
  28%,
  39.7%,
  66%,
  71.6%,
  98%,
  100% {
    background: rgba(var(--cc-rgb-white), .09);
    border-color: rgba(var(--cc-rgb-white), .11);
    color: rgba(var(--cc-rgb-white), .82);
    font-family: var(--cc-font-primary);
    letter-spacing: 0;
    text-transform: none;
  }

  3.25%,
  26% {
    background: rgba(93, 198, 143, .14);
    border-color: rgba(74, 122, 198, .34);
    color: rgba(244, 251, 255, .92);
    font-family: "Plus Jakarta Sans", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  39.8%,
  65% {
    background: rgba(17, 19, 24, .52);
    border-color: rgba(79, 140, 255, .22);
    color: rgba(255, 255, 255, .9);
    font-family: "Montserrat", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  71.7%,
  97% {
    background: rgba(127, 90, 240, .15);
    border-color: rgba(255, 184, 77, .32);
    color: rgba(255, 247, 214, .94);
    font-family: "Sora", var(--site-heading-font, var(--cc-font-primary));
    font-style: normal;
    letter-spacing: .015em;
    text-transform: none;
  }
}

.homepage-marketing-hero__signals {
  gap: .55rem;
  justify-content: center;
  margin-inline: auto;
  max-width: 28rem;
}

.homepage-marketing-hero__signals span {
  align-items: center;
  background: color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 10%, var(--site-surface, var(--cc-neutral-white)));
  border: 1px solid color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 18%, transparent);
  border-radius: 999px;
  box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--site-primary, var(--cc-brand-ocean)) 8%, transparent);
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 78%, var(--site-primary, var(--cc-brand-ocean)));
  display: inline-flex;
  font-family: var(--site-heading-font, var(--cc-font-primary));
  font-size: .82rem;
  font-weight: 900;
  gap: .35rem;
  line-height: 1;
  min-height: 2rem;
  padding: .48rem .66rem;
  white-space: nowrap;
}

.homepage-marketing-hero__signals strong {
  color: color-mix(in srgb, var(--site-text, var(--cc-color-text)) 88%, var(--site-primary, var(--cc-brand-ocean)));
  margin-right: .1rem;
}

@media (max-width: 991.98px) {
  .homepage-marketing-hero {
    min-height: 0;
    padding: 7rem 0 4rem;
  }

  .homepage-marketing-hero__layout {
    grid-template-columns: 1fr;
  }

  .homepage-marketing-hero__content {
    max-width: 48rem;
  }

  .homepage-marketing-hero__title {
    max-width: 12ch;
  }

  .homepage-marketing-hero__stage {
    max-width: 40rem;
  }
}

@media (max-width: 575.98px) {
  .homepage-marketing-hero {
    padding: 6.25rem 0 3.25rem;
  }

  .homepage-marketing-hero__title {
    font-size: clamp(3.35rem, 15vw, 4.9rem);
  }

  .homepage-marketing-hero__lead {
    font-size: 1.18rem;
  }

  .homepage-marketing-hero__copy {
    font-size: 1rem;
  }

  .homepage-marketing-hero__floaters span {
    font-size: .64rem;
    height: 1.55rem;
    opacity: .42;
    width: 1.55rem;
  }

  .homepage-marketing-hero__floaters--people span:nth-child(3),
  .homepage-marketing-hero__floaters--money span:nth-child(3) {
    display: none;
  }

  .homepage-marketing-hero__channels span {
    --hero-bubble-offset: 0;
    --hero-bubble-tilt: 0deg;
    font-size: .78rem;
    min-height: 2rem;
    padding: .48rem .62rem;
  }

  .homepage-marketing-hero__connector {
    height: 2.4rem;
  }

  .homepage-marketing-hero__connector--top {
    height: 3rem;
    margin-bottom: -.2rem;
  }

  .homepage-marketing-hero__connector--top::before,
  .homepage-marketing-hero__connector--top::after {
    height: 2.95rem;
  }

  .homepage-marketing-hero__connector--top::before {
    transform: translateX(-3rem) rotate(-18deg);
  }

  .homepage-marketing-hero__connector--top::after {
    transform: translateX(3rem) rotate(18deg);
  }

  .homepage-marketing-hero__connector--bottom {
    height: 1.75rem;
  }

  .homepage-marketing-hero__connector--bottom span {
    height: 1.75rem;
  }

  .homepage-marketing-hero__screen {
    border-radius: 1rem;
    min-height: 21rem;
  }

  .homepage-marketing-hero__routes span {
    flex-basis: calc(50% - .35rem);
  }

  .homepage-marketing-hero__signals {
    justify-content: flex-start;
  }
}