/* ============================================================
   AssetCore — Problems Section
   ============================================================ */
.problems{background:var(--grad-hero);position:relative;overflow:hidden}
.problems::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 50%,rgba(0,102,255,.12) 0%,transparent 60%);
}
.problems .container{position:relative;z-index:1}
.problems-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;
}
.problem-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);padding:28px;
  transition:all var(--trans-base);position:relative;overflow:hidden;
}
.problem-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,80,80,.5),transparent);
  transform:scaleX(0);transition:transform var(--trans-base);transform-origin:left;
}
.problem-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.problem-card:hover::before{transform:scaleX(1)}

.problem-icon{
  width:44px;height:44px;border-radius:10px;
  background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;color:#FF6B6B;margin-bottom:16px;
}
.problem-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px;font-family:var(--font-head)}
.problem-desc{font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.6}

.problems-cta{text-align:center;margin-top:48px}
.problems-cta p{color:rgba(255,255,255,.6);margin-bottom:20px}

@media(max-width:900px){.problems-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.problems-grid{grid-template-columns:1fr}}

/* ============================================================
   Benefits Section
   ============================================================ */
.benefits{}
.benefits-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  align-items:center;
}
.benefits-content{padding-right:40px}
.benefits-list{display:flex;flex-direction:column;gap:24px;margin-top:40px}
.benefit-item{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border-radius:var(--r-md);
  border:1px solid rgba(10,37,64,.07);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:all var(--trans-base);
}
.benefit-item:hover{box-shadow:var(--shadow-md);transform:translateX(6px);border-color:rgba(0,102,255,.12)}
.benefit-item-icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:rgba(0,102,255,.08);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:1.125rem;
  transition:transform var(--trans-spring);
}
.benefit-item:hover .benefit-item-icon{transform:scale(1.1) rotate(-5deg)}
.benefit-item-text h4{font-size:1rem;margin-bottom:4px;font-family:var(--font-head);font-weight:700}
.benefit-item-text p{font-size:.875rem;color:var(--text-muted)}

.benefits-visual{position:relative}
.benefit-mockup{
  background:linear-gradient(145deg,#0A2540,#0d3060);
  border-radius:var(--r-xl);padding:32px;
  box-shadow:var(--shadow-xl);position:relative;overflow:hidden;
}
.benefit-mockup::before{
  content:'';position:absolute;top:-40%;right:-20%;
  width:400px;height:400px;border-radius:50%;
  background:rgba(0,102,255,.12);filter:blur(60px);pointer-events:none;
}
.bm-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bm-title{font-size:.9375rem;font-weight:700;color:#fff;font-family:var(--font-head)}
.bm-period{font-size:.75rem;color:rgba(255,255,255,.45);background:rgba(255,255,255,.07);padding:4px 10px;border-radius:6px}
.bm-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.bm-metric{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:16px;
}
.bm-metric-value{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:#fff}
.bm-metric-label{font-size:.7rem;color:rgba(255,255,255,.45);margin-top:2px}
.bm-metric-delta{font-size:.75rem;color:var(--cta);margin-top:6px}
.bm-table{background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden}
.bm-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 14px;font-size:.8125rem;border-bottom:1px solid rgba(255,255,255,.05);
}
.bm-row:last-child{border-bottom:none}
.bm-row-name{color:rgba(255,255,255,.7)}
.bm-row-status{
  padding:3px 8px;border-radius:6px;font-size:.7rem;font-weight:600;
}
.bm-row-status--ok{background:rgba(22,199,132,.15);color:var(--cta)}
.bm-row-status--warn{background:rgba(255,183,0,.15);color:#FFB700}
.bm-row-dept{color:rgba(255,255,255,.4);font-size:.75rem}

@media(max-width:960px){
  .benefits-grid{grid-template-columns:1fr}
  .benefits-content{padding-right:0}
}

/* ============================================================
   Modules Section
   ============================================================ */
.modules{background:var(--bg-section)}
.modules-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px;justify-content:center;
}
.module-tab{
  padding:10px 20px;border-radius:var(--r-full);border:1px solid rgba(10,37,64,.1);
  font-size:.875rem;font-weight:600;font-family:var(--font-head);color:var(--text-muted);
  background:#fff;cursor:pointer;transition:all var(--trans-base);
}
.module-tab:hover{border-color:var(--primary);color:var(--primary)}
.module-tab.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:var(--shadow-blue)}

.modules-content{display:none;animation:fadeInUp .4s ease}
.modules-content.active{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.module-feature{
  background:#fff;border:1px solid rgba(10,37,64,.07);border-radius:var(--r-md);
  padding:20px;display:flex;align-items:center;gap:12px;
  transition:all var(--trans-base);
}
.module-feature:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.module-feature i{color:var(--primary);font-size:1rem;width:20px;flex-shrink:0}
.module-feature span{font-size:.875rem;font-weight:600;color:var(--text-dark);font-family:var(--font-head)}

@media(max-width:900px){.modules-content.active{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.modules-content.active{grid-template-columns:1fr}}

/* ============================================================
   Timeline (Employee Journey)
   ============================================================ */
.timeline{}
.timeline-track{
  position:relative;display:flex;gap:0;margin-top:64px;
}
.timeline-track::before{
  content:'';position:absolute;top:28px;left:28px;right:28px;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--cta));
}
.timeline-step{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 12px;position:relative;
}
.timeline-node{
  width:56px;height:56px;border-radius:50%;
  background:var(--grad-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;box-shadow:var(--shadow-blue);
  margin-bottom:20px;z-index:1;position:relative;
  border:3px solid #fff;
  transition:transform var(--trans-spring);
}
.timeline-step:hover .timeline-node{transform:scale(1.15)}
.timeline-step-title{font-family:var(--font-head);font-size:.9375rem;font-weight:700;color:var(--text-dark);margin-bottom:6px}
.timeline-step-desc{font-size:.8125rem;color:var(--text-muted);line-height:1.5}

@media(max-width:900px){
  .timeline-track{flex-direction:column;gap:32px}
  .timeline-track::before{display:none}
  .timeline-step{flex-direction:row;text-align:left;gap:20px}
  .timeline-node{flex-shrink:0}
}