.home-banner {
  --banner-mint: #7bf1c2;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 244px;
  overflow: hidden;
  padding: 32px 36px;
  border: 1px solid #30614e;
  border-radius: 24px;
  color: #effff7;
  background: radial-gradient(ellipse at 95% 35%, #256a4d 0%, transparent 57%), linear-gradient(115deg, #102b24, #123d2d);
}
.home-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(90deg, #86dcb5 1px, transparent 1px), linear-gradient(#86dcb5 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(90deg, transparent 32%, #000);
}
.home-banner::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid #65c99c35;
  border-radius: 50%;
  right: -110px;
  top: -155px;
  z-index: -1;
}
.home-banner__copy { position: relative; z-index: 2; max-width: 67%; }
.home-banner__eyebrow { margin: 0 0 16px; color: var(--banner-mint); font-size: 10px; line-height: 1.4; font-weight: 700; letter-spacing: .19em; }
.home-banner__title { margin: 0; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.13; font-weight: 650; letter-spacing: -.045em; }
.home-banner__title span { color: var(--banner-mint); }
.home-banner__description { max-width: 320px; margin: 16px 0 0; color: #bfd6ca; font-size: 13px; line-height: 1.65; }
.home-banner__art { position: absolute; right: 22px; width: 230px; height: 230px; pointer-events: none; }
.home-banner__orbit { position: absolute; inset: 6px; border: 1px solid #84e8b53d; border-radius: 50%; transform: rotate(-28deg) scaleY(.7); }
.home-banner__orbit--second { inset: -22px; opacity: .45; transform: rotate(35deg) scaleY(.7); }
.home-banner__tile { position: absolute; inset: 34px; border: 1px solid #9af0c773; border-radius: 35px; background: linear-gradient(135deg, #69d9a63b, #165638); box-shadow: 12px 18px 0 #061f1f38, inset 0 1px 1px #e0ffe54a, 0 22px 44px #061d1970; transform: rotate(-12deg); display: grid; place-items: center; }
.home-banner__controller { width: 105px; height: 105px; filter: drop-shadow(0 7px 0 #082d2360); }
.home-banner__spark { position: absolute; color: #b6f7ca; font-size: 28px; }
.home-banner__spark--one { top: 18px; right: 24px; }
.home-banner__spark--two { left: 12px; bottom: 30px; font-size: 17px; color: #d7c68a; }
@media (max-width: 600px) {
  .home-banner { min-height: 228px; padding: 24px 22px; border-radius: 20px; }
  .home-banner__copy { max-width: 82%; }
  .home-banner__title { font-size: 29px; }
  .home-banner__eyebrow { font-size: 9px; margin-bottom: 14px; }
  .home-banner__description { max-width: 245px; font-size: 12px; line-height: 1.6; }
  .home-banner__art { width: 145px; height: 145px; right: -46px; top: 35px; opacity: .35; }
  .home-banner__tile { inset: 22px; border-radius: 25px; }
  .home-banner__controller { width: 70px; height: 70px; }
  .home-banner__spark--one { top: -6px; right: 56px; font-size: 19px; }
}
@media (max-width: 360px) {
  .home-banner { padding: 22px 18px; }
  .home-banner__copy { max-width: 90%; }
  .home-banner__title { font-size: 26px; }
}