/* ============================================================
   GSN PLATFORM — style.css  v2.0
   Fixed: pathway line, logo stable, UI/UX, full responsive
   ============================================================ */

/* ── GOOGLE FONTS FALLBACK ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&display=swap');

:root {
  --ink:    #F4F7F5;
  --ink2:   #EAF2EC;
  --ink3:   #DDF0E4;
  --ink4:   #CEEBD8;
  --g:      #1A7A3C;
  --g2:     #2A9E52;
  --gl:     #3AB86A;
  --gl2:    #5DCB88;
  --gold:   #B8860B;
  --gold2:  #D4A017;
  --gold3:  #F0BC2E;
  --w:      #1A2E22;
  --bd:     rgba(26,122,60,.15);
  --db-bg:      #F0F7F2;
  --db-card:    #FFFFFF;
  --db-border:  rgba(26,122,60,.12);
  --db-text:    #1A2E22;
  --db-muted:   #5A8068;
  --success: #16A34A;
  --warn:    #D97706;
  --danger:  #DC2626;
  --info:    #2563EB;
  --radius:  8px;
  --shadow-sm: 0 1px 4px rgba(26,122,60,.08);
  --shadow-md: 0 4px 16px rgba(26,122,60,.12);
  --shadow-lg: 0 8px 32px rgba(26,122,60,.16);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--ink); color:var(--w);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; line-height:1.5;
}
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer }

.page { display:none }
.page.active { display:block }
#pg-dashboard.active { display:flex; height:100vh; overflow:hidden }

/* ── SHARED ── */
.sec-pad { padding:5rem 0 }
.container { max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) }

.sec-label {
  display:flex; align-items:center; gap:.7rem;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--g); margin-bottom:1rem;
}
.sec-label::before { content:''; width:22px; height:1.5px; background:var(--g); flex-shrink:0 }

.sec-h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.8rem,4vw,3rem); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  line-height:1.05; margin-bottom:.8rem; color:var(--w);
}
.sec-h2 em { font-style:normal; color:var(--gold) }

.sec-p {
  font-size:clamp(.82rem,.9vw+.5rem,.95rem);
  font-weight:400; color:rgba(26,46,34,.6);
  line-height:1.8; max-width:580px;
}

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:64px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(26,122,60,.1);
  transition:box-shadow .3s, background .3s;
}
.nav.scrolled {
  background:#fff;
  box-shadow:0 2px 20px rgba(26,122,60,.12);
}
.nav-in {
  max-width:1400px; margin:0 auto; height:100%;
  display:flex; align-items:center;
  padding:0 clamp(1rem,3vw,1.5rem); gap:1rem;
}

/* ── LOGO BRAND — stable size fix ── */
.nav-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
  min-width:0;
}
.nav-logo {
  width:44px; height:44px;
  border-radius:6px; object-fit:contain;
  object-position:center;
  flex-shrink:0; display:block;
  background:transparent;
}
.nav-brand-text {
  display:flex; flex-direction:column;
  justify-content:center; min-width:0;
}
.nav-brand-text .nt1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem; font-weight:800;
  color:var(--w); letter-spacing:.08em; line-height:1;
  white-space:nowrap;
}
.nav-brand-text .nt2 {
  font-size:.44rem; color:var(--g);
  letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; font-family:'Barlow Condensed',sans-serif;
  white-space:nowrap; line-height:1.4;
}

.nav-links {
  display:flex; gap:0; list-style:none;
  margin:0 auto; flex-wrap:nowrap; overflow:hidden;
}
.nav-links a {
  color:rgba(26,46,34,.5); text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .55rem; border-radius:4px;
  transition:color .2s; white-space:nowrap; cursor:pointer;
  display:block;
}
.nav-links a:hover,
.nav-links a.active { color:var(--gold) }

.nav-right { display:flex; align-items:center; gap:.6rem; flex-shrink:0 }

.lang-btn {
  display:flex; align-items:center;
  background:rgba(26,122,60,.07); border-radius:5px;
  overflow:hidden; border:1px solid rgba(26,122,60,.15);
}
.lang-btn button {
  padding:.3rem .55rem; background:none; border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:700;
  letter-spacing:.06em; color:rgba(26,46,34,.45);
  transition:all .2s; line-height:1;
}
.lang-btn button.active {
  background:var(--gold); color:#fff; border-radius:4px;
}

.btn-login {
  display:inline-flex; align-items:center; gap:5px;
  padding:.42rem 1rem;
  background:var(--g); color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  border:none; border-radius:5px;
  transition:all .25s; white-space:nowrap;
}
.btn-login:hover { background:var(--g2); transform:translateY(-1px); box-shadow:var(--shadow-md) }
.btn-login:active { transform:translateY(0) }

.ham {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px; border-radius:4px;
  transition:background .2s;
}
.ham:hover { background:rgba(26,122,60,.08) }
.ham span { width:20px; height:1.5px; background:var(--w); display:block; transition:all .3s; border-radius:2px }
.ham.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.ham.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.mob-menu {
  display:none; position:fixed;
  top:64px; left:0; right:0;
  background:#fff; border-bottom:2px solid rgba(26,122,60,.1);
  z-index:499; padding:0 clamp(1rem,4vw,1.5rem) 1rem;
  flex-direction:column; gap:0;
  box-shadow:0 8px 24px rgba(26,122,60,.1);
  max-height:calc(100vh - 64px); overflow-y:auto;
}
.mob-menu.open { display:flex }
.mob-menu a {
  color:rgba(26,46,34,.65); text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.9rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.75rem 0;
  border-bottom:1px solid rgba(26,122,60,.07);
  cursor:pointer; transition:color .2s;
  display:flex; align-items:center; gap:.5rem;
}
.mob-menu a:hover { color:var(--g) }
.mob-menu a:last-child { color:var(--g); border-bottom:none }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow:hidden; padding-top:64px;
  background-image:url('../img/hero.jpg');
  background-size:cover; background-position:center;
  background-attachment:scroll;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(135deg,
      rgba(10,40,20,.84) 0%,
      rgba(10,40,20,.48) 45%,
      rgba(10,40,20,.72) 100%),
    radial-gradient(ellipse at 15% 60%, rgba(42,158,82,.22) 0%, transparent 55%);
  z-index:0;
}
.hero-grid {
  position:absolute; inset:0; z-index:0; opacity:.035;
  background-image:
    repeating-linear-gradient(0deg,#3AB86A 0,transparent 1px,transparent 48px),
    repeating-linear-gradient(90deg,#3AB86A 0,transparent 1px,transparent 48px);
}
.hero-body {
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,5vw,3rem) clamp(1rem,4vw,2rem);
  max-width:1200px; margin:0 auto; width:100%;
}
.hero-eye {
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:clamp(1.2rem,3vw,2rem);
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(.55rem,.8vw+.2rem,.65rem); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gl2);
}
.hero-eye::before { content:''; width:18px; height:1.5px; background:var(--gl2); flex-shrink:0 }
.hero-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(4.5rem,15vw,12rem);
  font-weight:800; letter-spacing:.01em;
  line-height:.85; color:#fff; margin-bottom:.5rem;
}
.hero-name {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1rem,3vw,2rem);
  font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold3); margin-bottom:1.2rem;
}
.hero-sub {
  font-size:clamp(.82rem,1.4vw,.98rem); font-weight:300;
  color:rgba(255,255,255,.75);
  max-width:min(500px,90%); line-height:1.8; margin-bottom:2.5rem;
}
.hero-pills {
  display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,3vw,2.8rem);
}
.hp {
  display:flex; align-items:center; gap:.45rem;
  padding:.42rem .9rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:5px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  transition:all .25s; cursor:default;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(4px);
}
.hp:hover { border-color:var(--gold3); color:var(--gold3); background:rgba(240,188,46,.08) }
.hp-arr { color:var(--gold3); opacity:.8 }
.hero-btns { display:flex; gap:.7rem; flex-wrap:wrap }
.btn-gold {
  display:inline-flex; align-items:center; gap:6px;
  padding:.82rem 1.8rem;
  background:var(--gold); color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  border:none; border-radius:6px; cursor:pointer;
  transition:all .25s; text-decoration:none; white-space:nowrap;
}
.btn-gold:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 6px 22px rgba(184,134,11,.4) }
.btn-gold:active { transform:translateY(0) }
.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  padding:.82rem 1.8rem;
  background:rgba(255,255,255,.1); color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid rgba(255,255,255,.32);
  border-radius:6px; cursor:pointer;
  transition:all .25s; text-decoration:none; white-space:nowrap;
  backdrop-filter:blur(4px);
}
.btn-ghost:hover { border-color:var(--gold3); color:var(--gold3); background:rgba(240,188,46,.08) }
.btn-ghost:active { transform:translateY(0) }
.hero-foot {
  position:relative; z-index:2;
  background:rgba(10,40,20,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-stats {
  max-width:1200px; margin:0 auto;
  padding:.9rem clamp(1rem,4vw,2rem);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.hs {
  padding:.7rem clamp(.5rem,1.5vw,1.2rem);
  border-right:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:.7rem;
}
.hs:last-child { border-right:none }
.hs-ico { font-size:1.3rem; flex-shrink:0 }
.hs-t {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gl2); margin-bottom:.15rem;
}
.hs-d { font-size:.7rem; color:rgba(255,255,255,.5); line-height:1.4 }

/* ════════════════════════════════════════
   WHY NOW
════════════════════════════════════════ */
.why-sec { background:var(--ink2) }
.wn-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(26,122,60,.1);
  border-radius:var(--radius); overflow:hidden; margin-top:2.8rem;
}
.wn-item { background:#fff; padding:1.8rem 1.6rem; transition:background .25s }
.wn-item:hover { background:var(--ink3) }
.wn-n {
  font-family:'Barlow Condensed',sans-serif; font-size:2.8rem;
  font-weight:800; color:rgba(26,122,60,.12); line-height:1; margin-bottom:.4rem;
}
.wn-t {
  font-family:'Barlow Condensed',sans-serif; font-size:.9rem;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--w); margin-bottom:.5rem; line-height:1.3;
}
.wn-d { font-size:.8rem; color:rgba(26,46,34,.55); line-height:1.65 }

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
.about-sec { background:var(--ink) }
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem); align-items:center; margin-top:2.8rem;
}
.about-quote {
  font-family:'Fraunces',serif; font-size:clamp(1rem,1.5vw,1.3rem);
  font-style:italic; color:var(--w); line-height:1.55;
  margin-bottom:1.3rem; padding-left:1.1rem;
  border-left:3px solid var(--gold);
}
.about-p { font-size:.88rem; color:rgba(26,46,34,.55); line-height:1.75; margin-bottom:2rem }
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem }
.ba-box { border-radius:6px; overflow:hidden }
.ba-head {
  padding:.55rem .9rem; font-family:'Barlow Condensed',sans-serif;
  font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.ba-box.bukan .ba-head { background:rgba(220,38,38,.1); color:#B91C1C }
.ba-box.adalah .ba-head { background:rgba(26,163,74,.12); color:var(--g) }
.ba-items { background:rgba(26,122,60,.05); padding:.6rem .9rem }
.ba-item {
  display:flex; align-items:flex-start; gap:.4rem;
  font-size:.78rem; color:rgba(26,46,34,.55);
  padding:.28rem 0; border-bottom:1px solid rgba(26,122,60,.07); line-height:1.5;
}
.ba-item:last-child { border-bottom:none }
.about-right { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.av {
  background:#fff; border:1px solid rgba(26,122,60,.12);
  border-radius:var(--radius); padding:1.3rem; text-align:center;
  transition:all .3s; cursor:default; box-shadow:var(--shadow-sm);
}
.av:hover {
  background:var(--ink3); border-color:var(--g);
  transform:translateY(-3px); box-shadow:var(--shadow-md);
}
.av-ico { font-size:1.8rem; margin-bottom:.6rem }
.av-t {
  font-family:'Barlow Condensed',sans-serif; font-size:.8rem;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--g); margin-bottom:.4rem;
}
.av-d { font-size:.72rem; color:rgba(26,46,34,.5); line-height:1.5 }

/* ════════════════════════════════════════
   RESOURCE
════════════════════════════════════════ */
.resource-sec { background:var(--ink2) }
.res-grid {
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:clamp(2rem,4vw,3.5rem); margin-top:2.8rem; align-items:start;
}
.res-company {
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:1.8rem; padding:1rem 1.2rem;
  background:#fff; border:1px solid rgba(26,122,60,.12);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.rc-logo-img {
  width:44px; height:44px; border-radius:6px;
  object-fit:contain; flex-shrink:0;
}
.rc-name {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  font-weight:800; letter-spacing:.05em; color:var(--w);
}
.rc-role {
  font-size:.64rem; color:var(--gold); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.rdl { display:flex; flex-direction:column }
.rdl-item {
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.72rem 0; border-bottom:1px solid rgba(26,122,60,.08);
}
.rdl-item:last-child { border-bottom:none }
.rdl-ico {
  width:28px; height:28px; border-radius:5px;
  background:rgba(26,122,60,.1); display:flex;
  align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0;
}
.rdl-lbl {
  font-family:'Barlow Condensed',sans-serif; font-size:.56rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(26,46,34,.38); margin-bottom:.18rem;
}
.rdl-val { font-size:.88rem; font-weight:600; color:var(--w) }
.snap {
  background:#fff; border:1px solid rgba(26,122,60,.12);
  border-radius:var(--radius); overflow:hidden; margin-bottom:.8rem; box-shadow:var(--shadow-sm);
}
.snap-head {
  padding:.7rem 1.1rem; font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.snap-head.green { background:rgba(26,122,60,.1); color:var(--g) }
.snap-head.gold  { background:rgba(184,134,11,.12); color:var(--gold) }
.snap-body { padding:1rem 1.1rem; overflow-x:auto }
.snap-table { width:100%; border-collapse:collapse; min-width:280px }
.snap-table th {
  padding:.45rem .6rem; text-align:left;
  font-family:'Barlow Condensed',sans-serif; font-size:.54rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,46,34,.35); border-bottom:1px solid rgba(26,122,60,.1);
}
.snap-table td { padding:.5rem .6rem; border-bottom:1px solid rgba(26,122,60,.06); font-size:.82rem; color:var(--w) }
.snap-table tr:last-child td { border-bottom:none }
.sv { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.92rem; color:var(--g); letter-spacing:.02em }
.sv.g { color:var(--gold) }
.snap-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:.72rem 1.1rem; border-top:1px solid rgba(26,122,60,.1);
}
.st-lbl {
  font-family:'Barlow Condensed',sans-serif; font-size:.6rem;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(26,46,34,.4);
}
.st-val { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:800; letter-spacing:.02em }
.quality { background:var(--ink3); border:1px solid rgba(26,122,60,.15); border-radius:var(--radius); overflow:hidden }
.quality-head {
  background:rgba(184,134,11,.12); padding:.7rem 1.1rem;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
}
.qh-t { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.qh-b { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:800; letter-spacing:.06em; padding:.2rem .55rem; background:var(--gold); color:#fff; border-radius:3px; flex-shrink:0 }
.quality-body { padding:1rem 1.1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem }
.qi { background:#fff; border-radius:5px; padding:.6rem .5rem; text-align:center; box-shadow:var(--shadow-sm) }
.qi-v { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:800; line-height:1; margin-bottom:.28rem; letter-spacing:.02em }
.qi-l { font-size:.58rem; color:rgba(26,46,34,.45); line-height:1.35 }

/* ════════════════════════════════════════
   STATUS STRIP
════════════════════════════════════════ */
.status-strip { background:var(--g); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1) }
.status-in {
  max-width:1200px; margin:0 auto;
  padding:1.8rem clamp(1rem,4vw,2rem);
  display:grid; grid-template-columns:auto 1fr 1fr; gap:2.5rem; align-items:start;
}
.stage-box { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:1.1rem 1.4rem }
.sb-lbl { font-family:'Barlow Condensed',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold3); margin-bottom:.35rem }
.sb-val { font-family:'Barlow Condensed',sans-serif; font-size:.95rem; font-weight:800; letter-spacing:.04em; color:#fff; line-height:1.25 }
.si-col-t { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.65rem; display:flex; align-items:center; gap:.45rem }
.si-col-t.done { color:#A7F3C0 }
.si-col-t.pend { color:#FDE68A }
.si-list { display:flex; flex-direction:column; gap:.38rem }
.si-item { display:flex; align-items:flex-start; gap:.45rem; font-size:.78rem; color:rgba(255,255,255,.82); line-height:1.4 }

/* ════════════════════════════════════════
   PATHWAY  ← BUG FIX: garis menabrak card
════════════════════════════════════════ */
.pathway-sec { background:var(--ink) }

.pw-chain {
  display:flex; align-items:stretch;
  margin-top:2.8rem;
  /* HAPUS position:relative agar ::before tidak muncul */
  gap:4px;
}

/* ── REMOVED: pw-chain::before yang bermasalah ──
   Garis connector sebelumnya menggunakan ::before dengan top:50%
   yang memotong tengah card. Sekarang diganti dengan approach
   yang tidak mengganggu card. ── */

.pw-step {
  flex:1; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  position:relative;
  /* Tidak ada z-index di sini agar tidak buat stacking context baru */
}

/* Connector arrow antar step — di luar card, tidak menabrak */
.pw-step:not(:last-child)::after {
  content:'';
  position:absolute;
  top:50%;
  right:-4px;
  width:4px; height:4px;
  border-top:1.5px solid var(--gold2);
  border-right:1.5px solid var(--gold2);
  transform:translateY(-50%) rotate(45deg);
  z-index:2;
  opacity:.6;
}

.pw-box {
  background:#fff;
  border:1px solid rgba(26,122,60,.15);
  border-radius:var(--radius);
  padding:1.3rem .75rem;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  flex:1; transition:all .3s; cursor:default;
  box-shadow:var(--shadow-sm);
  position:relative; z-index:1;
  /* Pastikan background solid agar tidak transparan */
  isolation:isolate;
}

.pw-step:nth-child(n+5) .pw-box {
  background:rgba(255,248,225,1);
  border-color:rgba(184,134,11,.3);
}
.pw-step:nth-child(7) .pw-box,
.pw-step:nth-child(8) .pw-box {
  background:rgba(230,250,238,1);
  border-color:rgba(26,122,60,.3);
}
.pw-box:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.pw-num { font-family:'Barlow Condensed',sans-serif; font-size:.54rem; font-weight:700; letter-spacing:.14em; color:rgba(26,46,34,.3); margin-bottom:.55rem }
.pw-ico { font-size:1.5rem; margin-bottom:.6rem; line-height:1 }
.pw-name { font-family:'Barlow Condensed',sans-serif; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--w); margin-bottom:.4rem; line-height:1.25 }
.pw-step:nth-child(n+5) .pw-name { color:var(--gold) }
.pw-step:nth-child(7) .pw-name,
.pw-step:nth-child(8) .pw-name { color:var(--g) }
.pw-desc { font-size:.63rem; color:rgba(26,46,34,.45); line-height:1.4 }

.pw-bar {
  display:flex; align-items:center; gap:.9rem;
  margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(26,122,60,.1);
}
.pb-l { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(26,46,34,.3); flex-shrink:0 }
.pb-line { flex:1; height:3px; background:linear-gradient(to right,var(--g),var(--gold3)); border-radius:2px }
.pb-h { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); flex-shrink:0 }
.pw-note {
  margin-top:1.8rem; padding:1.1rem 1.6rem;
  background:rgba(184,134,11,.07); border-radius:var(--radius);
  border-left:3px solid var(--gold);
  font-family:'Fraunces',serif; font-size:.9rem;
  font-style:italic; color:rgba(26,46,34,.6); line-height:1.6;
}

/* ════════════════════════════════════════
   CONSORTIUM
════════════════════════════════════════ */
.con-sec { background:var(--ink2) }
.con-core {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:rgba(26,122,60,.1);
  border-radius:var(--radius); overflow:hidden; margin-top:2.8rem; margin-bottom:2.5rem;
}
.cc { background:#fff; padding:1.4rem 1.1rem; transition:background .25s; display:flex; flex-direction:column }
.cc:hover { background:var(--ink3) }
.cc.feat { background:var(--ink3); border-top:2px solid var(--gold) }
.cc-ico { width:32px; height:32px; border-radius:5px; background:rgba(26,122,60,.1); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:.7rem; flex-shrink:0 }
.cc-name { font-family:'Barlow Condensed',sans-serif; font-size:.95rem; font-weight:800; letter-spacing:.05em; color:var(--w); margin-bottom:.2rem }
.cc-role { font-family:'Barlow Condensed',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem }
.cc-tasks { display:flex; flex-direction:column; gap:.3rem; margin-top:auto }
.cc-task { font-size:.7rem; color:rgba(26,46,34,.5); padding-left:.75rem; position:relative; line-height:1.45 }
.cc-task::before { content:'→'; position:absolute; left:0; color:var(--g); font-size:.58rem; top:1px }

.con-target-lbl {
  display:flex; align-items:center; gap:.6rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.6rem;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(26,46,34,.35); margin-bottom:.9rem;
}
.con-target-lbl::before { content:''; width:18px; height:1px; background:rgba(26,46,34,.3) }
.con-target { display:grid; grid-template-columns:repeat(6,1fr); gap:.9rem }
.ct {
  background:#fff; border:1px solid rgba(26,122,60,.1);
  border-radius:var(--radius); padding:.95rem .8rem; text-align:center;
  transition:all .25s; cursor:default; box-shadow:var(--shadow-sm);
}
.ct:hover { background:var(--ink3); transform:translateY(-2px); box-shadow:var(--shadow-md) }
.ct.strat { border-color:rgba(184,134,11,.3); background:rgba(255,248,225,1) }
.ct-ico { font-size:1.2rem; margin-bottom:.45rem }
.ct-name { font-family:'Barlow Condensed',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.05em; color:var(--w); margin-bottom:.22rem }
.ct.strat .ct-name { color:var(--gold) }
.ct-role { font-size:.64rem; color:rgba(26,46,34,.45); line-height:1.4 }

/* ════════════════════════════════════════
   PIM
════════════════════════════════════════ */
.pim-sec { background:var(--ink) }
.pim-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; margin-top:2.8rem }
.pim-flow { display:flex; flex-direction:column; margin-top:1.8rem }
.pf-item { display:flex; align-items:flex-start; gap:.9rem; padding:.88rem 0; border-bottom:1px solid rgba(26,122,60,.08) }
.pf-item:last-child { border-bottom:none }
.pf-ico { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0 }
.pf-name { font-family:'Barlow Condensed',sans-serif; font-size:.84rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--w); margin-bottom:.18rem }
.pf-desc { font-size:.72rem; color:rgba(26,46,34,.5); line-height:1.5 }
.pf-arr { padding:.18rem 0 .18rem 45px; font-family:'Barlow Condensed',sans-serif; font-size:.72rem; color:rgba(26,46,34,.25) }
.pim-right {
  background:#fff; border:1px solid rgba(26,122,60,.15);
  border-radius:10px; padding:1.8rem;
  position:relative; overflow:hidden; box-shadow:var(--shadow-md);
}
.pim-right::before {
  content:'PIM™'; position:absolute; right:-1rem; bottom:-1rem;
  font-family:'Barlow Condensed',sans-serif; font-size:6.5rem; font-weight:800;
  color:rgba(26,122,60,.04); pointer-events:none; line-height:1;
}
.pr-lbl { font-family:'Barlow Condensed',sans-serif; font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem }
.pr-title { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:.04em; color:var(--w); margin-bottom:.25rem }
.pr-tag { font-size:.78rem; color:rgba(26,46,34,.45); margin-bottom:1.8rem; font-style:italic; font-family:'Fraunces',serif }
.pr-pillars { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.8rem }
.prp { background:var(--ink2); border-radius:6px; padding:.85rem; text-align:center }
.prp-ico { font-size:1rem; margin-bottom:.38rem }
.prp-t { font-family:'Barlow Condensed',sans-serif; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--g); margin-bottom:.18rem }
.prp-d { font-size:.64rem; color:rgba(26,46,34,.45); line-height:1.4 }
.pr-quote { padding:1rem; background:rgba(184,134,11,.07); border-radius:6px; border-left:2.5px solid var(--gold) }
.prq-t { font-family:'Fraunces',serif; font-size:.82rem; font-style:italic; color:rgba(26,46,34,.6); line-height:1.6 }
.prq-b { display:inline-block; margin-top:.5rem; font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold) }

/* ════════════════════════════════════════
   RISK
════════════════════════════════════════ */
.risk-sec { background:var(--ink2) }
.risk-intro { text-align:center; max-width:550px; margin:0 auto 0; font-size:.9rem; color:rgba(26,46,34,.5); line-height:1.7; font-style:italic; font-family:'Fraunces',serif }
.risk-grid {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:rgba(26,122,60,.1);
  border-radius:var(--radius); overflow:hidden; margin-top:2.8rem;
}
.rk { background:#fff; padding:1.4rem 1.1rem; transition:background .25s }
.rk:hover { background:var(--ink3) }
.rk-ico { font-size:1.35rem; margin-bottom:.6rem }
.rk-t { font-family:'Barlow Condensed',sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--w); margin-bottom:.45rem; padding-bottom:.45rem; border-bottom:1px solid rgba(26,122,60,.1) }
.rk-ml { font-family:'Barlow Condensed',sans-serif; font-size:.54rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g); margin-bottom:.45rem }
.rk-items { display:flex; flex-direction:column; gap:.3rem }
.rk-item { font-size:.68rem; color:rgba(26,46,34,.5); padding-left:.65rem; position:relative; line-height:1.45 }
.rk-item::before { content:'·'; position:absolute; left:0; color:var(--g); font-weight:700; font-size:1rem; line-height:.9 }
.risk-bottom { margin-top:1.8rem; padding:1.1rem 1.6rem; background:rgba(184,134,11,.08); border-radius:var(--radius); border-left:3px solid var(--gold); display:flex; align-items:center; gap:.9rem }
.rb-ico { font-size:1.3rem; flex-shrink:0 }
.rb-t { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; font-weight:700; letter-spacing:.04em; color:var(--w) }
.rb-t em { color:var(--gold); font-style:normal }

/* ════════════════════════════════════════
   ESG
════════════════════════════════════════ */
.esg-sec { background:var(--ink) }
.esg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.8rem }
.esg-card { background:#fff; border:1px solid rgba(26,122,60,.12); border-radius:var(--radius); padding:1.6rem; transition:all .3s; cursor:default; box-shadow:var(--shadow-sm) }
.esg-card:hover { background:var(--ink3); border-color:var(--g); transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.esg-ico { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:.9rem }
.esg-t { font-family:'Barlow Condensed',sans-serif; font-size:.95rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--g); margin-bottom:.4rem }
.esg-sub { font-size:.72rem; color:rgba(26,46,34,.4); margin-bottom:.9rem; font-style:italic; font-family:'Fraunces',serif }
.esg-items { display:flex; flex-direction:column; gap:.38rem }
.esg-item { font-size:.78rem; color:rgba(26,46,34,.55); padding-left:.78rem; position:relative; line-height:1.5 }
.esg-item::before { content:'✓'; position:absolute; left:0; color:var(--g); font-size:.65rem; font-weight:700 }

/* ════════════════════════════════════════
   ROADMAP
════════════════════════════════════════ */
.road-sec { background:var(--ink2) }
.road-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:1px; background:rgba(26,122,60,.1); border-radius:var(--radius); overflow:hidden; margin-top:2.8rem }
.rp { background:#fff; padding:1.8rem 1.5rem }
.rp.active { background:var(--ink3); border-top:2px solid var(--gold) }
.rp-period { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(26,46,34,.35); margin-bottom:.35rem }
.rp-period.gold { color:var(--gold) }
.rp-title { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--w); margin-bottom:1.1rem; line-height:1.3 }
.rp-steps { display:flex; flex-direction:column; gap:.55rem }
.rps { background:rgba(26,122,60,.06); border-radius:5px; padding:.68rem .85rem }
.rps-n { font-family:'Barlow Condensed',sans-serif; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--g); margin-bottom:.3rem }
.rps-items { display:flex; flex-wrap:wrap; gap:.3rem }
.rps-i { font-size:.62rem; color:rgba(26,46,34,.45); background:rgba(26,122,60,.07); padding:.14rem .42rem; border-radius:3px }
.road-quote { margin-top:1.8rem; padding:1.3rem 1.8rem; background:rgba(184,134,11,.07); border-radius:var(--radius); text-align:center }
.rq-t { font-family:'Fraunces',serif; font-size:.92rem; font-style:italic; color:rgba(26,46,34,.6); line-height:1.7 }
.rq-t strong { color:var(--gold); font-style:normal }

/* ════════════════════════════════════════
   SEEKS
════════════════════════════════════════ */
.seeks-sec { background:var(--ink) }
.seeks-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-top:2.8rem }
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.sp { background:#fff; border:1px solid rgba(26,122,60,.12); border-radius:var(--radius); padding:1.1rem; transition:all .25s; cursor:default; box-shadow:var(--shadow-sm) }
.sp:hover { background:var(--ink3); border-color:var(--g); transform:translateY(-2px); box-shadow:var(--shadow-md) }
.sp-n { font-family:'Barlow Condensed',sans-serif; font-size:1.8rem; font-weight:800; color:rgba(26,122,60,.15); line-height:1; margin-bottom:.35rem }
.sp-t { font-family:'Barlow Condensed',sans-serif; font-size:.76rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--g); margin-bottom:.3rem }
.sp-d { font-size:.74rem; color:rgba(26,46,34,.45); line-height:1.55 }
.seeks-close { background:var(--ink2); border:1px solid rgba(26,122,60,.15); border-radius:10px; padding:2.2rem; margin-bottom:1.8rem }
.sc-quote { font-family:'Fraunces',serif; font-size:clamp(.9rem,1.2vw,1.05rem); font-style:italic; color:var(--w); line-height:1.65; margin-bottom:1.3rem; padding-left:1.1rem; border-left:3px solid var(--gold) }
.sc-bot { padding-top:1.1rem; border-top:1px solid rgba(26,122,60,.1) }
.sc-bot-t { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(26,46,34,.35); margin-bottom:.7rem }
.sc-pills { display:flex; flex-wrap:wrap; gap:.45rem }
.sc-pill { padding:.3rem .7rem; background:rgba(26,122,60,.08); border:1px solid rgba(26,122,60,.2); border-radius:4px; font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g) }
.seeks-contact { background:rgba(184,134,11,.07); border:1px solid rgba(184,134,11,.2); border-radius:var(--radius); padding:1.3rem }
.sct-t { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem }
.sct-items { display:flex; flex-direction:column; gap:.48rem }
.sct-item { display:flex; align-items:center; gap:.55rem; font-size:.78rem; color:rgba(26,46,34,.55) }
.sct-item a { color:var(--gold); text-decoration:none; transition:color .2s }
.sct-item a:hover { color:var(--gold2) }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer { background:var(--g); border-top:1px solid rgba(255,255,255,.1) }
.footer-top { max-width:1200px; margin:0 auto; padding:3rem clamp(1rem,4vw,2rem); display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(1.5rem,3vw,2.8rem) }
.ft-logo { display:flex; align-items:center; gap:10px; margin-bottom:.9rem }
.ft-logo-img { width:38px; height:38px; border-radius:6px; object-fit:contain; flex-shrink:0 }
.ft-logo-t { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:800; color:#fff; letter-spacing:.08em }
.ft-desc { font-size:.8rem; color:rgba(255,255,255,.65); line-height:1.7; max-width:300px; margin-bottom:1rem }
.ft-contacts { display:flex; flex-direction:column; gap:.4rem }
.ft-contact-item { font-size:.76rem; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.5rem }
.ft-contact-item a { color:var(--gold3); text-decoration:none; transition:color .2s }
.ft-contact-item a:hover { color:#fff }
.ft-col-t { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.9rem }
.ft-links { list-style:none; display:flex; flex-direction:column; gap:.48rem }
.ft-links a { font-size:.8rem; color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s; cursor:pointer }
.ft-links a:hover { color:var(--gold3) }
.footer-bot { border-top:1px solid rgba(255,255,255,.1); padding:1.1rem clamp(1rem,4vw,2rem); display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; flex-wrap:wrap; gap:.5rem }
.fb-copy { font-size:.72rem; color:rgba(255,255,255,.35) }
.fb-tag { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3) }
.fb-tag span { color:var(--gold3) }

/* ════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════ */
.login-wrap {
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; position:relative; overflow:hidden;
  background-image:url('../img/hero.jpg');
  background-size:cover; background-position:center;
}
.login-wrap::before { content:''; position:absolute; inset:0; background:rgba(10,40,20,.82) }
.login-box {
  position:relative; z-index:2;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  border:1px solid rgba(26,122,60,.15); border-radius:12px;
  padding:clamp(1.5rem,4vw,2.4rem) clamp(1.2rem,4vw,2rem);
  width:100%; max-width:400px; margin:1rem;
  box-shadow:0 24px 60px rgba(26,122,60,.25);
}
.lb-back { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:rgba(26,46,34,.4); cursor:pointer; background:none; border:none; padding:0; margin-bottom:1.5rem; transition:color .2s; font-family:'Plus Jakarta Sans',sans-serif }
.lb-back:hover { color:var(--g) }
.lb-logo { display:flex; align-items:center; gap:10px; margin-bottom:1.6rem }
.lb-logo-img { width:42px; height:42px; border-radius:6px; object-fit:contain; flex-shrink:0 }
.lb-logo-t .lt1 { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:800; color:var(--w); letter-spacing:.08em }
.lb-logo-t .lt2 { font-size:.5rem; color:var(--g); letter-spacing:.14em; text-transform:uppercase; font-weight:600; font-family:'Barlow Condensed',sans-serif }
.lb-title { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:.04em; color:var(--w); margin-bottom:.3rem }
.lb-sub { font-size:.82rem; color:rgba(26,46,34,.45); margin-bottom:1.6rem; line-height:1.6 }
.fg { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem }
.fg label { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(26,46,34,.5) }
.fg input { border:1.5px solid rgba(26,122,60,.2); border-radius:6px; padding:.68rem .9rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:.9rem; color:var(--w); outline:none; transition:border-color .2s,box-shadow .2s; background:#fff; width:100%; -webkit-appearance:none }
.fg input:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(26,122,60,.1) }
.btn-login-submit { width:100%; padding:.82rem; background:var(--g); color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; border:none; border-radius:6px; cursor:pointer; transition:all .25s; margin-top:.4rem }
.btn-login-submit:hover { background:var(--g2); box-shadow:var(--shadow-md) }
.btn-login-submit:active { transform:scale(.98) }
.login-err { display:none; color:#DC2626; font-size:.78rem; margin-top:-.1rem; margin-bottom:.4rem; padding:.48rem .7rem; background:rgba(220,38,38,.06); border-radius:5px; border:1px solid rgba(220,38,38,.15) }
.demo-hint { margin-top:1.4rem; padding:.9rem 1rem; background:rgba(26,122,60,.06); border-radius:6px; border-left:3px solid var(--g) }
.dh-title { font-family:'Barlow Condensed',sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--g); margin-bottom:.55rem }
.dh-row { display:flex; justify-content:space-between; align-items:center; font-size:.72rem; padding:.2rem 0; border-bottom:1px solid rgba(26,122,60,.07) }
.dh-row:last-child { border-bottom:none }
.dh-role { font-weight:600; color:rgba(26,46,34,.6) }
.dh-cred { color:rgba(26,46,34,.4); font-family:'Barlow Condensed',sans-serif; font-size:.68rem; letter-spacing:.04em }

/* ════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════ */
.db-sidebar { width:230px; flex-shrink:0; background:#fff; border-right:1px solid rgba(26,122,60,.1); display:flex; flex-direction:column; overflow-y:auto }
.dbs-top { padding:1rem 1.1rem; border-bottom:1px solid rgba(26,122,60,.1); display:flex; align-items:center; gap:8px; flex-shrink:0 }
.dbs-logo-img { width:34px; height:34px; border-radius:5px; object-fit:contain; flex-shrink:0 }
.dbs-t .dn1 { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; font-weight:800; color:var(--w); letter-spacing:.06em }
.dbs-t .dn2 { font-size:.45rem; color:var(--g); letter-spacing:.14em; text-transform:uppercase; font-weight:600; font-family:'Barlow Condensed',sans-serif }
.dbs-user { margin:.7rem .8rem; padding:.68rem .88rem; background:rgba(26,122,60,.06); border-radius:6px; border:1px solid rgba(26,122,60,.1) }
.dbu-role { font-family:'Barlow Condensed',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.18rem }
.dbu-name { font-size:.82rem; font-weight:600; color:var(--w); margin-bottom:.08rem }
.dbu-ent { font-size:.7rem; color:rgba(26,46,34,.45) }
.dbs-sec { font-family:'Barlow Condensed',sans-serif; font-size:.52rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(26,46,34,.28); padding:.75rem 1.1rem .25rem; flex-shrink:0 }
.dbs-menu { list-style:none; padding:0 .5rem; flex-shrink:0 }
.dbs-menu li { margin-bottom:1px }
.dbs-menu a { display:flex; align-items:center; gap:.65rem; padding:.58rem .72rem; border-radius:5px; font-size:.78rem; font-weight:500; color:rgba(26,46,34,.5); text-decoration:none; cursor:pointer; transition:all .2s }
.dbs-menu a:hover { background:rgba(26,122,60,.08); color:var(--w) }
.dbs-menu a.active { background:rgba(26,122,60,.12); color:var(--g); font-weight:600 }
.mi { font-size:.9rem; flex-shrink:0; width:16px; text-align:center }
.dbs-logout { margin:.5rem; padding:.62rem .72rem; border-radius:5px; background:none; border:1px solid rgba(26,122,60,.15); color:rgba(26,46,34,.4); cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:500; display:flex; align-items:center; gap:.55rem; transition:all .2s; margin-top:auto }
.dbs-logout:hover { background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.2); color:#DC2626 }
.db-main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--db-bg) }
.db-topbar { height:52px; background:#fff; border-bottom:1px solid rgba(26,122,60,.1); display:flex; align-items:center; padding:0 1.4rem; gap:.9rem; flex-shrink:0 }
.tb-title { font-weight:700; font-size:.9rem; color:var(--db-text); flex:1 }
.tb-notif { width:32px; height:32px; border-radius:6px; background:rgba(26,122,60,.06); border:1px solid rgba(26,122,60,.1); display:flex; align-items:center; justify-content:center; font-size:.9rem; cursor:pointer; position:relative }
.tb-badge { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid #fff }
.tb-date { font-size:.72rem; color:var(--db-muted); font-weight:500 }
.db-content { flex:1; overflow-y:auto; padding:1.4rem; -webkit-overflow-scrolling:touch }
.db-panel { display:none }
.db-panel.active { display:block }
.mc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.3rem }
.mc { background:var(--db-card); border:1px solid var(--db-border); border-radius:var(--radius); padding:1rem 1.1rem; transition:box-shadow .2s; cursor:default; box-shadow:var(--shadow-sm) }
.mc:hover { box-shadow:var(--shadow-md) }
.mc-lbl { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--db-muted); margin-bottom:.45rem; display:flex; align-items:center; gap:.35rem }
.mc-val { font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:.25rem; color:var(--db-text); letter-spacing:.02em }
.mc-val.gold { color:var(--gold) }
.mc-val.green { color:var(--success) }
.mc-val.warn { color:var(--warn) }
.mc-sub { font-size:.68rem; color:var(--db-muted) }
.db-card { background:var(--db-card); border:1px solid var(--db-border); border-radius:var(--radius); margin-bottom:.9rem; overflow:hidden; box-shadow:var(--shadow-sm) }
.db-card-head { padding:.88rem 1.1rem; border-bottom:1px solid var(--db-border); display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.db-card-title { font-weight:700; font-size:.85rem; color:var(--db-text); display:flex; align-items:center; gap:.45rem }
.db-card-body { padding:1.1rem }
.g2-db { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.sg-track { display:flex; align-items:center; padding:.9rem 1.1rem; overflow-x:auto; -webkit-overflow-scrolling:touch }
.sg-step { display:flex; flex-direction:column; align-items:center; flex:1; min-width:70px; position:relative }
.sg-step::before { content:''; position:absolute; top:12px; left:50%; right:-50%; height:1.5px; background:rgba(26,122,60,.12); z-index:0 }
.sg-step:last-child::before { display:none }
.sg-dot { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:.65rem; font-weight:800; position:relative; z-index:1; margin-bottom:.4rem; border:1.5px solid rgba(26,122,60,.2); background:#fff; color:var(--db-muted) }
.sg-dot.done { background:var(--success); border-color:var(--success); color:#fff }
.sg-dot.active { background:var(--gold); border-color:var(--gold); color:#fff }
.sg-name { font-size:.6rem; font-weight:600; color:var(--db-muted); text-align:center; line-height:1.25 }
.sg-name.done { color:var(--success) }
.sg-name.active { color:var(--gold); font-weight:700 }
.permit-list { display:flex; flex-direction:column }
.permit-item { display:flex; align-items:center; gap:.9rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--db-border); transition:background .2s }
.permit-item:last-child { border-bottom:none }
.permit-item:hover { background:rgba(26,122,60,.03) }
.pi-name { flex:1; font-size:.82rem; font-weight:600; color:var(--db-text) }
.pi-sub { font-size:.7rem; color:var(--db-muted); margin-top:.06rem }
.pi-pct { width:130px; flex-shrink:0 }
.pi-bar-wrap { height:4px; background:rgba(26,122,60,.1); border-radius:2px; overflow:hidden; margin-bottom:.22rem }
.pi-bar { height:100%; border-radius:2px; transition:width .8s ease }
.pi-bar.done { background:var(--success) }
.pi-bar.run { background:var(--gold) }
.pi-pct-txt { font-family:'Barlow Condensed',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.04em; color:var(--db-muted) }
.status-pill { padding:.18rem .6rem; border-radius:20px; font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; flex-shrink:0 }
.pill-done { background:rgba(22,163,74,.1); color:var(--success) }
.pill-run { background:rgba(217,119,6,.1); color:var(--warn) }
.pill-todo { background:rgba(90,128,104,.1); color:var(--db-muted) }
.data-table { width:100%; border-collapse:collapse }
.data-table th { padding:.55rem .85rem; text-align:left; font-family:'Barlow Condensed',sans-serif; font-size:.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--db-muted); border-bottom:1.5px solid var(--db-border) }
.data-table td { padding:.65rem .85rem; border-bottom:1px solid var(--db-border); font-size:.8rem; color:var(--db-text) }
.data-table tr:last-child td { border-bottom:none }
.data-table tr:hover td { background:rgba(26,122,60,.03) }
.td-val { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.88rem; color:var(--g); letter-spacing:.02em }
.td-good { color:var(--success); font-weight:600 }
.act-feed { display:flex; flex-direction:column }
.act-item { display:flex; gap:.85rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--db-border); align-items:flex-start; transition:background .2s }
.act-item:last-child { border-bottom:none }
.act-item:hover { background:rgba(26,122,60,.03) }
.act-ico { width:28px; height:28px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0 }
.ai-g { background:rgba(22,163,74,.1) }
.ai-gold { background:rgba(217,119,6,.1) }
.ai-b { background:rgba(37,99,235,.1) }
.ai-r { background:rgba(220,38,38,.1) }
.act-text { font-size:.8rem; color:var(--db-text); line-height:1.5; flex:1 }
.act-text strong { font-weight:600 }
.act-time { font-size:.66rem; color:var(--db-muted); flex-shrink:0; margin-top:1px }
.cc-db-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; padding:1.1rem }
.comp-card { background:var(--db-bg); border:1px solid var(--db-border); border-radius:6px; padding:1.1rem; transition:all .3s; cursor:default }
.comp-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px) }
.comp-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.8rem }
.cch-name { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:800; letter-spacing:.04em; color:var(--db-text) }
.cch-sub { font-size:.68rem; color:var(--db-muted); margin-top:.12rem }
.cch-badge { padding:.18rem .55rem; border-radius:3px; font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.06em; background:rgba(22,163,74,.1); color:var(--success) }
.cch-tasks { display:flex; flex-direction:column; gap:.35rem; padding-top:.7rem; border-top:1px solid var(--db-border) }
.cct { display:flex; justify-content:space-between; font-size:.72rem }
.cct-l { color:var(--db-muted) }
.cct-v { font-weight:600; color:var(--db-text) }
.alert { padding:.8rem 1rem; border-radius:6px; font-size:.82rem; line-height:1.55; margin-bottom:.8rem; display:flex; align-items:flex-start; gap:.55rem }
.alert-info { background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.15); color:#1D4ED8 }
.alert-success { background:rgba(22,163,74,.07); border:1px solid rgba(22,163,74,.15); color:#15803D }
.alert-warn { background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.18); color:#B45309 }
.alert-ico { flex-shrink:0; font-size:1rem }
.rpt-form { display:flex; flex-direction:column; gap:.88rem }
.rpt-form label { font-family:'Barlow Condensed',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--db-muted); display:block; margin-bottom:.3rem }
.rpt-form input, .rpt-form select, .rpt-form textarea { width:100%; border:1.5px solid var(--db-border); border-radius:6px; padding:.64rem .85rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem; color:var(--db-text); outline:none; background:#fff; transition:border-color .2s,box-shadow .2s; -webkit-appearance:none }
.rpt-form input:focus, .rpt-form select:focus, .rpt-form textarea:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(26,122,60,.1) }
.rpt-form textarea { resize:vertical; min-height:85px }
.rpt-2col { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.btn-sub { padding:.7rem 1.4rem; background:var(--g2); color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; border:none; border-radius:6px; cursor:pointer; transition:all .25s }
.btn-sub:hover { background:var(--g); box-shadow:var(--shadow-md) }
.btn-cancel { padding:.7rem 1.4rem; background:transparent; color:var(--db-muted); font-family:'Barlow Condensed',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1.5px solid var(--db-border); border-radius:6px; cursor:pointer; transition:all .25s }
.btn-cancel:hover { border-color:var(--db-text); color:var(--db-text) }
.chip { display:inline-flex; align-items:center; padding:.15rem .52rem; border-radius:4px; font-family:'Barlow Condensed',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.04em }
.chip-pim { background:rgba(184,134,11,.12); color:var(--gold) }
.chip-bem { background:rgba(22,163,74,.1); color:var(--success) }
.chip-arnoc { background:rgba(37,99,235,.1); color:#1D4ED8 }
.chip-kagara { background:rgba(124,58,237,.1); color:#6D28D9 }
.chip-ban { background:rgba(234,88,12,.1); color:#C2410C }
.db-mob-toggle { display:none; position:fixed; bottom:1.2rem; right:1.2rem; z-index:400; width:46px; height:46px; background:var(--g2); border:none; border-radius:50%; font-size:1.1rem; cursor:pointer; box-shadow:0 4px 16px rgba(26,122,60,.3); color:#fff; align-items:center; justify-content:center }
.map-ph { background:rgba(26,122,60,.04); border:1.5px dashed rgba(26,122,60,.2); border-radius:var(--radius); height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; color:var(--db-muted) }
.map-ph .mp-ico { font-size:2.3rem; opacity:.35 }
.map-ph p { font-size:.8rem; font-weight:500 }
.inbox-filter { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; padding:1.1rem; border-bottom:1px solid var(--db-border) }
.inbox-filter select { border:1.5px solid var(--db-border); border-radius:5px; padding:.4rem .68rem; font-size:.8rem; color:var(--db-text); outline:none; background:#fff }

/* ════════════════════════════════════════
   RESPONSIVE — All Devices
════════════════════════════════════════ */

/* Large tablet */
@media(max-width:1200px) {
  .mc-grid { grid-template-columns:1fr 1fr }
  .con-target { grid-template-columns:repeat(3,1fr) }
  .pw-chain { gap:2px }
}

/* Tablet landscape */
@media(max-width:1024px) {
  .nav-links a { font-size:.6rem; padding:.3rem .45rem }
  .con-core { grid-template-columns:repeat(3,1fr) }
  .risk-grid { grid-template-columns:repeat(3,1fr) }
  .road-grid { grid-template-columns:1fr 1fr }
}

/* Tablet portrait */
@media(max-width:900px) {
  .sec-pad { padding:4rem 0 }
  .about-grid, .res-grid, .pim-grid, .seeks-grid { grid-template-columns:1fr; gap:2.5rem }
  .footer-top { grid-template-columns:1fr 1fr }
  .hero-stats { grid-template-columns:1fr }
  .hs { border-right:none; border-bottom:1px solid rgba(255,255,255,.1) }
  .hs:last-child { border-bottom:none }
  .esg-grid { grid-template-columns:1fr 1fr }
  .status-in { grid-template-columns:1fr; gap:1.5rem }
  .stage-box { display:inline-flex; gap:1rem; align-items:center }
  .sb-val { line-height:1 }
  .wn-grid { grid-template-columns:1fr 1fr }
  .road-grid { grid-template-columns:1fr }
}

/* Mobile landscape / small tablet */
@media(max-width:768px) {
  .nav-links { display:none }
  .lang-btn { display:none }
  .btn-login { display:none }
  .ham { display:flex }
  .wn-grid { grid-template-columns:1fr 1fr }
  .con-core { grid-template-columns:1fr 1fr }
  .con-target { grid-template-columns:repeat(2,1fr) }
  .risk-grid { grid-template-columns:1fr 1fr }
  .ba-grid { grid-template-columns:1fr }
  .about-right { grid-template-columns:1fr 1fr }
  .sp-grid { grid-template-columns:1fr 1fr }
  .quality-body { grid-template-columns:1fr 1fr }
  .pw-chain {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .pw-step::after { display:none }
  .pw-box { padding:1rem .6rem }
  .db-sidebar { position:fixed; left:-240px; top:0; bottom:0; z-index:400; transition:left .3s; box-shadow:none }
  .db-sidebar.open { left:0; box-shadow:4px 0 24px rgba(26,122,60,.15) }
  .db-mob-toggle { display:flex }
  .rpt-2col { grid-template-columns:1fr }
  .g2-db { grid-template-columns:1fr }
  .mc-grid { grid-template-columns:1fr 1fr }
  .footer-top { grid-template-columns:1fr }
  .cc-db-grid { grid-template-columns:1fr }
}

/* Mobile portrait */
@media(max-width:480px) {
  .sec-pad { padding:3rem 0 }
  .hero-title { font-size:clamp(3.5rem,18vw,6rem) }
  .hero-pills .hp { font-size:.56rem; padding:.38rem .7rem }
  .hero-btns { flex-direction:column; align-items:flex-start }
  .btn-gold, .btn-ghost { width:100%; justify-content:center }
  .wn-grid { grid-template-columns:1fr }
  .pw-chain { grid-template-columns:1fr 1fr }
  .pw-step::after { display:none }
  .con-core { grid-template-columns:1fr }
  .con-target { grid-template-columns:1fr 1fr }
  .risk-grid { grid-template-columns:1fr }
  .esg-grid { grid-template-columns:1fr }
  .sp-grid { grid-template-columns:1fr }
  .mc-grid { grid-template-columns:1fr }
  .about-right { grid-template-columns:1fr 1fr }
  .ba-grid { grid-template-columns:1fr }
  .quality-body { grid-template-columns:repeat(2,1fr) }
  .road-grid { grid-template-columns:1fr }
  .footer-bot { flex-direction:column; text-align:center; gap:.35rem }
  .hero-stats { padding:.7rem 1rem }
  .login-box { padding:1.5rem 1.2rem }
  .rpt-2col { grid-template-columns:1fr }
}

/* iPhone SE / very small */
@media(max-width:375px) {
  .nav-brand-text .nt2 { display:none }
  .pw-chain { grid-template-columns:1fr 1fr }
  .hero-title { font-size:clamp(3rem,20vw,5rem) }
}

/* iOS Safari safe area */
@supports(padding:max(0px)) {
  .nav-in { padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)) }
  .mob-menu { padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)) }
  .hero-body { padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)) }
  .db-mob-toggle { bottom:max(1.2rem,env(safe-area-inset-bottom)); right:max(1.2rem,env(safe-area-inset-right)) }
}

/* Touch device optimizations */
@media(hover:none) and (pointer:coarse) {
  .av:hover, .sp:hover, .wn-item:hover,
  .ct:hover, .esg-card:hover, .pw-box:hover { transform:none }
  .btn-gold:hover, .btn-ghost:hover, .btn-login:hover { transform:none }
}