.lp-widgets-page .mp-index-hero,
.lp-widgets-page .mp-detail-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(47, 111, 228, .22), transparent 34%),
    radial-gradient(circle at 13% 78%, rgba(40, 142, 92, .12), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #edf4f1 100%);
}

.wp-tool-stack {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  justify-self: end;
  border: 1px solid rgba(47, 111, 228, .18);
  border-radius: 36px;
  background:
    linear-gradient(rgba(47, 111, 228, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 228, .07) 1px, transparent 1px),
    rgba(255, 255, 255, .72);
  background-size: 34px 34px;
  box-shadow: 0 38px 90px rgba(33, 62, 49, .14);
}

.wp-tool-stack::before {
  position: absolute;
  inset: 28% 25%;
  border-radius: 28px;
  background: #183f2f;
  box-shadow: 0 24px 56px rgba(24, 63, 47, .25);
  content: "СМЕТРУМ";
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.03em;
}

.wp-tool-stack > span {
  position: absolute;
  min-width: 190px;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #d7e2dd;
  border-radius: 14px;
  color: #273a31;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 38px rgba(31, 56, 43, .13);
}

.wp-tool-stack > span i,
.wp-tool-stack > span > svg {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: 11px;
  color: #2f6fe4;
  background: #edf4ff;
}

.wp-tool-stack > span i svg { width: 19px; height: 19px; padding: 0; }
.wp-tool-stack > span b { font-size: 12px; line-height: 1.25; }
.wp-tool-stack > span:nth-child(1) { top: 6%; left: -2%; }
.wp-tool-stack > span:nth-child(2) { top: 12%; right: -4%; }
.wp-tool-stack > span:nth-child(3) { top: 46%; right: -9%; }
.wp-tool-stack > span:nth-child(4) { right: 8%; bottom: 4%; }
.wp-tool-stack > span:nth-child(5) { bottom: 9%; left: -7%; }

.wp-catalogue .mp-module-number {
  padding: 4px 8px;
  border-radius: 999px;
  color: #23724a;
  background: #def6e8;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wp-widget-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wp-widget-grid .mp-module-tile { min-height: 270px; }

.wp-principle-band { background: linear-gradient(135deg, #142b21, #1a392c 58%, #233f34); }

.wp-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid #dfd3a6;
  border-radius: 14px;
  color: #5c4b18;
  background: #fff8d9;
}

.wp-notice > svg { width: 20px; height: 20px; justify-self: center; color: #9b7600; }
.wp-notice p { margin: 0; font-size: 13px; line-height: 1.55; }

.wp-secondary-screen {
  display: grid;
  gap: 24px;
  margin-top: 70px;
  padding-top: 56px;
  border-top: 1px solid #dce5e0;
}

.wp-secondary-screen > div { display: grid; gap: 7px; }
.wp-secondary-screen > div span {
  color: #2f6fe4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wp-secondary-screen > div strong {
  max-width: 980px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.wp-secondary-screen .lp-wide-screen { border-radius: 17px; box-shadow: 0 30px 78px rgba(26, 47, 37, .17); }

@media (max-width: 1280px) {
  .wp-tool-stack { display: none; }
  .wp-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .wp-widget-grid { grid-template-columns: 1fr; }
  .wp-notice { grid-template-columns: 32px minmax(0, 1fr); padding: 14px 15px; }
  .wp-secondary-screen { margin-top: 50px; padding-top: 42px; }
}