.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Inter", Sans-serif;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#F97316;font-family:"Inter", Sans-serif;color:#FFFFFF;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{font-family:"Inter", Sans-serif;}.elementor-kit-6 h1{font-family:"Inter", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   🧩 SEKCJA HERO — pastelowe tło i gradientowe światła
   ========================================================== */

.hero-clean {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  overflow: hidden;
  text-align: center;
  padding: 50px 20px; /* 🔸 Odstęp wewnętrzny sekcji */
}

/* === Efekty tła (rozbielenie + pastelowe światła) === */
.hero-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Kolejność warstw:
     1️⃣ górne rozjaśnienie
     2️⃣ dolne rozjaśnienie
     3️⃣ dwa pastelowe światła w rogach
  */
  background:
    /* góra */
    linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.95) 10%, rgba(255,255,255,0) 25%),
    /* dół */
    linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.95) 10%, rgba(255,255,255,0) 25%),
    /* zielony akcent */
    radial-gradient(circle at 80% 30%, rgba(16,185,129,0.12), transparent 90%),
    /* pomarańczowy akcent */
    radial-gradient(circle at 20% 80%, rgba(249,115,22,0.10), transparent 90%);
  
  background-blend-mode: normal;
  filter: blur(40px); /* 🔸 miękkie przejścia */
}

/* === Treść sekcji (zawsze nad tłem) === */
.hero-clean > * {
  position: relative;
  z-index: 1;
}



/* ==========================================================
   🟢 PRZYCISK – samowyśrodkowujący się, gradientowy
   ========================================================== */

.btn-primary {
  display: inline-block;
  background: linear-gradient(180deg, #10B981, #059669);
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 14px 36px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(16,185,129,.25);
  cursor: pointer;

  /* 🔹 Automatyczne wyśrodkowanie */
  display: block;
  margin: 32px auto 0 auto; /* góra, auto-boki, dół */
  text-align: center;
  width: fit-content;
}

/* Efekt hover */
.btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 26px rgba(16,185,129,.35);
  color: #fff;
  text-decoration: none !important;
}

/* Efekt focus (klawiatura) */
.btn-primary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px rgba(16,185,129,.3);
  color: #fff;
  text-decoration: none !important;
}

/* 📱 Responsywność */
@media (max-width: 768px) {
  .btn-primary {
    width: auto;
    padding: 12px 28px;
    font-size: 15px;
  }
}


/* ==========================================================
   📏 TŁO Z KRATKĄ — efekt „grid fade” (jak ElvianForge)
   ========================================================== */

/* Użycie: nadaj sekcji klasę .grid-fade */
.grid-fade {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); /* jasne tło bazowe */
  overflow: hidden;
}

/* Kratka + wygaszenie na górze i dole */
.grid-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Warstwy:
     1️⃣ białe fade’y (góra i dół)
     2️⃣ pionowe linie kratki
     3️⃣ poziome linie kratki
  */
  background-image:
    /* fade */
    linear-gradient(
      to bottom,
      #ffffff 0%,
      rgba(255,255,255,0.96) 8%,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,0) 76%,
      rgba(255,255,255,0.96) 92%,
      #ffffff 100%
    ),
    /* pionowa siatka */
    linear-gradient(to right, rgba(2, 6, 23, 0.08) 1px, transparent 1px),
    /* pozioma siatka */
    linear-gradient(to bottom, rgba(2, 6, 23, 0.08) 1px, transparent 1px);

  background-size:
    100% 100%, /* fade */
    28px 28px, /* pion */
    28px 28px; /* poziom */

  background-repeat: no-repeat, repeat, repeat;
  background-position: center;
}

/* 🔹 Na mniejszych ekranach — gęstsza kratka */
@media (max-width: 768px) {
  .grid-fade::before {
    background-size:
      100% 100%,
      22px 22px,
      22px 22px;
  }
}/* End custom CSS */