/* ==========================================================================
   INDUSTRIES PAGE — Alternating showcase, mandiri, tanpa card
   ========================================================================== */

.ind-hero .sect-head{ text-align:left; margin:0; max-width:680px; }

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

.ind-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;
}
.ind-head-row{ display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.ind-icon{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  background:var(--c-primary-light);
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
}
.ind-icon svg{ width:22px; height:22px; }

.ind-detail h2{ font-size:var(--fs-h2); margin-bottom:1rem; }
.ind-detail p.ind-desc{ margin-bottom:1.4rem; max-width:52ch; }

.ind-scope{ margin-bottom:1.5rem; }
.ind-scope-label{
  display:block;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--c-muted); margin-bottom:.85rem;
}
.ind-scope-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
}
.ind-scope-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.92rem; color:var(--c-body); line-height:1.55;
  opacity:0; transform:translateX(-8px);
  transition:opacity .45s ease, transform .45s ease;
}
.ind-scope-list li.is-visible{ opacity:1; transform:translateX(0); }
.ind-scope-list li::before{
  content:"";
  flex:0 0 auto;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--stage-accent-2);
  margin-top:.5em;
}

.ind-related{
  display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  transition:opacity .2s ease;
}
.ind-related:hover{ opacity:.75; }
.ind-related-label{ font-size:.82rem; color:var(--c-muted); }
.ind-related-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color:var(--c-primary);
  background:var(--c-primary-light);
  border-radius:999px;
  padding:.35rem .85rem .35rem .9rem;
}
.ind-related-pill i{ font-size:.72rem; }

/* ---------- Ilustrasi scene (pengganti mockup dashboard) ---------- */
.ind-illustration{
  position:relative;
  background:var(--c-surface-alt);
  border-radius:var(--r-lg);
  padding:2.5rem 2rem;
  aspect-ratio:4/3.1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), background-color .3s ease;
}
.ind-illustration::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--stage-dot) 1.4px, transparent 1.4px);
  background-size:18px 18px;
  opacity:.6;
}
.ind-illustration:hover{
  transform:translateY(-4px);
  background:var(--c-primary-light);
}
.ind-illustration svg{
  position:relative;
  width:100%; height:100%;
  z-index:1;
}

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