/* ==========================================================================
   SOLUTIONS PAGE
   ========================================================================== */
.solutions-hero .sect-head{ text-align:left; margin:0 0 2.5rem; max-width:680px; }

/* ---------- Quick nav pills + scroll-spy ---------- */
.solutions-quicknav{
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.quicknav-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:700; color:var(--c-body);
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  border-radius:999px;
  padding:.55rem 1.1rem;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.quicknav-pill i{ font-size:.8rem; color:var(--c-primary); transition:color .25s ease; }
.quicknav-pill:hover{ transform:translateY(-2px); border-color:var(--c-primary); }
.quicknav-pill.is-active{
  background:var(--c-primary); color:#fff; border-color:var(--c-primary);
}
.quicknav-pill.is-active i{ color:#fff; }

/* ---------- Solution detail sections ---------- */
.solution-detail{
  padding:clamp(56px, 8vw, 88px) 0;
  scroll-margin-top:var(--nav-h);
}
.solution-detail--alt{ background:var(--c-surface-alt); }

.solution-detail-num{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:.78rem;
  color:var(--c-muted);
  letter-spacing:.1em;
  margin-bottom:.9rem;
  display:block;
}
.solution-detail-category{
  display:inline-block;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--c-primary);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.8rem;
}
.solution-detail h2{ font-size:var(--fs-h2); margin-bottom:1rem; }
.solution-detail > .row > div p{ margin-bottom:1.4rem; max-width:52ch; }

.solution-feature-list{
  list-style:none; padding:0; margin:0 0 1.6rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.solution-feature-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.95rem;
  opacity:0; transform:translateX(-8px);
  transition:opacity .45s ease, transform .45s ease;
}
.solution-feature-list li.is-visible{ opacity:1; transform:translateX(0); }
.solution-feature-list li i{
  color:var(--c-primary);
  margin-top:.25rem;
  flex-shrink:0;
}

.solution-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; }
.solution-tags .tag-pill{
  font-size:.75rem; font-weight:600; color:var(--c-body);
  background:transparent;
  border:1px solid var(--c-border);
  border-radius:7px;
  padding:.35rem .8rem;
  transition:border-color .25s ease, color .25s ease;
}
.solution-tags .tag-pill:hover{ border-color:var(--c-primary); color:var(--c-primary); }

.solution-powered{
  display:block; font-size:var(--fs-small); color:var(--c-muted); font-style:italic;
}

/* ---------- Mockup SVG frame (pengganti placeholder image) ---------- */
.solution-mockup{
  position:relative;
  background:var(--stage-bezel);
  border-radius:var(--r-lg);
  padding:14px;
  box-shadow:var(--stage-shadow-bezel);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.solution-mockup:hover{ transform:translateY(-4px); }
.solution-mockup-screen{
  background:var(--stage-screen);
  border-radius:calc(var(--r-lg) - 8px);
  aspect-ratio:16/11.5;
  overflow:hidden;
  position:relative;
}
.solution-mockup-screen svg{ width:100%; height:100%; display:block; }

@media (max-width: 991.98px){
  .solution-detail .order-lg-1,
  .solution-detail .order-lg-2{ order:unset !important; }
}
@media (prefers-reduced-motion: reduce){
  .quicknav-pill, .solution-mockup, .solution-feature-list li{ transition:none; }
  .solution-feature-list li{ opacity:1; transform:none; }
}