.elementor-828 .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:76px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-828 .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;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-828 .elementor-element.elementor-element-7f79ac99{--content-width:1400px;}}@media(max-width:767px){.elementor-828 .elementor-element.elementor-element-1a3426bc{--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-828 .elementor-element.elementor-element-7f79ac99{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* 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 */