/*
 * Assets page only.
 * Keep the catalogue tactile and light below the fold, while bringing its
 * opening into the same restrained black / warm-paper / signal-green system
 * used across the main Lead Manager pages.
 */
.assets-landing {
  --pc-green: #8bea4d;
  --pd-green: #8bea4d;
  --accent: #8bea4d;
}

.assets-landing .pd-assets {
  background-image:
    radial-gradient(circle at 79% 22%, rgba(139, 234, 77, .09), transparent 18%),
    linear-gradient(112deg, #030405 0%, #071009 100%);
}

/* One calm technical field, rather than a dense decorative pattern. */
.assets-landing .pd-assets::before {
  inset: -20%;
  opacity: .34;
  background:
    repeating-radial-gradient(
      ellipse at 50% 40%,
      transparent 0 70px,
      rgba(235, 242, 231, .11) 71px 72px,
      transparent 73px 132px
    );
}

.assets-landing .pd-assets::after {
  position: absolute;
  z-index: 0;
  top: clamp(96px, 10vw, 160px);
  right: clamp(-150px, -6vw, -62px);
  width: clamp(210px, 26vw, 370px);
  aspect-ratio: 1;
  border: 1px solid rgba(139, 234, 77, .24);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgba(139, 234, 77, .025),
    0 0 0 58px rgba(139, 234, 77, .018);
  content: "";
  pointer-events: none;
}

.assets-landing .pd-assets .pd-shell {
  position: relative;
  z-index: 1;
}

.assets-landing .pd-assets .market-search button,
.assets-landing .pd-asset-template {
  background: var(--pc-green);
}

.assets-landing .pd-asset-template::after {
  border-color: #101811;
}

.assets-landing .pd-asset-widget .pd-chat-line.short,
.assets-landing .pd-asset-widget .pd-widget-dots i {
  background: var(--pc-green);
}

.assets-landing .free-promo {
  background: #e5f8d7;
}

@media (max-width: 700px) {
  .assets-landing .pd-assets::after {
    top: 86px;
    right: -115px;
    width: 230px;
  }
}

@media (max-width: 540px) {
  .assets-landing .pd-assets h1 {
    max-width: 11ch;
    font-size: clamp(40px, 10.4vw, 52px);
  }

  .assets-landing .pd-assets h1 em {
    display: block;
  }

  .assets-landing .pd-assets .pd-description {
    max-width: 31ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assets-landing .pd-assets::before,
  .assets-landing .pd-assets::after {
    animation: none;
  }
}