:root{
    --bg-page-a:#f1e6fb;
    --bg-page-b:#e4d3f6;
    --card:#1a1030;
    --card-soft:#221540;
    --card-border:#352458;
    --ink:#f3eefc;
    --ink-dim:#b6a6d9;
    --ink-faint:#8978ad;
    --accent:#8b5cf6;
    --accent-light:#b69bfb;
    --accent-deep:#5b34c4;
    --on-light:#2a1b47;
    --on-light-dim:#6a5a8c;
  }

  .imp-wrap{
    padding: 60px 0px;
    background: #b673f461;
  }
  
  .phase-content{
    display:none;
}

.phase-content.active{
    display:block;
}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    
}
  .eyebrow{
    font-family:'Inter';
    font-size:13px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent-deep);
    margin:0 0 8px;
  }
  
  .sub{
    font-size:15px;
    color:var(--on-light-dim);
    margin:0 0 36px;
    max-width:640px;
    line-height:1.6;
  }
  .layout{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start;}
  .sidebar{display:flex;flex-direction:column;gap:10px;}
  .phase-btn{
    display:flex;align-items:center;gap:14px;
    background:var(--card);
    border:1px solid transparent;
    border-radius:14px;
    padding:14px 16px;
    cursor:pointer;
    text-align:left;
    transition:transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .phase-btn:hover{transform:translateY(-1px);}
  .phase-btn .icon{
    flex:none;width:38px;height:38px;border-radius:10px;
    background:var(--card-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-dim);
    transition:background .15s ease, color .15s ease;
  }
  .phase-btn .icon svg{width:18px;height:18px;}
  .phase-btn .label{flex:1;min-width:0;}
  .phase-btn .num{
    font-family:'Inter';
    font-size:10.5px;font-weight:600;letter-spacing:.12em;
    color:var(--ink-faint);text-transform:uppercase;
    display:block;margin-bottom:2px;line-height: 5px;
  }
  .phase-btn .title{
    font-family:'Inter';
    font-size:15px;font-weight:600;color:var(--ink);line-height:1.25;
  }
  .phase-btn .chev{flex:none;color:var(--ink-faint);transition:transform .15s ease, color .15s ease;}
  .phase-btn .chev svg{width:16px;height:16px;}
  .phase-btn.active{
    border-color:var(--accent);
    background:linear-gradient(180deg,#241a44,#1a1030);
    box-shadow:0 0 0 1px rgba(139,92,246,.25), 0 10px 26px -12px rgba(91,52,196,.55);
  }
  .phase-btn.active .icon{background:var(--accent);color:#fff;}
  .phase-btn.active .chev{color:var(--accent-light);transform:translateX(2px);}

  .panel{display:flex;flex-direction:column;gap:16px;}
  .card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:22px 24px;
    margin-bottom: 10px;
  }
  .card-label{
    display:flex;align-items:center;gap:10px;
    font-family:'Inter';
    font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:12px;
  }
  .card-label .ic{
    width:26px;height:26px;border-radius:8px;background:var(--accent);
    display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  }
  .card-label .ic svg{width:14px;height:14px;}
  .objective-text{
    font-family:'Inter';
    font-size:21px;font-weight:600;color:var(--ink);line-height:1.35;
  }

  .flow{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding-top:6px;}
  .flow-line{
    position:absolute;top:21px;left:6%;right:6%;height:2px;
    background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-light));
    z-index:0;border-radius:2px;
  }
  .flow-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;}
  .flow-dot{
    width:30px;height:30px;border-radius:50%;
    background:var(--card-soft);border:2px solid var(--accent);
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter';font-size:12px;font-weight:700;color:var(--accent-light);
    margin-bottom:10px;
  }
  .flow-name{font-family:'Inter';font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px;}
  .flow-cap{font-size:12px;color:var(--ink-dim);line-height:1.4;}

  .activities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .act-col{min-width:0;}
  .act-col h4{
    font-family:'Inter';font-size:12.5px;font-weight:600;
    color:var(--ink-dim);margin:0 0 10px;letter-spacing:.04em;
  }
  .pill-list{display:flex;flex-wrap:wrap;gap:7px;}
  .pill{
    background:var(--card-soft);
    border:1px solid var(--card-border);
    color:var(--ink);
    font-size:12.5px;
    padding:6px 11px;
    border-radius:999px;
    line-height:1.3;
  }

  .card-label .ic{
    width:26px;
    height:26px;
    border-radius:8px;
    background:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    flex:none;
}

.flow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    padding-top:6px;
}

.flow-line{
    position:absolute;
    top:21px;
    left:10%;
    right:10%;
    height:2px;
    background:linear-gradient(
        90deg,
        var(--accent-deep),
        var(--accent),
        var(--accent-light)
    );
    z-index:0;
}
  .empty-col{font-size:12px;color:var(--ink-faint);font-style:italic;}

/*  @media (max-width:860px){
    .layout{grid-template-columns:1fr;}
    .sidebar{flex-direction:row;flex-wrap:wrap;}
    .phase-btn{flex:1 1 calc(50% - 10px);}
    .activities-grid{grid-template-columns:1fr;}
    .flow{flex-wrap:wrap;row-gap:18px;}
    .flow-line{display:none;}
  }*/

  .mobile-implementation{
    display:none;
}

  @media(max-width:991px){

    .imp-wrap {
    padding: 60px 25px;
   
}

.imp-wrap .layout{
    display:block;
}

/* DESKTOP HIDE */

.imp-wrap .sidebar,
.imp-wrap .panel{
    display:none;
}

/* MOBILE SHOW */

.mobile-implementation{
    display:block !important;
}

.mobile-phase{
    background:#1a1030;
    border:1px solid #352458;
    border-radius:16px;
    margin-bottom:15px;
    overflow:hidden;
}

.mobile-phase.active{
    border-color:#8b5cf6;
}

.mobile-phase-head{
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}

.mobile-phase-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.mobile-phase-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#8b5cf6;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mobile-phase-icon i {
    font-size: 16px;
    color: #fff;
}

.mobile-phase-title small{
    display:block;
    color:#8978ad;
    font-size:11px;
    letter-spacing:1px;
}

.mobile-phase-title h5{
    margin:0;
    color:#fff;
    font-size:15px;
}

.mobile-toggle{
    color:#fff;
    font-size:24px;
    font-weight:600;
}

.mobile-phase-body{
    display:none;
    padding:20px;
    border-top:1px solid #352458;
}

.mobile-phase.active .mobile-phase-body{
    display:block;
}

.mobile-card{
    background:#221540;
    border-radius:12px;
    padding:16px;
    margin-bottom:15px;
}

.mobile-card:last-child{
    margin-bottom:0;
}

.mobile-card-label{
    display:flex;
    align-items:center;
    gap:10px;
    color:#b6a6d9;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px;
    text-transform:uppercase;
}

.mobile-card-label i{
    color:#8b5cf6;
}

.mobile-objective{
    color:#fff;
    font-size:15px;
    line-height:1.7;
}

.mobile-flow-step {
    position: relative;
    padding-left: 28px;
    margin-bottom: 18px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.mobile-flow-step:last-child{
    margin-bottom:0;
}

.mobile-flow-step::before{
    content:'';
    width:12px;
    height:12px;
    background:#8b5cf6;
    border-radius:50%;
    position:absolute;
    left:0;
    top:5px;
}

.mobile-flow-step::after{
    content:'';
    width:2px;
    height:100%;
    background:#8b5cf6;
    position:absolute;
    left:5px;
    top:18px;
}

.mobile-flow-step:last-child::after{
    display:none;
}

.mobile-flow-step h6 {
    color: #fff;
    margin-bottom: 4px;
    font-size: 15px;
}

.mobile-flow-step p{
    color:#b6a6d9;
    margin:0;
    font-size:13px;
}

.mobile-pill-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mobile-pill{
    background:#1a1030;
    border:1px solid #352458;
    color:#fff;
    padding:7px 12px;
    border-radius:50px;
    font-size:12px;
}

.mob-steps h6{
    color: #fff;
    font-size: 15px;
}


.mob-steps-box {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.mobile-flow-horizontal{
    position:relative;
    display:flex;
    justify-content:space-between;
    text-align:center;
    margin-top:10px;
}

.mobile-flow-line{
    position:absolute;
    top:15px;
    left:15%;
    right:15%;
    height:2px;
    background:#8b5cf6;
    z-index:1;
}

.mobile-flow-item{
    position:relative;
    z-index:2;
    flex:1;
}

.mobile-flow-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8b5cf6;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 15px;
}

.mobile-flow-item h6{
    color:#fff;
    margin-bottom:5px;
    font-size:14px;
}

.mobile-flow-item p{
    color:#b6a6d9;
    font-size:12px;
    line-height:1.4;
    margin:0;
}

}