:root {
  --blue: #0073bd;
  --blue-light: #eff6ff;
  --blue-accent: #0073bd;
  --gray-bg: #f4f6fb;
  --text-dark: #1a2340;
  --text-muted: #6b7a99;
  --border: #e2e8f0;
}

/* ===================== HERO ===================== */
.hero-section { background: #0073bd; padding: 3rem 0 3.5rem; }
.card-hero { background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.section-icon { width: 36px; height: 36px; background: var(--blue-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--blue-accent); font-size: 1rem; flex-shrink: 0; }
.card-title-h { font-size: 1.125rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0; }
.hero-text { font-size: 0.9375rem; line-height: 1.7; color: #444; margin-top: .8rem; }

/* Milestone */
.milestone-wrap { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .8rem; }
.milestone-item { display: flex; align-items: flex-start; gap: .9rem; }
.milestone-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.m-blue { background: var(--blue-accent); }
.m-teal { background: #00b4a0; }
.m-orange { background: #f59e0b; }
.milestone-item h6 { font-size: 0.9375rem; font-weight: 700; margin-bottom: .18rem; color: var(--text-dark); }
.milestone-item p { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ===================== VISI MISI ===================== */
.vm-section { background: #f7f9ff; padding: 4rem 0; }
.section-title { font-size: 1.75rem; font-weight: 800; color: var(--text-dark); text-align: center; }
.section-underline { width: 50px; height: 4px; background: var(--blue-accent); border-radius: 4px; margin: .6rem auto 2.5rem; }
.card-visi { background: #0073bd; border-radius: 16px; padding: 2.2rem; color: #fff; height: 100%; text-align: center; }
.visi-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.card-visi h5 { font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; }
.card-visi p { font-size: 0.9375rem; line-height: 1.8; font-style: italic; opacity: .92; }
.card-misi { background: #fff; border-radius: 16px; padding: 2rem; height: 100%; box-shadow: 0 4px 20px rgba(0,0,0,.07); border: 1px solid var(--border); }
.card-misi h5 { font-weight: 700; font-size: 1.125rem; color: var(--text-dark); margin-bottom: 1.2rem; }
.misi-item { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; font-size: 0.9375rem; line-height: 1.6; color: #444; }
.misi-icon { color: #3b82f6; font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }

/* ===================== KEBIJAKAN MUTU ===================== */
.km-section { background: #fff; padding: 4rem 0; }
.km-left h4 { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: .8rem; }
.km-left p { font-size: 0.9375rem; line-height: 1.75; color: #555; }
.prinsip-header { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); margin-top: 1rem; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em; }
.prinsip-tag { display: inline-block; background: var(--blue-light); color: var(--blue-accent); font-size: 0.8125rem; font-weight: 600; padding: .3rem .8rem; border-radius: 20px; margin: .3rem .2rem 0 0; }
.km-sasaran-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; }
.stat-card { background: #f7f9ff; border-radius: 12px; padding: 1.2rem; text-align: center; border: 1px solid var(--border); }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--blue-accent); line-height: 1; }
.stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .3rem; }
.stat-desc { font-size: 0.875rem; color: #888; margin-top: .3rem; line-height: 1.4; }

/* ===================== RUANG LINGKUP ===================== */
.rl-section { background: var(--gray-bg); padding: 4rem 0; }
.section-subtitle { font-size: 1rem; color: var(--text-muted); text-align: center; margin-top: -.5rem; margin-bottom: 2.5rem; }
.rl-section .grid { grid-auto-rows: 1fr; }
.scope-card { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid var(--border); height: 100%; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; text-align: center; }
.scope-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(30,92,191,.13); }
.scope-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .9rem; margin-left: auto; margin-right: auto; }
.ic-blue { background: #dbeafe; color: #0073bd; }
.ic-green { background: #dbeafe; color: #0073bd; }
.ic-orange { background: #ffedd5; color: #ea580c; }
.ic-purple { background: #ede9fe; color: #7c3aed; }
.scope-card h6 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: .4rem; }
.scope-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: .8rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skema-badge { background: var(--blue-light); color: var(--blue-accent); font-size: 0.8125rem; font-weight: 600; padding: .22rem .7rem; border-radius: 20px; display: inline-block; margin-top: auto; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .stat-number { font-size: 1.5rem; }
  .section-title { font-size: 1.4rem; }
  .km-left h4, .km-sasaran-title { font-size: 1.125rem; }
  .card-title-h { font-size: 1rem; }
  .hero-text { font-size: 0.875rem; }
  .milestone-item h6 { font-size: 0.875rem; }
  .milestone-item p { font-size: 0.8125rem; }
  .card-visi p, .misi-item { font-size: 0.875rem; }
  .km-left p { font-size: 0.875rem; }
  .stat-desc { font-size: 0.8125rem; }
  .scope-card h6 { font-size: 0.9375rem; }
  .scope-card p { font-size: 0.8125rem; }
}