:root {
  --world-paper: #fffdf8;
  --world-ink: #10162f;
  --world-a: #6545df;
  --world-b: #14a7a0;
  --world-c: #ff6f78;
  --world-d: #ffc85a;
}

body.banner-world {
  background-color: var(--world-paper);
  background-image:
    radial-gradient(circle at 7% 9%, color-mix(in srgb, var(--world-a) 15%, transparent), transparent 24rem),
    radial-gradient(circle at 96% 25%, color-mix(in srgb, var(--world-b) 12%, transparent), transparent 28rem),
    radial-gradient(circle at 12% 78%, color-mix(in srgb, var(--world-c) 10%, transparent), transparent 26rem),
    linear-gradient(180deg, #fffdf9 0%, color-mix(in srgb, var(--world-paper) 88%, white) 100%);
  color: var(--world-ink);
}

.banner-world main > section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.banner-world :where(main > section > *) {
  position: relative;
  z-index: 1;
}

.banner-world main > section::before,
.banner-world main > section::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.banner-world main > section::before {
  width: clamp(260px, 34vw, 620px);
  aspect-ratio: 1.65;
  top: clamp(18px, 8%, 90px);
  right: clamp(-240px, -11vw, -90px);
  border: 2px solid color-mix(in srgb, var(--world-a) 22%, transparent);
  border-radius: 50% 42% 58% 46%;
  background:
    radial-gradient(circle at 25% 38%, color-mix(in srgb, var(--world-d) 32%, transparent) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--world-c) 25%, transparent) 0 10px, transparent 11px),
    linear-gradient(128deg, color-mix(in srgb, var(--world-a) 10%, transparent), color-mix(in srgb, var(--world-b) 8%, transparent));
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--world-b) 4%, transparent),
    0 0 0 38px color-mix(in srgb, var(--world-c) 3%, transparent);
  opacity: .85;
  transform: rotate(-9deg);
  animation: banner-world-float 20s ease-in-out infinite alternate;
}

.banner-world main > section::after {
  inset: -12% -7%;
  background-image: var(--world-motif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .26;
  animation: banner-world-drift 28s ease-in-out infinite alternate;
}

.banner-world main > section:nth-of-type(even)::before {
  right: auto;
  left: clamp(-240px, -11vw, -90px);
  transform: rotate(11deg);
  animation-direction: alternate-reverse;
}

.banner-world main > section:nth-of-type(3n)::after {
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.banner-world .sales-hero-card,
.banner-world .sales-compare section,
.banner-world .sales-story-art,
.banner-world .answer-qa-card,
.banner-world .use-card,
.banner-world .pm2-feature,
.banner-world .pm2-step {
  backdrop-filter: blur(3px);
}

.banner-world .sales-hero-card,
.banner-world .sales-compare .before,
.banner-world .answer-qa-card,
.banner-world .use-card,
.banner-world .pm2-feature,
.banner-world .pm2-step {
  background-color: rgba(255, 255, 255, .88);
}

.banner-world-spot {
  position: relative;
  z-index: 2;
  width: min(100%, 700px);
  margin: clamp(28px, 5vw, 56px) auto 0;
  padding: 0;
}

.banner-world-spot picture,
.banner-world-spot img {
  display: block;
  width: 100%;
}

.banner-world-spot picture {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--world-a) 20%, rgba(16, 22, 47, .12));
  border-radius: clamp(24px, 4vw, 42px);
  background: color-mix(in srgb, var(--world-a) 8%, #fff);
  box-shadow:
    0 28px 75px color-mix(in srgb, var(--world-a) 17%, transparent),
    0 0 0 12px color-mix(in srgb, var(--world-d) 4%, transparent);
}

.banner-world-spot img {
  aspect-ratio: 1;
  object-fit: cover;
}

.banner-world-scene {
  width: min(100% - 32px, 1180px);
  margin: 0 auto clamp(72px, 9vw, 118px);
}

.banner-world-scene .banner-world-spot {
  width: min(100%, 820px);
}

.banner-world-finch {
  --world-paper: #fffdf6;
  --world-a: #147d88;
  --world-b: #1f8ad5;
  --world-c: #ef7b4f;
  --world-d: #f3c94e;
  --world-motif:
    radial-gradient(circle at 9% 25%, var(--world-a) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 42%, var(--world-c) 0 7px, transparent 8px),
    radial-gradient(circle at 75% 19%, var(--world-d) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 72%, var(--world-b) 0 8px, transparent 9px),
    linear-gradient(132deg, transparent 0 37%, color-mix(in srgb, var(--world-a) 24%, transparent) 38% 39%, transparent 40% 100%),
    linear-gradient(42deg, transparent 0 68%, color-mix(in srgb, var(--world-c) 18%, transparent) 69% 70%, transparent 71% 100%);
}

.banner-world-blurt {
  --world-paper: #fffaf6;
  --world-a: #6b43ef;
  --world-b: #1da8b0;
  --world-c: #ef557a;
  --world-d: #ffc95e;
  --world-motif:
    radial-gradient(ellipse at 13% 28%, color-mix(in srgb, var(--world-a) 24%, transparent) 0 5%, transparent 5.4%),
    radial-gradient(ellipse at 84% 69%, color-mix(in srgb, var(--world-c) 20%, transparent) 0 6%, transparent 6.4%),
    radial-gradient(circle at 27% 72%, var(--world-d) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 22%, var(--world-b) 0 6px, transparent 7px),
    linear-gradient(148deg, transparent 0 44%, color-mix(in srgb, var(--world-a) 18%, transparent) 45% 46%, transparent 47% 100%);
}

.banner-world-sayit {
  --world-paper: #fffbf8;
  --world-a: #6545df;
  --world-b: #1ca5a6;
  --world-c: #f15f78;
  --world-d: #f6c84d;
  --world-motif:
    radial-gradient(circle at 12% 20%, var(--world-c) 0 8px, transparent 9px),
    radial-gradient(circle at 22% 72%, var(--world-a) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 27%, var(--world-b) 0 7px, transparent 8px),
    radial-gradient(circle at 91% 68%, var(--world-d) 0 6px, transparent 7px),
    linear-gradient(126deg, transparent 0 39%, color-mix(in srgb, var(--world-c) 22%, transparent) 40% 41%, transparent 42% 100%),
    linear-gradient(151deg, transparent 0 64%, color-mix(in srgb, var(--world-a) 17%, transparent) 65% 66%, transparent 67% 100%);
}

.banner-world-jrnl {
  --world-paper: #fff9fd;
  --world-a: #7b45cf;
  --world-b: #45b8c7;
  --world-c: #ed6ca8;
  --world-d: #f4c867;
  --world-motif:
    radial-gradient(circle at 15% 26%, var(--world-c) 0 7px, transparent 8px),
    radial-gradient(circle at 23% 78%, var(--world-b) 0 5px, transparent 6px),
    radial-gradient(circle at 81% 22%, var(--world-d) 0 6px, transparent 7px),
    radial-gradient(circle at 89% 73%, var(--world-a) 0 8px, transparent 9px),
    linear-gradient(136deg, transparent 0 43%, color-mix(in srgb, var(--world-c) 21%, transparent) 44% 45%, transparent 46% 100%),
    linear-gradient(36deg, transparent 0 66%, color-mix(in srgb, var(--world-a) 18%, transparent) 67% 68%, transparent 69% 100%);
}

.banner-world-anchor {
  --world-paper: #fffdf7;
  --world-a: #e87925;
  --world-b: #2f9b9f;
  --world-c: #2f6fb0;
  --world-d: #f0c35c;
  --world-motif:
    linear-gradient(color-mix(in srgb, var(--world-c) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--world-c) 12%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 12% 30%, var(--world-a) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 67%, var(--world-b) 0 7px, transparent 8px),
    linear-gradient(132deg, transparent 0 52%, color-mix(in srgb, var(--world-d) 20%, transparent) 53% 54%, transparent 55% 100%);
}

.banner-world-query-quick {
  --world-paper: #f9fbff;
  --world-a: #5d48d8;
  --world-b: #2fc4e4;
  --world-c: #172b70;
  --world-d: #f1c955;
  --world-motif:
    radial-gradient(circle at 10% 73%, var(--world-d) 0 6px, transparent 7px),
    radial-gradient(circle at 22% 53%, var(--world-b) 0 5px, transparent 6px),
    radial-gradient(circle at 73% 31%, var(--world-a) 0 7px, transparent 8px),
    radial-gradient(circle at 91% 18%, var(--world-d) 0 5px, transparent 6px),
    linear-gradient(147deg, transparent 0 40%, color-mix(in srgb, var(--world-b) 25%, transparent) 41% 42%, transparent 43% 100%),
    linear-gradient(31deg, transparent 0 69%, color-mix(in srgb, var(--world-a) 20%, transparent) 70% 71%, transparent 72% 100%);
}

.banner-world-spotter {
  --world-paper: #f9fcff;
  --world-a: #176fcb;
  --world-b: #67bdd9;
  --world-c: #4b70a8;
  --world-d: #f1bf58;
  --world-motif:
    radial-gradient(circle at 11% 24%, var(--world-a) 0 7px, transparent 8px),
    radial-gradient(circle at 29% 45%, var(--world-b) 0 5px, transparent 6px),
    radial-gradient(circle at 58% 61%, var(--world-c) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 78%, var(--world-d) 0 7px, transparent 8px),
    linear-gradient(144deg, transparent 0 48%, color-mix(in srgb, var(--world-a) 20%, transparent) 49% 50%, transparent 51% 100%);
}

.banner-world-magic-sunset {
  --world-paper: #fff9f5;
  --world-a: #f26a35;
  --world-b: #7449d8;
  --world-c: #ec4d8e;
  --world-d: #ffc657;
  --world-motif:
    linear-gradient(180deg, transparent 0 22%, color-mix(in srgb, var(--world-d) 20%, transparent) 23% 24%, transparent 25% 100%),
    linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--world-c) 18%, transparent) 47% 49%, transparent 50% 100%),
    linear-gradient(180deg, transparent 0 68%, color-mix(in srgb, var(--world-b) 17%, transparent) 69% 71%, transparent 72% 100%),
    radial-gradient(circle at 17% 62%, var(--world-a) 0 7px, transparent 8px),
    radial-gradient(circle at 84% 27%, var(--world-d) 0 8px, transparent 9px);
}

.banner-world-pic-magnet {
  --world-paper: #f9fcff;
  --world-a: #5b4ee7;
  --world-b: #28aebc;
  --world-c: #ef6d8a;
  --world-d: #f1c44f;
  --world-motif:
    radial-gradient(circle at 11% 26%, var(--world-c) 0 7px, transparent 8px),
    radial-gradient(circle at 21% 71%, var(--world-d) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 28%, var(--world-b) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 74%, var(--world-a) 0 6px, transparent 7px),
    linear-gradient(141deg, transparent 0 40%, color-mix(in srgb, var(--world-c) 17%, transparent) 41% 42%, transparent 43% 100%),
    linear-gradient(42deg, transparent 0 65%, color-mix(in srgb, var(--world-b) 19%, transparent) 66% 67%, transparent 68% 100%);
}

@keyframes banner-world-float {
  from { translate: 0 0; }
  to { translate: 16px -12px; }
}

@keyframes banner-world-drift {
  from { background-position: 0 0; }
  to { background-position: 18px -12px; }
}

@media (max-width: 700px) {
  .banner-world main > section::before {
    width: 310px;
    right: -190px;
    opacity: .68;
  }

  .banner-world main > section:nth-of-type(even)::before {
    left: -190px;
  }

  .banner-world main > section::after {
    inset: -8% -18%;
    opacity: .2;
  }

  .banner-world-scene {
    width: calc(100% - 22px);
    margin-bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-world main > section::before,
  .banner-world main > section::after {
    animation: none;
  }
}