/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: advantages (scope: .m-advantages)
   PDF পেজ ১৬ — Why Partner With Us: 6-Card Symmetric Feature Matrix & Trust Ribbon
   ========================================================================== */

/* ---------------- 1. Top Trust Metrics Ribbon (Dark Emerald Banner) ---------------- */
.m-advantages__ribbon{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(0.8rem, 1.5vw, 1.4rem);
  padding:clamp(0.9rem, 1.35vw, 1.25rem) clamp(1.2rem, 2vw, 1.8rem);
  background:linear-gradient(135deg, #071b15 0%, #0d2c22 100%);
  border:1px solid rgba(164, 204, 60, 0.28);
  border-radius:18px;
  box-shadow:0 14px 34px -10px rgba(7, 27, 21, 0.35);
  margin-bottom:clamp(1.2rem, 2vw, 1.8rem);
  position:relative;
  overflow:hidden;
}

.m-advantages__ribbon::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 30%, rgba(164, 204, 60, 0.12) 0%, transparent 60%);
  pointer-events:none;
}

@media (max-width:960px){
  .m-advantages__ribbon{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .m-advantages__ribbon-divider{
    display:none;
  }
}

.m-advantages__ribbon-item{
  display:flex;
  align-items:center;
  gap:0.95rem;
  position:relative;
  z-index:1;
}

.m-advantages__ribbon-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(164, 204, 60, 0.16);
  color:var(--mash-lime, #a4cc3c);
  border:1px solid rgba(164, 204, 60, 0.3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(164, 204, 60, 0.18);
  transition:all 0.3s ease;
}

.m-advantages__ribbon-text strong{
  display:block;
  font-family:var(--mash-font-display, inherit);
  font-size:0.98rem;
  font-weight:800;
  color:#ffffff;
  line-height:1.2;
  letter-spacing:-0.01em;
}

.m-advantages__ribbon-text span{
  display:block;
  font-size:0.75rem;
  color:#cfe0d6;
  margin-top:2px;
  line-height:1.3;
}

.m-advantages__ribbon-divider{
  width:1px;
  height:38px;
  background:rgba(255, 255, 255, 0.14);
  flex-shrink:0;
}

/* ---------------- 2. 6-Card Symmetric Feature Grid (3x2) ---------------- */
.m-advantages__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(0.85rem, 1.3vw, 1.25rem);
}

@media (min-width:640px) and (max-width:1079px){
  .m-advantages__grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width:1080px){
  .m-advantages__grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* ---------------- 3. Individual Feature Card ---------------- */
.m-advantages__card{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  border-radius:18px;
  padding:clamp(1.15rem, 1.6vw, 1.45rem);
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.025);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-advantages__card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--mash-lime, #a4cc3c);
  opacity:0;
  transition:opacity 0.25s ease;
}

.m-advantages__card:hover{
  transform:translateY(-5px);
  border-color:rgba(164, 204, 60, 0.55);
  box-shadow:0 16px 36px -10px rgba(7, 27, 21, 0.09);
}

.m-advantages__card:hover::before{
  opacity:1;
}

/* Card Header: Icon + Meta Tag & Num */
.m-advantages__card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.95rem;
}

.m-advantages__card-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(164, 204, 60, 0.16) 0%, rgba(13, 44, 34, 0.05) 100%);
  color:var(--mash-green-800, #0d2c22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.35s ease;
}

.m-advantages__card:hover .m-advantages__card-icon{
  transform:scale(1.06);
  background:#0d2c22;
  color:var(--mash-lime, #a4cc3c);
}

.m-advantages__card-meta{
  display:flex;
  align-items:center;
  gap:0.55rem;
}

.m-advantages__card-tag{
  font-size:0.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--mash-green-700, #1a5a44);
  background:rgba(18, 62, 47, 0.06);
  padding:2px 8px;
  border-radius:999px;
  flex-shrink:0;
}

.m-advantages__card-num{
  font-family:var(--mash-font-display, inherit);
  font-size:1.25rem;
  font-weight:800;
  color:transparent;
  -webkit-text-stroke:1.3px rgba(13, 44, 34, 0.22);
  line-height:1;
  flex-shrink:0;
  transition:all 0.35s ease;
}

.m-advantages__card:hover .m-advantages__card-num{
  color:var(--mash-lime, #a4cc3c);
  -webkit-text-stroke-color:var(--mash-lime, #a4cc3c);
}

/* Card Content Body */
.m-advantages__card-body{
  flex:1;
}

.m-advantages__card-title{
  font-family:var(--mash-font-display, inherit);
  font-size:1.06rem;
  font-weight:700;
  color:var(--mash-ink, #0f1613);
  margin:0 0 0.38rem;
  line-height:1.28;
}

.m-advantages__card-desc{
  margin:0;
  font-size:0.835rem;
  color:var(--mash-muted, #5d6b63);
  line-height:1.52;
}

/* Card Footer Accent */
.m-advantages__card-footer{
  margin-top:0.85rem;
  padding-top:0.5rem;
}

.m-advantages__card-accent{
  display:block;
  width:28px;
  height:3px;
  border-radius:999px;
  background:rgba(13, 44, 34, 0.1);
  transition:all 0.35s ease;
}

.m-advantages__card:hover .m-advantages__card-accent{
  width:52px;
  background:var(--mash-lime, #a4cc3c);
}