:root{
  /* Dominan abu-abu */
  --bg1:#f6f7f9;
  --bg2:#ffffff;
  --panel:#ffffffcc;
  --panel2:#f1f3f6cc;

  --text:#111827;
  --muted:#6b7280;

  /* Aksen cyan (garis/ikon) */
  --cyan:#06b6d4;

  --stroke: rgba(17,24,39,.10);
}

*{ font-family: 'Plus Jakarta Sans','Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
html{ scroll-behavior:smooth; }
body{
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, rgba(17,24,39,.08), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
}
.main-wrap{ padding-top:78px; }

/* grid halus */
.bg-grid{
  position:fixed; inset:0; z-index:-4; opacity:.16;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.06) 1px, transparent 1px);
  background-size: 66px 66px;
}

/* orbs (abu2 + cyan lembut) */
.bg-orb{ position:fixed; width:560px; height:560px; border-radius:50%; filter: blur(64px); opacity:.20; z-index:-3; }
.orb-1{ top:-240px; left:-240px; background: radial-gradient(circle, rgba(6,182,212,.85), transparent 66%); }
.orb-2{ top:120px; right:-260px; background: radial-gradient(circle, rgba(17,24,39,.45), transparent 70%); }
.orb-3{ bottom:-280px; left:35%; background: radial-gradient(circle, rgba(17,24,39,.25), transparent 72%); }

/* navbar */
.glass-nav{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.navbar .nav-link{
  color: rgba(17,24,39,.78) !important;
  font-weight: 800;
  letter-spacing: .18px;
  padding: .55rem .85rem;
}
.navbar .nav-link:hover{ color: var(--text) !important; }
.navbar .nav-link.active{
  color: var(--text) !important;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:6px;
  height:2px; border-radius:999px;
  background: var(--cyan); /* ✅ TEgas (tanpa gradasi) */
}

/* tombol */
.btn-grad{
  border:0;
  color:#fff !important;
  background: rgba(17,24,39,.92); /* ✅ solid */
  box-shadow: 0 16px 32px rgba(17,24,39,.14);
  position:relative;
}
.btn-grad::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:-2px;
  height:2px;
  border-radius:999px;
  background: var(--cyan); /* ✅ solid */
  opacity:.90;
}
.btn-grad:hover{ transform: translateY(-1px); }

.btn-soft{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(17,24,39,.12);
  color: rgba(17,24,39,.78) !important;
}
.btn-soft:hover{ background: rgba(255,255,255,.92); }

/* hero */
.hero{
  padding: 15px 0 58px !important;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.hero-badge{
  display:inline-flex; align-items:center;
  padding:.55rem .8rem;
  border-radius:999px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(17,24,39,.10);
  color: rgba(17,24,39,.78);
  box-shadow: 0 10px 25px rgba(17,24,39,.06);
  font-weight: 700;
}
.hero-title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(34px, 4vw, 56px);
  margin: 14px 0 10px;
}
.text-grad{
  color: var(--text); /* ✅ hilangkan gradasi judul */
}
.hero-sub{ color: var(--muted); font-size: 1.06rem; max-width: 760px; }

/* section alt abu2 */
.section{ padding: 72px 0; }
.section-alt{
  background: rgba(17,24,39,.03); /* ✅ flat, tanpa gradasi */
}

/* cards */
.glass-card{
  background: var(--panel);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 55px rgba(17,24,39,.10);
  padding: 26px;
}
.glass-card.inner{
  padding: 18px;
  background: rgba(245,246,248,.78);
}
.glass-tint{ background: var(--panel2); }
.glass-deep{ background: rgba(236,239,243,.82); }

.hr-soft{
  height: 1px; width: 100%;
  background: rgba(17,24,39,.14); /* ✅ flat */
}

.text-muted-soft{ color: rgba(17,24,39,.62) !important; }
p{ color: rgba(17,24,39,.75); line-height: 1.75; }

/* icon */
.icon-glass{
  width: 62px; height: 62px;
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(17,24,39,.10);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 35px rgba(17,24,39,.10);
}
.icon-glass img{ max-width: 70%; max-height: 70%; object-fit: contain; }

/* mini row */
.mini-row{ display:flex; gap:10px; align-items:flex-start; color: rgba(17,24,39,.76); margin: 6px 0; }
.mini-row i{ color: var(--cyan); margin-top: 2px; }

/* service icon */
.svc-icon{
  width: 54px; height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  display:flex; align-items:center; justify-content:center;
}
.svc-icon i{ font-size:22px; color: var(--cyan); }

/* nav card hover */
.nav-card{ display:block; text-decoration:none; color: var(--text); transition:.35s ease; }
.nav-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(17,24,39,.12);
  border-color: rgba(6,182,212,.20);
}

/* Pills (VISI/MISI/BUDAYA) - pakai nav-pills */
.nav-pills .nav-link{
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.65);
  color: rgba(17,24,39,.78);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: 800;
}
.nav-pills .nav-link.active{
  background: rgba(17,24,39,.92);
  color:#fff;
  border-color: transparent;
  position:relative;
}
.nav-pills .nav-link.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-2px;
  height:2px;
  border-radius:999px;
  background: var(--cyan); /* ✅ solid */
}

/* clients */
.client-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.client-item{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  padding: 18px;
  display:flex; align-items:center; justify-content:center;
  min-height: 120px;
  transition:.35s ease;
  box-shadow: 0 16px 45px rgba(17,24,39,.08);
}
.client-item img{ max-width:100%; max-height:72px; object-fit:contain; filter: grayscale(100%); opacity:.92; transition:.35s ease; }
.client-item:hover{ transform: translateY(-6px); box-shadow: 0 22px 60px rgba(17,24,39,.12); border-color: rgba(6,182,212,.20); }
.client-item:hover img{ filter: grayscale(0%); opacity:1; }

/* contact */
.contact-row{ display:flex; gap:12px; align-items:flex-start; }
.contact-ic{
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  display:flex; align-items:center; justify-content:center;
}
.contact-ic i{ font-size:20px; color: var(--cyan); }
.link-soft{ color: rgba(17,24,39,.76); text-decoration:none; }
.link-soft:hover{ color: var(--text); }

/* page hero */
.page-hero{ padding: 86px 0 26px; }

/* footer */
.footer{
  border-top: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
}
.footer-appri{ max-height:56px; object-fit:contain; }
.soc{
  display:inline-flex; width:38px; height:38px;
  align-items:center; justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.68);
  color: rgba(17,24,39,.70);
  text-decoration:none;
  margin-left:6px;
}
.soc:hover{ color: var(--text); box-shadow: 0 14px 30px rgba(17,24,39,.10); }

@media (max-width:576px){
  .hero{ padding-top: 92px; }
}

/* MAP HEIGHT FIX — SAMA DENGAN CONTACT */
.map-wrap{
  display:flex;
  height:100%;
  min-height:320px; /* fallback mobile */
}
.map-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:18px;
}
header.hero{
  padding: 15px 0 58px !important;
}