/* =========================
   MAB About (RTL) – Full CSS (Replace-all)
   - Base + Homepage compact variant (mab-about--home)
   ========================= */
.mab-about{
  direction: rtl;
  position: relative;
  margin: 18px 0;
  padding: 0;
  max-width: none;
  width:100%;
  --text:#0f172a;
  --muted: rgba(15,23,42,.72);
  --border: rgba(15,23,42,.10);
  --shadow: 0 24px 70px rgba(2,6,23,.14);
  --shadowSoft: 0 14px 40px rgba(2,6,23,.10);
  --radius: 28px;
  --g1: rgba(109,40,217,.10);
  --g2: rgba(22,163,74,.10);
  --g3: rgba(59,130,246,.08);
  color: var(--text);
  font-family: inherit;
}
/* Background halo */
.mab-about__bg{
  position:absolute;
  inset:-10px 0 -10px 0;
  z-index:0;
  pointer-events:none;
}
/* Layout */
.mab-about__wrap{
  width:100%;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 1.05fr; /* content | visual */
  gap: 26px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:clamp(18px,2.5vw,28px);
}

/* Content */
.mab-about__content{
  min-width: 0;
  padding: 6px 2px;
}
.mab-about__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.78);
  font-size: .92rem;
  margin-bottom: 12px;
}
.mab-about__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 5px rgba(22,163,74,.18);
}
.mab-about__title{
  margin: 0 0 12px;
  font-size: 1.55rem;
  line-height: 1.45;
  letter-spacing: -.2px;
}
.mab-about__text p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.9;
  font-size: 1.02rem;
}
/* Actions */
.mab-about__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.mab-about__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: .98rem;
  text-decoration:none !important;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}
.mab-about__btn--primary{
  background: linear-gradient(90deg, rgba(109,40,217,.95), rgba(79,70,229,.95));
  color:#fff !important;
  box-shadow: 0 14px 28px rgba(79,70,229,.22);
}
.mab-about__btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79,70,229,.26);
}
.mab-about__btn--ghost{
  background: rgba(255,255,255,.7);
  color: rgba(15,23,42,.86) !important;
  border-color: rgba(15,23,42,.12);
}
.mab-about__btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2,6,23,.10);
}

/* Meta */
.mab-about__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
}
.mab-about__metaItem{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 12px 12px;
}
.mab-about__metaItem strong{
  display:block;
  font-size: .98rem;
  margin-bottom: 4px;
  color: rgba(15,23,42,.92);
}
.mab-about__metaItem span{
  display:block;
  font-size: .88rem;
  color: rgba(15,23,42,.68);
  line-height: 1.55;
}

/* Visual */
.mab-about__visual{
  position: relative;
  min-height: 320px;
  border-radius: calc(var(--radius) - 8px);
}
.mab-about__frame{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadowSoft);
}

/* subtle corner accents */
.mab-about__frame::before,
.mab-about__frame::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.mab-about__frame::before{
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(109,40,217,.28), transparent 60%);
  transform: rotate(18deg);
}
.mab-about__frame::after{
  inset: auto auto -50px -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 60% 40%, rgba(22,163,74,.22), transparent 62%);
  transform: rotate(-10deg);
}
.mab-about__frame img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.01);
}

/* Floating chips */
.mab-about__chip{
  position:absolute;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #fff;
  font-size: .88rem;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(2,6,23,.16);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  opacity: .96;
}
.mab-about__chip--a{ top: 18px; right: 22px; }
.mab-about__chip--b{ top: 46%; left: 18px; transform: translateY(-50%); }
.mab-about__chip--c{ bottom: 18px; right: 16px; }

/* Responsive */
@media (max-width: 980px){
  .mab-about__wrap{
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
  .mab-about__visual{
    min-height: 260px;
    order: 1;
  }
  .mab-about__content{
    order: 2;
  }
  .mab-about__chip--b{ left: 10px; }
  .mab-about__meta{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Homepage compact variant
   Activate by adding: mab-about--home
   ========================= */

.mab-about.mab-about--home{
  max-width:none;
  width:100%;
  margin:18px 0 !important;
  padding:0 !important;
}
.mab-about.mab-about--home .mab-about__wrap{
  padding: 18px 16px !important;
  gap: 18px !important;
}
.mab-about.mab-about--home .mab-about__visual{
  min-height: 240px !important;
}

/* Image slightly smaller */
.mab-about.mab-about--home .mab-about__frame{
  max-width: 460px !important;
  border-radius: 22px !important;
}

/* Chips less intrusive; hide on mobile */
.mab-about.mab-about--home .mab-about__chip{
  font-size: .82rem !important;
  padding: 8px 12px !important;
  opacity: .92 !important;
}
@media (max-width: 980px){
  .mab-about.mab-about--home .mab-about__chip{ display:none !important; }
}

/* More compact typography */
.mab-about.mab-about--home .mab-about__title{
  font-size: 1.28rem !important;
  margin-bottom: 10px !important;
}
.mab-about.mab-about--home .mab-about__text p{
  font-size: .98rem !important;
  margin-bottom: 10px !important;
  line-height: 1.85 !important;
}

/* Buttons more minimal */
.mab-about.mab-about--home .mab-about__btn{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
}

/* Meta columns adapt */
@media (max-width: 1100px){
  .mab-about.mab-about--home .mab-about__meta{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 560px){
  .mab-about.mab-about--home .mab-about__meta{
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   MAB About — KPI Row (Add-on)
   - Scoped, publisher-grade, low-noise
   ========================================================== */

.mab-about__kpis{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.mab-kpi{
  position: relative;
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,23,42,.08);
  overflow: hidden;
}

/* subtle accent edge (very minimal) */
.mab-kpi::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(109,40,217,.55), rgba(22,163,74,.45));
  opacity: .55;
}

.mab-kpi__num{
  display: block;
  font-weight: 1000;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.92);
  margin-bottom: 4px;
}

.mab-kpi__lbl{
  display: block;
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(15,23,42,.68);
  font-weight: 800;
}

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

/* Homepage compact variant */
@media (max-width: 1100px){
  .mab-about.mab-about--home .mab-about__kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px){
  .mab-about.mab-about--home .mab-about__kpis{
    grid-template-columns: 1fr;
  }
}