.elementor-336 .elementor-element.elementor-element-c31f3ee{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-336 .elementor-element.elementor-element-c31f3ee.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-336 .elementor-element.elementor-element-501d54a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-5c0d1d5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-95b6e7b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-1bb3081{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-413b006{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-60d869e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-5b27dd7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-336 .elementor-element.elementor-element-07c7f01{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-501d54a *//* =========================================================
   MoonLight-Panda! — HERO
   ========================================================= */

.mlp-hero,
.mlp-hero * {
  box-sizing: border-box;
}

.mlp-hero {
  position: relative;

  width: 100%;
  min-height: 720px;

  overflow: hidden;

  color: #f7f4ff;

  background:
    radial-gradient(
      circle at 74% 42%,
      rgba(120, 65, 255, .14),
      transparent 33%
    ),
    radial-gradient(
      circle at 18% 30%,
      rgba(255, 75, 197, .06),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #090b18 0%,
      #0b0d1d 58%,
      #090b18 100%
    );

  font-family: 'Montserrat', sans-serif;
}


/* =========================================================
   GLOW
   ========================================================= */

.mlp-hero__glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(80px);
}

.mlp-hero__glow--left {
  width: 440px;
  height: 440px;

  left: -250px;
  top: 100px;

  background:
    rgba(142, 76, 255, .10);
}

.mlp-hero__glow--right {
  width: 600px;
  height: 600px;

  right: -160px;
  top: -100px;

  background:
    rgba(203, 74, 255, .13);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.mlp-hero__container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1480px;

  min-height: 720px;

  margin: 0 auto;

  padding:
    72px
    26px
    60px;

  display: grid;

  grid-template-columns:
    minmax(0, .92fr)
    minmax(520px, 1.08fr);

  align-items: center;

  gap: 56px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.mlp-hero__content {
  position: relative;
  z-index: 4;

  max-width: 680px;
}


/* =========================================================
   KICKER
   ========================================================= */

.mlp-hero__kicker {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    0
    12px;

  margin-bottom: 22px;

  color: #dfcaff;

  border:
    1px solid
    rgba(164, 101, 255, .26);

  border-radius: 999px;

  background:
    rgba(147, 81, 255, .08);

  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: .16em;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);
}


/* =========================================================
   TITLE
   ========================================================= */

.mlp-hero__title {
  margin: 0;

  max-width: 670px;

  color: #ffffff;

  font-family:
    'Playfair Display',
    Georgia,
    serif;

  font-size:
    clamp(
      54px,
      5vw,
      80px
    );

  font-weight: 600;

  /*
   * Было .98 — из-за этого
   * кириллица могла обрезаться снизу.
   */
  line-height: 1.06;

  letter-spacing: -.035em;

  overflow: visible;

  padding-bottom: .10em;
}


/* каждая строка заголовка */

.mlp-hero__title > span {
  display: block;

  overflow: visible;

  padding-bottom: .03em;
}


/* =========================================================
   GRADIENT TITLE
   ========================================================= */

.mlp-hero__title-gradient {
  margin-top: 7px;

  padding-bottom: .08em;

  color: transparent;

  background:
    linear-gradient(
      100deg,
      #b98aff 0%,
      #de75e9 48%,
      #ff79cf 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  /*
   * Отдельно задаём,
   * чтобы нижние элементы букв
   * не резались.
   */
  line-height: 1.08;

  overflow: visible;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.mlp-hero__description {
  max-width: 620px;

  margin:
    22px
    0
    0;

  color: #aaa6bd;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.72;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mlp-hero__buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


.mlp-hero__btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding:
    0
    20px;

  color: #fff !important;

  border-radius: 12px;

  text-decoration: none !important;

  font-size: 13px;
  font-weight: 600;

  line-height: 1;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.mlp-hero__btn:hover {
  transform:
    translateY(-2px);
}


.mlp-hero__btn svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
}


.mlp-hero__btn--primary {
  border:
    1px solid
    rgba(255,255,255,.14);

  background:
    linear-gradient(
      100deg,
      #7345ff 0%,
      #b752e3 56%,
      #ff62c6 100%
    );

  box-shadow:
    0 12px 32px
    rgba(177, 75, 255, .20),

    inset
    0 1px 0
    rgba(255,255,255,.13);
}


.mlp-hero__btn--primary:hover {
  box-shadow:
    0 15px 40px
    rgba(209, 79, 255, .31),

    inset
    0 1px 0
    rgba(255,255,255,.18);
}


.mlp-hero__btn--secondary {
  color: #eee9f8 !important;

  border:
    1px solid
    rgba(171, 111, 255, .35);

  background:
    rgba(255,255,255,.025);
}


.mlp-hero__btn--secondary:hover {
  border-color:
    rgba(185, 126, 255, .58);

  background:
    rgba(144, 80, 255, .08);
}


/* =========================================================
   STATS
   ========================================================= */

.mlp-hero__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 17px;

  margin-top: 37px;
}


.mlp-hero__stat {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.mlp-hero__stat strong {
  color: #eee7ff;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;
}


.mlp-hero__stat span {
  color: #77738a;

  font-size: 10px;

  line-height: 1.2;
}


.mlp-hero__stat-divider {
  width: 1px;
  height: 30px;

  background:
    rgba(255,255,255,.07);
}


/* =========================================================
   RIGHT
   ========================================================= */

.mlp-hero__visual {
  position: relative;

  min-height: 590px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}


/* =========================================================
   MOON
   ========================================================= */

.mlp-hero__moon {
  position: absolute;

  width: 470px;
  height: 470px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -53%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 43% 38%,
      rgba(255,255,255,.34),
      rgba(197, 173, 255, .15) 28%,
      rgba(116, 70, 217, .18) 55%,
      rgba(83, 43, 160, .08) 70%,
      transparent 72%
    );

  border:
    1px solid
    rgba(197, 167, 255, .12);

  box-shadow:
    0 0 90px
    rgba(119, 69, 255, .20),

    inset
    0 0 100px
    rgba(255,255,255,.03);
}


.mlp-hero__moon::after {
  content: "";

  position: absolute;

  inset: 12%;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.06),
      transparent 16%
    ),

    radial-gradient(
      circle at 64% 67%,
      rgba(25, 13, 64, .11),
      transparent 19%
    );
}


/* =========================================================
   CHARACTER
   ========================================================= */

.mlp-hero__character {
  position: relative;
  z-index: 2;

  width:
    min(
      690px,
      100%
    );

  max-height: 650px;

  object-fit: contain;
  object-position:
    bottom
    center;

  filter:
    drop-shadow(
      0
      30px
      45px
      rgba(0,0,0,.36)
    );
}


/* =========================================================
   FEATURED CARD
   ========================================================= */

.mlp-featured {
  position: absolute;

  z-index: 5;

  left: 18px;
  bottom: 35px;

  width: 300px;

  padding: 17px;

  border:
    1px solid
    rgba(180, 121, 255, .25);

  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      rgba(27, 29, 55, .83),
      rgba(14, 16, 33, .91)
    );

  backdrop-filter:
    blur(17px);

  -webkit-backdrop-filter:
    blur(17px);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.37),

    0 0 35px
    rgba(129, 70, 255, .08);
}


/* =========================================================
   FEATURED HEAD
   ========================================================= */

.mlp-featured__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.mlp-featured__label {
  color: #aa8ddb;

  font-size: 8px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: .13em;
}


.mlp-featured__status {
  display: flex;
  align-items: center;

  gap: 5px;

  color: #bcb5cd;

  font-size: 9px;

  line-height: 1;
}


.mlp-featured__status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #cb72ff;

  box-shadow:
    0 0 7px
    rgba(203, 114, 255, .7);
}


/* =========================================================
   FEATURED TITLE
   ========================================================= */

.mlp-featured__title {
  margin-top: 14px;

  color: #fff;

  font-family:
    'Playfair Display',
    Georgia,
    serif;

  font-size: 22px;
  font-weight: 600;

  line-height: 1.15;
}


/* =========================================================
   FEATURED META
   ========================================================= */

.mlp-featured__meta {
  display: flex;
  justify-content: space-between;

  margin-top: 14px;

  color: #918ca3;

  font-size: 10px;

  line-height: 1;
}


.mlp-featured__meta strong {
  color: #e7dafa;

  font-weight: 600;
}


/* =========================================================
   FEATURED PROGRESS
   ========================================================= */

.mlp-featured__progress {
  height: 5px;

  margin-top: 7px;

  overflow: hidden;

  border-radius: 99px;

  background:
    rgba(255,255,255,.06);
}


.mlp-featured__progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #8051ff,
      #d860dd,
      #ff69c6
    );

  box-shadow:
    0 0 10px
    rgba(198, 86, 255, .25);
}


/* =========================================================
   FEATURED FOOTER
   ========================================================= */

.mlp-featured__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 14px;
}


.mlp-featured__langs {
  display: flex;

  gap: 5px;
}


.mlp-featured__langs span {
  min-width: 27px;

  padding:
    5px
    6px;

  color: #cfc7db;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 6px;

  background:
    rgba(255,255,255,.035);

  text-align: center;

  font-size: 8px;
  font-weight: 600;

  line-height: 1;
}


.mlp-featured__footer a {
  color: #cfb2ff !important;

  text-decoration: none !important;

  font-size: 9px;
  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   BOTTOM FADE
   ========================================================= */

.mlp-hero__bottom-fade {
  position: absolute;

  z-index: 3;

  left: 0;
  right: 0;
  bottom: 0;

  height: 110px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      #090b18
    );
}


/* =========================================================
   <= 1100
   ========================================================= */

@media (max-width: 1100px) {

  .mlp-hero {
    min-height: auto;
  }


  .mlp-hero__container {
    min-height: auto;

    padding-top: 65px;

    grid-template-columns:
      minmax(0, .95fr)
      minmax(400px, 1.05fr);

    gap: 25px;
  }


  .mlp-hero__title {
    font-size:
      clamp(
        48px,
        5.7vw,
        65px
      );

    line-height: 1.06;

    padding-bottom: .10em;
  }


  .mlp-hero__title-gradient {
    line-height: 1.08;

    padding-bottom: .08em;
  }


  .mlp-hero__description {
    font-size: 14px;
  }


  .mlp-hero__visual {
    min-height: 540px;
  }


  .mlp-hero__moon {
    width: 400px;
    height: 400px;
  }


  .mlp-featured {
    width: 270px;

    left: 0;
  }

}


/* =========================================================
   <= 820
   ========================================================= */

@media (max-width: 820px) {

  .mlp-hero__container {
    padding:
      58px
      18px
      50px;

    grid-template-columns: 1fr;

    gap: 25px;
  }


  .mlp-hero__content {
    max-width: 650px;
  }


  .mlp-hero__title {
    font-size:
      clamp(
        47px,
        9vw,
        66px
      );

    line-height: 1.05;

    padding-bottom: .10em;
  }


  .mlp-hero__title-gradient {
    line-height: 1.08;

    padding-bottom: .08em;
  }


  .mlp-hero__visual {
    min-height: 520px;
  }


  .mlp-hero__character {
    max-height: 560px;
  }


  .mlp-featured {
    left: 20px;
    bottom: 20px;
  }

}


/* =========================================================
   <= 600
   ========================================================= */

@media (max-width: 600px) {

  .mlp-hero__container {
    padding:
      42px
      14px
      38px;
  }


  .mlp-hero__kicker {
    margin-bottom: 17px;

    font-size: 8px;
  }


  .mlp-hero__title {
    font-size:
      clamp(
        42px,
        13vw,
        57px
      );

    line-height: 1.05;

    padding-bottom: .10em;
  }


  .mlp-hero__title > span {
    padding-bottom: .04em;
  }


  .mlp-hero__title-gradient {
    line-height: 1.08;

    padding-bottom: .10em;
  }


  .mlp-hero__description {
    margin-top: 20px;

    font-size: 14px;

    line-height: 1.65;
  }


  .mlp-hero__buttons {
    margin-top: 24px;
  }


  .mlp-hero__btn {
    min-height: 46px;

    padding:
      0
      16px;

    font-size: 12px;
  }


  .mlp-hero__stats {
    gap: 12px;

    margin-top: 29px;
  }


  .mlp-hero__stat-divider {
    height: 25px;
  }


  .mlp-hero__visual {
    min-height: 450px;

    margin-top: 0;
  }


  .mlp-hero__moon {
    width: 330px;
    height: 330px;
  }


  .mlp-hero__character {
    max-height: 480px;
  }


  .mlp-featured {
    left: 7px;
    right: 7px;
    bottom: 9px;

    width: auto;
  }

}


/* =========================================================
   <= 390
   ========================================================= */

@media (max-width: 390px) {

  .mlp-hero__title {
    font-size: 40px;

    line-height: 1.06;

    padding-bottom: .10em;
  }


  .mlp-hero__title-gradient {
    line-height: 1.08;

    padding-bottom: .10em;
  }


  .mlp-hero__buttons {
    flex-direction: column;
  }


  .mlp-hero__btn {
    width: 100%;
  }


  .mlp-hero__stats {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap: 18px;
  }


  .mlp-hero__stat-divider {
    display: none;
  }

}/* End custom CSS */