:root{ --mp-promien:12px; }

/* --------------------------------------------------------------
   PAS ZAUFANIA — logotypy klientów + ocena Google
   Paleta wyłącznie ze strony: #141210, #BFA08E, #D1BAA9, #6C6866, biel
-------------------------------------------------------------- */
#mp-zaufanie{
  --czern:#141210;
  --zloty:#BFA08E;
  --zloty-jasny:#D1BAA9;
  --tekst:#6C6866;
  --biel:#FFFFFF;
  --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  font-family:var(--body);
  color:var(--tekst);
  background:var(--biel);
  line-height:1.6;
  position:relative;
  left:50%;
  width:calc(100vw - var(--mp-pasek, 0px));
  max-width:calc(100vw - var(--mp-pasek, 0px));
  margin-left:calc((100vw - var(--mp-pasek, 0px)) / -2);
  margin-right:calc((100vw - var(--mp-pasek, 0px)) / -2);
  padding:56px 0 64px;
}
#mp-zaufanie *{box-sizing:border-box}
#mp-zaufanie a{text-decoration:none;color:inherit}
#mp-zaufanie :focus-visible{outline:2px solid var(--zloty);outline-offset:3px}

.mp-wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* --- przesuwający się pas logotypów --- */
.mp-loga{overflow:hidden;position:relative;padding:6px 0 34px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.mp-tasma{display:flex;gap:70px;align-items:center;width:max-content;
  animation:mp-przesun 70s linear infinite}
.mp-loga:hover .mp-tasma{animation-play-state:paused}
.mp-tasma img{height:54px;width:auto;flex:0 0 auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:opacity .25s ease, filter .25s ease}
.mp-tasma img:hover{filter:grayscale(0);opacity:1}
@keyframes mp-przesun{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --- ocena + opinie --- */
.mp-uklad{display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:start;
  border-top:1px solid rgba(191,160,142,.34);padding-top:40px}

.mp-eyebrow{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--zloty)}
.mp-ocena{font-family:var(--display);font-weight:300;font-size:72px;line-height:.95;
  letter-spacing:-.03em;color:var(--czern);margin:14px 0 6px}
.mp-ocena em{font-style:normal;font-size:24px;color:var(--tekst);letter-spacing:0}
.mp-gwiazdki{display:flex;gap:3px;margin-bottom:12px}
.mp-gwiazdki svg{width:17px;height:17px;fill:var(--zloty)}
.mp-zrodlo{font-size:14px;margin:0}
.mp-zrodlo b{color:var(--czern);font-weight:500}
.mp-link{display:inline-block;margin-top:18px;font-family:var(--display);font-weight:500;font-size:14.5px;
  color:var(--czern);border-bottom:1px solid rgba(191,160,142,.6);padding-bottom:4px;
  transition:border-color .2s ease}
.mp-link:hover{border-color:var(--zloty)}

.mp-opinie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mp-opinia{border:1px solid rgba(191,160,142,.36);border-radius:var(--mp-promien, 12px);padding:24px 22px 20px;
  display:flex;flex-direction:column;transition:border-color .25s ease, transform .25s ease;background:var(--biel)}
.mp-opinia:hover{border-color:var(--zloty);transform:translateY(-2px)}
.mp-opinia p{font-size:14.5px;margin:14px 0 18px;color:var(--czern)}
.mp-autor{margin-top:auto;padding-top:14px;border-top:1px solid rgba(191,160,142,.3)}
.mp-autor b{display:block;font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--czern)}
.mp-autor span{font-size:12.5px}

@media(max-width:980px){
  #mp-zaufanie{padding:40px 0 46px}
  .mp-uklad{grid-template-columns:1fr;gap:28px}
  .mp-opinie{grid-template-columns:1fr}
  .mp-ocena{font-size:58px}
  .mp-tasma img{height:40px}
  .mp-tasma{gap:48px}
}
@media (prefers-reduced-motion: reduce){
  #mp-zaufanie *{transition:none !important}
  .mp-tasma{animation:none !important}
  .mp-loga{overflow-x:auto}
}