/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: business-model (scope: .m-business-model)
   PDF পেজ ৩ — One Connected Textile Ecosystem: Animated Pipeline Architecture
   ========================================================================== */

.m-business-model__ecosystem{
  display:flex;
  flex-direction:column;
  gap:clamp(1.8rem, 3.2vh, 2.8rem);
}

/* ---------------- Interactive 6-Step Connected Pipeline ---------------- */
.m-business-model__track{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  align-items:stretch;
  gap:0.4rem;
}

.m-business-model__step-wrap{
  display:flex;
  align-items:center;
  position:relative;
  height:100%;
}

.m-business-model__node{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0.35rem;
  padding:1rem 1.15rem;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.09);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.03);
  transition:all 0.35s var(--mash-ease);
  position:relative;
  height:100%;
}

.m-business-model__node:hover{
  transform:translateY(-5px);
  border-color:rgba(164, 204, 60, 0.6);
  box-shadow:0 14px 32px -8px rgba(7, 27, 21, 0.12);
}

.m-business-model__step-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mash-font-display);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mash-green-800, #123e2f);
  background:rgba(164, 204, 60, 0.16);
  padding:2px 8px;
  border-radius:999px;
  margin-bottom:0.3rem;
}

.m-business-model__step-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--mash-lime, #a4cc3c);
  box-shadow:0 0 6px var(--mash-lime, #a4cc3c);
}

.m-business-model__title{
  font-family:var(--mash-font-display);
  font-size:0.96rem;
  font-weight:700;
  line-height:1.25;
  color:var(--mash-ink, #0f1613);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.m-business-model__sub{
  font-size:0.73rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mash-muted, #5d6b63);
}

/* Animated Connector Line */
.m-business-model__connector{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  flex-shrink:0;
  color:var(--mash-lime, #a4cc3c);
  margin:0 -2px;
  z-index:2;
  overflow:visible;
}

.m-business-model__connector-line{
  width:100%;
  height:12px;
  overflow:visible;
}

.m-business-model__connector-line line{
  stroke:rgba(164, 204, 60, 0.5);
  animation:connectorDash 1.2s linear infinite;
}

.m-business-model__connector-line path{
  stroke:var(--mash-lime, #a4cc3c);
}

@keyframes connectorDash{
  to{
    stroke-dashoffset:-14;
  }
}

.m-business-model__pulse-node{
  fill:var(--mash-lime, #a4cc3c);
  filter:drop-shadow(0 0 4px var(--mash-lime, #a4cc3c));
  animation:nodePulse 1.8s ease-in-out infinite;
}

@keyframes nodePulse{
  0%, 100%{r:2;}
  50%{r:3.5;}
}

/* Tablet (3 columns) */
@media (min-width:641px) and (max-width:1080px){
  .m-business-model__track{
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows:1fr;
    gap:1rem;
  }
  .m-business-model__connector{
    display:none !important;
  }
}

/* Mobile (2-column S-Curve Snake Flow: 1-2, 4-3, 5-6) */
@media (max-width:640px){
  .m-business-model__track{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:1fr;
    column-gap:1.8rem;
    row-gap:2.4rem;
    align-items:stretch;
  }

  /* S-Curve Sequence Order:
     Row 1: 01 (left) -> 02 (right)
     Row 2: 04 (left) <- 03 (right)
     Row 3: 05 (left) -> 06 (right)
  */
  .m-business-model__step-wrap:nth-child(1){ grid-column:1; grid-row:1; }
  .m-business-model__step-wrap:nth-child(2){ grid-column:2; grid-row:1; }
  .m-business-model__step-wrap:nth-child(3){ grid-column:2; grid-row:2; }
  .m-business-model__step-wrap:nth-child(4){ grid-column:1; grid-row:2; }
  .m-business-model__step-wrap:nth-child(5){ grid-column:1; grid-row:3; }
  .m-business-model__step-wrap:nth-child(6){ grid-column:2; grid-row:3; }

  /* Equal card sizing & compact mobile padding */
  .m-business-model__step-wrap{
    height:100%;
    width:100%;
  }

  .m-business-model__node{
    height:100%;
    width:100%;
    padding:0.9rem 0.8rem;
    border-radius:14px;
    gap:0.3rem;
  }

  .m-business-model__title{
    font-size:clamp(0.82rem, 3.2vw, 0.92rem);
    white-space:normal;
    line-height:1.2;
    word-break:break-word;
  }

  .m-business-model__sub{
    font-size:0.66rem;
    line-height:1.3;
    letter-spacing:0.04em;
  }

  .m-business-model__step-pill{
    font-size:0.62rem;
    padding:2px 7px;
    margin-bottom:0.15rem;
  }

  /* Precision Connectors for S-Curve Pipeline */
  .m-business-model__connector{
    position:absolute;
    margin:0;
    z-index:5;
    pointer-events:none;
  }

  /* Step 01 -> Step 02 (Horizontal Right) */
  .m-business-model__step-wrap:nth-child(1) .m-business-model__connector{
    left:100%;
    top:50%;
    transform:translateY(-50%);
    width:1.8rem;
    height:14px;
  }

  /* Step 02 -> Step 03 (Vertical Down) */
  .m-business-model__step-wrap:nth-child(2) .m-business-model__connector{
    left:50%;
    top:100%;
    transform:translateX(-50%);
    width:20px;
    height:2.4rem;
  }
  .m-business-model__step-wrap:nth-child(2) .m-business-model__connector-line{
    width:2.4rem;
    height:12px;
    transform:rotate(90deg);
    transform-origin:center center;
  }

  /* Step 03 -> Step 04 (Horizontal Left) */
  .m-business-model__step-wrap:nth-child(3) .m-business-model__connector{
    right:100%;
    top:50%;
    transform:translateY(-50%);
    width:1.8rem;
    height:14px;
  }
  .m-business-model__step-wrap:nth-child(3) .m-business-model__connector-line{
    transform:rotate(180deg);
    transform-origin:center center;
  }

  /* Step 04 -> Step 05 (Vertical Down) */
  .m-business-model__step-wrap:nth-child(4) .m-business-model__connector{
    left:50%;
    top:100%;
    transform:translateX(-50%);
    width:20px;
    height:2.4rem;
  }
  .m-business-model__step-wrap:nth-child(4) .m-business-model__connector-line{
    width:2.4rem;
    height:12px;
    transform:rotate(90deg);
    transform-origin:center center;
  }

  /* Step 05 -> Step 06 (Horizontal Right) */
  .m-business-model__step-wrap:nth-child(5) .m-business-model__connector{
    left:100%;
    top:50%;
    transform:translateY(-50%);
    width:1.8rem;
    height:14px;
  }
}

/* ---------------- Strategic Dual Pillars ---------------- */
.m-business-model__dual-pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem, 1.8vw, 1.5rem);
}

@media (min-width:768px){
  .m-business-model__dual-pillars{
    grid-template-columns:repeat(2, 1fr);
  }
}

.m-business-model__pillar-card{
  background:linear-gradient(150deg, #ffffff 0%, var(--mash-cream, #f7f6f1) 100%);
  border:1px solid rgba(13, 44, 34, 0.09);
  border-radius:20px;
  padding:clamp(1.3rem, 2vw, 1.8rem);
  box-shadow:0 6px 24px rgba(0, 0, 0, 0.03);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  transition:all 0.35s var(--mash-ease);
}

.m-business-model__pillar-card:hover{
  transform:translateY(-5px);
  border-color:rgba(164, 204, 60, 0.5);
  box-shadow:0 16px 36px -10px rgba(7, 27, 21, 0.12);
}

.m-business-model__pillar-header{
  display:flex;
  align-items:center;
  gap:1rem;
}

.m-business-model__pillar-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(164, 204, 60, 0.22) 0%, rgba(18, 62, 47, 0.08) 100%);
  color:var(--mash-green-800, #123e2f);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.3s ease;
}

.m-business-model__pillar-card:hover .m-business-model__pillar-icon{
  background:var(--mash-lime, #a4cc3c);
  color:var(--mash-green-950, #071b15);
  transform:scale(1.06);
}

.m-business-model__pillar-tag{
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--mash-green-700, #1a5a44);
  display:block;
  margin-bottom:2px;
}

.m-business-model__pillar-title{
  font-family:var(--mash-font-display);
  font-size:clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight:700;
  color:var(--mash-ink, #0f1613);
  margin:0;
  line-height:1.24;
}

.m-business-model__pillar-text{
  margin:0;
  font-size:0.89rem;
  color:var(--mash-muted, #5d6b63);
  line-height:1.62;
}