body{
  margin:0;
  font-family:Poppins, sans-serif;
}
.container{max-width:1100px;margin:auto;padding:20px}
.site-header,.site-footer{background:#111;color:#fff}
a{color:inherit;text-decoration:none}
.btn{display:inline-block;padding:12px 20px;background:#f59e0b;color:#000}






/* ================= HERO ================= */
.hero{
  --heroCardW: 552px;              /* 460px + ~20% */
  --heroCardShiftX: -130px;        /* przesunięcie karty w lewo na desktop */

  position: relative;
  min-height: 680px;               /* zamiast height -> lepiej pod RWD */
  color: #fff;
  overflow: hidden;
  background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.32);
}

.hero__inner{
  position: relative;
  z-index: 2;
  min-height: 480px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  padding-top: 150px;
}

/* ===== LEFT ===== */
.hero__left{
  flex: 0 0 620px;
}

.hero__kicker{
  color: #ff9230;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 8px;
}

.hero__title{
  font-size: 82px;
  line-height: .92;
  letter-spacing: 2px;
  margin: 0 0 12px;
}

.hero__titleLine{ display:block; }
.hero__titleLine:first-child{ white-space: nowrap; }
.hero__titleLine--accent{ color:#ff9230; }

.hero__chips{
  font-size: 20px;
  letter-spacing: 2px;
  display:flex;
  gap: 10px;
  margin-bottom: 10px;
}

.hero__cities{
  font-size: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 16px;
}

.hero__bullets{
  font-size: 17px;
  line-height: 1.3;
  max-width: 520px;
}
.hero__bullets b{ color:#ff9230; }

/* ===== RIGHT ===== */
.hero__right{
  flex: 0 0 var(--heroCardW);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  left: var(--heroCardShiftX);     /* przesunięcie w lewo */
}

/* ===== CARD ===== */
.heroCard,
.heroCard *{ box-sizing: border-box; }

.heroCard{
  width: var(--heroCardW);
  display: flex;
  flex-direction: column;
  gap: 12px;

  background: rgba(163,106,50,.75);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 18px;
  margin-top: 40px;

  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.heroCard__top{
  margin: 0;
  padding: 10px 12px 6px;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
}

/* ===== BUTTONS ===== */
.heroCard__btn{
  width: 100%;
  max-width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;

  padding: 16px;
  border-radius: 10px;
  text-decoration:none;
  letter-spacing: .3px;
  font-weight: 500;

  margin: 0;
  overflow: hidden;

  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}

.heroCard__btn--primary{
  background:#111a2b;
  color:#fff;
  border: 1px solid rgba(0,0,0,.2);
  font-size: 22px;
}

.heroCard__phone{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 22px;
  white-space: nowrap;
  min-width: 0;
}
.heroCard__phone svg{
  width: 18px;
  height: 18px;
}

.heroCard__btn--ghost{
  background: transparent;
  color:#fff;
  border: 1px solid rgba(255,255,255,.55);
  font-size: 22px;
  padding: 14px 16px;
}

/* ===== CARD FOOT ===== */
.heroCard__line{
  height: 1px;
  background: rgba(255,255,255,.35);
  margin: 4px 0 0;
}

.heroCard__checks{
  text-align:center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  opacity: .95;
  padding-bottom: 2px;
}

/* ===== HOVER BUTTONS ===== */
.heroCard__btn:hover,
.heroCard__btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.heroCard__btn--primary:hover,
.heroCard__btn--primary:focus-visible{
  filter: brightness(1.06);
}

.heroCard__btn--ghost:hover,
.heroCard__btn--ghost:focus-visible{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.85);
}

.heroCard__btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,0) 75%);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.heroCard__btn:hover::after,
.heroCard__btn:focus-visible::after{
  opacity: 1;
  transform: translateX(0);
}

.heroCard__btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

@media (prefers-reduced-motion: reduce){
  .heroCard__btn,
  .heroCard__btn::after{
    transition: none;
  }
}

/* ================= HERO – RESPONSIVE ================= */

/* mniejsze desktopy/laptopy */
@media (max-width: 1200px){
  .hero{
    --heroCardW: 520px;
    --heroCardShiftX: 0px;       /* nie przesuwamy, żeby nie ucinało */
    background-attachment: scroll; /* fixed często psuje mobile + wydajność */
  }

  .hero__inner{
    gap: 40px;
    padding-top: 130px;
  }

  .hero__left{
    flex: 1 1 auto;
  }

  .heroCard{
    width: var(--heroCardW);
  }
}

/* tablet */
@media (max-width: 992px){
  .hero{
    min-height: auto;
    background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
  }

  .hero__inner{
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding-top: 120px;
    padding-bottom: 40px;
    gap: 26px;
    z-index: 1
  }

  .hero__left{
    flex: 1 1 auto;
  }

  .hero__title{ font-size: 64px; }
  .hero__chips{ font-size: 18px; }
  .hero__cities{ font-size: 16px; }
  .hero__bullets{ font-size: 16px; max-width: 100%; }

  .hero__right{
    flex: 1 1 auto;
    justify-content: center;
    left: 0;
  }

  .heroCard{
    width: min(560px, 100%);
    margin-top: 10px;
  }
}

/* telefon */
@media (max-width: 576px){
  .hero__inner{
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .hero__kicker{ font-size: 16px; }
  .hero__title{
    font-size: 48px;
    letter-spacing: 1px;
  }
  .hero__chips{ font-size: 14px; }
  .hero__cities{
    font-size: 14px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .heroCard{
    padding: 14px;
    border-radius: 12px;
  }

  .heroCard__top{
    font-size: 18px;
    padding: 8px 10px 4px;
  }

  .heroCard__btn--primary,
  .heroCard__btn--ghost{
    font-size: 18px;
    padding: 14px;
  }

  .heroCard__phone{
    font-size: 18px;
    gap: 8px;
  }

  .heroCard__checks{
    font-size: 13px;
  }
}


@media (max-width: 576px){
  .hero__cities{
    display: flex;
    align-items: flex-start;
    gap: 10px;

    flex-wrap: nowrap;        /* ikona + tekst w jednym “wierszu” */
  }

  .hero__cities .pin{
    flex: 0 0 auto;
    margin-top: 2px;          /* delikatne wyrównanie do pierwszej linii */
  }

  .hero__cities .pin__svg{
    width: 18px;
    height: 18px;
    display: block;
  }

  /* tekst ma się zawijać obok ikony */
  .hero__cities{
    line-height: 1.25;
  }
}


/* ================= PROCESS INTRO ================= */
.processIntro{
  background:#f6f6f6;
  padding: 60px 0 40px;
}

.processIntro__inner{
  text-align:center;
  max-width: 1100px;
  margin: 0 auto;
}

/* nagłówek mały */
.processIntro__kicker{
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:#ff9230;
  margin-bottom: 5px;
  font-weight: 500;
}

/* nagłówek duży */
.processIntro__title{
  font-size: 36px;
  line-height: 1.02;
  margin: 0 0 28px;
  font-weight: 800;
  color:#0b1320;
}

.processIntro__title .accent{ color:#ff9230; }

/* opis */
.processIntro__lead{
  margin: 0 auto;
  max-width: 1200px;
  font-size: 20px;
  line-height: 1.22;
  color:#2b3242;
  font-weight: 400;
}

.processIntro__lead b{
  color:#000;
  font-weight: 600;
}

.processIntro__lead .accent{
  color:#ff9230;
  font-weight: 600;
}





/* ================= STEPS (4 KROKI) ================= */
.steps{
  background:#fff;
  padding: 60px 0 70px;
}

.steps__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
  position: relative;
}

/* karty */
.stepCard{
  position: relative;
  background:#fff;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 54px 26px 18px;
  text-align:center;
  overflow: visible;
}

/* łączniki pomiędzy kartami (jak na zrzucie) */
.stepCard:not(:last-child)::after{
  content:"";
  position:absolute;
  top: 64px;
  right: -28px;
  width: 28px;
  height: 2px;
  background: #ff9230;
  opacity: .9;
}

/* badge 01/02/03/04 */
.stepCard__badge{
  position:absolute;
  left: 22px;
  top: -30px;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #ff9230;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 26px rgba(255,146,48,.35);
  border: 4px solid #fff;
}
.stepCard__badge span{
  color:#fff;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 1px;
}

/* tytuł */
.stepCard__title{
  margin: 6px 0 14px;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  color:#0b1320;
}

/* opis */
.stepCard__text{
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.45;
  color:#2b3242;
  font-weight: 400;
}
.stepCard__text b{
  color:#0b1320;
  font-weight: 800;
}

/* czas */
.stepCard__time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-weight: 800;
  color:#ff9230;
  margin-bottom: 16px;
  font-size: 18px;
}
.stepCard__clock{
  font-size: 18px;
}

/* ikona */
.stepCard__icon{
  display:flex;
  justify-content:center;
  margin: 6px 0 18px;
}
.stepCard__icon img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(255,146,48,.25));
}

/* pomarańczowy pasek na dole */
.stepCard__bar{
  width: calc(100% + 20px);
  margin: 0 -10px;
  background:#ff9230;
  color:#fff;
  font-weight: 800;
  font-size: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(255,146,48,.25);
}

/* ===== RWD ===== */
@media (max-width: 1100px){
  .steps__grid{ grid-template-columns: repeat(2, 1fr); }
  .stepCard:not(:last-child)::after{ display:none; }
}

@media (max-width: 640px){
  .steps{ padding: 45px 0 55px; }
  .steps__grid{ grid-template-columns: 1fr; }
  .stepCard{ padding: 52px 20px 16px; }
  .stepCard__title{ font-size: 26px; }
  .stepCard__text{ font-size: 17px; }
}

/* ================= STEPS – FINAL ================= */
.steps{
  background:#f6f6f6;
  padding: 60px 0 70px;
}

.steps__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: stretch;
}

/* KAFEL */
.stepCard{
  position: relative;
  background:#fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  padding: 52px 22px 0;
  text-align:center;

  display:flex;
  flex-direction: column;
  height: 100%;                 /* RÓWNA WYSOKOŚĆ */
}

/* NUMER */
.stepCard__badge{
  position:absolute;
  top: -28px;
  left: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:#ff9230;
  display:flex;
  align-items:center;
  justify-content:center;
  border:4px solid #fff;
  box-shadow: 0 10px 22px rgba(255,146,48,.35);
}
.stepCard__badge span{
  color:#fff;
  font-size: 26px;
  font-weight: 800;
}

/* MAŁA KROPKA */
.stepCard__badge::after{
  content:"";
  position:absolute;
  right:-10px;
  bottom:8px;
  width:10px;
  height:10px;
  background:#ff9230;
  border-radius:50%;
  box-shadow: 0 0 0 4px #fff;
}

/* TYTUŁ */
.stepCard__title{
  margin: 6px 0 12px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color:#0b1320;
}

/* OPIS */
.stepCard__text{
  font-size: 16px;
  line-height: 1.45;
  color:#2b3242;
  margin: 0 0 10px;
}
.stepCard__text b{
  color:#000;
  font-weight: 700;
}

/* CZAS */
.stepCard__time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color:#ff9230;               /* ZEGAREK */
  margin-bottom: 12px;
}
.stepCard__clock{
  font-size: 15px;
}

/* IKONA */
.stepCard__icon{
  margin: auto 0 14px;         /* spycha ikonę w dół – równe karty */
}
.stepCard__icon img{
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(255,146,48,.25));
}

/* DOLNY BUTTON */
.stepCard__bar{
  background:#ff9230;
  color:#fff;
  font-weight: 500;
  font-size: 16px;
  padding: 12px 10px;
  margin: 0 -22px;             /* NA CAŁĄ SZEROKOŚĆ */
  border-radius: 0;            /* BEZ RADIUS */
}

/* ===== RWD ===== */
@media (max-width: 1100px){
  .steps__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .steps__grid{
    grid-template-columns: 1fr;
  }
  .stepCard{
    padding: 48px 20px 0;
  }
}


.stepCard__clock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ff9230;           /* kolor jak w projekcie */
  line-height:0;
}

.stepCard__clock .clockSvg{
  display:block;
}


/* ===== Badge 01/02/03/04 – gradient + cień ===== */
.stepCard__badge{
  background: linear-gradient(180deg, #ffb35c 0%, #ff9230 55%, #ff7a00 100%);
  box-shadow:
    0 14px 28px rgba(255,146,48,.35),
    0 2px 0 rgba(255,255,255,.35) inset;
}

/* mała kropka też z lekkim gradientem */
.stepCard__badge::after{
  background: linear-gradient(180deg, #ffd1a1 0%, #ff9230 70%, #ff7a00 100%);
  box-shadow:
    0 0 0 4px #fff,
    0 10px 18px rgba(255,146,48,.25);
}


/* ===== Ikona – kółko gradient + ramka + cień ===== */
.stepCard__icon{
  display:flex;
  justify-content:center;
  margin: auto 0 14px;
}

.stepCard__icon::before{
  content:"";
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffd5a8 0%, #ffb35c 28%, #ff9230 62%, #ff7a00 100%);
  border: 5px solid #fff;
  box-shadow:
    0 18px 28px rgba(0,0,0,.12),
    0 10px 20px rgba(255,146,48,.18);
  position:absolute;
}

.stepCard__icon{
  position: relative;
  min-height: 120px; /* żeby kółko zawsze miało miejsce */
}

.stepCard__icon img{
  width: 64px;          /* ikona mniejsza, jak w referencji */
  height: 64px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.12));
}


/* ===== Dolny "button" – pełna szerokość, gradient, ramka, cień ===== */
.stepCard__bar{
  background: linear-gradient(180deg, #ffb35c 0%, #ff9230 55%, #ff7a00 100%);
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 26px rgba(255,146,48,.25);
}


/* ===== IKONY: większe + idealnie wyśrodkowane + kółko wyżej ===== */

/* blok ikony – rezerwuje miejsce i ustawia środek */
.stepCard__icon{
  position: relative;
  min-height: 140px;              /* więcej miejsca na większe kółko */
  display: grid;
  place-items: center;            /* środek */
  margin: auto 0 10px;            /* trzyma układ i wyrównuje wysokości */
}

/* kółko tła (gradient) – większe i wyżej */
.stepCard__icon::before{
  content:"";
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffd5a8 0%, #ffb35c 28%, #ff9230 62%, #ff7a00 100%);
  border: 5px solid #fff;
  box-shadow:
    0 18px 28px rgba(0,0,0,.12),
    0 10px 20px rgba(255,146,48,.18);

  position: absolute;
  left: 50%;
  top: 46%;                        /* PRZESUWA KÓŁKO WYŻEJ */
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* obrazek ikony – większy i zawsze w środku */
.stepCard__icon img{
  width: 92px;                     /* POWIĘKSZENIE */
  height: 92px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display:block;

  filter: drop-shadow(0 10px 12px rgba(0,0,0,.12));
}



.stepCard__icon{
  margin: 8px 0 10px !important;   /* zamiast auto */
  transform: translateY(-3px);    /* podnieś (zmień -18px wg uznania) */
}


.marginmoj {
margin-top: 10px;	
	
}

/* ===== STEPS MOBILE FIX: brak nachodzenia kart ===== */
@media (max-width: 640px){

  .steps__grid{
    grid-template-columns: 1fr;
    gap: 92px;                 /* większy odstęp – mieści badge */
  }

  .stepCard{
    padding-top: 60px;         /* miejsce na badge, żeby nie wchodził w treść */
  }

  /* wyłącz łączniki na mobile */
  .stepCard::after{
    display:none !important;
  }

  /* badge zostaje nad kartÄ…, ale nie powoduje kolizji */
  .stepCard__badge{
    top: -26px;                /* możesz dać -22px jeśli chcesz mniej */
    left: 18px;
  }

  /* kółko ikony trochę wyżej, żeby nie rozpychało dołu */
  .stepCard__icon{
    transform: translateY(-10px);
    min-height: 130px;
  }
}


@media (max-width: 640px){
  .stepCard{ margin-top: 0px !important; }
}


/* ================= QUOTE FORM SECTION ================= */
.quoteForm{
  position: relative;
  padding: 70px 0 90px;
  background: #f6f6f6;      /* kolor poza pasem zdjęcia */
  overflow: hidden;
}

/* PAS ZE ZDJĘCIEM (tylko na środku) */
.quoteForm::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 520px; /* możesz zmienić: 420-600 */
  background: url("/assets/img/2-min.jpg") center/cover no-repeat;
  z-index: 0;
}

/* "mleko" tylko na pasie zdjęcia */
.quoteForm::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 520px; /* MUSI być tyle samo co ::before */
  background: rgba(246,246,246,.78);
  z-index: 1;
}

/* treść nad tłem */
.quoteForm__inner{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
}

/* karta formularza */
.quoteFormCard{
  width: min(980px, 100%);
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  overflow:hidden;
}

/* nagłówek karty */
.quoteFormCard__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 18px 18px;
  border-bottom: 1px solid #efefef;
  background:#fff;
}

.quoteFormCard__icon{
  color:#ff9230;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.quoteFormCard__title{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  color:#0b1320;
}

/* placeholder na formularz */
.quoteFormCard__placeholder{
  padding: 28px;
}

.placeholderBox{
  border: 1px dashed #dcdcdc;
  border-radius: 10px;
  background: #fafafa;
  padding: 22px;
  min-height: 520px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 14px;
}

.placeholderBox__line{
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f1f1 0%, #e9e9e9 50%, #f1f1f1 100%);
  opacity: .9;
}
.placeholderBox__line.short{ width: 60%; }

.placeholderBox__note{
  margin-top: 14px;
  font-size: 14px;
  color:#6b7280;
  text-align:center;
}

/* ===== RWD ===== */
@media (max-width: 768px){
  .quoteForm{ padding: 55px 0 70px; }

  /* pas zdjęcia niższy na mobile */
  .quoteForm::before,
  .quoteForm::after{
    height: 360px;
  }

  .quoteFormCard__head{ padding: 16px; }
  .quoteFormCard__title{ font-size: 16px; }
  .quoteFormCard__placeholder{ padding: 18px; }
  .placeholderBox{ min-height: 420px; }
}


/* usuń nakładkę na zdjęciu */
.quoteForm::after{
  display:none !important;
  content:none !important;
}


/* ================= WHAT WE BUY ================= */
.whatWeBuy{
  background:#f6f6f6;
  padding: 60px 0 40px;
}

.whatWeBuy__inner{
  text-align:center;
  max-width: 1100px;
  margin: 0 auto;
}

/* nagłówek duży */
.whatWeBuy__title{
  font-size: 36px;
  line-height: 1.02;
  margin: 0 0 28px;
  font-weight: 800;
  color:#ff9230; /* jak na screenie */
}

/* opis */
.whatWeBuy__lead{
  margin: 0 auto;
  max-width: 1200px;
  font-size: 20px;
  line-height: 1.22;
  color:#2b3242;
  font-weight: 400;
}

.whatWeBuy__lead b{
  color:#000;
  font-weight: 600;
}

.whatWeBuy__lead .accent{
  color:#ff9230;
  font-weight: 600;
}

/* RWD – delikatnie w dół */
@media (max-width: 768px){
  .whatWeBuy{ padding: 50px 0 34px; }
  .whatWeBuy__title{ font-size: 34px; margin-bottom: 18px; }
  .whatWeBuy__lead{ font-size: 18px; line-height: 1.28; }
}


/* ================= WHY AUTO-RALFI ================= */
.whyRalf{
  background:#f6f6f6;
  padding: 60px 0 00px;
}

.whyRalf__inner{
  text-align:center;
  max-width: 1100px;
  margin: 0 auto;
}

/* tytuł */
.whyRalf__title{
  font-size: 36px;
  line-height: 1.02;
  margin: 0 0 28px;
  font-weight: 800;
  color:#0b1320;
}

.whyRalf__title .accent{
  color:#ff9230;
}

/* opis */
.whyRalf__lead{
  margin: 0 auto;
  max-width: 1200px;
  font-size: 20px;
  line-height: 1.22;
  color:#2b3242;
  font-weight: 400;
}

.whyRalf__lead b{
  color:#000;
  font-weight: 600;
}

.whyRalf__lead .accent{
  color:#ff9230;
  font-weight: 600;
}

/* RWD */
@media (max-width: 768px){
  .whyRalf{ padding: 50px 0 34px; }
  .whyRalf__title{ font-size: 34px; margin-bottom: 18px; }
  .whyRalf__lead{ font-size: 18px; line-height: 1.28; }
}



/* ================= BUY TYPES (4 kafelki) ================= */
.buyTypes{
  background:#f6f6f6;
  padding: 45px 0 70px;
}

.buyTypes__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 28px;
}

/* karta */
.buyTypesCard{
  background:#fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  padding: 22px 22px 20px;
}

/* nagłówek z ikoną */
.buyTypesCard__head{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.buyTypesCard__icon{
  width: 58px;
  height: 42px;
  border-radius: 999px;
  background: #fff2e6;                 /* jasna pomarańcz jak w projekcie */
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.buyTypesCard__icon img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display:block;
}

.buyTypesCard__title{
  margin: 2px 0 0;
  font-size: 22px;
  padding-top: 15px;
  line-height: 1.15;
  font-weight: 600;
  color:#0b1320;
}

/* 2 kolumny list */
.buyTypesCard__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}

/* listy */
.buyTypesCard__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.buyTypesCard__list li{
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.35;
  color:#2b3242;
}

.buyTypesCard__list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:#ff9230;
  box-shadow: 0 2px 6px rgba(255,146,48,.35);
}

/* ===== RWD ===== */
@media (max-width: 980px){
  .buyTypes__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .buyTypes{ padding: 35px 0 55px; }
  .buyTypesCard{ padding: 18px; }
  .buyTypesCard__title{ font-size: 20px; }
  .buyTypesCard__cols{ grid-template-columns: 1fr; gap: 6px; }
  .buyTypesCard__list li{ font-size: 15px; margin: 8px 0; }
}


/* IKONKA w nagłówku kafelka – większa i w idealnym kółku */
.buyTypesCard__icon{
  width: 56px;                 /* kółko */
  height: 56px;                /* kółko */
  border-radius: 50%;
  background: #fff2e6;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 56px;
}

.buyTypesCard__icon img{
  width: 50px;                 /* większa ikonka */
  height: 50px;
  object-fit: contain;
  display:block;
}


/* ================= BENEFITS GRID (6 kafelków) ================= */
.benefitsGrid{
  background:#f6f6f6;
  padding: 5px 0 70px;
}

.benefitsGrid__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

/* kafelek */
.benefitCard{
  background:#fbfbfb;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  padding: 34px 34px 30px;
  text-align:center;

  display:flex;
  flex-direction:column;
  min-height: 210px; /* równe wysokości (zapas) */
}

/* kółko na ikonę */
.benefitCard__icon{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff1e6;              /* jasne pomarańczowe tło */
  display:grid;
  place-items:center;
  margin: 0 auto 18px;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  border: 1px solid rgba(255,146,48,.18);
}

.benefitCard__icon img{
  width: 66px;      /* większa ikona */
  height: 66px;
  object-fit: contain;
  display:block;
}

/* tytuł */
.benefitCard__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color:#0b1320;
}

/* opis */
.benefitCard__text{
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color:#2b3242;
  font-weight: 400;
}

/* równe “dociągnięcie” dołu */
.benefitCard__text{ ; padding-top: 6px; }

/* ===== RWD ===== */
@media (max-width: 1100px){
  .benefitsGrid__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .benefitsGrid{ padding: 45px 0 55px; }
  .benefitsGrid__grid{ grid-template-columns: 1fr; gap: 18px; }

  .benefitCard{ padding: 28px 22px; min-height: auto; }
  .benefitCard__title{ font-size: 18px; }
  .benefitCard__text{ font-size: 13px; }
}



/* ================= REVIEWS ================= */
.reviews{
  background:#f6f6f6;
  padding: 60px 0 80px;
}

.reviews__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* karta */
.reviewCard{
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 26px 26px 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform, box-shadow;
}

/* hover: lekko do góry + mocniejszy cień */
.reviewCard:hover{
  transform: translateY(-10px);
  box-shadow: 0 22px 45px rgba(0,0,0,.18);
}

.reviewCard__top{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 14px;
}

/* kółko z cudzysłowem */
.reviewCard__quote{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff3ea;
  color:#ff9230;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

/* gwiazdki */
.reviewCard__stars{
  color:#ff9230;
  font-size: 18px;
  letter-spacing: 2px;
  user-select:none;
}

.reviewCard__text{
  margin: 0;
  color:#1f2937;
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
}

/* cienka linia */
.reviewCard__divider{
  height: 1px;
  background: #e9e9e9;
  margin: 18px 0 16px;
}

.reviewCard__name{
  font-size: 18px;
  font-weight: 800;
  color:#0b1320;
}

.reviewCard__city{
  font-size: 15px;
  color:#6b7280;
}

/* ===== RWD ===== */
@media (max-width: 980px){
  .reviews__grid{ grid-template-columns: 1fr; }
  .reviewCard{ padding: 22px; }
  .reviewCard__text{ font-size: 17px; }
}


/* ================= REVIEWS ================= */
.reviews{
  background:#f6f6f6;
  padding: 10px 0 85px;
}

.reviews__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

.reviewCard{
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: 26px 26px 22px;
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
  min-height: 320px;
  display:flex;
  flex-direction: column;
}

.reviewCard:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.reviewCard__top{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 18px;
}

/* ikona cudzysłowia (kółko jak w projekcie) */
.reviewCard__quote{
  width: 56px;
  height: 56px;
  border-radius: 999px;          /* idealne koło */
  background: #fdeee3;
  display:grid;
  place-items:center;
  flex: 0 0 56px;
}

.reviewCard__quoteSvg{
  width: 30px;
  height: 30px;
  fill: #ff9230;
  transform: translateY(-1px);
}

/* gwiazdki */
.reviewCard__stars{
  color:#ff9230;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

/* tekst opinii */
.reviewCard__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color:#232b3b;
  font-style: italic;
}

/* divider */
.reviewCard__divider{
  height: 1px;
  background: #e9e9e9;
  margin: 22px 0 18px;
}

/* stopka */
.reviewCard__person{
  margin-top: auto;
}

.reviewCard__name{
  font-weight: 800;
  font-size: 14px;
  color:#0b1320;
  margin-bottom: 3px;
}

.reviewCard__city{
  font-size: 12px;
  color:#6b7280;
}

/* ===== RWD ===== */
@media (max-width: 1024px){
  .reviews__grid{ grid-template-columns: 1fr; }
  .reviewCard{ min-height: auto; }
}



/* ====== MODULE: AUTO-RALFI CONTACT ====== */
.auto-ralfi-contact {
  background: #0b1b2c; /* ciemny granat jak na podglÄ…dzie */
  color: #eaf0f6;
  padding: 56px 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.auto-ralfi-contact__container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.25fr;
  gap: 48px;
  align-items: start;
}

/* LEFT */
.auto-ralfi-contact__title {
  font-size: 38px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.5px;
  font-weight: 800;
}

.auto-ralfi-contact__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.85;
  text-transform: uppercase;
}

.auto-ralfi-contact__desc {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(234, 240, 246, 0.9);
  max-width: 42ch;
}

.auto-ralfi-contact__social {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}

.auto-ralfi-contact__social-btn {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auto-ralfi-contact__social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

.auto-ralfi-contact__social-btn svg {
  width: 22px;
  height: 22px;
  fill: #0b1b2c;
}

/* MIDDLE */
.auto-ralfi-contact__heading {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
}

.auto-ralfi-contact__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.auto-ralfi-contact__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 16px;
}

.auto-ralfi-contact__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  opacity: 0.9;
}

.auto-ralfi-contact__icon svg {
  width: 20px;
  height: 20px;
  fill: rgba(234, 240, 246, 0.92);
}

.auto-ralfi-contact__link {
  color: #eaf0f6;
  text-decoration: none;
}

.auto-ralfi-contact__link:hover {
  text-decoration: underline;
}

.auto-ralfi-contact__text {
  color: rgba(234, 240, 246, 0.92);
}

/* RIGHT (MAP) */
.auto-ralfi-contact__map {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.auto-ralfi-contact__map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .auto-ralfi-contact__container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .auto-ralfi-contact__desc {
    max-width: 65ch;
  }

  .auto-ralfi-contact__map iframe {
    height: 360px;
  }
}

@media (max-width: 560px) {
  .auto-ralfi-contact {
    padding: 40px 0;
  }

  .auto-ralfi-contact__container {
    width: min(1200px, calc(100% - 28px));
  }

  .auto-ralfi-contact__title {
    font-size: 32px;
  }

  .auto-ralfi-contact__map iframe {
    height: 300px;
  }
}



/* 1) ZEGAREK – większy i czytelniejszy */
.auto-ralfi-contact__item:last-child .auto-ralfi-contact__icon svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;            /* pełna biel */
  opacity: 1;               /* bez przygaszenia */
}

/* jeśli chcesz, żeby wszystkie ikony były odrobinę mocniejsze */
.auto-ralfi-contact__icon svg {
  width: 22px;              /* było 20px */
  height: 22px;
  fill: rgba(255, 255, 255, 0.98);
  opacity: 1;
}

/* 2) SOCIAL – większe przyciski i ikonki */
.auto-ralfi-contact__social-btn {
  width: 66px;              /* było 54px */
  height: 66px;
  border-radius: 12px;
}

.auto-ralfi-contact__social-btn svg {
  width: 28px;              /* było 22px */
  height: 28px;
}

/* opcjonalnie: większy odstęp */
.auto-ralfi-contact__social {
  gap: 18px;                /* było 14px */
}

.auto-ralfi-contact__icon svg {
  width: 24px;
  height: 24px;
  fill: #fff;
  opacity: 1;
}


.popular-cities{
  background:#0b1b2c;
  color:#eaf0f6;
  padding: 0px 0 54px;
}

.popular-cities__container{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
}

.popular-cities__title{
  margin:0 0 22px;
  font-size:22px;
  font-weight:400;
  letter-spacing:.2px;
}

.popular-cities__grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 18px 48px; /* row / col */
  align-items:start;
}

.popular-cities__link{
  color: rgba(234,240,246,.85);
  text-decoration:none;
  font-size:13px;
  line-height:1.3;
  display:inline-block;
  width: fit-content;
  transition: color .15s ease, transform .15s ease, text-decoration-color .15s ease;
}

.popular-cities__link:hover{
  color:#ffffff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.popular-cities__link:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 4px;
  border-radius: 6px;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 1100px){
  .popular-cities__grid{ grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}
@media (max-width: 780px){
  .popular-cities__grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 14px 26px; }
  .popular-cities__link{ font-size:16px; }
}



.footer-bottom{
  background:#0b1b2c;
  color: rgba(234,240,246,.9);
  padding: 24px 0 30px;
  border-top: 1px solid rgba(255,255,255,.12); /* linia u góry */
}

.footer-bottom__container{
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px;
}

.footer-bottom__left{
  display:flex;
  flex-direction:column;
  gap: 6px;
  max-width: 70ch;
}

.footer-bottom__copy,
.footer-bottom__meta{
  margin:0;
  font-size: 15px;
  line-height: 1.5;
}

.footer-bottom__meta{
  opacity: .9;
}

/* linki po prawej */
.footer-bottom__nav{
  display:flex;
  gap: 34px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-bottom__link{
  color: rgba(234,240,246,.9);
  text-decoration:none;
  font-size:15px;
  line-height:1.4;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.footer-bottom__link:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.footer-bottom__link:focus-visible{
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 4px;
  border-radius: 6px;
}

/* RWD */
@media (max-width: 900px){
  .footer-bottom__container{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-bottom__nav{
    justify-content:flex-start;
    gap: 18px 24px;
  }
}


/* ===== Trust stats module ===== */
.trust-stats {
  padding: 42px 0;
  background: linear-gradient(180deg, #f6f7fb 0%, #f3f5f9 100%);
}

.trust-stats__container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.trust-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.trust-card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 36px 18px 18px;
  box-shadow: 0 10px 26px rgba(20, 23, 33, 0.06);
  border: 1px solid rgba(20, 23, 33, 0.07);
  overflow: visible;
  min-height: 122px;

  /* domyślny kolor ikony */
  --icon-color: #ff8a1f;
}

.trust-card--green {
  --icon-color: #39b54a;
}

.trust-card--orange {
  --icon-color: #ff8a1f;
}

.trust-card__badge {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 23, 33, 0.08);
  border: 1px solid rgba(20, 23, 33, 0.07);
  display: grid;
  place-items: center;
  color: var(--icon-color);
}

.trust-card__icon {
  width: 34px;
  height: 34px;
  display: block;
}

.trust-card__body {
  text-align: center;
}

.trust-card__value {
  font-size: clamp(28px, 2.2vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ff8a1f;
  margin-top: 6px;
}

.trust-card__label {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.3;
  color: #1f2937;
  font-weight: 500;
}

/* Hover (delikatnie) */
.trust-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 23, 33, 0.09);
}

/* Responsive */
@media (max-width: 980px) {
  .trust-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 520px) {
  .trust-stats {
    padding: 34px 0;
  }

  .trust-stats__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .trust-card {
    padding: 34px 16px 16px;
  }

  .trust-card__label {
    font-size: 16px;
  }
}


/* ===== Trust stats module ===== */
.trust-stats {
  padding: 42px 0;
  background: linear-gradient(180deg, #f6f7fb 0%, #f3f5f9 100%);
}

/* GRID ma działać wewnątrz Twojego .container (1100px + padding) */
.trust-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.trust-card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 36px 18px 18px;
  box-shadow: 0 10px 26px rgba(20, 23, 33, 0.06);
  border: 1px solid rgba(20, 23, 33, 0.07);
  overflow: visible;
  min-height: 82px;

  --icon-color: #ff8a1f;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 23, 33, 0.09);
}

.trust-card--green { --icon-color: #39b54a; }
.trust-card--orange { --icon-color: #ff8a1f; }

.trust-card__badge {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 23, 33, 0.08);
  border: 1px solid rgba(20, 23, 33, 0.07);
  display: grid;
  place-items: center;
  color: var(--icon-color);
}

.trust-card__icon {
  width: 34px;
  height: 34px;
  display: block;
}

.trust-card__body {
  text-align: center;
}

.trust-card__value {
  font-size: clamp(28px, 2.2vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ff8a1f;
  margin-top: 6px;
}

.trust-card__label {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: #1f2937;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 980px) {
  .trust-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 520px) {
  .trust-stats { padding: 34px 0; }
  .trust-stats__grid { grid-template-columns: 1fr; gap: 16px; }
  .trust-card { padding: 34px 16px 16px; }
  .trust-card__label { font-size: 16px; }
}


/* BLOG sekcja jak na screenie */
.blogModule{
  background: url("/assets/img/3-min.jpg") center/cover no-repeat;
  padding: 70px 0;
}

.blogModule__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* jeśli w module są zbyt wąskie karty, dopasuj grid */
.blogModule .wpisyGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* responsywność */
@media (max-width: 1100px){
  .blogModule .wpisyGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .blogModule .wpisyGrid{ grid-template-columns: 1fr; }
}


/* ===== HEADER (AUTO-RALFI) – DESKTOP ONLY ===== */
.topbar{
  position: relative;
  height: 120px;
  color:#fff;
  overflow:hidden;

  background-image: url("/assets/img/1-min.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-bottom: 10px;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.28);
}

.topbar__inner{
  position: relative;
  z-index: 2;
  height: 120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* lewa strona */
.brand{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#fff;
}
.brand__logo{
  height: 80px;
  width:auto;
  display:block;
  margin-top: -5px
}

/* prawa strona: CTA u góry + menu pod spodem */
.topbar__right{
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  align-items: flex-end;         /* jak na screenie: przycisk i menu do prawej */
  justify-content: center;
  gap: 14px;                     /* odstęp między przyciskiem a menu */
  min-width: 0;
}

/* CTA (mniejsze) */
.callout{
  display:flex;
  align-items:center;
  gap: 12px;
  background:#ff9230;
  color:#fff;
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 400;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  margin-top: 30px;
}

.callout__text{ font-size: 14px; }
.callout__sep{ width:1px; height: 20px; background: rgba(255,255,255,.35); }
.callout__phone{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .3px;
  font-size: 17px
}
.callout__icon{ display:block; }

/* MENU pod CTA */
.menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 46px;
  flex-wrap: nowrap;
  min-width: 0;
  margin-bottom: 50px;
  margin-top: 5px;
}

.menu__link{
  color:#fff;
  text-decoration:none;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: color .15s ease;
}

.menu__link:hover{ color:#ff9230; }
.menu__link.is-active{ color:#ff9230; } /* na screenie “Wycena” jest pomarańczowa */

/* HOVER/FOCUS dla CTA (callout) */
.callout{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
  will-change: transform;
}

.callout:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  filter: brightness(1.05);
}

.callout:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  filter: brightness(0.98);
}

/* delikatny “ruch” telefonu i ikonki */
.callout:hover .callout__phone{
  transform: translateX(2px);
}

.callout__phone{
  transition: transform .15s ease;
}

/* separator niech będzie trochę bardziej widoczny na hover */
.callout:hover .callout__sep{
  background: rgba(255,255,255,.55);
}

.callout__sep{
  transition: background .15s ease;
}

/* focus dla klawiatury */
.callout:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 4px;
  border-radius: 12px;
}


/* ===== MOBILE MENU ELEMENTS (domyślnie ukryte na desktopie) ===== */
.menu-toggle,
.menu-overlay {
  display: none;
}

/* wrapper dla menu – na desktopie bez zmian */
.menu-wrap{
  display: block;
}

/* ===== MOBILE (OFFCANVAS) – JEDYNA WERSJA ===== */
@media (max-width: 900px){

  .topbar{
    position: relative;      /* ważne */
    height: auto;
    padding: 12px 0;
    background-attachment: scroll;
  }

  .topbar__inner{
    height: auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand__logo{
    height: 52px;
    margin-top: 0;
  }

  /* prawa strona: telefon + hamburger */
  .topbar__right{
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  /* CTA jako kompaktowy przycisk */
  .callout{
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .callout__text,
  .callout__sep{
    display: none;
  }
  .callout__phone{
    font-size: 15px;
    gap: 8px;
  }
  .callout__icon{
    width: 18px;
    height: 18px;
  }

  /* na mobile nie pokazujemy desktopowego menu w linii */
  .menu{
    margin: 70px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* ===== HAMBURGER ===== */
  .menu-toggle{
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }

  .menu-toggle__bar{
    display:block;
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,.92);
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* ===== OFFCANVAS PANEL ===== */
  .menu-wrap{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: rgba(7, 18, 32, .98);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: -24px 0 60px rgba(0,0,0,.45);
    padding: 18px 14px;
    transform: translateX(110%);
    pointer-events: none;
    transition: transform .22s ease;
    z-index: 60;
    display: block;
  }

  .menu__link{
    font-size: 16px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
  }

  .menu__link:hover{
    color:#fff;
    background: rgba(255,146,48,.16);
  }

  .menu__link.is-active{
    color:#fff;
    background: rgba(255,146,48,.22);
  }

  /* ===== OVERLAY – domyślnie ukryty ===== */
  .menu-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.52);
    z-index: 55;
  }

  /* ===== OTWARTE ===== */
  .topbar.is-menu-open .menu-wrap{
    transform: translateX(0);
    pointer-events: auto;
  }

  .topbar.is-menu-open .menu-overlay{
    display: block;
  }

  /* hamburger -> X */
  .topbar.is-menu-open .menu-toggle__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(2){
    opacity: 0;
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}


@media (max-width: 900px){

  .topbar{
    height:auto;
    padding: 12px 0;
    background-attachment: scroll;
    position: relative;
       background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
  
  }

  /* układ: 2 kolumny (lewo: logo+telefon, prawo: hamburger) */
  .topbar__inner{
    height:auto;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand toggle"
      "callout toggle";
    align-items:center;
    gap: 10px 12px;
  }

  .brand{ grid-area: brand; }
  .topbar__right{ display: contents; } /* pozwala ułożyć dzieci w gridzie */

  /* telefon pod logo */
  .callout{
    grid-area: callout;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    width: fit-content;
  }
  .callout__text,
  .callout__sep{ display:none; }
  .callout__phone{ font-size: 15px; gap: 8px; }

  /* hamburger po prawej */
  .menu-toggle{
    grid-area: toggle;
    display:inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    cursor:pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
  .menu-toggle__bar{
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,.92);
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* OFFCANVAS */
  .menu-wrap{
    position: fixed;
    top:0; right:0;
    height:100vh;
    width: min(320px, 86vw);
    background: rgba(7, 18, 32, .98);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: -24px 0 60px rgba(0,0,0,.45);
    padding: 18px 14px;
    transform: translateX(110%);
    pointer-events:none;
    transition: transform .22s ease;
    z-index: 60;
  }

  .menu{
    margin: 70px 0 0;
    display:flex;
    flex-direction:column;
    gap: 8px;
  }

  .menu__link{
    font-size: 16px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
  }

  /* overlay domyślnie ukryty */
  .menu-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.52);
    z-index: 55;
  }

  /* OTWARTE */
  .topbar.is-menu-open .menu-wrap{
    transform: translateX(0);
    pointer-events:auto;
  }
  .topbar.is-menu-open .menu-overlay{
    display:block;
  }

  /* hamburger -> X */
  .topbar.is-menu-open .menu-toggle__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(2){
    opacity: 0;
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}


.no-scroll { overflow: hidden; }





@media (max-width: 900px){
	
	/* hamburger zawsze na wierzchu */
.menu-toggle{
  position: relative;
  z-index: 9999;
}

  /* overlay pod panelem, nad stroną */
  .menu-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9997;
  }

  /* panel menu */
  .menu-wrap{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: rgba(7, 18, 32, .98);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: -24px 0 60px rgba(0,0,0,.45);
    padding: 72px 14px 18px;   /* miejsce u góry na “X” */
    transform: translateX(110%);
    transition: transform .22s ease;
    pointer-events: none;
    z-index: 9998;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* otwarte */
  .topbar.is-menu-open .menu-wrap{
    transform: translateX(0);
    pointer-events: auto;
  }

  .topbar.is-menu-open .menu-overlay{
    display: block;
  }

  /* linki menu */
  .menu{
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .menu__link{
    display: block;
    font-size: 16px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
  }

  /* animacja hamburger -> X */
  .topbar.is-menu-open .menu-toggle__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(2){
    opacity: 0;
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}


@media (max-width: 900px){
  .topbar.is-menu-open .menu-toggle{
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    background: rgba(0,0,0,.35);
  }
}


@media (max-width: 900px){

  /* overlay: zawsze nad stroną */
  .menu-overlay{
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 9997 !important;
  }

  /* panel: zawsze full height, zawsze fixed z prawej */
  .menu-wrap{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;

    height: 100vh !important;
    width: min(320px, 86vw) !important;

    padding: 72px 14px 18px !important;
    margin: 0 !important;

    background: rgba(7,18,32,.98) !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;

    box-shadow: -24px 0 60px rgba(0,0,0,.45) !important;

    transform: translateX(110%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform .22s ease !important;

    z-index: 9998 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* otwarte */
  .topbar.is-menu-open .menu-wrap{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .topbar.is-menu-open .menu-overlay{
    display: block !important;
  }

  /* menu w panelu */
  .menu{
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .menu__link{
    display: block !important;
    font-size: 16px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.05) !important;
  }

  /* X zawsze widoczny (przycisk staje się X) */
  .menu-toggle{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 9999 !important;
  }

  /* animacja do X */
  .topbar.is-menu-open .menu-toggle__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg) !important;
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(2){
    opacity: 0 !important;
  }
  .topbar.is-menu-open .menu-toggle__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}

/* blokada scrolla */
.no-scroll{ overflow: hidden; }



/* ================= CO SKUPUJEMY (MARKI) ================= */
.brandsIntro{
  padding-bottom: 40px; /* więcej miejsca na logotypy */
}

.brandMarquee{
  margin-top: 26px;
  color: #0b1320; /* kolor SVG */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.brandMarquee__track{
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: brandMarqueeScroll 28s linear infinite;
  will-change: transform;
}

.brandMarquee__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
}

.brandMarquee__item svg{
  width: 64px;
  height: 64px;
  display: block;
  fill: currentColor;
}

.brandMarquee__item:hover{ opacity: 1; }

@keyframes brandMarqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (max-width: 768px){
  .brandMarquee__track{ gap: 34px; animation-duration: 22s; }
  .brandMarquee__item svg{ width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce){
  .brandMarquee__track{ animation: none; }
  .brandMarquee{ overflow-x: auto; }
}


.brandMarquee__item svg { display: none; } /* jeśli zostało ze starej wersji */

.brandLogo{
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .9;
  filter: none;
  display: inline-block;
}

.brandLogo:hover{ opacity: 1; }

@media (max-width: 768px){
  .brandLogo{ width: 54px; height: 54px; }
}


/* Ikony SVG w kafelkach (kolor w URL = #ff9230) */
.whyRalf--districts .whyRalf__itemHead{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.whyRalf--districts .whyRalf__icon{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
}

/* Siatka pod 10 kafelków (jeśli nie masz już) */
.whyRalf--districts .whyRalf__grid--districts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 992px){
  .whyRalf--districts .whyRalf__grid--districts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .whyRalf--districts .whyRalf__grid--districts{
    grid-template-columns: 1fr;
  }
}


.whyRalf__top {
text-align: center;	
	
}


/* ===== FAQ jak na screenie ===== */
.faqSection{
  padding: 80px 0;
  background: #0b1320; /* jeśli sekcja ma być w ciemnym klimacie */
}

.faqSection__title{
  text-align: center;
  color: #fff;
  font-weight: 800;
  margin: 0 0 14px;
}

.faqSection__line{
  width: 52px;
  height: 4px;
  background: #ff9230;
  margin: 0 auto 28px;
  border-radius: 999px;
}

.faqSection__lead{
  max-width: 900px;
  margin: 0 auto 34px;
  text-align: center;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}

.faq{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq__item{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}

.faq__question{
  width: 100%;
  padding: 22px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.faq__icon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  color: #ff9230;
}

.faq__icon svg{
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
}

.faq__answer{
  padding: 0 22px 22px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

.faq__answerInner{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* animacja + zmiana plus na X */
.faq__item.is-open .faq__icon svg{
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__icon svg{
  transition: transform .2s ease;
}

@media (max-width: 640px){
  .faq__question{ font-size: 16px; padding: 18px; }
  .faq__answer{ padding: 0 18px 18px; }
}


/* =========================
   PRIVACY POLICY MODULE
   Dotyczy tylko: .policyPage
   ========================= */

.policyPage{
  background: #f6f7fb;
}

/* HERO */
.policyPage .policyHero{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,146,48,.22), transparent 60%),
              linear-gradient(180deg, #0b1b2c 0%, #0b1320 100%);
  color: #fff;
  padding: 42px 0 36px;
}

.policyPage .policyHero__container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.policyPage .policyHero__title{
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: .4px;
  line-height: 1.1;
}

.policyPage .policyHero__meta{
  margin: 10px 0 0;
  font-size: 15px;
  color: rgba(255,255,255,.9);
}

/* CONTENT */
.policyPage .policyContent{
  padding: 34px 0 56px;
}

.policyPage .policyContent__container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.policyPage .policyCard{
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  border: 1px solid rgba(2, 6, 23, .06);
}

/* LIST (1-9) — numerowanie tylko raz (CSS counter) */
.policyPage .policyList{
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: policy;
}

.policyPage .policyList__item{
  counter-increment: policy;
  padding: 18px 0;
  border-bottom: 1px solid rgba(2, 6, 23, .08);
}

.policyPage .policyList__item:last-child{
  border-bottom: 0;
}

.policyPage .policyList__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .2px;
  color: #0b1320;
}

.policyPage .policyList__title::before{
  content: counter(policy) ". ";
  font-weight: 700;
  margin-right: 6px;
}

/* teksty */
.policyPage .policyCard p{
  margin: 0 0 10px;
  color: rgba(11, 19, 32, .88);
  line-height: 1.7;
  font-size: 15px;
}

.policyPage .policyCard p:last-child{
  margin-bottom: 0;
}

/* wypunktowania */
.policyPage .policyBullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11, 19, 32, .9);
}

.policyPage .policyBullets li{
  margin: 7px 0;
  line-height: 1.6;
  font-size: 15px;
}

/* CONTACT */
.policyPage .policyContact{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.policyPage .policyContact__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(11, 27, 44, .06);
  border: 1px solid rgba(2, 6, 23, .08);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.policyPage .policyContact__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
  background: rgba(255,146,48,.10);
}

.policyPage .policyContact__item--plain:hover{
  transform: none;
  box-shadow: none;
  background: rgba(11, 27, 44, .06);
}

.policyPage .policyContact__label{
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  opacity: .75;
}

.policyPage .policyContact__value{
  font-size: 15px;
  font-weight: 600;
  color: #0b1320;
  word-break: break-word;
}

/* BACK TO TOP */
.policyPage .policyBackTop{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.policyPage .policyBackTop__btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #0b1b2c;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.policyPage .policyBackTop__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .20);
}

/* RWD */
@media (max-width: 900px){
  .policyPage .policyCard{ padding: 20px; }
  .policyPage .policyContact{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .policyPage .policyHero{ padding: 34px 0 28px; }
  .policyPage .policyContent{ padding: 24px 0 44px; }
  .policyPage .policyList__title{ font-size: 17px; }
}


/* =========================
   CONTACT MODULE
   ========================= */

.contactPage{
  background: #ffffff;
}

/* HERO */
.contactHero{
  padding: 78px 0 34px;
  background: #fff;
}

.contactHero__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  text-align: center;
}

.contactHero__title{
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  color: #ff8a24; /* pomarańcz jak na screenie */
  letter-spacing: .2px;
}

.contactHero__desc{
  margin: 12px auto 0;
  max-width: 820px;
  font-size: 18px;
  line-height: 1.45;
  color: #1b2b43;
  opacity: .95;
}

/* CARDS GRID */
.contactCards{
  padding: 18px 0 80px;
}

.contactCards__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* CARD */
.contactCard{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  padding: 26px 18px 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: block;
}

.contactCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 138, 36, .35);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
}

.contactCard__icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 138, 36, .12);
  display: grid;
  place-items: center;
  color: #ff8a24;
}

.contactCard__title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #0b1320;
}

.contactCard__value{
  font-size: 15px;
  font-weight: 600;
  color: #ff8a24;
  line-height: 1.25;
  word-break: break-word;
}

.contactCard__hint{
  margin-top: 10px;
  font-size: 14px;
  color: #23364f;
  opacity: .9;
}

/* “plain” cards (nie muszą być linkami) */
.contactCard--plain:hover{
  transform: none;
  border-color: #dfe5ee;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

/* RWD */
@media (max-width: 1100px){
  .contactCards__container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .contactHero{
    padding: 56px 0 22px;
  }
  .contactHero__container,
  .contactCards__container{
    width: min(1200px, calc(100% - 28px));
  }
  .contactHero__desc{
    font-size: 16px;
  }
  .contactCards__container{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* =========================================================
   HERO – UNIKALNE KLASY + TŁO /assets/img/1-min.jpg
========================================================= */

.saHeroUni{
  position: relative;
  overflow: hidden;
  color: #fff;

  /* TŁO 1:1 jak chciałeś */
  background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
}

/* overlay POD napisami */
.saHeroUni::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 1;
  pointer-events: none;
}

/* content NAD overlay */
.saHeroUni__inner{
  position: relative;
  z-index: 2;

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;

  min-height: 74vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* pill */
.saHeroUni__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 600;
  color: #ff9230;
  margin-bottom: 26px;
}

.saHeroUni__pillIcon{
  width: 20px;
  height: 20px;
  display: block;
}

/* title */
.saHeroUni__title{
  margin: 0;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.saHeroUni__titleTop{
  display: block;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 62px);
  color: #fff;
}

.saHeroUni__titleMain{
  display: block;
  font-weight: 600;
  font-size: 34px ;
  color: #ff9230;
  padding-top: 15px
}

/* lead */
.saHeroUni__lead{
  max-width: 980px;
  margin: 22px auto 24px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

.saHeroUni__leadAccent{
  color: #ff9230;
  font-weight: 900;
}

/* badges */
.saHeroUni__badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 26px;
}

.saHeroUni__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 400;
  color: #fff;
}

.saHeroUni__badgeIcon{
  width: 18px;
  height: 18px;
  display: block;
}

/* CTA + hover */
.saHeroUni__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 12px;

  background: #ff9230;
  color: #fff;
  font-weight: 600;
  text-decoration: none;

  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.saHeroUni__ctaIcon{
  width: 18px;
  height: 18px;
  display: block;
}

.saHeroUni__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 4px rgba(255,146,48,.25);
  background-color: #ff9f45;
}

.saHeroUni__cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.saHeroUni__cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,146,48,.45), 0 18px 45px rgba(0,0,0,.35);
}

/* MOBILE: utrzymaj tło to samo (fixed potrafi lagować na mobile -> zmieniamy na scroll, ale obraz ten sam) */
@media (max-width: 768px){
  .saHeroUni{
      background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;

  }

  .saHeroUni__inner{
    padding: 110px 16px 70px;
    min-height: 72vh;
  }

  .saHeroUni__lead{
    font-size: 16px;
  }

  .saHeroUni__pill{
    font-size: 14px;
  }

  .saHeroUni__badge{
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   SA PROCESS – "Jak wygląda skup auta?" (unikalne klasy)
========================================================= */

.saProc{
  padding: 80px 0;
  background: #fff;
}

.saProc__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saProc__title{
  text-align: center;
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 46px);
  margin: 0 0 14px;
  line-height: 1.1;
  color: #0b1320;
}

.saProc__accent{
  color: #ff9230;
}

.saProc__lead{
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: center;
  color: #334155;
  line-height: 1.8;
  font-size: 18px;
}

.saProc__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.saProc__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 26px 22px 22px;
  box-shadow: 0 10px 30px rgba(11, 19, 32, .06);
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.saProc__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 19, 32, .10);
}

.saProc__top{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.saProc__num{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ff9230;
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.saProc__iconWrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #fff3ea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saProc__icon{
  width: 26px;
  height: 26px;
  display: block;
}

.saProc__cardTitle{
  text-align: center;
  margin: 6px 0 10px;
  font-weight: 600;
  color: #0b1320;
  font-size: 18px;
}

.saProc__cardText{
  text-align: center;
  color: #334155;
  line-height: 1.7;
  font-size: 13.5px;
  margin: 0 0 18px;
}

.saProc__time{
  margin-top: auto;
  align-self: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff3ea;
  color: #ff9230;
  font-weight: 900;
  font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .saProc__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .saProc__card{ min-height: 390px; }
}

@media (max-width: 560px){
  .saProc{
    padding: 64px 0;
  }
  .saProc__lead{
    font-size: 16px;
    margin-bottom: 30px;
  }
  .saProc__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .saProc__card{
    min-height: auto;
  }
}


/* =========================
   CONTACT FORM SECTION (bez formularza)
   ========================= */

.contactFormSection{
  background: #ffffff;
  padding: 62px 0 90px;
}

.contactFormSection__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

/* header */
.contactFormSection__header{
  text-align: center;
  margin-bottom: 46px;
}

.contactFormSection__title{
  margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 800;
  color: #ff8a24;
}

.contactFormSection__desc{
  margin: 12px auto 0;
  max-width: 860px;
  font-size: 18px;
  line-height: 1.5;
  color: #1b2b43;
  opacity: .95;
}

/* grid */
.contactFormGrid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 34px;
  align-items: start;
}

/* left column */
.contactInfoList{
  display: grid;
  gap: 18px;
}

.contactInfoItem{
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: start;
}

.contactInfoItem__icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 138, 36, .12);
  display: grid;
  place-items: center;
  color: #ff8a24;
  margin-top: 2px;
}

.contactInfoItem__title{
  font-size: 20px;
  font-weight: 800;
  color: #0b1320;
  margin-bottom: 6px;
}

.contactInfoItem__desc{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(11, 19, 32, .78);
}

.contactInfoItem__link{
  color: #ff8a24;
  font-weight: 700;
  text-decoration: none;
}

.contactInfoItem__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* call box */
.contactCallBox{
  margin-top: 26px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
  text-align: center;
}

.contactCallBox__title{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #0b1320;
  letter-spacing: .2px;
}

.contactCallBox__title span{
  color: #ff8a24;
}

.contactCallBox__desc{
  margin: 12px 0 18px;
  font-size: 15px;
  color: rgba(11, 19, 32, .78);
}

.contactCallBox__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  background: #ff8a24;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(255, 138, 36, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.contactCallBox__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(255, 138, 36, .28);
}

.contactCallBox__btnIcon{
  display: grid;
  place-items: center;
}

/* right placeholder */
.contactFormRight{
  display: block;
}

.contactFormPlaceholder{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  padding: 34px 34px 28px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
  min-height: 420px; /* zostawia miejsce na formularz */
}

.contactFormPlaceholder__title{
  font-size: 28px;
  font-weight: 900;
  color: #0b1320;
  margin-bottom: 10px;
}

.contactFormPlaceholder__desc{
  font-size: 15px;
  color: rgba(11, 19, 32, .72);
  margin-bottom: 22px;
}

/* skeleton */
.contactFormPlaceholder__skeleton{
  display: grid;
  gap: 18px;
  margin-top: 10px;
}

.skRow{
  display: grid;
  gap: 14px;
}

.skRow--two{
  grid-template-columns: 1fr 1fr;
}

.skLine{
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e6eaf2;
  background: linear-gradient(90deg, #f3f6fb 0%, #eef2f8 35%, #f3f6fb 70%);
  background-size: 200% 100%;
  animation: skMove 1.4s ease-in-out infinite;
}

.skLine--btn{
  height: 48px;
  border-radius: 10px;
}

@keyframes skMove{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* RWD */
@media (max-width: 1100px){
  .contactFormGrid{
    grid-template-columns: 1fr;
  }
  .contactFormPlaceholder{
    min-height: 360px;
  }
}

@media (max-width: 640px){
  .contactFormSection__container{
    width: min(1200px, calc(100% - 28px));
  }
  .contactFormSection{
    padding: 46px 0 70px;
  }
  .contactFormSection__desc{
    font-size: 16px;
  }
  .contactFormPlaceholder{
    padding: 26px 20px 22px;
  }
  .skRow--two{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   SA PROMO – żółty box (unikalne klasy)
========================================================= */

.saPromo{
  padding: 50px 0 30px;
  background: transparent;
}

.saPromo__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saPromo__box{
  background: linear-gradient(180deg, #ffb35a 0%, #ff9230 100%);
  border-radius: 14px;
  padding: 34px 28px;
  box-shadow: 0 26px 60px rgba(11, 19, 32, .22);
  text-align: center;
}

.saPromo__head{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.saPromo__iconWrap{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.saPromo__icon{
  width: 26px;
  height: 26px;
  display: block;
}

.saPromo__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  color: #fff;
}

.saPromo__text{
  max-width: 980px;
  margin: 10px auto 22px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
}

.saPromo__text strong{
  font-weight: 900;
  color: #fff;
}

.saPromo__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: #fff;
  color: #ff9230;
  text-decoration: none;
  font-weight: 800;

  padding: 14px 22px;
  border-radius: 10px;

  box-shadow: 0 16px 35px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.saPromo__btnIcon{
  width: 18px;
  height: 18px;
  display: block;
}

.saPromo__btn strong{
  font-weight: 900;
}

.saPromo__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0,0,0,.22);
  filter: brightness(.98);
}

.saPromo__btn:active{
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.saPromo__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 20px 45px rgba(0,0,0,.22);
}

/* Responsive */
@media (max-width: 640px){
  .saPromo__box{
    padding: 26px 16px;
  }

  .saPromo__head{
    flex-direction: column;
    gap: 10px;
  }

  .saPromo__text{
    font-size: 16px;
  }

  .saPromo__btn{
    width: 100%;
  }
}


/* =========================
   FULL WIDTH MAP MODULE
   ========================= */

.mapFullWidth{
  width: 100%;
  background: #fff;
  padding: 28px 0 64px;
}

/* rama na całą szerokość */
.mapFullWidth__frame{
  width: 100vw;                 /* pełna szerokość ekranu */
  margin-left: calc(50% - 50vw);/* wyjście poza kontener jeśli sekcja jest w containerze */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
  border: 1px solid rgba(2, 6, 23, .10);
  background: #fff;
}

/* mapa */
.mapFullWidth__frame iframe{
  display: block;
  width: 100%;
  height: min(70vh, 620px);
  border: 0;
}

/* mobile */
@media (max-width: 640px){
  .mapFullWidth{
    padding: 18px 0 44px;
  }
  .mapFullWidth__frame{
    border-radius: 14px;
  }
  .mapFullWidth__frame iframe{
    height: 62vh;
  }
}



/* =========================
   AREAS MODULE
   ========================= */

.areasSection{
  background: #fff;
  padding: 62px 0 80px;
}

.areasSection__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.areasSection__header{
  text-align: center;
  margin-bottom: 38px;
}

.areasSection__title{
  margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 900;
  color: #ff8a24;
}

.areasSection__desc{
  margin: 12px auto 0;
  max-width: 900px;
  font-size: 18px;
  line-height: 1.5;
  color: #1b2b43;
  opacity: .95;
}

/* grid */
.areasGrid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 18px;
}

/* pill */
.areaPill{
  display: grid;
  place-items: center;
  height: 52px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dfe5ee;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
  text-decoration: none;
  color: #0b1320;
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.areaPill:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 138, 36, .35);
  box-shadow: 0 10px 18px rgba(15, 23, 42, .10);
}

.areaPill:focus-visible{
  outline: 3px solid rgba(255, 138, 36, .35);
  outline-offset: 2px;
}

/* jeśli potrzebujesz wersji bez linka */
.areaPill--plain{
  cursor: default;
}
.areaPill--plain:hover{
  transform: none;
  border-color: #dfe5ee;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

/* RWD */
@media (max-width: 1100px){
  .areasGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 780px){
  .areasSection__container{
    width: min(1200px, calc(100% - 28px));
  }
  .areasGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areasSection__desc{ font-size: 16px; }
  .areaPill{ height: 50px; }
}


/* =========================================================
   SA DOCS – Dokumenty i formalności (unikalne klasy)
========================================================= */

.saDocs{
  padding: 90px 0 70px;
  background: #fff;
}

.saDocs__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saDocs__title{
  text-align: center;
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
  color: #0b1320;
}

.saDocs__accent{
  color: #ff9230;
  font-weight: 900;
}

.saDocs__lead{
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: center;
  color: #334155;
  line-height: 1.9;
  font-size: 18px;
}

.saDocs__lead strong{
  color: #0b1320;
  font-weight: 900;
}

.saDocs__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 10px;
}

.saDocs__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 26px 20px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(11, 19, 32, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 250px;
}

.saDocs__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 19, 32, .10);
}

.saDocs__card--req:hover{
  border-color: rgba(255,146,48,.45);
}

.saDocs__card--opt:hover{
  border-color: rgba(11,19,32,.22);
}

.saDocs__iconWrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #fff3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.saDocs__iconWrap--opt{
  background: #eef2f7;
}

.saDocs__icon{
  width: 26px;
  height: 26px;
  display: block;
}

.saDocs__cardTitle{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
  color: #0b1320;
}

.saDocs__tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.saDocs__tag--req{
  background: rgba(255,146,48,.14);
  color: #ff9230;
}

.saDocs__tag--opt{
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}

.saDocs__cardText{
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-size: 14.5px;
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .saDocs__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .saDocs{
    padding: 70px 0 55px;
  }

  .saDocs__lead{
    font-size: 16px;
    margin-bottom: 30px;
  }

  .saDocs__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .saDocs__card{
    min-height: auto;
  }
}


/* =========================================================
   SA SIGN – Jak przebiega podpisanie umowy? (unikalne klasy)
========================================================= */

.saSign{
  padding: 40px 0 70px;
  background: transparent;
}

.saSign__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saSign__box{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 34px 24px;
}

.saSign__title{
  text-align: center;
  margin: 0 0 26px;
  font-weight: 900;
  color: #0b1320;
  font-size: clamp(18px, 2.3vw, 26px);
}

.saSign__steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.saSign__step{
  text-align: center;
  padding: 6px 10px;
}

.saSign__num{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ff9230;
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 14px;
}

.saSign__stepTitle{
  margin: 0 0 8px;
  font-weight: 900;
  color: #0b1320;
  font-size: 18px;
}

.saSign__stepText{
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-size: 14.5px;
}

/* Responsive */
@media (max-width: 900px){
  .saSign__steps{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .saSign__box{
    padding: 26px 16px;
  }
}


/* =========================================================
   SA BIZ – Obsługa klientów biznesowych (unikalne klasy)
========================================================= */

.saBiz{
  padding: 90px 0 65px;
  background: #fff;
}

.saBiz__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saBiz__title{
  text-align: center;
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
  color: #0b1320;
}

.saBiz__accent{
  color: #ff9230;
  font-weight: 600;
}

.saBiz__lead{
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: center;
  color: #334155;
  line-height: 1.9;
  font-size: 18px;
}

.saBiz__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.saBiz__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(11, 19, 32, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 250px;
}

.saBiz__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 19, 32, .10);
  border-color: rgba(255,146,48,.35);
}

.saBiz__iconWrap{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #fff3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.saBiz__icon{
  width: 28px;
  height: 28px;
  display: block;
}

.saBiz__cardTitle{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
  color: #0b1320;
}

.saBiz__cardText{
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-size: 14.5px;
}

/* Responsive */
@media (max-width: 1100px){
  .saBiz__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .saBiz{
    padding: 70px 0 55px;
  }

  .saBiz__lead{
    font-size: 16px;
    margin-bottom: 30px;
  }

  .saBiz__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .saBiz__card{
    min-height: auto;
  }
}


/* =========================================================
   SA CORP – Współpraca z firmami (unikalne klasy)
========================================================= */

.saCorp{
  padding: 40px 0 70px;
  background: transparent;
}

.saCorp__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saCorp__box{
  background: linear-gradient(180deg, #ffb35a 0%, #ff9230 100%);
  border-radius: 14px;
  padding: 40px 26px;
  text-align: center;
  box-shadow: 0 26px 60px rgba(11, 19, 32, .22);
}

.saCorp__head{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.saCorp__iconWrap{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.saCorp__icon{
  width: 28px;
  height: 28px;
  display: block;
}

.saCorp__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  color: #fff;
}

.saCorp__text{
  max-width: 900px;
  margin: 8px auto 22px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.8;
  font-weight: 650;
}

.saCorp__text strong{
  font-weight: 900;
  color: #fff;
}

/* button */
.saCorp__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: #fff;
  color: #ff9230;
  text-decoration: none;
  font-weight: 900;

  padding: 14px 22px;
  border-radius: 10px;
  box-shadow: 0 16px 35px rgba(0,0,0,.18);

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.saCorp__btnIcon{
  width: 18px;
  height: 18px;
  display: block;
}

.saCorp__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0,0,0,.22);
  filter: brightness(.98);
}

.saCorp__btn:active{
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.saCorp__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 20px 45px rgba(0,0,0,.22);
}

/* responsive */
@media (max-width: 640px){
  .saCorp__box{
    padding: 28px 16px;
  }

  .saCorp__head{
    flex-direction: column;
    gap: 10px;
  }

  .saCorp__text{
    font-size: 16px;
  }

  .saCorp__btn{
    width: 100%;
  }
}


/* =========================================================
   SA VISIT – Co zrobić przed naszą wizytą? (unikalne klasy)
========================================================= */

.saVisit{
  padding: 90px 0 70px;
  background: #fff;
}

.saVisit__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saVisit__title{
  text-align: center;
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
  color: #0b1320;
}

.saVisit__accent{
  color: #ff9230;
  font-weight: 600;
}

.saVisit__lead{
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: center;
  color: #334155;
  line-height: 1.9;
  font-size: 18px;
}

.saVisit__lead strong{
  color: #0b1320;
  font-weight: 900;
}

.saVisit__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.saVisit__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 18px 18px 18px;
  box-shadow: 0 10px 30px rgba(11, 19, 32, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  min-height: 170px;
}

.saVisit__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 19, 32, .10);
  border-color: rgba(255,146,48,.35);
}

.saVisit__iconWrap{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.saVisit__icon{
  width: 22px;
  height: 22px;
  display: block;
}

.saVisit__cardTitle{
  margin: 0 0 8px;
  font-weight: 900;
  color: #0b1320;
  font-size: 16px;
  line-height: 1.3;
}

.saVisit__cardText{
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-size: 13.8px;
}

/* Responsive */
@media (max-width: 1100px){
  .saVisit__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .saVisit{
    padding: 70px 0 55px;
  }

  .saVisit__lead{
    font-size: 16px;
    margin-bottom: 30px;
  }

  .saVisit__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* =========================
   "NIE ZNALAZŁEŚ SWOJEGO MIASTA?" MODULE
   ========================= */

.noCitySection{
  background: #fff;
  padding: 44px 0 60px;
}

.noCitySection__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.noCityCard{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  padding: 46px 26px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}

.noCityCard__title{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: #0b1320;
}

.noCityCard__desc{
  margin: 16px auto 0;
  max-width: 860px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(11, 19, 32, .78);
}

.noCityCard__actions{
  margin-top: 26px;
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.noCityBtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  border: 2px solid transparent;
}

.noCityBtn__icon{
  display: grid;
  place-items: center;
}

.noCityBtn--primary{
  background: #ff8a24;
  color: #fff;
  box-shadow: 0 14px 28px rgba(255, 138, 36, .28);
}

.noCityBtn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255, 138, 36, .34);
}

.noCityBtn--outline{
  background: #fff;
  color: #ff8a24;
  border-color: #ff8a24;
}

.noCityBtn--outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
  background: rgba(255, 138, 36, .06);
}

/* RWD */
@media (max-width: 780px){
  .noCitySection__container{
    width: min(1200px, calc(100% - 28px));
  }
  .noCityCard{
    padding: 34px 18px;
  }
  .noCityCard__title{
    font-size: 24px;
  }
  .noCityBtn{
    width: 100%;
    justify-content: center;
  }
  .noCityCard__actions{
    width: 100%;
  }
}



/* =========================
   CONTACT FORM (RIGHT BOX)
   ========================= */

.contactFormBox{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  padding: 34px 34px 28px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.contactFormBox__title{
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 900;
  color: #0b1320;
}

.contactFormBox__desc{
  margin: 0 0 22px;
  font-size: 15px;
  color: rgba(11, 19, 32, .72);
}

.contactForm{
  display: grid;
  gap: 18px;
}

.contactForm__grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contactField{
  display: grid;
  gap: 8px;
}

.contactField__label{
  font-size: 14px;
  font-weight: 800;
  color: #0b1320;
}

.contactField__label span{
  color: #ff8a24;
}

.contactField__input,
.contactField__textarea{
  width: 100%;
  border: 1px solid #dfe5ee;
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.contactField__textarea{
  resize: vertical;
  min-height: 140px;
}

.contactField__input:focus,
.contactField__textarea:focus{
  border-color: rgba(255, 138, 36, .55);
  box-shadow: 0 0 0 4px rgba(255, 138, 36, .12);
}

.contactConsent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(11, 19, 32, .72);
}

.contactConsent__checkbox{
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #ff8a24;
}

.contactConsent__req{
  color: #ff8a24;
  font-weight: 800;
}

.contactSubmit{
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #ff8a24;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(255, 138, 36, .24);
  transition: transform .15s ease, box-shadow .15s ease;
}

.contactSubmit:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255, 138, 36, .30);
}

.contactFormStatus{
  font-size: 13px;
  min-height: 18px;
  color: rgba(11, 19, 32, .72);
}

/* RWD */
@media (max-width: 640px){
  .contactFormBox{ padding: 26px 20px 22px; }
  .contactFormBox__title{ font-size: 28px; }
  .contactForm__grid2{ grid-template-columns: 1fr; }
}


/* =========================================================
   SA VAL HERO – Wycena (unikalne klasy) + tło 1-min.jpg fixed
========================================================= */

.saValHero{
  position: relative;
  overflow: hidden;
  color: #fff;

  /* WYMAGANE tło – identyczne parametry także na mobile */
  background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
}

/* overlay POD treścią */
.saValHero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
  pointer-events: none;
}

/* treść NAD overlay */
.saValHero__inner{
  position: relative;
  z-index: 2;

  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 16px 85px;

  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center; /* pewne centrowanie tekstu */
}

/* pill */
.saValHero__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 500;
  color: #ff9230;
  margin-bottom: 26px;
}

.saValHero__pillIcon{
  width: 18px;
  height: 18px;
  display: block;
}

/* title */
.saValHero__title{
  margin: 0;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.saValHero__titleTop{
  display: block;
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 70px);
  color: #fff;
}

.saValHero__titleMain{
  display: block;
  font-weight: 900;
  font-size: clamp(44px, 6.2vw, 82px);
  color: #ff9230;
}

/* lead */
.saValHero__lead{
  max-width: 980px;
  margin: 18px auto 24px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  font-weight: 450;
}

.saValHero__leadAccent{
  color: #ff9230;
  font-weight: 600;
}

/* badges */
.saValHero__badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 26px;
}

.saValHero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 500;
  color: #fff;
}

.saValHero__badgeIcon{
  width: 18px;
  height: 18px;
  display: block;
}

/* CTA – wycentrowany + hover */
.saValHero__cta{
  display: flex;           /* pewne centrowanie */
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: fit-content;
  margin: 0 auto;          /* środek */

  padding: 14px 22px;
  border-radius: 12px;

  background: #ff9230;
  color: #fff;
  font-weight: 600;
  text-decoration: none;

  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.saValHero__ctaIcon{
  width: 18px;
  height: 18px;
  display: block;
}

.saValHero__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 4px rgba(255,146,48,.25);
  background-color: #ff9f45;
}

.saValHero__cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.saValHero__cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,146,48,.45), 0 18px 45px rgba(0,0,0,.35);
}

/* Mobile – tło MUSI mieć te same parametry (fixed) */
@media (max-width: 768px){
  .saValHero{
    background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
  }

  .saValHero__inner{
    padding: 110px 16px 75px;
    min-height: 72vh;
  }

  .saValHero__lead{
    font-size: 16px;
  }

  .saValHero__pill{
    font-size: 14px;
  }

  .saValHero__badge{
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   SA VAL INFO – Wycena pojazdów (unikalne klasy)
========================================================= */

.saValInfo{
  padding: 70px 0 50px;
  background: transparent;
}

.saValInfo__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saValInfo__box{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: 40px 28px;
  box-shadow: 0 18px 45px rgba(11, 19, 32, .08);
}

.saValInfo__title{
  text-align: center;
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  color: #0b1320;
  line-height: 1.2;
}

.saValInfo__accent{
  color: #ff9230;
  font-weight: 900;
}

.saValInfo__lead{
  text-align: center;
  margin: 0 auto 26px;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  max-width: 900px;
}

.saValInfo__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 10px;
}

.saValInfo__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 22px 22px 18px;
}

.saValInfo__cardHead{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.saValInfo__miniIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff3ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

.saValInfo__miniIcon img{
  width: 18px;
  height: 18px;
  display: block;
}

.saValInfo__cardTitle{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  color: #0b1320;
}

/* list */
.saValInfo__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.saValInfo__list li{
  position: relative;
  padding-left: 18px;
  color: #334155;
  line-height: 1.7;
  font-size: 14.5px;
}

.saValInfo__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff9230;
}

.saValInfo__list strong{
  font-weight: 900;
  color: #0b1320;
}

/* responsive */
@media (max-width: 980px){
  .saValInfo__grid{
    grid-template-columns: 1fr;
  }
  .saValInfo__box{
    padding: 30px 16px;
  }
}


/* =========================================================
   SA RATE+AREA – box + 2 kolumny (unikalne klasy)
========================================================= */

.saRateArea{
  padding: 45px 0 70px;
  background: transparent;
}

.saRateArea__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* TOP BOX */
.saRateArea__topBox{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: 34px 28px;
  box-shadow: 0 18px 45px rgba(11, 19, 32, .08);
  text-align: center;
  margin-bottom: 22px;
}

.saRateArea__topTitle{
  margin: 0 0 12px;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 30px);
  color: #0b1320;
  line-height: 1.25;
}

.saRateArea__accent{
  color: #ff9230;
  font-weight: 900;
}

.saRateArea__topText{
  margin: 0 auto;
  max-width: 980px;
  color: #334155;
  line-height: 1.85;
  font-size: 15.5px;
}

/* GRID */
.saRateArea__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* CARD */
.saRateArea__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: 0 12px 32px rgba(11, 19, 32, .06);
}

.saRateArea__cardTitle{
  margin: 0 0 18px;
  font-weight: 900;
  font-size: 18px;
  color: #0b1320;
}

/* STEPS */
.saRateArea__steps{
  display: grid;
  gap: 16px;
}

.saRateArea__step{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.saRateArea__num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ff9230;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.saRateArea__stepTitle{
  font-weight: 900;
  color: #0b1320;
  margin-bottom: 4px;
  font-size: 15px;
}

.saRateArea__stepText{
  color: #334155;
  line-height: 1.7;
  font-size: 13.8px;
}

/* RIGHT SECTIONS */
.saRateArea__section{
  padding: 12px 0;
  border-top: 1px solid #eef2f7;
}

.saRateArea__section:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.saRateArea__label{
  font-weight: 900;
  color: #0b1320;
  margin-bottom: 6px;
  font-size: 14px;
}

.saRateArea__text{
  color: #334155;
  line-height: 1.75;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .saRateArea__grid{
    grid-template-columns: 1fr;
  }
  .saRateArea__topBox{
    padding: 28px 16px;
  }
  .saRateArea__card{
    padding: 22px 16px;
  }
}


/* =========================================================
   SA DUAL LISTS – 2 karty z checklistą (unikalne klasy)
========================================================= */

.saDualLists{
  padding: 40px 0 70px;
  background: transparent;
}

.saDualLists__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.saDualLists__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.saDualLists__card{
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 18px 45px rgba(11, 19, 32, .08);
}

.saDualLists__title{
  margin: 0 0 16px;
  font-weight: 900;
  font-size: 22px;
  color: #0b1320;
  line-height: 1.25;
  text-align: center;
}

.saDualLists__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.saDualLists__list li{
  position: relative;
  padding-left: 34px;
  color: #334155;
  line-height: 1.7;
  font-size: 15px;
}

/* ikona check w kółku */
.saDualLists__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff3ea;
  border: 1px solid rgba(255,146,48,.35);
}

.saDualLists__list li::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #ff9230;
  border-bottom: 2.5px solid #ff9230;
  transform: rotate(-45deg);
}

/* Responsive */
@media (max-width: 980px){
  .saDualLists__grid{
    grid-template-columns: 1fr;
  }
  .saDualLists__card{
    padding: 22px 16px 18px;
  }
  .saDualLists__title{
    font-size: 20px;
  }
}


/* =========================
   CITY HERO (GDYNIA)
   ========================= */

.cityHero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;
}

/* overlay wg Twojej specyfikacji */
.cityHero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.28);
  z-index: 1;
}

.cityHero__container{
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 34px;
  align-items: center;
  padding: 84px 0 64px;
}

/* LEWA */
.cityHero__brand{
  font-weight: 500;
  letter-spacing: .6px;
  color: #ff8a24;
  margin-bottom: 10px;
}

.cityHero__title{
  margin: 0;
  font-size: clamp(44px, 6vw, 74px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: 1px;
}

.cityHero__title span{
  color: #ff8a24;
}

.cityHero__location{
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  opacity: .98;
}

.cityHero__location .pin__svg{
  color: #ff8a24; /* currentColor w SVG */
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

.cityHero__locationText{
  color: rgba(255,255,255,.94);
}

/* ✓ lista */
.cityHero__ticks{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
  max-width: 560px;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.cityHero__ticks li{
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
}

/* krótki SEO */
.cityHero__seo{
  margin: 18px 0 0;
  max-width: 620px;
  color: rgba(255,255,255,.86);
  line-height: 1.55;
  font-size: 15px;
}

/* PRAWA */
.cityCta{
  background: linear-gradient(180deg, rgba(255,138,36,.98), rgba(255,138,36,.88));
  border-radius: 18px;
  padding: 26px 26px 20px;
  box-shadow: 0 22px 46px rgba(0,0,0,.22);
}

.cityCta__title{
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.25;
}

.cityCta__btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 12px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

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

.cityCta__btn--white{
  background: #fff;
  color: #ff8a24;
  box-shadow: 0 14px 28px rgba(255,255,255,.18);
}

.cityCta__btn--orange{
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}

.cityCta__notes{
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  text-align: center;
  line-height: 1.45;
}

/* scroll marker */
.cityHero__scroll{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.12);
  z-index: 2;
}

/* RWD */
@media (max-width: 1100px){
  .cityHero__container{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 86px 0 60px;
    z-index: 1
    
  }
  .cityCta{
    max-width: 680px;
  }
}

@media (max-width: 640px){
  .cityHero{
      background: url("/assets/img/1-min.jpg") center/cover no-repeat fixed;

  }
  .cityHero__container{
    width: min(1200px, calc(100% - 28px));
  }
  .cityCta__title{
    font-size: 20px;
  }
  .cityHero__ticks li{
    border-radius: 14px; /* żeby ładniej łamało na mobile */
  }
}


/* tylko dla podstron miast – równe opisy pod nagłówkami */
.stepCard__text--city{
  min-height: calc(1.55em * 3);  /* 3 linie */
  line-height: 1.55;
  margin-bottom: 10px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


/* =========================
   FORMALITIES MODULE
   ========================= */

.formalSection{
  background: #fff;
  padding: 70px 0 86px;
}

.formalSection__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

/* header */
.formalHeader{
  text-align: center;
  margin-bottom: 40px;
}

.formalHeader__title{
  margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 900;
  color: #0b1320;
}

.formalHeader__subtitle{
  margin: 10px 0 0;
  font-size: 16px;
  color: rgba(11, 19, 32, .72);
}

/* grid */
.formalGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* card */
.formalCard{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  padding: 26px 26px 22px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
}

.formalCard__top{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.formalCard__icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 138, 36, .12);
  color: #ff8a24;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.formalCard__title{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #0b1320;
}

/* list */
.formalList{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.formalList li{
  position: relative;
  padding-left: 16px;
  color: rgba(11, 19, 32, .78);
  line-height: 1.55;
  font-size: 15px;
}

.formalList li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #0b1320;
  opacity: .75;
}

/* RWD */
@media (max-width: 900px){
  .formalGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .formalSection__container{
    width: min(1200px, calc(100% - 28px));
  }
  .formalCard{
    padding: 22px 18px 18px;
  }
  .formalCard__title{
    font-size: 18px;
  }
}


/* =========================
   CITY TRUST / LIDER RYNKU
   ========================= */

.cityTrust{
  background: #fff;
  padding: 58px 0 80px;
}

.cityTrust__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.cityTrust__card{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  padding: 34px 34px 30px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}

.cityTrust__title{
  text-align: center;
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 900;
  color: #0b1320;
}

.cityTrust__grid{
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: 34px;
  align-items: center;
}

.cityTrust__heading{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: #0b1320;
}

.cityTrust__text{
  margin: 0 0 14px;
  color: rgba(11, 19, 32, .78);
  line-height: 1.65;
  font-size: 15px;
  max-width: 620px;
}

.cityTrust__text:last-of-type{
  margin-bottom: 18px;
}

/* list with check */
.cityTrust__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.cityTrust__list li{
  position: relative;
  padding-left: 34px;
  font-weight: 700;
  color: rgba(11, 19, 32, .86);
}

.cityTrust__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 138, 36, .14);
  color: #ff8a24;
  font-weight: 900;
}

/* CTA box */
.cityTrustCta{
  background: linear-gradient(180deg, rgba(255,138,36,.98), rgba(255,138,36,.88));
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.cityTrustCta__title{
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}

.cityTrustCta__subtitle{
  font-size: 14px;
  color: rgba(255,255,255,.92);
  margin-bottom: 18px;
}

/* button */
.cityTrustCta__btn{
  background: #fff;
  color: #ff8a24;
  text-decoration: none;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cityTrustCta__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255,255,255,.22);
}

.cityTrustCta__btnIcon{
  display: grid;
  place-items: center;
}

/* RWD */
@media (max-width: 980px){
  .cityTrust__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .cityTrust__container{
    width: min(1200px, calc(100% - 28px));
  }
  .cityTrust__card{
    padding: 24px 18px 20px;
  }
  .cityTrust__title{
    font-size: 24px;
  }
}


/* =========================
   CITY SEO TEXT MODULE
   ========================= */

.citySeo{
  background: #fff;
  padding: 60px 0 86px;
}

.citySeo__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.citySeo__card{
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  padding: 36px 34px 30px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}

.citySeo__header{
  text-align: center;
  margin-bottom: 26px;
}

.citySeo__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 900;
  color: #0b1320;
}

.citySeo__lead{
  margin: 14px auto 0;
  max-width: 900px;
  color: rgba(11, 19, 32, .76);
  line-height: 1.7;
  font-size: 15px;
}

.citySeo__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.citySeo__h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: #0b1320;
}

.citySeo__p{
  margin: 0 0 16px;
  color: rgba(11, 19, 32, .76);
  line-height: 1.7;
  font-size: 15px;
}

.citySeo__p--note{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(2, 6, 23, .08);
}

.citySeo__list{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}

.citySeo__list li{
  position: relative;
  padding-left: 34px;
  font-weight: 700;
  color: rgba(11, 19, 32, .86);
}

.citySeo__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 138, 36, .14);
  color: #ff8a24;
  font-weight: 900;
}

/* RWD */
@media (max-width: 980px){
  .citySeo__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .citySeo__container{
    width: min(1200px, calc(100% - 28px));
  }
  .citySeo__card{
    padding: 24px 18px 20px;
  }
}


/* ===== BLOG MODULE – MOBILE FORCE FIT (IMPORTANT) ===== */
@media (max-width: 700px){

  /* żeby padding nie powodował overflow */
  #aktualnosci,
  #aktualnosci *{
    box-sizing: border-box !important;
  }

  /* kontener modułu */
  #aktualnosci .blogModule__inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 auto !important;
    overflow: hidden !important; /* ucina ewentualne wystawanie */
  }

  /* grid na 1 kolumnę i bez rozpychania */
  #aktualnosci .wpisyGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* KARTA – NAJWAŻNIEJSZE */
  #aktualnosci .wpisyCard{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* obrazek też nie może wystawać */
  #aktualnosci .wpisyCard__imgWrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
  }

  #aktualnosci .wpisyCard__img{
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* przyciski często robią overflow przez inline / padding */
  #aktualnosci .wpisyCard__btn{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    white-space: normal !important; /* jakby tekst był za długi */
  }
}


/* =========================
   DROPDOWN: MIASTA (desktop + mobile) – WERSJA POPRAWNA
   ========================= */

/* ważne: u Ciebie header to .topbar, nie .header */
.topbar{
  position: relative;
  z-index: 9999;
}

/* nic nie może ucinać dropdownu */
.topbar,
.topbar__inner,
.menu-wrap,
.menu{
  overflow: visible;
}

/* wrapper dropdowna */
.menu__dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* link "Miasta" */
.menu__link--parent{
  display: inline-flex;
  align-items: center;
}

/* przycisk strzałki (działa na desktop i mobile) */
.menu__dropdown-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

/* strzałka */
.menu__caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
}
.menu__dropdown.is-open .menu__caret{
  transform: rotate(-135deg);
}

/* panel dropdown (desktop) */
.menu__dropdown-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, 78vw);
  max-height: min(60vh, 520px);
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  background: rgba(7, 18, 32, .98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  z-index: 10000;
}

/* desktop: hover działa */
.menu__dropdown:hover .menu__dropdown-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* desktop+mobile: klik (is-open) też działa */
.menu__dropdown.is-open .menu__dropdown-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.popular-cities__link{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
 transition: background-color .15s ease, color .15s ease;
}
.popular-cities__link:hover{
  background: rgba(255,146,48,.20);
}

/* ===== MOBILE: panel jako lista pod spodem (accordion) ===== */
@media (max-width: 900px){
  .menu__dropdown{
    display: block;
  }

  .menu__dropdown-panel{
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 8px 0 0;
    margin: 0 0 6px;
    border: 0;
    background: transparent;
    box-shadow: none;

    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu__dropdown.is-open .menu__dropdown-panel{
    display: block;
  }

  .popular-cities__link{
    font-size: 14px;
    padding: 10px 12px;
    
  }
}


@media (max-width: 900px){
  /* jeden wiersz: "Miasta" + strzałka po prawej */
  .menu__dropdown{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  .menu__link--parent{
    flex: 1 1 auto;
    width: auto !important;
    justify-content: flex-start !important;
  }

  .menu__dropdown-toggle{
    flex: 0 0 auto;
    margin-left: auto !important;
  }

  /* panel pod spodem na całą szerokość */
  .menu__dropdown-panel{
    flex-basis: 100%;
    width: 100% !important;
    margin-top: 6px;
  }
}



/* saDocs – wyśrodkowanie 3 kafelków po usunięciu jednego */
.saDocs__grid{
  display: grid;
  gap: 24px;
  justify-content: center; /* centruje całą siatkę */
  grid-template-columns: repeat(3, minmax(240px, 320px));
}

/* responsywność */
@media (max-width: 1024px){
  .saDocs__grid{
    grid-template-columns: repeat(2, minmax(240px, 320px));
  }
}
@media (max-width: 640px){
  .saDocs__grid{
    grid-template-columns: minmax(240px, 1fr);
    justify-content: stretch;
  }
}