:root{
  --bg:#FAFFEF;
  --bg-panel:#EEFFD1;
  --card:#FFFFFF;
  --ink:#0F2415;
  --ink-dim:#4B5C4E;
  --line:rgba(15,36,21,0.13);
  --neon:#B6FF1A;        /* hijau neon utama */
  --neon-deep:#8FDE00;    /* hover / kontras tombol */
  --stage1:#4FAE58;       /* tunas — fase kerja */
  --stage1-soft:#E4F7E2;
  --stage2:#8FDE00;       /* puncak energi — fase bisnis, rentan */
  --stage2-soft:#EEFCC9;
  --stage3:#B8860B;       /* emas — fase investasi, hasil panen */
  --stage3-soft:#FBF1D6;
  --radius:3px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
section{position:relative;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,255,239,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1160px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-group{ display:flex; flex-direction:column; gap:2px; }
.logo{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; gap:10px;
  color:var(--ink);
}
.logo-mark{width:26px; height:26px; flex-shrink:0;}
.nav-tagline{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--ink-dim);
  padding-left:36px; letter-spacing:0.01em;
}
.nav-links{display:flex; gap:24px; align-items:center;}
.nav-links a{font-size:0.88rem; color:var(--ink-dim); font-weight:500; transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.btn{
  font-family:'Inter', sans-serif;
  font-size:0.85rem; font-weight:700;
  padding:11px 22px;
  border-radius:var(--radius);
  display:inline-block;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--neon); color:#0F2415;}
.btn-primary:hover{background:var(--neon-deep); transform:translateY(-1px); box-shadow:0 10px 26px rgba(143,222,0,0.35);}
.btn-ghost{border:1.5px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--bg);}
@media (max-width:820px){ .nav-links{display:none;} }
@media (max-width:520px){ .nav-tagline{display:none;} }

/* ---------- HERO ---------- */
.hero{ padding:160px 0 90px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-180px; right:-160px; width:520px; height:520px;
  background:var(--neon); border-radius:50%; filter:blur(90px); opacity:0.35; z-index:0;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; position:relative; z-index:1; }
.hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.5rem); line-height:1.08; color:var(--ink); }
.hero h1 .hl{
  background:var(--neon); padding:0 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero p.lede{ margin-top:24px; font-size:1.08rem; color:var(--ink-dim); max-width:46ch; }
.hero-cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}

.path-visual{width:100%; height:auto;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero{padding-top:128px;}
}

/* ---------- PAGE HERO (sub-pages: work/business/investment) ---------- */
.page-hero{ padding:150px 0 64px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero::before{
  content:''; position:absolute; top:-160px; right:-140px; width:440px; height:440px;
  border-radius:50%; filter:blur(90px); opacity:0.35; z-index:0;
}
.page-hero .wrap{position:relative; z-index:1;}
.breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-dim); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.breadcrumb a{color:var(--ink-dim); transition:color .2s;}
.breadcrumb a:hover{color:var(--ink);}
.page-hero h1{ font-size:clamp(2rem, 4vw, 3rem); max-width:20ch; margin-top:14px; }
.page-hero .lede{ margin-top:20px; font-size:1.06rem; color:var(--ink-dim); max-width:58ch; }
.page-hero[data-s="1"]::before{background:var(--stage1);}
.page-hero[data-s="2"]::before{background:var(--neon-deep);}
.page-hero[data-s="3"]::before{background:var(--stage3);}

/* ---------- PHILOSOPHY STRIP ---------- */
.philosophy{
  padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-panel);
}
.philosophy .wrap{display:grid; grid-template-columns:220px 1fr; gap:48px;}
.philosophy blockquote{
  font-family:'Space Grotesk', sans-serif; font-weight:500;
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  color:var(--ink); line-height:1.42;
}
@media (max-width:760px){ .philosophy .wrap{grid-template-columns:1fr; gap:16px;} }

/* ---------- JOURNEY INTRO ---------- */
.journey-intro{padding:110px 0 52px; text-align:center;}
.journey-intro h2{font-size:clamp(1.9rem,3.4vw,2.5rem); max-width:26ch; margin:14px auto 0;}
.journey-intro .eyebrow{display:block; margin-bottom:8px;}

/* ---------- STAGE BLOCKS ---------- */
.stage{ padding:52px 0; border-top:1px solid var(--line); }
.stage-inner{ display:grid; grid-template-columns:64px 1fr; gap:36px; }
.stage-rail{position:relative; display:flex; flex-direction:column; align-items:center;}
.stage-dot{ width:15px; height:15px; border-radius:50%; margin-top:6px; border:2px solid var(--bg); box-shadow:0 0 0 2px var(--line); }
.stage-rail::after{ content:''; flex:1; width:1px; background:var(--line); margin-top:14px; }
.stage:last-of-type .stage-rail::after{display:none;}

.stage-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:8px;}
.stage-age{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  padding:4px 10px; border-radius:var(--radius); border:1px solid var(--line);
  color:var(--ink-dim); background:var(--card);
}
.stage h3{font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2px;}
.stage-desc{color:var(--ink-dim); max-width:62ch; margin-top:12px; font-size:1rem;}

.stage-flag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius);
  margin-top:14px; font-weight:600;
}

.stage-details{ display:block; margin-top:26px; max-width:640px; }
.stage-list{list-style:none; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 18px;}
.stage-list li{ padding:11px 0 11px 22px; border-top:1px solid var(--line); position:relative; font-size:0.94rem; color:var(--ink); }
.stage-list li:first-child{border-top:none;}
.stage-list li::before{ content:'+'; position:absolute; left:0; font-weight:700; }
.stage-list li strong{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.98rem; margin-bottom:3px; }
.stage-list li span{ color:var(--ink-dim); font-size:0.88rem; }

.stage-more{ margin-top:18px; font-size:0.88rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.stage-more:hover{text-decoration:underline;}

@media (max-width:760px){
  .stage-inner{grid-template-columns:32px 1fr; gap:18px;}
}

.stage[data-s="1"] .stage-dot{background:var(--stage1);}
.stage[data-s="1"] .stage-age{color:var(--stage1);}
.stage[data-s="1"] .stage-flag{background:var(--stage1-soft); color:var(--stage1);}
.stage[data-s="1"] strong{color:var(--stage1);}
.stage[data-s="1"] .stage-more{color:var(--stage1);}

.stage[data-s="2"]{background:var(--stage2-soft);}
.stage[data-s="2"] .stage-dot{background:var(--stage2); box-shadow:0 0 0 6px rgba(143,222,0,0.28);}
.stage[data-s="2"] .stage-age{color:#5C8300;}
.stage[data-s="2"] .stage-flag{background:var(--neon); color:#0F2415;}
.stage[data-s="2"] strong{color:#5C8300;}
.stage[data-s="2"] .stage-more{color:#5C8300;}

.stage[data-s="3"] .stage-dot{background:var(--stage3);}
.stage[data-s="3"] .stage-age{color:var(--stage3);}
.stage[data-s="3"] .stage-flag{background:var(--stage3-soft); color:var(--stage3);}
.stage[data-s="3"] strong{color:var(--stage3);}
.stage[data-s="3"] .stage-more{color:var(--stage3);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- PROGRAM GRID ---------- */
.programs{padding:110px 0; border-top:1px solid var(--line);}
.programs-head{max-width:56ch; margin-bottom:44px;}
.programs-head h2{font-size:clamp(1.9rem,3.2vw,2.3rem); margin-top:10px;}
.program-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.program-col{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:30px 26px;}
.program-col h4{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.1rem; margin-bottom:16px;}
.program-col ul{list-style:none;}
.program-col li{font-size:0.9rem; color:var(--ink-dim); padding:9px 0; border-top:1px solid var(--line);}
.program-col li:first-child{border-top:none;}
.program-col[data-s="1"]{border-top:3px solid var(--stage1);}
.program-col[data-s="1"] h4{color:var(--stage1);}
.program-col[data-s="2"]{border-top:3px solid var(--neon-deep);}
.program-col[data-s="2"] h4{color:#5C8300;}
.program-col[data-s="3"]{border-top:3px solid var(--stage3);}
.program-col[data-s="3"] h4{color:var(--stage3);}
@media (max-width:820px){ .program-cols{grid-template-columns:1fr;} }

/* ---------- DETAIL SECTIONS (sub-pages) ---------- */
.detail-section{padding:80px 0; border-top:1px solid var(--line);}
.detail-head{max-width:60ch; margin-bottom:40px;}
.detail-head h2{font-size:clamp(1.7rem,3vw,2.2rem); margin-top:10px;}
.detail-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.detail-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:28px 24px;}
.detail-card h4{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:10px;}
.detail-card p{font-size:0.9rem; color:var(--ink-dim);}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr;} }

.steps{counter-reset:step; display:flex; flex-direction:column; gap:0;}
.step{display:grid; grid-template-columns:52px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--line);}
.step:first-child{border-top:none;}
.step-num{counter-increment:step; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem;}
.step-num::before{content:counter(step, decimal-leading-zero);}
.step h4{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:6px;}
.step p{font-size:0.92rem; color:var(--ink-dim); max-width:60ch;}

.detail-section[data-s="1"] .step-num{color:var(--stage1);}
.detail-section[data-s="2"] .step-num{color:#5C8300;}
.detail-section[data-s="3"] .step-num{color:var(--stage3);}

.other-stages{padding:70px 0; border-top:1px solid var(--line); background:var(--bg-panel);}
.other-stages-head{margin-bottom:28px;}
.other-stages-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.other-stage-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px; display:flex; flex-direction:column; gap:8px; transition:transform .15s ease, box-shadow .2s ease;}
.other-stage-card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,36,21,0.08);}
.other-stage-card .eyebrow{margin-bottom:2px;}
.other-stage-card h4{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem;}
.other-stage-card p{font-size:0.88rem; color:var(--ink-dim);}
@media (max-width:700px){ .other-stages-grid{grid-template-columns:1fr;} }

/* ---------- STATS ---------- */
.stats{padding:60px 0; border-top:1px solid var(--line); background:var(--ink);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.9rem,3.4vw,2.5rem); color:var(--neon);}
.stat-label{font-size:0.82rem; color:#BFC9C1; margin-top:6px;}
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;} }

/* ---------- CTA ---------- */
.cta-final{padding:120px 0; text-align:center; position:relative; overflow:hidden;}
.cta-final::before{
  content:''; position:absolute; bottom:-200px; left:50%; transform:translateX(-50%); width:640px; height:640px;
  background:var(--neon); border-radius:50%; filter:blur(120px); opacity:0.3;
}
.cta-final .wrap{position:relative; z-index:1;}
.cta-final h2{font-size:clamp(2rem,4vw,2.9rem); max-width:20ch; margin:0 auto;}
.cta-final p{color:var(--ink-dim); margin:18px auto 34px; max-width:48ch;}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:44px 0 32px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:flex-start;}
.foot-note{font-size:0.82rem; color:var(--ink-dim); max-width:36ch;}
.foot-links{display:flex; gap:26px; flex-wrap:wrap;}
.foot-links a{font-size:0.85rem; color:var(--ink-dim); font-weight:500; transition:color .2s;}
.foot-links a:hover{color:var(--ink);}
.foot-bottom{margin-top:32px; padding-top:18px; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

::selection{background:var(--neon); color:#0F2415;}