@media (max-width: 767px) {
  .home-hero-motion { opacity: .9; }

  .hero-orb-one {
    width: 150px;
    height: 150px;
    top: -72px;
    left: -50px;
    border-radius: 50%;
    animation: hero-float-one 11s ease-in-out infinite alternate;
  }

  .hero-orb-two {
    width: 118px;
    height: 118px;
    right: -30px;
    bottom: -34px;
    border-radius: 18px;
    transform: rotate(14deg);
    animation: hero-float-two 13s ease-in-out infinite alternate;
  }

  .home-hero-motion::before {
    content: "";
    position: absolute;
    width: 112px;
    height: 98px;
    left: 46%;
    bottom: -20px;
    background: linear-gradient(145deg, rgba(11,102,242,.10), rgba(77,156,255,.03));
    border: 1px solid rgba(11,102,242,.08);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    will-change: transform;
    animation: hero-drift 12s ease-in-out -3s infinite alternate;
  }

  .hero-symbol {
    color: rgba(11,102,242,.18);
  }

  .hero-symbol-one {
    top: 17%;
    left: 3%;
    font-size: 2.6rem;
    animation-duration: 10s;
  }

  .hero-symbol-two {
    top: 11%;
    right: 5%;
    font-size: 2.3rem;
    animation-duration: 12s;
  }

  .hero-symbol-three {
    right: 3%;
    bottom: 12%;
    font-size: 2.45rem;
    animation-duration: 11s;
  }

  .hero-symbol-three::after {
    content: "=";
    position: absolute;
    left: -250px;
    top: 72px;
    color: rgba(11,102,242,.16);
    font-size: 2.1rem;
    font-weight: 800;
    animation: hero-drift 9s ease-in-out -2s infinite alternate-reverse;
  }

  .hero-chart {
    width: 122px;
    height: 54px;
    opacity: .2;
  }

  .hero-chart-one {
    left: -8px;
    bottom: 7%;
    animation-duration: 9s;
  }

  .hero-chart-two {
    top: 21%;
    right: -18px;
    width: 104px;
    height: 46px;
    animation-duration: 11s;
  }
}