:root {
  --blue-950: #062f66;
  --blue-900: #08427f;
  --blue-700: #0b67b2;
  --blue-500: #258bd0;
  --blue-100: #e9f4fb;
  --green-800: #17643a;
  --green-600: #2b8a52;
  --green-500: #43a967;
  --green-100: #eaf7ee;
  --lime: #caea8b;
  --ink: #102a3f;
  --muted: #5a6c79;
  --line: #dce6eb;
  --surface: #f5f9fa;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(15, 61, 93, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 112px 0; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 82px;
  display: flex; align-items: center; color: white;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.site-header.is-scrolled { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 8px 32px rgba(11,55,84,.08); backdrop-filter: blur(14px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg,var(--green-500),var(--green-800)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.brand-mark span { color: white; font-weight: 850; font-size: 20px; transform: skew(-5deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 16px; letter-spacing: .08em; }
.brand-copy small { font-size: 10px; margin-top: 5px; opacity: .72; letter-spacing: .04em; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a { font-size: 13px; font-weight: 600; opacity: .82; transition: opacity .2s ease, color .2s ease; }
.desktop-nav a:hover { opacity: 1; color: var(--lime); }
.is-scrolled .desktop-nav a:hover { color: var(--green-600); }
.nav-cta { padding: 11px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; background: white; color: var(--blue-950); box-shadow: 0 8px 24px rgba(3,26,54,.12); }
.is-scrolled .nav-cta { background: var(--blue-900); color: white; }
.menu-button { display: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); padding: 10px; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: currentColor; }

.hero { position: relative; overflow: hidden; min-height: 790px; padding-top: 82px; color: white; background: radial-gradient(circle at 88% 22%, #1673a5 0, #0a548f 23%, transparent 47%), linear-gradient(125deg,#042d61 0%,#074b83 56%,#0c6c86 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom,black,transparent 88%); }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .4; }
.hero-orb-one { width: 350px; height: 350px; right: -110px; top: 90px; background: radial-gradient(circle,rgba(126,214,167,.5),transparent 70%); }
.hero-orb-two { width: 280px; height: 280px; left: -130px; bottom: 90px; background: radial-gradient(circle,rgba(89,176,225,.4),transparent 70%); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; gap: 72px; align-items: center; min-height: 620px; padding-top: 34px; }
.eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 750; color: var(--lime); }
.eyebrow span { display: inline-block; width: 26px; height: 2px; background: currentColor; }
.eyebrow.dark { color: var(--green-600); }
.eyebrow.light { color: var(--lime); }
.hero h1 { margin: 0; max-width: 690px; font-size: clamp(48px,5.2vw,74px); line-height: .99; letter-spacing: -.055em; font-weight: 680; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-lead { max-width: 625px; margin: 28px 0 0; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 22px; border-radius: 12px; font-size: 14px; font-weight: 720; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: #153a2d; box-shadow: 0 14px 28px rgba(5,28,42,.2); }
.button-secondary { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: white; }
.hero-values { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; font-size: 12px; color: rgba(255,255,255,.76); }
.hero-values span { display: inline-flex; align-items: center; gap: 8px; }
.hero-values i { width: 7px; height: 7px; border-radius: 50%; background: #72d495; box-shadow: 0 0 0 4px rgba(114,212,149,.12); }

.hero-visual { position: relative; min-height: 470px; display: flex; align-items: center; }
.visual-frame { width: 100%; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: rgba(244,251,255,.96); color: var(--ink); box-shadow: 0 40px 80px rgba(3,27,52,.32); overflow: hidden; transform: perspective(900px) rotateY(-2deg) rotateX(1deg); }
.visual-topbar { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid #dce8ec; background: white; }
.mini-logo { width: 34px; height: 34px; display: grid; place-items: center; color: white; font-size: 11px; font-weight: 800; border-radius: 10px; background: var(--green-600); }
.visual-topbar div { display: flex; flex-direction: column; }
.visual-topbar strong { font-size: 12px; }
.visual-topbar small { margin-top: 3px; color: #81919b; font-size: 9px; }
.online-dot { margin-left: auto; padding: 6px 9px; border-radius: 99px; background: var(--green-100); color: var(--green-800); font-size: 9px; font-weight: 750; }
.visual-body { padding: 22px; }
.map-panel { position: relative; height: 250px; overflow: hidden; border-radius: 18px; background: linear-gradient(150deg,#deeff6,#eef8f6); }
.map-panel::before,.map-panel::after { content:""; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(57,115,139,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(57,115,139,.15) 1px,transparent 1px);background-size:35px 35px; }
.map-land { position:absolute; z-index:1; background:linear-gradient(145deg,#b8deb8,#80bb8d); filter:drop-shadow(0 10px 15px rgba(49,106,77,.12)); transform:rotate(-12deg); }
.land-one { width:190px;height:88px;left:44px;top:54px;border-radius:56% 40% 60% 35%; }
.land-two { width:120px;height:70px;right:48px;top:92px;border-radius:45% 65% 35% 65%; transform:rotate(16deg); }
.land-three { width:150px;height:48px;left:175px;bottom:28px;border-radius:60% 45% 60% 40%; transform:rotate(8deg); }
.map-point { position:absolute; z-index:3; width:12px;height:12px;border-radius:50%;background:var(--blue-700);border:3px solid white;box-shadow:0 0 0 5px rgba(11,103,178,.16); }
.point-one { left:35%;top:31%; }.point-two { right:26%;top:48%; }.point-three { left:52%;bottom:21%; }
.map-label { position:absolute;z-index:4;left:16px;top:16px;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.9);font-size:9px;font-weight:750;color:var(--blue-900);box-shadow:0 6px 20px rgba(22,72,98,.08); }
.data-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px; }
.data-strip div { padding:12px;border-radius:11px;background:white;border:1px solid #e0eaee;display:flex;flex-direction:column; }
.data-strip span { font-size:8px;color:#81919b; }.data-strip strong { margin-top:5px;font-size:11px;color:var(--blue-950); }
.floating-card { position:absolute; z-index:5; display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;background:white;color:var(--ink);box-shadow:0 18px 40px rgba(3,31,59,.24); }
.floating-card b { width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--green-100);color:var(--green-700); }
.floating-card span { display:flex;flex-direction:column; }.floating-card small { color:#82939e;font-size:8px; }.floating-card strong { margin-top:3px;font-size:10px; }
.float-one { left:-34px;top:52px; }.float-two { right:-30px;bottom:42px; }
.partner-bar { position:relative;z-index:2;min-height:88px;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;gap:20px; }
.partner-bar p { font-size:12px;color:rgba(255,255,255,.66); }
.partner-bar div { display:flex;align-items:center;gap:12px; }
.partner-badge { padding:9px 14px;border-radius:9px;font-size:11px;font-weight:800;letter-spacing:.05em; }
.badge-blue { background:white;color:var(--blue-900); }.badge-green { background:var(--green-600);color:white; }.partner-plus { opacity:.5; }

.two-column { display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start; }
.section-heading h2,.section-intro h2,.process-head h2,.monitor-copy h2,.cta-copy h2 { margin:0; font-size:clamp(36px,4vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:660; }
.about-copy { border-left:1px solid var(--line);padding-left:56px; }
.about-copy p { color:var(--muted);font-size:15px;line-height:1.85; }
.about-copy .lead-copy { margin-top:0;color:var(--ink);font-size:21px;line-height:1.6;font-weight:480; }
.principles { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line); }
.principles div { display:flex;flex-direction:column;gap:8px; }.principles strong{font-size:13px;color:var(--green-700);}.principles span{font-size:11px;line-height:1.5;color:#71838e;}

.modules-section { background:var(--surface); }
.section-intro { max-width:720px; }.section-intro.centered { text-align:center;margin:0 auto 52px; }.section-intro.centered .eyebrow { justify-content:center; }
.section-intro > p:last-child { color:var(--muted);font-size:15px;line-height:1.7;max-width:610px;margin:20px auto 0; }
.module-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.module-card { min-height:280px;padding:28px;border:1px solid #e0e9ec;border-radius:18px;background:white;transition:transform .25s ease,box-shadow .25s ease,border .25s ease; }
.module-card:hover { transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c3dce5; }
.module-number { width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:var(--green-100);color:var(--green-700);font-size:11px;font-weight:800; }
.module-card h3 { margin:26px 0 12px;font-size:18px;letter-spacing:-.02em; }.module-card p { margin:0;color:var(--muted);font-size:13px;line-height:1.75; }
.module-card a { display:inline-flex;align-items:center;gap:9px;margin-top:24px;color:var(--blue-700);font-size:11px;font-weight:750; }

.process-section { position:relative;overflow:hidden;color:white;background:linear-gradient(135deg,var(--blue-950),#07517f 64%,#0a6d76); }
.process-section::after { content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-210px;top:-260px;border:90px solid rgba(121,219,159,.08); }
.process-head { position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end;margin-bottom:52px; }
.process-head > p { margin:0;color:rgba(255,255,255,.68);font-size:14px;line-height:1.8; }
.process-grid { position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18); }
.process-card { padding:32px 28px 10px 0;min-height:250px;border-right:1px solid rgba(255,255,255,.14); }
.process-card:not(:first-child) { padding-left:28px; }.process-card:last-child { border-right:0; }
.process-card > span { display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(202,234,139,.42);color:var(--lime);font-size:11px;font-weight:750; }
.process-card h3 { margin:28px 0 12px;font-size:20px; }.process-card p { margin:0;color:rgba(255,255,255,.64);font-size:12px;line-height:1.75; }

.monitor-layout { display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:center; }
.monitor-copy > p:not(.eyebrow) { color:var(--muted);font-size:15px;line-height:1.8;margin:23px 0 0; }
.monitor-copy ul { list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px; }
.monitor-copy li { display:flex;align-items:center;gap:11px;color:#435967;font-size:13px; }.monitor-copy li span { width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--green-100);color:var(--green-700);font-weight:800;font-size:11px; }
.monitor-board { padding:24px;border:1px solid var(--line);border-radius:22px;background:#fbfdfd;box-shadow:var(--shadow); }
.board-head { display:flex;justify-content:space-between;align-items:center;padding:4px 4px 20px; }.board-head div{display:flex;flex-direction:column;}.board-head strong{font-size:14px;}.board-head small{margin-top:5px;color:#81929c;font-size:10px;}
.board-head button { border:1px solid var(--line);border-radius:8px;background:white;padding:8px 12px;color:#536976;font-size:9px;font-weight:700; }
.board-table { overflow:hidden;border:1px solid #e2eaed;border-radius:13px;background:white; }
.table-row { display:grid;grid-template-columns:1.4fr .8fr .55fr;gap:12px;align-items:center;padding:16px;border-top:1px solid #edf1f3;font-size:10px;color:#4d626f; }
.table-row:first-child{border-top:0;}.table-title{background:#f0f6f8;color:#71848e;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;}
.status { width:max-content;padding:6px 9px;border-radius:99px;font-size:8px;font-weight:750; }.status-berjalan{background:#fff5d8;color:#9b6b00;}.status-terjadwal{background:var(--blue-100);color:var(--blue-700);}.status-selesai{background:var(--green-100);color:var(--green-700);}
.sample-note { margin:13px 3px 0;color:#94a2aa;font-size:8px;font-style:italic; }

.cta-section { padding:28px 0 0;background:var(--surface); }
.cta-card { position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;gap:90px;align-items:center;padding:72px 76px;border-radius:28px 28px 0 0;color:white;background:linear-gradient(125deg,var(--green-800),#237e4a 63%,#348d58); }
.cta-card::before { content:"";position:absolute;width:360px;height:360px;border:75px solid rgba(202,234,139,.1);border-radius:50%;right:-90px;top:-210px; }
.cta-copy { position:relative;z-index:1; }.cta-copy p:last-child{max-width:580px;margin:20px 0 0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.8;}
.contact-card { position:relative;z-index:1;padding:28px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);display:flex;flex-direction:column; }
.contact-card small { color:var(--lime);text-transform:uppercase;letter-spacing:.12em;font-size:8px;font-weight:800; }.contact-card strong{margin-top:14px;font-size:18px;}.contact-card p{margin:5px 0 22px;color:rgba(255,255,255,.66);font-size:11px;}.contact-card a{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:700;}
footer { background:var(--blue-950);color:white;padding:36px 0; }
.footer-grid { display:grid;grid-template-columns:1.3fr 1fr auto;gap:40px;align-items:center; }
.footer-brand{display:flex;align-items:center;gap:12px;}.footer-brand .brand-mark{width:36px;height:36px;border-radius:10px;}.footer-brand .brand-mark span{font-size:16px;}.footer-brand div{display:flex;flex-direction:column;}.footer-brand strong{font-size:13px;letter-spacing:.08em;}.footer-brand small{margin-top:4px;color:rgba(255,255,255,.55);font-size:9px;}
footer p{margin:0;color:rgba(255,255,255,.55);font-size:10px;}.copyright{text-align:right;}

@media (max-width: 980px) {
  .desktop-nav { position:absolute;left:24px;right:24px;top:72px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px;border-radius:16px;background:white;color:var(--ink);box-shadow:var(--shadow); }
  .desktop-nav.open{display:flex}.desktop-nav a{padding:13px 14px;border-bottom:1px solid #edf1f3}.desktop-nav a:last-child{border:0}.nav-cta{display:none}.menu-button{display:block;color:inherit}
  .hero-layout{grid-template-columns:1fr;gap:42px;padding-top:80px;padding-bottom:70px}.hero{min-height:auto}.hero-copy{text-align:center}.hero-copy .eyebrow,.hero-values{justify-content:center}.hero-lead{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-visual{width:min(650px,100%);margin:0 auto}.partner-bar{padding:22px 0}
  .two-column,.monitor-layout{grid-template-columns:1fr;gap:46px}.about-copy{padding-left:0;border-left:0}.module-grid{grid-template-columns:repeat(2,1fr)}.process-head{grid-template-columns:1fr;gap:24px}.process-grid{grid-template-columns:repeat(2,1fr)}.process-card:nth-child(2){border-right:0}.process-card:nth-child(3){padding-left:0}.cta-card{grid-template-columns:1fr;gap:40px}.footer-grid{grid-template-columns:1fr;gap:18px}.copyright{text-align:left}
}

@media (max-width: 640px) {
  .container{width:min(100% - 32px,1180px)}.section{padding:78px 0}.site-header{height:72px}.brand-copy small{display:none}.hero{padding-top:72px}.hero-layout{padding-top:58px;gap:30px}.hero h1{font-size:45px}.hero-lead{font-size:15px}.hero-actions{flex-direction:column}.button{width:100%}.hero-values{gap:13px}.hero-visual{min-height:360px}.float-one{left:-8px;top:28px}.float-two{right:-8px;bottom:18px}.visual-body{padding:14px}.map-panel{height:210px}.data-strip{gap:6px}.data-strip div{padding:8px}.partner-bar{flex-direction:column;justify-content:center;text-align:center}
  .section-heading h2,.section-intro h2,.process-head h2,.monitor-copy h2,.cta-copy h2{font-size:36px}.principles{grid-template-columns:1fr;gap:15px}.module-grid{grid-template-columns:1fr}.module-card{min-height:auto}.process-grid{grid-template-columns:1fr}.process-card,.process-card:not(:first-child),.process-card:nth-child(3){padding:28px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14);min-height:auto}.process-card:last-child{border-bottom:0}.monitor-board{padding:14px;overflow:hidden}.table-row{grid-template-columns:1.2fr .7fr}.table-row span:nth-child(2){display:none}.cta-card{width:100%;padding:58px 24px;border-radius:0}.footer-grid{text-align:center}.footer-brand{justify-content:center}.copyright{text-align:center}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*{transition:none!important} }