/* ==========================================================================
   MiroArt – nowa strona główna (2026)
   Dopisać na końcu /tpls/Noe/css/private.css
   Wszystkie klasy z prefiksem .ma- – brak kolizji z Noe / Bootstrap 3
   ========================================================================== */

:root{
  --ma-red:#e3192b;
  --ma-black:#000;
  --ma-ink:#000;
  --ma-line:#2a2a2a;
  --ma-muted:#bdbdbd;
  --ma-head:'Oswald',sans-serif;
}

/* ---------- wspólne ---------- */
.ma-section{background:var(--ma-black);color:#fff;padding:48px 0 56px}
.ma-section--ink{background:var(--ma-ink);border-top:1px solid #222;border-bottom:1px solid #222}
.ma-section--white{background:#fff;color:#000}
.ma-section--tight-top{padding-top:20px}
.ma-section p{font-size:17px;line-height:1.65;color:var(--ma-muted);margin:0}
.ma-section--white p{color:#333}
.ma-h3{font-family:var(--ma-head);font-weight:500;font-size:26px;line-height:1.2;margin:0;color:inherit;text-transform:none}
.ma-flex{display:flex;flex-wrap:wrap;gap:16px}
.ma-stack{display:flex;flex-direction:column;gap:24px}

/* ---------- przyciski ---------- */
.ma-btn{display:inline-flex;align-items:center;gap:18px;padding:18px 26px;font-size:17px;font-weight:500;line-height:1.2;text-decoration:none!important;transition:background .2s,color .2s,border-color .2s}
.ma-btn .fas{font-size:18px}
.ma-btn--light{background:#fff;color:#000!important}
.ma-btn--light:hover{background:var(--ma-red);color:#fff!important}
.ma-btn--outline{border:1px solid #fff;color:#fff!important;padding:17px 25px}
.ma-btn--outline:hover{border-color:var(--ma-red);color:var(--ma-red)!important}
.ma-btn--dark{background:#000;color:#fff!important}
.ma-btn--dark:hover{background:var(--ma-red)}
.ma-link{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:#fff!important;text-decoration:none!important}
.ma-link .fas{color:var(--ma-red)}
.ma-link:hover{color:var(--ma-red)!important}

/* ---------- HERO ---------- */
.ma-hero{background:#000;color:#fff;padding:40px 0 24px;overflow:hidden}
.ma-hero__wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:0 24px}
.ma-hero p.ma-hero__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--ma-head);font-weight:500;font-size:26px;line-height:1;text-transform:uppercase;margin:0 0 24px;color:#fff;max-width:none}
.ma-hero__eyebrow span{font-weight:300;font-size:1.3em}
.ma-hero h1{font-family:var(--ma-head);font-weight:500;font-size:40px;line-height:1.05;margin:0 0 24px;color:#fff;text-transform:none;text-wrap:balance}
.ma-hero p{font-size:18px;line-height:1.6;color:#cfcfcf;max-width:600px;margin:0 0 32px}
.ma-hero__img{width:100%;height:auto;display:block;transform:translateX(20.9%)}
@media(min-width:992px){
  .ma-hero{padding-top:154px}
  .ma-hero__wrap{grid-template-columns:1fr 1fr;gap:64px;padding:0 4vw}
  .ma-hero p.ma-hero__eyebrow{font-size:clamp(26px,2.6vw,38px)}
  .ma-hero h1{font-size:clamp(44px,4.8vw,68px)}
  .ma-hero__img{width:118%;max-width:none;transform:none}
}

/* pasek pod hero (5:1, jak .bcontainer) */
.ma-bar{display:flex;height:8px}
.ma-bar i{display:block;flex:5;background:#fff}
.ma-bar i+i{flex:1;background:var(--ma-red)}

/* ---------- NAGŁÓWEK SEKCJI ZE SKOSAMI ---------- */
.ma-band{position:relative;overflow:hidden;background:#000;color:#fff;padding:28px 0}
.ma-band__text{position:relative;z-index:1;max-width:900px}
.ma-band h2{font-family:var(--ma-head);font-weight:500;font-size:30px;line-height:1.1;text-transform:uppercase;margin:0;color:#fff;text-wrap:balance}
.ma-band__sub{font-family:var(--ma-head);font-weight:300;font-size:19px;line-height:1.4;color:#fff;margin:14px 0 0}
/* Skos tylko w marginesie obok kontenera 1320px. Odstęp mieści pochylenie i kreskę, żeby nie wchodziły w tytuł. */
.ma-band__deco{display:none}
@media(min-width:1240px){
  .ma-band{padding:40px 0}
  .ma-band h2{font-size:clamp(34px,3.4vw,50px)}
  .ma-band__sub{font-size:clamp(19px,1.6vw,23px)}
  .ma-band__deco{--ma-deco-w:140px;--ma-deco-gap:72px;display:block;position:absolute;top:50%;height:124px;width:var(--ma-deco-w);transform:translateY(-50%) skewX(-25deg)}
  .ma-band__deco--fill{background:#fff}
  .ma-band__deco--line{border:1.5px solid #fff}
  .ma-band__deco--l{left:calc((100% - 1320px) / 2 - var(--ma-deco-w) - var(--ma-deco-gap))}
  .ma-band__deco--r{right:calc((100% - 1320px) / 2 - var(--ma-deco-w) - var(--ma-deco-gap))}
  .ma-band__deco::after{content:"";position:absolute;top:0;width:2px;height:100%;background:#fff}
  .ma-band__deco--l::after{right:-26px}
  .ma-band__deco--r::after{left:-26px}
  .ma-band__deco--line::after{background:var(--ma-red)}
}

/* ---------- OFERTA – KARTY ---------- */
.ma-cards{display:grid;grid-template-columns:1fr;gap:2px;background:#262626;border:1px solid #262626}
@media(min-width:992px){.ma-cards{grid-template-columns:1fr 1fr}}
.ma-card{background:var(--ma-ink);padding:32px 24px;display:flex;flex-direction:column;gap:22px;transition:background .2s}
.ma-card:hover{background:#111}
@media(min-width:768px){.ma-card{padding:36px 36px 32px}}
.ma-card__top{display:flex;align-items:center;justify-content:space-between}
.ma-card__no{display:flex;align-items:center;justify-content:center;width:64px;height:40px;border:1px solid #fff;transform:skewX(-20deg)}
.ma-card__no span{transform:skewX(20deg);font-family:var(--ma-head);font-size:18px}
.ma-card__tick{display:block;width:40px;height:2px;background:var(--ma-red);transform:rotate(-65deg)}
.ma-card h3{font-family:var(--ma-head);font-weight:500;font-size:28px;line-height:1.15;margin:0;color:#fff;text-transform:none}
@media(min-width:992px){.ma-card h3{font-size:32px}}
.ma-card p{flex:1;font-size:16.5px}
.ma-card .ma-link{border-top:1px solid var(--ma-line);padding-top:20px}

/* boks ceny */
.ma-price{position:relative;overflow:hidden;background:#fff;color:#000;margin-top:32px;padding:28px 24px;display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media(min-width:992px){.ma-price{grid-template-columns:auto 1fr auto;gap:48px;padding:44px 48px}}
.ma-price::before{content:"";position:absolute;left:-30px;top:0;bottom:0;width:14px;background:var(--ma-red);transform:skewX(-20deg)}
.ma-price__label{font-family:var(--ma-head);font-size:18px;letter-spacing:.12em;text-transform:uppercase;display:block}
.ma-price__value{font-family:var(--ma-head);font-weight:600;font-size:44px;line-height:1;display:block;white-space:nowrap}
@media(min-width:992px){.ma-price__value{font-size:60px}}
.ma-price__value small{font-weight:400;font-size:.45em}
.ma-price p{color:#333!important;font-size:16.5px}

/* ---------- POMAGAMY ZROZUMIEĆ ---------- */
.ma-understand{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 56px}
.ma-understand__l{flex:1 1 380px;display:flex;flex-direction:column;gap:24px;padding-top:0}
@media(min-width:992px){.ma-understand__l{position:sticky;top:120px}}
.ma-understand__r{flex:1.3 1 460px}
.ma-questions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-family:var(--ma-head);font-size:clamp(26px,2.6vw,36px);line-height:1.2;color:#fff}
.ma-questions li{display:flex;gap:16px}
.ma-questions li::before{content:"?";color:var(--ma-red)}
.ma-case{display:flex;flex-direction:column;gap:14px;padding:24px 0;border-top:1px solid #333}
.ma-case:last-child{border-bottom:1px solid #333}
.ma-case h3{display:flex;gap:16px;align-items:baseline}
.ma-case h3::before{content:"/";color:var(--ma-red);font-size:28px}

/* ---------- BRANŻE ---------- */
.ma-industries{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #000}
.ma-industries a{display:flex;justify-content:space-between;align-items:center;padding:20px 4px;border-bottom:1px solid #000;font-family:var(--ma-head);font-size:22px;color:#000!important;text-decoration:none!important}
.ma-industries a:nth-child(even){border-left:1px solid #000;padding-left:24px}
.ma-industries a:hover{color:var(--ma-red)!important}

/* ---------- PROCES ---------- */
.ma-steps{display:grid;grid-template-columns:1fr;gap:28px;list-style:none;margin:0;padding:0}
@media(min-width:768px){.ma-steps{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.ma-steps{grid-template-columns:repeat(4,1fr)}}
.ma-step{display:flex;flex-direction:column;gap:18px}
.ma-step__head{display:flex;align-items:center;gap:16px}
.ma-step__head::after{content:"";flex:1;height:1px;background:#444}
.ma-step:last-child .ma-step__head::after{display:none}
.ma-step__no{display:flex;align-items:center;justify-content:center;width:72px;height:48px;background:#fff;transform:skewX(-20deg)}
.ma-step__no span{transform:skewX(20deg);font-family:var(--ma-head);font-weight:600;font-size:24px;color:#000}
.ma-step:last-child .ma-step__no{background:var(--ma-red)}
.ma-step:last-child .ma-step__no span{color:#fff}
.ma-step p{font-size:16px}

/* ---------- GWARANCJA ---------- */
.ma-warranty{position:relative;border:1px solid #fff;padding:24px;display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){.ma-warranty{padding:32px}}
.ma-warranty::before{content:"";position:absolute;top:-1px;left:44px;width:80px;height:3px;background:var(--ma-red)}
.ma-warranty__big{font-family:var(--ma-head);font-weight:600;font-size:clamp(52px,6vw,72px);line-height:1}
.ma-warranty__lbl{font-family:var(--ma-head);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--ma-muted)}

/* ---------- KONTAKT ---------- */
.ma-contact{position:relative;overflow:hidden}
.ma-contact::after{content:"";position:absolute;right:-80px;top:-40px;bottom:-40px;width:clamp(100px,18vw,260px);background:var(--ma-red);transform:skewX(-20deg);pointer-events:none}
.ma-contact .container{position:relative;z-index:1}
.ma-contact h2{font-family:var(--ma-head);font-weight:500;font-size:clamp(34px,4.4vw,60px);line-height:1.05;margin:0;color:#000;text-transform:none}
.ma-contact__list{border-top:1px solid #000;margin-top:28px}
.ma-contact__list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid #000;color:#000!important;text-decoration:none!important}
.ma-contact__list a:hover{color:var(--ma-red)!important}
.ma-contact__list small{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#555}
.ma-contact__list strong{font-family:var(--ma-head);font-weight:400;font-size:26px}
.ma-contact .ma-btn{width:100%;justify-content:space-between;font-size:19px;padding:22px 28px}

/* odstępy kolumn Bootstrap 3 w nowych blokach */
@media(max-width:991px){.ma-row-gap>[class*="col-"]+[class*="col-"]{margin-top:28px}}
.ma-row-center{display:flex;flex-wrap:wrap;align-items:center}
.ma-row-center:before,.ma-row-center:after{display:none}
.ma-contact{margin-bottom:72px}