/* ===================================================================
   Pasar Energi — lapisan komponen "lp-" (navbar, laci menu, kaki
   halaman, dan seluruh isi beranda).

   Dimuat SETELAH css/style.css di setiap halaman publik (lihat
   partials/site-header.blade.php, partials/site-footer.blade.php,
   layouts/app.blade.php, layouts/landing.blade.php) — reset dasar
   (body, h1-h4, tombol, dst.) sudah jadi tanggung jawab style.css,
   jadi berkas ini sengaja TIDAK mendefinisikan ulang elemen polos
   supaya keduanya tidak saling timpa tergantung urutan muat. Semua
   kelas di sini diawali .lp- justru supaya bisa hidup berdampingan
   dengan nama seperti .hero, .btn, .card milik style.css tanpa
   bentrok pada 20-an halaman lain yang masih memakainya.

   Ditulis tangan, bukan Tailwind, karena seluruh situs ini tayang dari
   berkas CSS statis tanpa langkah build — memasang Tailwind CDN hanya
   untuk satu halaman berarti menambah unduhan ~100 KB dan kedipan gaya
   di halaman yang justru paling sering jadi kesan pertama.
   =================================================================== */

:root{
  --lp-blue:        #2563eb;
  --lp-blue-dark:   #1d4ed8;
  --lp-blue-soft:   #eff6ff;
  --lp-sky:         #0ea5e9;
  --lp-sky-dark:    #0284c7;
  --lp-sky-soft:    #f0f9ff;
  --lp-deep:        #006194;
  --lp-indigo:      #4f46e5;
  --lp-indigo-soft: #eef2ff;
  --lp-emerald:     #059669;
  --lp-emerald-soft:#ecfdf5;

  --lp-ink:         #0f172a;
  --lp-slate-700:   #334155;
  --lp-slate-600:   #475569;
  --lp-slate-500:   #64748b;
  --lp-slate-400:   #94a3b8;
  --lp-line:        #e2e8f0;
  --lp-line-strong: #cbd5e1;
  --lp-soft:        #f8fafc;
  --lp-soft-2:      #f1f5f9;

  --lp-font:        'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --lp-font-display:'Space Grotesk','Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --lp-font-mono:   'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --lp-shell:       1200px;
  --lp-head-h:      64px;
  --lp-ease:        cubic-bezier(.16,1,.3,1);
}

/* ---------- reset (lp-*-scoped only; base elements are style.css's job) ---------- */
a{text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--lp-sky);color:#fff;}

:focus-visible{outline:2px solid var(--lp-blue);outline-offset:2px;border-radius:6px;}

.lp-shell{width:100%;max-width:var(--lp-shell);margin-inline:auto;padding-inline:1rem;}
.lp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Setiap sasaran anchor harus berhenti di bawah bilah atas yang lengket,
   bukan tersembunyi di baliknya. */
[id]{scroll-margin-top:calc(var(--lp-head-h) + 16px);}

/* ---------- ikon ---------- */
.lp-i{width:1.15em;height:1.15em;flex:none;stroke-width:1.9;}

/* ===================================================================
   Tombol
   =================================================================== */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--lp-font-display);font-weight:700;font-size:.9rem;line-height:1;
  padding:.85rem 1.5rem;border-radius:12px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s var(--lp-ease);
}
.lp-btn-primary{background:var(--lp-blue);color:#fff;box-shadow:0 10px 22px -10px rgba(37,99,235,.7);}
.lp-btn-primary:hover{background:var(--lp-sky-dark);box-shadow:0 14px 26px -10px rgba(2,132,199,.6);transform:translateY(-1px);}
.lp-btn-ghost{background:#fff;color:var(--lp-ink);border-color:var(--lp-line);box-shadow:0 1px 2px rgba(15,23,42,.04);font-weight:600;}
.lp-btn-ghost:hover{background:var(--lp-soft);border-color:var(--lp-line-strong);transform:translateY(-1px);}
.lp-btn-sm{padding:.5rem 1rem;font-size:.78rem;border-radius:999px;}
.lp-btn:active{transform:scale(.98);}

/* ===================================================================
   Potongan yang dipakai berulang
   =================================================================== */
.lp-card{
  background:#fff;border:1px solid var(--lp-line);border-radius:18px;
  box-shadow:0 4px 20px -2px rgba(15,23,42,.04),0 2px 6px -1px rgba(15,23,42,.02);
  transition:border-color .25s var(--lp-ease),box-shadow .25s var(--lp-ease),transform .25s var(--lp-ease);
}
.lp-card:hover{
  border-color:#93c5fd;
  box-shadow:0 16px 36px -8px rgba(2,132,199,.12),0 4px 12px -2px rgba(15,23,42,.04);
  transform:translateY(-2px);
}

.lp-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .85rem;border-radius:999px;
  background:var(--lp-sky-soft);border:1px solid #bae6fd;color:var(--lp-deep);
  font-family:var(--lp-font-mono);font-size:.7rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.lp-chip-white{background:#fff;border-color:#bae6fd;}

.lp-eyebrow{
  font-family:var(--lp-font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lp-sky-dark);
}

/* Titik berdenyut penanda "langsung/aktif". */
.lp-dot{position:relative;display:inline-flex;width:8px;height:8px;flex:none;}
.lp-dot::before,.lp-dot::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--lp-sky);}
.lp-dot::before{animation:lp-ping 1.8s cubic-bezier(0,0,.2,1) infinite;}
@keyframes lp-ping{75%,100%{transform:scale(2.2);opacity:0;}}

.lp-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;max-width:46rem;margin:0 auto 2.5rem;}
.lp-head h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;}
.lp-head p{font-size:.95rem;line-height:1.65;color:var(--lp-slate-600);}

.lp-section{padding-block:3.5rem;}

/* ===================================================================
   Bilah atas
   =================================================================== */
.lp-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(226,232,240,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.lp-header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--lp-head-h);}
/* Tanpa ini, .lp-brand (yang punya display:flex sendiri untuk menyusun
   lambang+nama) jadi kotak level-blok dan jatuh ke baris baru di bawah
   tombol menu — bukan duduk sebaris dengannya. */
.lp-header-kiri{display:flex;align-items:center;gap:.65rem;min-width:0;}

.lp-brand{display:flex;align-items:center;gap:.5rem;flex:none;}
/* Lambang sekarang gambar (public/image/logo-icon.png), bukan lagi teks
   "PE" di atas kotak gradient — kotaknya sendiri sudah tidak perlu latar
   atau bayangan sendiri, cukup mewadahi tinggi gambarnya. */
.lp-brand-mark{display:inline-flex;align-items:center;flex:none;height:34px;}
.lp-brand-mark img{height:100%;width:auto;display:block;}
/* min-width:0 + ellipsis: kalau layar tetap kurang lebar (mis. jam tangan
   browser atau split-screen), nama menyusut rapi dengan "...", bukan
   meluber menimpa tombol Masuk/Go Solar di sebelahnya. */
.lp-brand-name{
  font-family:var(--lp-font-display);font-weight:700;font-size:1.05rem;color:var(--lp-ink);letter-spacing:-.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lp-brand{min-width:0;}
.lp-brand-name em{font-style:normal;color:var(--lp-blue);}

.lp-nav{display:none;align-items:center;gap:.25rem;font-family:var(--lp-font-display);font-size:.87rem;font-weight:500;}
.lp-nav a{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .7rem;border-radius:10px;color:var(--lp-slate-600);
  transition:color .2s,background .2s;
}
.lp-nav a:hover{color:var(--lp-ink);background:var(--lp-soft-2);}
.lp-nav a.is-active{color:var(--lp-sky-dark);font-weight:700;background:var(--lp-sky-soft);}
.lp-nav a.is-active::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--lp-sky-dark);}

.lp-actions{display:flex;align-items:center;gap:.35rem;}
.lp-actions-desktop{display:none;}
.lp-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--lp-font-display);font-size:.85rem;font-weight:500;color:var(--lp-slate-600);
  padding:.5rem .7rem;border-radius:10px;transition:color .2s,background .2s;
}
.lp-link:hover{color:var(--lp-sky-dark);background:var(--lp-soft-2);}

.lp-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;color:var(--lp-slate-600);
  transition:color .2s,background .2s,transform .2s;
}
.lp-burger:hover{color:var(--lp-ink);background:var(--lp-soft-2);}
.lp-burger:active{transform:scale(.94);}
.lp-burger .lp-i{width:22px;height:22px;}

@media (min-width:1024px){
  :root{--lp-head-h:80px;}
  .lp-shell{padding-inline:2rem;}
  .lp-nav,.lp-actions-desktop{display:flex;}
  .lp-actions-mobile,.lp-burger{display:none;}
  .lp-brand-mark{height:40px;}
  .lp-brand-name{font-size:1.15rem;}
  .lp-section{padding-block:5rem;}
  .lp-head{margin-bottom:3.5rem;}
  .lp-head h2{font-size:2.25rem;}
  .lp-head p{font-size:1rem;}
}

/* ===================================================================
   Laci menu (mobile)
   =================================================================== */
.lp-scrim{
  position:fixed;inset:0;z-index:70;
  background:rgba(15,23,42,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.lp-scrim.is-open{opacity:1;visibility:visible;}

.lp-drawer{
  position:fixed;top:0;left:0;z-index:80;
  width:290px;max-width:85vw;height:100%;
  background:#fff;border-right:1px solid var(--lp-line);
  box-shadow:0 25px 50px -12px rgba(15,23,42,.35);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.35rem;overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .3s ease-in-out;
  visibility:hidden;
}
.lp-drawer.is-open{transform:translateX(0);visibility:visible;}
.lp-drawer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--lp-soft-2);}
.lp-drawer-nav{display:flex;flex-direction:column;gap:.3rem;}
.lp-drawer-nav a{
  display:flex;align-items:center;gap:.8rem;
  padding:.75rem .9rem;border-radius:12px;
  font-size:.88rem;font-weight:500;color:var(--lp-slate-600);
  border:1px solid transparent;transition:background .2s,color .2s;
}
.lp-drawer-nav a:hover{background:var(--lp-soft);color:var(--lp-ink);}
.lp-drawer-nav a .lp-i{width:19px;height:19px;color:var(--lp-blue);}
.lp-drawer-nav a.is-primary{background:var(--lp-blue-soft);border-color:#dbeafe;color:#1d4ed8;font-weight:700;}
.lp-drawer-sep{height:1px;background:var(--lp-soft-2);margin:.6rem 0;}
.lp-drawer-foot{padding-top:1.1rem;margin-top:1.1rem;border-top:1px solid var(--lp-soft-2);display:flex;flex-direction:column;gap:.4rem;}
.lp-drawer-foot b{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--lp-ink);}
.lp-drawer-foot span{font-family:var(--lp-font-mono);font-size:.68rem;color:var(--lp-slate-500);}

body.lp-locked{overflow:hidden;}

@media (min-width:1024px){
  .lp-scrim,.lp-drawer{display:none;}
}

/* ===================================================================
   Hero
   =================================================================== */
.lp-hero{position:relative;overflow:hidden;padding-block:3rem 3.5rem;}
.lp-hero-glow{
  position:absolute;top:-4rem;left:50%;transform:translateX(-50%);
  width:min(680px,120vw);height:400px;border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(56,189,248,.28),rgba(37,99,235,.12),transparent);
  filter:blur(60px);
}
.lp-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.35rem;max-width:52rem;margin-inline:auto;}
.lp-hero h1{
  font-size:clamp(2.05rem,7.5vw,4.25rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
}
.lp-hero h1 .lp-grad{
  background:linear-gradient(100deg,var(--lp-sky-dark) 0%,var(--lp-blue) 50%,var(--lp-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp-hero-sub{font-size:.95rem;line-height:1.7;color:var(--lp-slate-600);max-width:38rem;}
.lp-hero-sub strong{color:var(--lp-ink);font-weight:800;}
.lp-hero-cta{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:22rem;}
.lp-hero-cta .lp-btn{width:100%;padding-block:.95rem;}

/* Latar kisi tipis — hanya di sekitar hero, supaya tidak membuat
   seluruh halaman terasa ramai. */
.lp-grid-bg{
  background-color:#fff;
  background-image:
    radial-gradient(circle at 50% 0%,rgba(2,132,199,.08) 0%,transparent 55%),
    radial-gradient(circle at 85% 18%,rgba(0,97,148,.06) 0%,transparent 45%),
    linear-gradient(rgba(148,163,184,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.09) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,48px 48px,48px 48px;
}

@media (min-width:768px){
  .lp-hero{padding-block:4.5rem 5.5rem;}
  .lp-hero-cta{flex-direction:row;justify-content:center;max-width:none;}
  .lp-hero-cta .lp-btn{width:auto;}
  .lp-hero-sub{font-size:1.075rem;}
}

/* ===================================================================
   Alur 3 langkah
   =================================================================== */
.lp-alur{background:rgba(248,250,252,.75);border-block:1px solid rgba(226,232,240,.9);}
.lp-steps{display:grid;gap:1rem;}
.lp-step{display:flex;align-items:flex-start;gap:1rem;padding:1.35rem;border-top:4px solid var(--lp-sky);}
.lp-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;border-radius:13px;
  font-family:var(--lp-font-display);font-weight:800;font-size:1.05rem;color:#fff;
  background:var(--lp-sky);box-shadow:0 8px 16px -8px rgba(14,165,233,.8);
}
.lp-step-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.15rem;}
.lp-step-meta .lp-eyebrow{letter-spacing:.1em;font-size:.62rem;}
.lp-tag{
  padding:.15rem .5rem;border-radius:6px;
  font-family:var(--lp-font-mono);font-size:.62rem;font-weight:600;
  background:#e0f2fe;color:#075985;
}
.lp-step h3{font-size:1.05rem;font-weight:700;margin-bottom:.2rem;}
.lp-step p{font-size:.8rem;line-height:1.6;color:var(--lp-slate-500);}

.lp-step-2{border-top-color:var(--lp-blue);}
.lp-step-2 .lp-step-num{background:var(--lp-blue);box-shadow:0 8px 16px -8px rgba(37,99,235,.8);}
.lp-step-2 .lp-eyebrow{color:var(--lp-blue);}
.lp-step-2 .lp-tag{background:#dbeafe;color:#1e40af;}

.lp-step-3{border-top-color:var(--lp-indigo);}
.lp-step-3 .lp-step-num{background:var(--lp-indigo);box-shadow:0 8px 16px -8px rgba(79,70,229,.8);}
.lp-step-3 .lp-eyebrow{color:var(--lp-indigo);}
.lp-step-3 .lp-tag{background:var(--lp-indigo-soft);color:#3730a3;}

@media (min-width:768px){
  .lp-steps{grid-template-columns:repeat(3,1fr);gap:1.5rem;}
  .lp-step{padding:1.75rem;}
}

/* ===================================================================
   Empat pilar
   =================================================================== */
.lp-pilar{display:grid;gap:1rem;}
.lp-pilar-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem;}
.lp-pilar-kiri{display:flex;align-items:center;gap:1rem;min-width:0;}
.lp-pilar-ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;border-radius:13px;
  background:var(--lp-sky-soft);border:1px solid #bae6fd;color:var(--lp-sky-dark);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.lp-pilar-ikon .lp-i{width:24px;height:24px;}
.lp-pilar-item h3{font-size:1.05rem;font-weight:700;margin-block:.1rem;}
.lp-pilar-item p{font-size:.78rem;line-height:1.55;color:var(--lp-slate-500);font-weight:500;}
.lp-pilar-nilai{
  font-family:var(--lp-font-display);font-weight:800;font-size:1.5rem;
  color:var(--lp-sky-dark);margin-left:auto;text-align:right;white-space:nowrap;
}

.lp-pilar-b .lp-pilar-ikon{background:var(--lp-blue-soft);border-color:#bfdbfe;color:var(--lp-blue);}
.lp-pilar-b .lp-eyebrow{color:var(--lp-blue);}
.lp-pilar-b .lp-pilar-nilai{color:var(--lp-blue);font-size:1.3rem;}
.lp-pilar-c .lp-pilar-nilai{font-size:1.3rem;color:var(--lp-deep);}
.lp-pilar-d .lp-pilar-ikon{background:var(--lp-emerald-soft);border-color:#a7f3d0;color:var(--lp-emerald);}
.lp-pilar-d .lp-eyebrow{color:var(--lp-emerald);}
.lp-pilar-d .lp-pilar-nilai{color:var(--lp-emerald);font-size:1.3rem;}

@media (min-width:768px){
  .lp-pilar{grid-template-columns:1fr 1fr;gap:1.5rem;}
  .lp-pilar-item{padding:1.75rem;}
  .lp-pilar-nilai{font-size:1.75rem;}
}

/* ===================================================================
   Dampak & jangkauan
   =================================================================== */
.lp-dampak{display:grid;gap:2.5rem;align-items:center;}
.lp-dampak-kiri{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.lp-dampak-kiri h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;}
.lp-dampak-kiri > p{font-size:.95rem;line-height:1.7;color:var(--lp-slate-600);}

/* ---------- Peta persebaran (titik + legenda) ----------
   Posisi tiap .lp-peta-titik dihitung dari koordinat bujur/lintang
   sungguhan (lihat komentar di home.blade.php), bukan tebakan — jadi
   sebarannya kiri-ke-kanan benar-benar mencerminkan barat-ke-timur
   Indonesia. Labelnya sengaja TIDAK ditempel langsung di titik: enam
   titik di sekitar Jabodetabek-Jawa saja sudah terlalu rapat untuk label
   yang masih terbaca — jadi label ditaruh sebagai legenda berwarna di
   bawah peta, dikelompokkan per pulau dan warnanya cocok dengan titiknya. */
.lp-peta{
  /* Rasio 1200:459.574 SAMA PERSIS dengan viewBox public/image/peta-indonesia.svg
     (bukan dibulatkan ke 2.7:1) — supaya <img> di dalamnya (lp-peta-svg)
     tidak pernah perlu diregangkan tak-proporsional, di layar selebar apa pun. */
  position:relative;width:100%;aspect-ratio:1200/459.574;
  background:#fff;border:1px solid var(--lp-line);border-radius:18px;
  overflow:hidden;box-shadow:0 4px 20px -2px rgba(15,23,42,.04);
}
.lp-peta-grid{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 50% 0%,rgba(2,132,199,.07) 0%,transparent 60%),
    linear-gradient(rgba(148,163,184,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.1) 1px,transparent 1px);
  background-size:100% 100%,28px 28px,28px 28px;
}
/* Garis pantai asli (bukan lagi elips perkiraan) — lihat kredit & kalibrasi
   lengkap di komentar dalam berkas SVG-nya sendiri. */
.lp-peta-svg{position:absolute;inset:0;width:100%;height:100%;}
.lp-peta-kredit{margin-top:.5rem;font-size:.7rem;color:var(--lp-slate-400,#94a3b8);text-align:right;}

/* Ukuran titik FIXED px, bukan ikut lebar kotak peta — jadi sengaja dibuat
   kecil dulu di sini (dasar mobile-first) lalu dibesarkan lewat media query
   di bawah. Tanpa ini, di layar sempit kotak peta menyusut jauh lebih
   banyak daripada titiknya (yang tetap 9px), jadi titik-titiknya terlihat
   raksasa dan saling tumpang tindih dibanding pulaunya sendiri. */
.lp-peta-titik{
  position:absolute;width:6px;height:6px;border-radius:999px;
  transform:translate(-50%,-50%);background:currentColor;
  box-shadow:0 0 0 2px #fff,0 1px 3px rgba(15,23,42,.18);
}
.lp-peta-titik::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  background:currentColor;opacity:.3;animation:lp-breath 3.4s ease-in-out infinite;
}
@media (min-width:640px){
  .lp-peta-titik{width:9px;height:9px;box-shadow:0 0 0 4px #fff,0 2px 5px rgba(15,23,42,.18);}
  .lp-peta-titik::after{inset:-7px;}
}

.lp-peta-legenda{
  margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.25rem 1.5rem;width:100%;text-align:left;
}
.lp-peta-grup-judul{font-family:var(--lp-font-mono);font-size:.66rem;font-weight:700;letter-spacing:.05em;margin-bottom:.5rem;}
/* Warna teks & titik SENGAJA diwariskan dari color: pada <ul> (per grup
   pulau) lewat currentColor, bukan ditulis ulang di sini — supaya
   keduanya selalu cocok tanpa dua tempat yang bisa berbeda. */
.lp-peta-grup ul{display:flex;flex-direction:column;gap:.4rem;}
.lp-peta-grup li{display:flex;align-items:center;gap:.55rem;font-size:.83rem;font-weight:600;}
.lp-peta-grup li i{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none;}

@media (min-width:640px){
  .lp-peta-legenda{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  .lp-peta-legenda{grid-template-columns:repeat(5,1fr);}
}

/* Peta jaringan: lingkaran + simpul murni CSS, tanpa berkas gambar yang
   bisa gagal dimuat. */
.lp-radar{width:100%;padding:1rem;display:flex;flex-direction:column;gap:.9rem;}
.lp-radar-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;}
.lp-radar-bar span{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--lp-font-mono);font-size:.7rem;font-weight:600;color:var(--lp-slate-700);}
.lp-radar-bar em{font-style:normal;font-family:var(--lp-font-mono);font-size:.68rem;font-weight:600;color:var(--lp-sky-dark);}
.lp-radar-plot{
  position:relative;height:190px;border-radius:14px;overflow:hidden;
  background:var(--lp-soft);border:1px solid rgba(226,232,240,.8);
  display:flex;align-items:center;justify-content:center;
}
.lp-ring{position:absolute;border-radius:999px;border:1px solid #bae6fd;}
.lp-ring-1{width:240px;height:240px;animation:lp-breath 4s ease-in-out infinite;}
.lp-ring-2{width:160px;height:160px;border-color:#7dd3fc;}
.lp-ring-3{width:86px;height:86px;border-color:#c7d2fe;background:rgba(239,246,255,.6);}
@keyframes lp-breath{0%,100%{opacity:.45;}50%{opacity:1;}}
.lp-node{position:absolute;display:inline-flex;align-items:center;gap:.4rem;}
.lp-node i{width:8px;height:8px;border-radius:999px;background:var(--lp-blue);flex:none;box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.lp-node span{
  font-family:var(--lp-font-mono);font-size:.58rem;font-weight:600;
  padding:.15rem .35rem;border-radius:5px;background:rgba(255,255,255,.95);
  border:1px solid #bfdbfe;color:#1e40af;box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.lp-node-1{top:14%;left:8%;}
.lp-node-2{bottom:16%;right:10%;}
.lp-node-2 i{background:var(--lp-sky);box-shadow:0 0 0 3px rgba(14,165,233,.15);}
.lp-node-2 span{border-color:#bae6fd;color:#075985;}
.lp-node-3{top:20%;right:12%;}
.lp-node-3 i{background:var(--lp-indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15);}
.lp-node-3 span{border-color:#c7d2fe;color:#3730a3;}
.lp-radar-pusat{
  position:relative;z-index:1;text-align:center;
  background:#fff;border:1px solid var(--lp-line);border-radius:12px;
  padding:.6rem 1rem;box-shadow:0 8px 20px -8px rgba(15,23,42,.18);
}
.lp-radar-pusat b{display:block;font-family:var(--lp-font-mono);font-size:.68rem;font-weight:700;color:var(--lp-deep);letter-spacing:.04em;}
.lp-radar-pusat span{font-family:var(--lp-font-mono);font-size:.6rem;color:var(--lp-slate-500);}

.lp-metrik{display:grid;gap:1rem;}
.lp-metrik-item{padding:1.35rem;border-left:4px solid var(--lp-sky);display:flex;flex-direction:column;gap:.25rem;}
.lp-metrik-item .lp-eyebrow{color:var(--lp-slate-500);letter-spacing:.12em;}
.lp-metrik-angka{font-family:var(--lp-font-display);font-weight:800;font-size:1.9rem;color:var(--lp-ink);letter-spacing:-.02em;}
.lp-metrik-item small{font-size:.72rem;font-weight:500;color:var(--lp-slate-500);}
.lp-metrik-item:nth-child(2){border-left-color:var(--lp-blue);}
.lp-metrik-item:nth-child(2) .lp-metrik-angka{color:var(--lp-blue);}
.lp-metrik-item:nth-child(3){border-left-color:var(--lp-indigo);}
.lp-metrik-item:nth-child(3) .lp-metrik-angka{color:var(--lp-indigo);}
.lp-metrik-item:nth-child(4){border-left-color:var(--lp-emerald);}
.lp-metrik-item:nth-child(4) small{color:var(--lp-emerald);}

@media (min-width:640px){
  .lp-metrik{grid-template-columns:1fr 1fr;}
}
@media (min-width:1024px){
  .lp-dampak{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .lp-dampak-kiri h2{font-size:2.25rem;}
  .lp-metrik-angka{font-size:2.25rem;}
  .lp-radar-plot{height:230px;}
}

/* ===================================================================
   Ajakan penutup
   =================================================================== */
.lp-cta-box{
  position:relative;overflow:hidden;border-radius:24px;
  padding:2rem 1.35rem;
  background:linear-gradient(135deg,var(--lp-sky-soft) 0%,#fff 45%,var(--lp-blue-soft) 100%);
  border:1px solid #e0f2fe;
  box-shadow:0 24px 48px -24px rgba(2,132,199,.28);
}
.lp-cta-box::after{
  content:"";position:absolute;top:-6rem;right:-6rem;width:22rem;height:22rem;border-radius:999px;
  background:rgba(186,230,253,.4);filter:blur(60px);pointer-events:none;
}
.lp-cta-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:38rem;margin-inline:auto;}
.lp-cta-inner h2{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;}
.lp-cta-inner > p{font-size:.92rem;line-height:1.65;color:var(--lp-slate-600);}

.lp-form{display:flex;flex-direction:column;gap:.6rem;width:100%;}
.lp-field{position:relative;display:flex;align-items:center;}
.lp-field .lp-i{position:absolute;left:.9rem;width:18px;height:18px;color:var(--lp-slate-400);pointer-events:none;}
.lp-input{
  width:100%;height:50px;padding:0 1rem 0 2.6rem;
  font-family:var(--lp-font);font-size:.9rem;color:var(--lp-ink);
  background:#fff;border:1px solid var(--lp-line-strong);border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .2s,box-shadow .2s;
}
.lp-input::placeholder{color:var(--lp-slate-400);}
.lp-input:focus{outline:none;border-color:var(--lp-blue);box-shadow:0 0 0 3px rgba(37,99,235,.18);}
.lp-input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15);}
.lp-form .lp-btn{height:50px;padding-block:0;}
.lp-form-error{font-size:.78rem;font-weight:600;color:#dc2626;text-align:left;}
.lp-form-note{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--lp-font-mono);font-size:.7rem;color:var(--lp-slate-500);}
.lp-form-note .lp-i{width:15px;height:15px;color:var(--lp-blue);}
.lp-cta-alt{font-size:.8rem;color:var(--lp-slate-500);}
.lp-cta-alt a{color:var(--lp-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

@media (min-width:640px){
  .lp-cta-box{padding:3.25rem 2.5rem;}
  .lp-cta-inner h2{font-size:2.5rem;}
  .lp-form{flex-direction:row;flex-wrap:wrap;}
  .lp-field{flex:1 1 16rem;}
  .lp-form .lp-btn{flex:none;}
  .lp-form-error{flex-basis:100%;}
}

/* ===================================================================
   Kaki halaman
   =================================================================== */
.lp-footer{background:var(--lp-soft);border-top:1px solid var(--lp-line);color:var(--lp-slate-700);}
.lp-footer-grid{display:grid;gap:2rem;padding-block:3rem 2.25rem;border-bottom:1px solid var(--lp-line);}
.lp-footer-brand{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;}
.lp-footer-brand p{font-size:.85rem;line-height:1.7;color:var(--lp-slate-600);max-width:26rem;}
.lp-social{display:flex;align-items:center;gap:.6rem;}
.lp-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:#fff;border:1px solid var(--lp-line);color:var(--lp-slate-600);
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:color .2s,border-color .2s,transform .2s;
}
.lp-social a:hover{color:var(--lp-sky-dark);border-color:#7dd3fc;transform:translateY(-2px);}
.lp-social .lp-i{width:20px;height:20px;}

.lp-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.lp-footer-col{display:flex;flex-direction:column;gap:.65rem;}
.lp-footer-col strong{font-family:var(--lp-font-mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lp-ink);}
.lp-footer-col a{font-size:.85rem;color:var(--lp-slate-600);transition:color .2s;}
.lp-footer-col a:hover{color:var(--lp-sky-dark);}

.lp-footer-bottom{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding-block:1.5rem;font-size:.8rem;color:var(--lp-slate-500);}
.lp-footer-bottom div{display:flex;align-items:center;gap:.75rem;font-family:var(--lp-font-mono);font-size:.72rem;}
.lp-footer-bottom b{color:var(--lp-sky-dark);font-weight:600;}

@media (min-width:640px){
  .lp-footer-cols{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  .lp-footer-grid{grid-template-columns:5fr 7fr;gap:3rem;}
  .lp-footer-bottom{flex-direction:row;justify-content:space-between;text-align:left;}
}

/* ===================================================================
   Gerak yang dikurangi — hormati setelan sistem pengguna.
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .lp-card:hover,.lp-btn:hover,.lp-social a:hover{transform:none;}
}