/* ===== Maurito Services v3 (prefix mx-) ===== */
:root{
  --mx-accent:#ed006a; --mx-accent2:#2b6aed;
  --mx-bg:#0b0f13; --mx-text:#ECF0F1; --mx-muted:#B9C1C6;
  --mx-card:#0f141a; --mx-border:rgba(255,255,255,0.08); --mx-r:18px;

 --mx-sticky-top: 90px;
}


#mx-services,
#mx-services .mx-container,
#mx-services .mx-layout {
  overflow: visible !important;
}

/* Layout */
.mx-container{ padding-block:80px; margin-inline:auto; max-width:1200px; padding-inline:20px; }
.mx-header{ text-align:center; margin-bottom:32px; }
.mx-title{
  font-size:clamp(28px,4vw,48px);
  background:linear-gradient(90deg,#ED2B82 0%,#fff 35%,#2B6AED 80%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 4px #fff, 0 4px 20px #ec2a81, 0 1px 0 #fff;
  filter:brightness(1.1) contrast(1.05);
}
.mx-sub{ color:var(--mx-muted); }

.mx-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-areas: "nav content";   /* <-- nowość */
  gap:28px;
  align-items:start;
}

/* Host (jeden kontener) */
.mx-panel-host{
  grid-area: content;                    /* <-- zamiast grid-column:2 */
  min-height:320px;
  border:1px solid var(--mx-border);
  border-radius:var(--mx-r);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,.35);
  padding:clamp(16px,2vw,28px);
  outline:none;
}

/* Pojedynczy panel (ładowany do hosta) */
.mx-panel-head{
  position:sticky; top:60px; z-index:2; margin:-14px -12px 16px;
  background:linear-gradient(180deg,rgba(11,15,19,.95),rgba(11,15,19,.9));
  backdrop-filter:blur(8px); padding:14px 12px 10px; border-bottom:1px solid var(--mx-border);
  border-top-left-radius:var(--mx-r); border-top-right-radius:var(--mx-r);
}
.mx-panel-head h2{ color:var(--mx-accent); font-size:clamp(20px,2.6vw,32px); margin:0 0 6px; }
.mx-panel-head p{ color:var(--mx-muted); margin:0 0 12px; }
.mx-progress{ height:2px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.mx-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--mx-accent),var(--mx-accent2)); }

.mx-panel-body{ display:grid; gap:18px; line-height:1.7; max-width:78ch; }
.mx-panel-body h3{ color:var(--mx-accent2); margin-top:12px; }
.mx-panel-body ul{ padding-left:1rem; margin:0; }
.mx-panel-body li{ margin:.25rem 0; }

.mx-cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.mx-cta{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  font-family:'Michroma',sans-serif; font-size:12px; border:1px solid var(--mx-border); color:var(--mx-text);
  background:transparent; cursor:pointer;
}
.mx-cta-neon{
  border-color:transparent;
  background:radial-gradient(80% 120% at 50% 50%,rgba(237,0,106,.18),rgba(43,106,237,.12));
  box-shadow:0 0 6px var(--mx-accent), 0 0 14px rgba(237,0,106,.6);
}
.mx-cta-ghost:hover{ border-color:var(--mx-accent); color:var(--mx-accent); }

.mx-panel-foot{ display:flex; justify-content:flex-end; margin-top:12px; }
.mx-next{
  display:inline-flex; align-items:center; gap:8px; color:var(--mx-text);
  background:transparent; border:none; padding:8px; cursor:pointer;
  border-bottom:1px dashed var(--mx-accent);
  font-family: Michroma;
}
.mx-next:hover{ color:var(--mx-accent); }

/* NAV */
.mx-nav{
  grid-area: nav;                        /* <-- zamiast grid-column */
  position:sticky;
  top:90px;
  top:var(--mx-sticky-top);
  align-self:start;
  padding:12px;
  border:1px solid var(--mx-border);
  border-radius:var(--mx-r);
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  backdrop-filter:blur(10px);
  /* bez overflow tutaj */
}

/* wewnętrzny scroller */
.mx-nav-scroll{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - (var(--mx-sticky-top) + 30px));
  overflow:auto;
}

.mx-link{
  display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:var(--mx-text);
  font-family:'Michroma',sans-serif; font-size:12px; border:1px solid transparent; position:relative;
}
.mx-link:hover{ border-color:var(--mx-border); background:rgba(255,255,255,0.03); }
.mx-link[aria-current="true"]{ color:var(--mx-accent); }
.mx-link[aria-current="true"]::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:var(--mx-accent); box-shadow:0 0 6px var(--mx-accent), 0 0 12px var(--mx-accent);
}

/* Scrollbar styl – pionowy (desktop) */
.mx-nav-scroll::-webkit-scrollbar{ width:10px; }
.mx-nav-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,0.05); border-radius:12px; }
.mx-nav-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(237,0,106,0.75), rgba(43,106,237,0.7));
  border-radius:12px;
}
.mx-nav-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(237,0,106,0.9), rgba(43,106,237,0.85));
}
.mx-nav-scroll{ scrollbar-color: rgba(237,0,106,0.7) rgba(255,255,255,0.08); scrollbar-width: thin; }

/* Mobile / Tablet: nav na górze, przewijana poziomo z maską-fade i paskiem przewijania */

@media (max-width:1024px){
  #mx-services{ --mx-sticky-top:64px; overflow-x:hidden; } /* bez puchnięcia */

  /* Jedna kolumna: NAV (u góry) -> CONTENT */
  .mx-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "nav"
      "content";
    gap:14px;
    width:100%;
  }

  .mx-nav{
    grid-area:nav;
    position:sticky;
    top:var(--mx-sticky-top);
    z-index:10;
    width:100%;
    max-width:100%;
    padding:8px 8px 0;
    box-sizing:border-box;
  }

  /* SCROLLER – nie rozpycha viewportu, realny h-scroll */
  .mx-nav-scroll{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;

    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pinch-zoom;
    overscroll-behavior-x:contain;

    padding-bottom:10px;      /* miejsce na scrollbar */
    margin-bottom:-10px;      /* optyczna kompensacja */
  }

  /* Widoczny, klasyczny scrollbar poziomy */
  .mx-nav-scroll::-webkit-scrollbar{ height:10px; }
  .mx-nav-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,0.08); border-radius:8px; }
  .mx-nav-scroll::-webkit-scrollbar-thumb{ background:rgba(237,0,106,0.60); border-radius:8px; }
  .mx-nav-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(237,0,106,0.80); }

  /* Karty zakładek – nie kurczą się, szerokość wg treści */
  .mx-link{
    display:inline-grid;
    grid-template-columns:24px auto;
    padding:10px 12px;
    scroll-snap-align:start;
    min-width:max-content;   /* klucz: szerokość = treść */
    flex:0 0 auto;
  }
  .mx-link[aria-current="true"]::before{
    left:12px; right:12px; bottom:-2px; top:auto; height:2px; width:auto;
  }

  /* Przycisk nawigacji ‹ / › – pojawia się tylko przy overflow */
  .mx-nav-btn{
    display:none;            /* domyślnie ukryte */
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:36px; height:36px;
    border-radius:999px;
    border:1px solid var(--mx-border);
    background:rgba(15,20,26,.75);
    backdrop-filter:blur(6px);
    align-items:center; justify-content:center;
    z-index:11; color:var(--mx-text);
  }
  .mx-nav.mx-nav--overflow .mx-nav-btn{ display:flex; }
  .mx-nav-prev{ left:4px; }
  .mx-nav-next{ right:4px; }
  .mx-nav-btn[disabled]{ opacity:.35; pointer-events:none; }

  /* Fades (gradient na krawędziach – nie maska, więc scrollbar widać) */
  .mx-nav-fade{
    display:none;
    position:absolute; top:0; bottom:0; width:24px; z-index:10; pointer-events:none;
  }
  .mx-nav.mx-nav--overflow .mx-nav-fade{ display:block; }
  .mx-nav-fade--left{ left:0;  background:linear-gradient(to right, rgba(11,15,19,1), rgba(11,15,19,0)); }
  .mx-nav-fade--right{ right:0; background:linear-gradient(to left,  rgba(11,15,19,1), rgba(11,15,19,0)); }
  .mx-nav.mx-nav--at-start .mx-nav-fade--left{ opacity:0; }
  .mx-nav.mx-nav--at-end   .mx-nav-fade--right{ opacity:0; }

  /* Treść pod spodem, w 100% szerokości; bez „lepienia” headera panelu */
  .mx-panel-host{ grid-area:content; width:100%; max-width:100%; }
  .mx-panel-head{ position:static; margin:-6px -4px 10px; padding:12px 10px 8px; }

  /* Zapobiegamy puchnięciu przez potomków */
  .mx-layout > *{ min-width:0; min-height:0; }
  #mx-services img, #mx-services video, #mx-services iframe{ max-width:100%; height:auto; display:block; }
  .mx-panel-body, .mx-panel-head, .mx-panel-host{ overflow-wrap:anywhere; word-break:break-word; }
}







/*KROKI WSPÓŁPRACU */
/* === Sekcja główna === */
.steps-section {
  position: relative;
  padding: 100px 20px;
  margin-top: 1%; 
}


.steps-container {
position: relative;
left: -5%;
}

/* === Główna pionowa linia === */
.steps-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 0; /* Zmieniane w JS */
  background: linear-gradient(to bottom, #2b6aed 0%, #ed006a 100%);
  z-index: 0;
  transition: height 1s ease-out;
}

/* === Krok === */
.step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 160px;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  position: relative;
  z-index: 1;
}

.step.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Kolumna lewa – obrazek === */
.step-left {
  flex: 1;
  text-align: right;
  padding-right: 40px;

}

/* .step-image {
  max-width: 150px;

} */

.step.visible .step-image {
  opacity: 1;
  transform: translateY(0);
}

/* === Kolumna środkowa – numer === */
.step-center {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-number {
  font-family: 'Michroma', sans-serif;
  font-size: 42px;
  color: #ed006a;
  text-shadow: 0 0 8px #ed006a, 0 0 18px #ed006a88;
  background: #111;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease-out 0.2s;
}

.step.visible .step-number {
  opacity: 1;
  transform: scale(1);
}

/* === Kolumna prawa – tekst === */
.step-right {
  flex: 1;
  padding-left: 40px;
  color: #fff;
}

.step-title {
  font-family: 'Michroma', sans-serif;
  font-size: 24px;
  margin-bottom: 10px;
  color: #2b6aed;
  text-shadow: 0 0 4px #2b6aed;
}

.step-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
  font-family: 'Michroma', sans-serif;
}

.step.visible .step-desc {
  opacity: 1;
  transform: translateY(0);
}

/* === Responsywność: TABLETY (<=768px) === */
@media (max-width: 768px) {
  .steps-section {
    padding: 60px 16px;
  }

  /* Pionowa linia przesunięta do lewej krawędzi */
  .steps-line {
    left: 12px;
    transform: none;
  }

  .step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 100px;
    padding-left: 40px; /* odstęp od linii */
  }

  /* Ukrywamy kolumnę z obrazkiem */
  .step-left {
    display: none;
  }

  .step-image {
    display: none !important;
  }

  .step-center {
    margin: 0 0 12px;
    align-self: flex-start;
  }

  .step-number {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }

  .step-right {
    width: 100%;
    padding: 0;
  }

  .step-title {
    font-size: 20px;
  }

  .step-desc {
    font-size: 15px;
  }
}

/* === Responsywność: MAŁE TELEFONY (<=480px) === */
@media (max-width: 480px) {
  .steps-section {
    padding: 40px 12px;
  }

  .steps-line {
    left: 10px;
  }

  .step {
    padding-left: 32px;
    margin-bottom: 80px;
  }

  .step-number {
    width: 60px;
    height: 60px;
    font-size: 26px;
  }

  .step-title {
    font-size: 18px;
  }

  .step-desc {
    font-size: 14px;
  }
}



.steps {
  stroke: #555; /* szary kolor początkowy */
  fill: none;
  stroke-width: 2;
  filter: none;
  transition: filter 0.3s ease, stroke 0.3s ease;
  width: 125px;
  height: 125px;
}

.steps.glow {
  stroke: white;
  filter: drop-shadow(0 0 1px white) 
          drop-shadow(0 0 6px #ff0080) 
          drop-shadow(0 0 12px #ff0080)
          drop-shadow(0 0 20px #ff0080);
}

/* Opcjonalnie mocniejszy glow na hoverze */
.steps.glow:hover {
  filter: drop-shadow(0 0 4px white) 
          drop-shadow(0 0 8px #ff0080) 
          drop-shadow(0 0 18px #ff0080)
          drop-shadow(0 0 28px #ff0080);
}

.steps-button {
  width: 60%;
  text-align: center;
  margin: 10%;
}