.elementor-817 .elementor-element.elementor-element-1a3426bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-817 .elementor-element.elementor-element-7f79ac99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-19d96aa{--display:flex;--margin-top:-120px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-817 .elementor-element.elementor-element-7300447{--display:flex;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-817 .elementor-element.elementor-element-1a3426bc{--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-817 .elementor-element.elementor-element-7f79ac99{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-817 .elementor-element.elementor-element-19d96aa{--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:5px;--padding-right:5px;}.elementor-817 .elementor-element.elementor-element-7300447{--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:5px;--padding-right:5px;}}/* Start custom CSS for shortcode, class: .elementor-element-2cf2b09 *//* =========================================================
   SPJTRADE IMPORT — USUNIĘCIE POŚWIAT I TŁA W ROGACH
========================================================= */

/* Sekcja bez dodatkowego gradientowego tła */

.spji-import-contact {
  background: transparent !important;
  background-image: none !important;
}

/* Kontener dekoracyjnego tła bez własnych gradientów */

.spji-import-contact__background {
  background: transparent !important;
  background-image: none !important;
}

/* Usunięcie dużych poświat po bokach i w rogach */

.spji-import-contact__glow,
.spji-import-contact__glow--one,
.spji-import-contact__glow--two {
  display: none !important;

  opacity: 0 !important;
  visibility: hidden !important;

  background: none !important;
  background-image: none !important;

  filter: none !important;
  animation: none !important;
}

/* Usunięcie ewentualnych poświat z pseudoelementów sekcji */

.spji-import-contact::before,
.spji-import-contact::after,
.spji-import-contact__background::before,
.spji-import-contact__background::after {
  content: none !important;
  display: none !important;

  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Usunięcie fioletowej poświaty w prawym górnym rogu formularza */

.spji-import-contact__form-card::before,
.spji-import-contact__form-card::after {
  content: none !important;
  display: none !important;

  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Karta bez mocnej zewnętrznej łuny */

.spji-import-contact__form-card {
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Siatka zostaje, ale jest jeszcze bardziej subtelna */

.spji-import-contact__grid {
  opacity: 0.12 !important;
}

/* Mobile */

@media (max-width: 700px) {
  .spji-import-contact__grid {
    opacity: 0.08 !important;
  }
}



















/* =========================================================
   SPJTRADE IMPORT — FINALNY CONTACT UI FIX
   Wklej na samym końcu CSS
========================================================= */

/* =========================================================
   1. PROPORCJE SEKCJI NA DESKTOPIE
========================================================= */

@media (min-width: 1081px) {
  .spji-import-contact__inner {
    grid-template-columns:
      minmax(0, 1.16fr)
      minmax(540px, 0.84fr) !important;

    gap: clamp(50px, 5vw, 74px) !important;
  }

  .spji-import-contact__intro {
    width: 100% !important;
    max-width: 760px !important;
  }

  /* Dokładnie dwie linie po lewej */

  .spji-import-contact__title {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    font-size: 66px !important;
    line-height: 1.01 !important;
    letter-spacing: -0.058em !important;

    white-space: normal !important;
  }

  .spji-import-contact__title strong {
    display: block !important;

    margin: 0 !important;

    white-space: nowrap !important;
  }
}

/* =========================================================
   2. CZYTELNIEJSZY OPIS PO LEWEJ
========================================================= */

.spji-import-contact__description {
  max-width: 650px !important;

  color: rgba(235, 230, 238, 0.72) !important;

  font-size: 16px !important;
  line-height: 1.72 !important;
}

/* =========================================================
   3. WYRAŹNE BADGE POD OPISEM
========================================================= */

.spji-import-contact__areas {
  position: relative !important;
  z-index: 4 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  gap: 9px !important;

  margin-top: 26px !important;

  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.spji-import-contact__areas span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 32px !important;
  padding: 0 13px !important;

  border:
    1px solid rgba(204, 214, 101, 0.26) !important;

  border-radius: 999px !important;

  color: rgba(249, 247, 250, 0.94) !important;

  background:
    linear-gradient(
      145deg,
      rgba(117, 89, 144, 0.2),
      rgba(26, 21, 30, 0.94)
    ) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px rgba(91, 38, 128, 0.06) !important;

  font-family:
    "DM Mono",
    monospace !important;

  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  letter-spacing: 0.01em !important;
  white-space: nowrap !important;

  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.45) !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   4. MNIEJSZA KARTA FORMULARZA
========================================================= */

.spji-import-contact__form-card {
  width: 100% !important;
  max-width: 610px !important;

  justify-self: end !important;

  padding: 23px 24px 22px !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(91, 38, 128, 0.062)
    ),
    rgba(17, 15, 20, 0.94) !important;

  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Bez poświaty w rogu */

.spji-import-contact__form-card::before,
.spji-import-contact__form-card::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   5. KOMPAKTOWY NAGŁÓWEK FORMULARZA
========================================================= */

.spji-import-contact__form-eyebrow {
  margin-bottom: 5px !important;

  font-size: 7.5px !important;
}

.spji-import-contact__form-head h3 {
  font-size: 30px !important;
  line-height: 1.06 !important;
}

.spji-import-contact__form-number {
  width: 38px !important;
  height: 28px !important;
}

.spji-import-contact__form-description {
  margin-top: 9px !important;

  font-size: 12px !important;
  line-height: 1.48 !important;
}

/* =========================================================
   6. USUNIĘCIE POLA LINKU
========================================================= */

/*
 * Usuwa cały wiersz:
 * „Link do produktu lub inspiracji”.
 */

.spji-import-contact-field:has(#spji-import-url) {
  display: none !important;
}

/* =========================================================
   7. INFORMACJA O LINKU W SZCZEGÓŁACH ZAPYTANIA
========================================================= */

.spji-import-contact-field
label[for="spji-import-message"] {
  flex-wrap: wrap !important;
}

.spji-import-contact-field
label[for="spji-import-message"]::after {
  content:
    "Możesz tutaj również wkleić link do produktu, oferty lub inspiracji.";

  display: block !important;

  width: 100% !important;

  margin-top: 2px !important;

  color: rgba(204, 214, 101, 0.68) !important;

  font-family:
    "DM Mono",
    monospace !important;

  font-size: 7.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  letter-spacing: 0 !important;
}

/* Podpowiedź przy produktach */

.spji-import-contact-field
label[for="spji-import-product"] {
  flex-wrap: wrap !important;
}

.spji-import-contact-field
label[for="spji-import-product"]::after {
  content:
    "Możesz wpisać kilka produktów lub kategorii, oddzielając je przecinkami.";

  display: block !important;

  width: 100% !important;

  margin-top: 2px !important;

  color: rgba(229, 223, 232, 0.48) !important;

  font-family:
    "DM Mono",
    monospace !important;

  font-size: 7px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* =========================================================
   8. MNIEJSZE ODSTĘPY W FORMULARZU
========================================================= */

.spji-import-contact-form {
  margin-top: 17px !important;
}

.spji-import-contact-form__grid {
  gap: 10px 10px !important;
}

.spji-import-contact-field > label {
  margin-bottom: 5px !important;

  font-size: 10px !important;
}

.spji-import-contact-field > label small {
  font-size: 6.5px !important;
}

/* =========================================================
   9. MNIEJSZE POLA
========================================================= */

.spji-import-contact-field__control {
  min-height: 43px !important;

  border-radius: 11px !important;
}

.spji-import-contact-field input,
.spji-import-contact-field select {
  height: 41px !important;
}

.spji-import-contact-field input,
.spji-import-contact-field select,
.spji-import-contact-field textarea {
  font-size: 12px !important;
}

.spji-import-contact-field__control > svg:first-child {
  width: 15px !important;
  height: 15px !important;

  left: 13px !important;
}

.spji-import-contact-field input,
.spji-import-contact-field select,
.spji-import-contact-field textarea {
  padding-left: 39px !important;
}

/* =========================================================
   10. KRÓTSZA WIADOMOŚĆ
========================================================= */

.spji-import-contact-field textarea {
  min-height: 100px !important;
  height: 100px !important;

  padding-top: 11px !important;
  padding-bottom: 11px !important;

  line-height: 1.5 !important;

  resize: vertical !important;
}

.spji-import-contact-field__control--textarea
> svg:first-child {
  top: 12px !important;
}

/* =========================================================
   11. FOCUS I AUTOFILL
========================================================= */

.spji-import-contact-field__control:focus-within {
  border-color:
    rgba(204, 214, 101, 0.52) !important;

  background:
    linear-gradient(
      180deg,
      rgba(204, 214, 101, 0.025),
      rgba(91, 38, 128, 0.035)
    ),
    #17131c !important;

  box-shadow:
    0 0 0 3px rgba(204, 214, 101, 0.035) !important;
}

.spji-import-contact-field input:focus,
.spji-import-contact-field select:focus,
.spji-import-contact-field textarea:focus {
  color: #ffffff !important;

  background: transparent !important;
  background-color: transparent !important;

  outline: none !important;
  box-shadow: none !important;

  -webkit-text-fill-color: #ffffff !important;
}

.spji-import-contact-field input:-webkit-autofill,
.spji-import-contact-field input:-webkit-autofill:hover,
.spji-import-contact-field input:-webkit-autofill:focus,
.spji-import-contact-field input:-webkit-autofill:active {
  caret-color: #ccd665 !important;

  -webkit-text-fill-color: #ffffff !important;

  -webkit-box-shadow:
    0 0 0 1000px #17131c inset !important;

  box-shadow:
    0 0 0 1000px #17131c inset !important;

  transition:
    background-color 9999s ease-out 0s !important;
}

/* =========================================================
   12. KRÓTSZY DÓŁ FORMULARZA
========================================================= */

.spji-import-contact-consent {
  margin-top: 11px !important;
}

.spji-import-contact-consent__text {
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.spji-import-contact-form__footer {
  margin-top: 12px !important;
  padding-top: 13px !important;

  gap: 14px !important;
}

.spji-import-contact-form__security > span {
  width: 31px !important;
  height: 31px !important;
}

.spji-import-contact-form__security strong {
  font-size: 9px !important;
}

.spji-import-contact-form__security small {
  font-size: 7px !important;
}

.spji-import-contact-form__submit {
  min-height: 45px !important;

  padding-right: 17px !important;
  padding-left: 17px !important;

  font-size: 11px !important;
}

/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 1080px) {
  .spji-import-contact__inner {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  .spji-import-contact__intro {
    max-width: 760px !important;
  }

  .spji-import-contact__title {
    max-width: 720px !important;

    font-size: clamp(52px, 7vw, 64px) !important;

    white-space: normal !important;
  }

  .spji-import-contact__title strong {
    display: block !important;
    white-space: normal !important;
  }

  .spji-import-contact__form-card {
    width: min(100%, 640px) !important;
    max-width: 640px !important;

    justify-self: start !important;
  }
}

/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 700px) {
  .spji-import-contact__title {
    font-size: clamp(41px, 11vw, 50px) !important;
  }

  .spji-import-contact__areas {
    gap: 7px !important;
  }

  .spji-import-contact__areas span {
    min-height: 30px !important;

    padding: 0 10px !important;

    font-size: 8px !important;
  }

  .spji-import-contact__form-card {
    width: 100% !important;
    max-width: none !important;

    padding: 21px 15px 20px !important;
  }

  .spji-import-contact-form__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .spji-import-contact-field--full {
    grid-column: auto !important;
  }

  .spji-import-contact-field input,
  .spji-import-contact-field select,
  .spji-import-contact-field textarea {
    font-size: 16px !important;
  }

  .spji-import-contact-field textarea {
    min-height: 115px !important;
    height: 115px !important;
  }

  .spji-import-contact-form__footer {
    gap: 12px !important;
  }
}

/* =========================================================
   15. MAŁE TELEFONY
========================================================= */

@media (max-width: 390px) {
  .spji-import-contact__title {
    font-size: 39px !important;
  }

  .spji-import-contact__form-card {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}

















/* =========================================================
   SPJTRADE IMPORT — FINALNE PROPORCJE KONTAKTU
   Wklej na samym końcu CSS
========================================================= */

/* =========================================================
   DESKTOP — SZERSZY FORMULARZ, LEPSZA LEWA KOLUMNA
========================================================= */

@media (min-width: 1081px) {

  .spji-import-contact__inner {
    width: min(calc(100% - 48px), 1400px) !important;

    grid-template-columns:
      minmax(0, 0.94fr)
      minmax(620px, 1.06fr) !important;

    align-items: center !important;
    gap: 48px !important;
  }

  /* Lewa kolumna */

  .spji-import-contact__intro {
    width: 100% !important;
    max-width: 650px !important;
  }

  /* Nagłówek — dokładnie dwie linie */

  .spji-import-contact__title {
    width: 100% !important;
    max-width: 650px !important;

    margin: 0 !important;

    font-size: 66px !important;
    line-height: 0.99 !important;
    letter-spacing: -0.06em !important;

    white-space: normal !important;
  }

  .spji-import-contact__title strong {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 3px 0 0 !important;

    white-space: nowrap !important;
  }

  /* Opis i wszystkie elementy pod nim mają tę samą szerokość */

  .spji-import-contact__description,
  .spji-import-contact__areas,
  .spji-import-contact__details,
  .spji-import-contact__availability {
    width: 100% !important;
    max-width: 650px !important;
  }

  /* Kafelki e-mail i telefon nie wychodzą poza opis */

  .spji-import-contact__details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }

  .spji-import-contact-detail {
    width: 100% !important;
    min-width: 0 !important;
  }

  .spji-import-contact-detail__content {
    min-width: 0 !important;
  }

  .spji-import-contact-detail__content strong {
    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Prawa kolumna — szerszy formularz */

  .spji-import-contact__form-card {
    width: 100% !important;
    max-width: 710px !important;

    justify-self: end !important;

    padding-right: 27px !important;
    padding-left: 27px !important;
  }
}

/* =========================================================
   GRADIENT NAGŁÓWKA — TYLKO FIOLET → ŻÓŁTY
========================================================= */

.spji-import-contact__title strong {
  color: transparent !important;

  background-image:
    linear-gradient(
      100deg,
      #755990 0%,
      #8b6da1 34%,
      #aa9477 70%,
      #ccd665 100%
    ) !important;

  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;

  background-clip: text !important;
  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;
}

/* =========================================================
   WYRAŹNE BADGE POD OPISEM
========================================================= */

.spji-import-contact__areas {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 8px !important;

  margin-top: 25px !important;
}

.spji-import-contact__areas span {
  min-height: 32px !important;
  padding: 0 13px !important;

  border:
    1px solid rgba(204, 214, 101, 0.3) !important;

  color: #f5f2f7 !important;

  background:
    linear-gradient(
      145deg,
      rgba(117, 89, 144, 0.22),
      rgba(22, 18, 27, 0.98)
    ) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 15px rgba(91, 38, 128, 0.08) !important;

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

  opacity: 1 !important;
}

/* =========================================================
   KAFELKI KONTAKTOWE — CZYTELNOŚĆ
========================================================= */

.spji-import-contact-detail {
  border-color:
    rgba(255, 255, 255, 0.12) !important;

  background:
    linear-gradient(
      145deg,
      rgba(117, 89, 144, 0.12),
      rgba(255, 255, 255, 0.018)
    ) !important;
}

.spji-import-contact-detail__content small {
  color: rgba(204, 214, 101, 0.78) !important;
}

.spji-import-contact-detail__content strong {
  color: #ffffff !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

  .spji-import-contact__inner {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
  }

  .spji-import-contact__intro {
    width: 100% !important;
    max-width: 760px !important;
  }

  .spji-import-contact__title {
    max-width: 720px !important;

    font-size: clamp(52px, 7vw, 64px) !important;
    line-height: 1 !important;
  }

  .spji-import-contact__title strong {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    white-space: normal !important;
  }

  .spji-import-contact__description,
  .spji-import-contact__areas,
  .spji-import-contact__details,
  .spji-import-contact__availability {
    width: 100% !important;
    max-width: 700px !important;
  }

  .spji-import-contact__form-card {
    width: min(100%, 710px) !important;
    max-width: 710px !important;

    justify-self: start !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .spji-import-contact__title {
    font-size: clamp(41px, 11vw, 50px) !important;
    line-height: 1.02 !important;
  }

  .spji-import-contact__title strong {
    width: auto !important;

    white-space: normal !important;
  }

  .spji-import-contact__details {
    grid-template-columns: 1fr !important;
  }

  .spji-import-contact-detail__content strong {
    overflow: visible !important;

    font-size: 14px !important;

    white-space: normal !important;
    text-overflow: clip !important;
  }

  .spji-import-contact__form-card {
    width: 100% !important;
    max-width: none !important;

    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .spji-import-contact__areas span {
    min-height: 30px !important;
    padding: 0 10px !important;

    font-size: 8px !important;
  }
}

/* =========================================================
   MAŁE TELEFONY
========================================================= */

@media (max-width: 390px) {

  .spji-import-contact__title {
    font-size: 39px !important;
  }

  .spji-import-contact__form-card {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a3426bc *//* =========================================================
   SPJTRADE — TŁO SEKCJI HERO
   Klasa kontenera: spj-hero-bg
========================================================= */

.spj-hero-bg {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 79% 20%,
      rgba(91, 38, 128, 0.24) 0%,
      rgba(91, 38, 128, 0.11) 22%,
      transparent 48%
    ),
    radial-gradient(
      circle at 14% 55%,
      rgba(117, 89, 144, 0.11) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 48% 105%,
      rgba(204, 214, 101, 0.055) 0%,
      transparent 30%
    ),
    linear-gradient(
      115deg,
      #0d0d10 0%,
      #0b0b0d 43%,
      #0e0b12 70%,
      #130b1a 100%
    );

  color: #f7f7f4;
}

/* Wszystkie prawdziwe elementy sekcji nad tłem */
.spj-hero-bg > * {
  position: relative;
  z-index: 3;
}

/* Techniczna siatka */
.spj-hero-bg::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 54px 54px;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.25) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* Subtelne ziarno i dodatkowa głębia */
.spj-hero-bg::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
}



/* Tablet */
@media (max-width: 1024px) {
  .spj-hero-bg::before {
    background-size: 46px 46px;
  }

  .spj-hero-bg {
    background:
      radial-gradient(
        circle at 85% 20%,
        rgba(91, 38, 128, 0.23) 0%,
        transparent 45%
      ),
      radial-gradient(
        circle at 12% 56%,
        rgba(117, 89, 144, 0.09) 0%,
        transparent 38%
      ),
      radial-gradient(
        circle at 48% 105%,
        rgba(204, 214, 101, 0.045) 0%,
        transparent 30%
      ),
      linear-gradient(
        120deg,
        #0d0d10 0%,
        #0b0b0d 55%,
        #120b18 100%
      );
  }
}

/* Telefon */
@media (max-width: 767px) {
  .spj-hero-bg {
    min-height: auto;

    background:
      radial-gradient(
        circle at 90% 13%,
        rgba(91, 38, 128, 0.25) 0%,
        transparent 42%
      ),
      radial-gradient(
        circle at 8% 62%,
        rgba(117, 89, 144, 0.08) 0%,
        transparent 36%
      ),
      radial-gradient(
        circle at 50% 105%,
        rgba(204, 214, 101, 0.04) 0%,
        transparent 28%
      ),
      linear-gradient(
        145deg,
        #0d0d10 0%,
        #0b0b0d 60%,
        #130b19 100%
      );
  }

  .spj-hero-bg::before {
    background-size: 38px 38px;
    opacity: 0.8;
  }

  .spj-hero-bg::after {
    opacity: 0.025;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spj-hero-bg {
    animation: none;
  }
}/* End custom CSS */