/* ============ Tokens ============ */
:root{
  --green:#2BAE3F;
  --green-deep:#168027;
  --green-ink:#0F3C18;
  --orange:#F39200;
  --orange-deep:#D87B00;
  --cream:#FFF6E3;
  --cream-2:#FFEFCB;
  --paper:#FFFBF0;
  --ink:#16321B;
  --muted:#5C7763;
  --line: rgba(15,60,24,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.font-display{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:.95}

/* ============ Layout ============ */
.shell{max-width:1320px;margin:0 auto;padding:0 28px}

/* ============ Nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.nav.scrolled{background:rgba(255,251,240,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px}
.nav-logo-btn{display:flex;align-items:center;gap:10px;padding:0;background:none;border:none;cursor:pointer}
.nav-logo-btn img,.logo img{height:36px;width:auto;display:block}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink);position:relative;padding:6px 2px}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{background:var(--green-ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:transform .25s,background .25s}
.nav-cta:hover{transform:translateY(-2px);background:var(--green-deep)}
.nav-cta .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,146,0,.55)}70%{box-shadow:0 0 0 10px rgba(243,146,0,0)}100%{box-shadow:0 0 0 0 rgba(243,146,0,0)}}
@media(max-width:760px){.nav-links{display:none}}

/* ============ Hero ============ */
.hero{position:relative;padding:140px 0 80px;overflow:hidden;background:
  radial-gradient(900px 500px at 85% 10%,rgba(243,146,0,.18),transparent 60%),
  radial-gradient(700px 400px at 5% 80%,rgba(43,174,63,.15),transparent 60%),
  var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:640px}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;min-height:auto}}

.tagline{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 14px 8px 8px;border-radius:999px;font-size:13px;font-weight:600;color:var(--green-ink)}
.tagline-tag{background:var(--green);color:#fff;padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.04em}

.hero h1{margin:22px 0 18px;font-size:clamp(48px,7vw,96px)}
.hero h1 .word{display:inline-block;vertical-align:bottom}
.hero h1 .word span{display:inline-block;opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .word:nth-child(1) span{animation-delay:.05s}
.hero h1 .word:nth-child(2) span{animation-delay:.15s}
.hero h1 .word:nth-child(3) span{animation-delay:.25s}
.hero h1 .word:nth-child(4) span{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero h1 .accent{color:var(--orange);position:relative;display:inline-block}
.hero h1 .accent svg{position:absolute;left:-4%;right:-4%;bottom:-12px;width:108%;height:auto}

.hero p.lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:520px;margin:0 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s,box-shadow .25s,background .25s;cursor:pointer}
.btn-primary{background:var(--green-ink);color:var(--cream)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(15,60,24,.45);background:var(--green-deep)}
.btn-primary .arrow{display:inline-block;transition:transform .25s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);padding:16px 18px}
.btn-ghost .play{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s}
.btn-ghost:hover .play{transform:scale(1.1)}
.btn-ghost-dark{background:var(--cream-2);color:var(--ink);padding:16px 26px;border-radius:999px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:10px;transition:transform .2s,background .25s}
.btn-ghost-dark:hover{transform:translateY(-2px);background:var(--cream)}

.hero-stats{display:flex;gap:36px;margin-top:42px;padding-top:30px;border-top:1px dashed var(--line)}
.stat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:700;color:var(--green-ink);line-height:1}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:4px}

/* ----- Hero Photo ----- */
.hero-photo-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 48px;min-height:560px}
.hero-photo-frame{position:relative;width:300px;height:440px;border-radius:32px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(15,60,24,.4);background:linear-gradient(160deg,#A8C96A 0%,#5FA34A 40%,#3D8C38 100%);z-index:2;flex-shrink:0}
.hero-photo-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

.benefit-badge{position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-radius:999px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(15,60,24,.12);z-index:3;white-space:nowrap;border:1px solid var(--line)}
.benefit-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.benefit-badge.b1{top:6%;left:-10px;animation:floatBadge 6s ease-in-out infinite 0s}
.benefit-badge.b2{top:16%;right:-10px;animation:floatBadge 6s ease-in-out infinite 1s}
.benefit-badge.b3{top:42%;left:-20px;animation:floatBadge 6s ease-in-out infinite 2s}
.benefit-badge.b4{top:52%;right:-16px;animation:floatBadge 6s ease-in-out infinite 1.5s}
.benefit-badge.b5{bottom:16%;left:4px;animation:floatBadge 6s ease-in-out infinite 0.5s}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:980px){.benefit-badge{display:none}.hero-photo-wrap{padding:20px 0;min-height:auto}.hero-photo-frame{width:260px;height:360px}}

/* ============ Marquee ============ */
.marquee{padding:24px 0;background:var(--green-ink);color:var(--cream);overflow:hidden}
.marquee-track{display:flex;gap:60px;animation:scroll-x 40s linear infinite;white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:18px;font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:600}
.marquee-item .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);display:inline-block}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ============ Section common ============ */
section{position:relative}
.section{padding:120px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--orange)}
.section-title{font-size:clamp(36px,5vw,64px);margin:14px 0 20px;max-width:760px}
.section-sub{color:var(--muted);font-size:18px;max-width:560px;line-height:1.55}

/* ============ Products ============ */
.products{background:var(--paper)}
.products-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:50px;flex-wrap:wrap}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1080px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.product-grid{grid-template-columns:1fr}}
.product{position:relative;background:var(--cream);border-radius:28px;padding:24px;overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;border:1px solid transparent}
.product:hover{transform:translateY(-8px);box-shadow:0 30px 60px -25px rgba(15,60,24,.3);border-color:rgba(15,60,24,.08)}
.product .visual{height:200px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:16px;border-radius:18px;overflow:hidden;background:#f5f5f0}
.product-img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.2,.8,.2,1);display:block}
.product:hover .product-img{transform:scale(1.07)}
.product .badge{position:absolute;top:18px;right:18px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;z-index:2}
.product h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;margin:0 0 4px;font-weight:700}
.product .desc{color:var(--muted);font-size:14px;margin-bottom:16px;line-height:1.5}
.product .row{display:flex;align-items:center;justify-content:space-between}
.product .price{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:var(--green-ink)}
.product .add{width:40px;height:40px;border-radius:50%;background:var(--green-ink);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;font-size:20px}
.product:hover .add{background:var(--orange);transform:rotate(90deg)}
.product .nutri{display:flex;gap:10px;font-size:11px;color:var(--green-deep);margin-bottom:14px;flex-wrap:wrap}
.product .nutri span{background:rgba(43,174,63,.1);padding:4px 9px;border-radius:999px;font-weight:600}

/* ============ About ============ */
.about{background:linear-gradient(180deg,var(--paper),var(--cream))}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media(max-width:980px){.about-grid{grid-template-columns:1fr;gap:50px}}
.about-visual{position:relative;height:540px}
.about-card{position:absolute;background:#fff;border-radius:24px;padding:20px;box-shadow:0 30px 60px -25px rgba(15,60,24,.25);border:1px solid var(--line)}
.about-card.c1{top:0;left:0;width:240px;animation:floatA 6s ease-in-out infinite}
.about-card.c2{top:90px;right:0;width:240px;animation:floatA 7s ease-in-out infinite reverse}
.about-card.c3{bottom:60px;left:50%;width:280px;animation:floatACenter 8s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatACenter{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
.about-card .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.about-card.c1 .ico{background:rgba(243,146,0,.15)}
.about-card.c2 .ico{background:rgba(43,174,63,.15)}
.about-card.c3 .ico{background:rgba(15,60,24,.08)}
.ico-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.about-card h4{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 6px}
.about-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.about-decor-circle{position:absolute;border-radius:50%;pointer-events:none}
.about-decor-circle.d1{top:32%;left:38%;width:120px;height:120px;background:radial-gradient(circle,rgba(243,146,0,.25),rgba(243,146,0,0) 70%);animation:floatA 7s ease-in-out infinite}
.about-decor-circle.d2{bottom:8%;right:14%;width:80px;height:80px;background:radial-gradient(circle,rgba(43,174,63,.25),rgba(43,174,63,0) 70%);animation:floatA 9s ease-in-out infinite reverse}
.feature-list{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.feat{display:flex;align-items:flex-start;gap:16px;padding:18px;background:#fff;border-radius:16px;border:1px solid var(--line);transition:transform .25s,border-color .25s}
.feat:hover{transform:translateX(6px);border-color:var(--green)}
.feat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--orange);min-width:24px}
.feat h5{margin:0 0 4px;font-size:16px;font-weight:700}
.feat p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

/* ============ Process ============ */
.process{background:var(--green-ink);color:var(--cream);padding:120px 0;overflow:hidden;position:relative}
.process .eyebrow{color:#FFCB66}
.process .eyebrow::before{background:var(--orange)}
.process .section-title{color:#fff}
.process .section-sub{color:rgba(255,246,227,.7)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
@media(max-width:980px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process-steps{grid-template-columns:1fr}}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:28px;border-radius:24px;transition:background .3s,transform .3s,border-color .3s;cursor:default;overflow:hidden}
.step:hover{background:rgba(243,146,0,.18);transform:translateY(-6px);border-color:var(--orange)}
.step .step-num{font-family:'Bricolage Grotesque',sans-serif;font-size:80px;font-weight:700;color:rgba(255,255,255,.08);line-height:.9;transition:color .3s}
.step:hover .step-num{color:var(--orange)}
.step h4{font-family:'Bricolage Grotesque',sans-serif;margin:14px 0 8px;font-size:22px;color:#fff}
.step p{margin:0;font-size:14px;color:rgba(255,246,227,.65);line-height:1.5}

/* ============ Testimonials ============ */
.testimonials{background:var(--paper)}
.testi-track{display:flex;gap:24px;animation:scroll-x 50s linear infinite}
.testimonials .marquee-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);margin-top:50px;padding:8px 0}
.testimonials .marquee-row:hover .testi-track{animation-play-state:paused}
.testi-card{flex:0 0 380px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px;transition:transform .3s,box-shadow .3s}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(15,60,24,.2)}
.testi-card .stars{color:var(--orange);font-size:16px;letter-spacing:2px}
.testi-card .quote{font-size:15px;line-height:1.6;color:var(--ink);margin:0;flex:1}
.testi-card .who{display:flex;align-items:center;gap:12px}
.testi-card .av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;color:var(--green-ink);font-size:16px}
.testi-card .av.a1{background:#FFD89E;color:#8A4A00}
.testi-card .av.a2{background:#B8E5BD;color:#0F3C18}
.testi-card .av.a3{background:#FFC1A8;color:#7A2E00}
.testi-card .av.a4{background:#D6E8B8;color:#3C5418}
.testi-card .meta{font-size:13px;color:var(--muted)}
.testi-card .meta strong{color:var(--ink);display:block;font-weight:700}
.testi-track.reverse{animation-direction:reverse;animation-duration:60s}

/* ============ CTA ============ */
.cta{padding:120px 0}
.cta-card{position:relative;border-radius:40px;background:linear-gradient(135deg,var(--orange) 0%,#FFB347 100%);padding:80px 60px;overflow:hidden;color:#fff}
.cta-card::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.12);animation:pulseSlow 6s ease-in-out infinite}
.cta-card::after{content:'';position:absolute;bottom:-150px;left:-100px;width:350px;height:350px;border-radius:50%;background:rgba(15,60,24,.15);animation:pulseSlow 7s ease-in-out infinite reverse}
@keyframes pulseSlow{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.cta-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
@media(max-width:880px){.cta-grid{grid-template-columns:1fr}}
.cta h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(36px,5vw,56px);font-weight:700;margin:14px 0 16px;line-height:1;letter-spacing:-.02em}
.cta p{font-size:17px;line-height:1.55;opacity:.95;max-width:480px;margin-bottom:30px}
.cta-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:8px 14px;border-radius:999px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-btn{background:var(--green-ink);color:#fff;padding:16px 24px;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:10px;transition:transform .25s,background .25s;cursor:pointer;border:none;font-family:inherit;font-size:15px}
.cta-btn:hover{transform:translateY(-2px);background:#000}
.cta-btn-secondary{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4)}
.cta-btn-secondary:hover{background:#fff;color:var(--orange-deep)}
.points-widget{background:rgba(255,255,255,.95);color:var(--ink);border-radius:24px;padding:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.25)}
.points-widget .row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.widget-mini-cup{width:54px}
.widget-mini-cup .mini-cup{width:100%;height:auto;display:block}
.points-widget .label{font-size:13px;color:var(--muted);font-weight:600}
.points-widget .pts{font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:700;color:var(--green-ink);line-height:1}
.points-widget .pts small{font-size:14px;color:var(--muted);font-weight:500}
.bar{height:8px;background:var(--cream-2);border-radius:999px;overflow:hidden;margin:12px 0 8px}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--orange));border-radius:999px;width:68%;animation:fillBar 2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fillBar{from{width:0}}

/* ============ Footer ============ */
.footer{background:var(--green-ink);color:var(--cream);padding:80px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}}
.footer h6{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#FFCB66;margin:0 0 18px;font-weight:700}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer ul a,.footer ul span{font-size:14px;opacity:.85;transition:opacity .2s,padding-left .2s;display:block}
.footer ul a:hover{opacity:1;padding-left:6px;color:var(--orange)}
.footer .brand p{font-size:14px;opacity:.7;line-height:1.6;margin:14px 0 22px;max-width:360px}
.footer .socials{display:flex;gap:10px}
.footer .socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;font-size:13px;font-weight:700}
.footer .socials a:hover{background:var(--orange);transform:translateY(-3px)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;opacity:.7;flex-wrap:wrap;gap:14px}
.footer-mega{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(80px,16vw,200px);font-weight:700;letter-spacing:-.04em;line-height:.85;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,246,227,.18);margin:50px 0 30px;cursor:default}

/* ============ Cursor + reveal ============ */
.cursor{position:fixed;top:0;left:0;width:24px;height:24px;border:2px solid var(--orange);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s;mix-blend-mode:difference;display:none}
@media(hover:hover){.cursor{display:block}}
.cursor.lg{width:60px;height:60px;background:var(--orange);border-color:var(--orange)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* =============================================
   SUB-PAGE SHARED
   ============================================= */
.subpage-header{background:var(--green-ink);color:var(--cream);padding:120px 0 64px}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:rgba(255,246,227,.65);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);transition:background .2s,color .2s;margin-bottom:28px;cursor:pointer}
.back-btn:hover{background:rgba(255,255,255,.12);color:var(--cream)}
.subpage-title{font-size:clamp(36px,5vw,72px);margin:0 0 16px;color:#fff;max-width:800px}
.subpage-sub{font-size:18px;color:rgba(255,246,227,.7);margin:0;max-width:600px;line-height:1.55}
.subpage-body{padding:80px 0 120px;background:var(--paper)}

.prose-block{max-width:680px}
.prose-block p{font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.prose-block p:last-child{margin-bottom:0}

/* ============ Cerita Kami ============ */
.timeline{margin-top:64px;position:relative;padding-left:0}
.tl-item{display:grid;grid-template-columns:80px 32px 1fr;gap:0 24px;align-items:start;margin-bottom:0;position:relative}
.tl-item::before{content:'';position:absolute;left:calc(80px + 15px);top:32px;bottom:-32px;width:2px;background:var(--line);z-index:0}
.tl-item:last-child::before{display:none}
.tl-item{padding-bottom:40px}
.tl-year{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--orange);padding-top:6px;text-align:right}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--green);margin-top:5px;position:relative;z-index:1;justify-self:center}
.tl-content{padding-top:2px}
.tl-content h4{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 6px;font-weight:700}
.tl-content p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
@media(max-width:760px){.value-grid{grid-template-columns:1fr}}
.value-card{background:#fff;border-radius:24px;padding:28px;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.value-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -20px rgba(15,60,24,.2)}
.value-letter{font-family:'Bricolage Grotesque',sans-serif;font-size:56px;font-weight:700;color:var(--green);opacity:.2;line-height:1;margin-bottom:8px}
.value-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;margin:0 0 10px}
.value-card p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}

/* ============ Karir ============ */
.perks-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.perk-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600}
.perk-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}

.job-list{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.job-card{background:#fff;border-radius:24px;padding:28px 32px;border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.job-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 20px 40px -18px rgba(15,60,24,.18)}
.job-meta{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.job-type{background:rgba(43,174,63,.12);color:var(--green-deep);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.job-loc{background:var(--cream-2);color:var(--muted);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600}
.job-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;margin:0 0 8px;font-weight:700}
.job-card p{font-size:15px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.job-apply{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--green-ink);border:2px solid var(--green-ink);padding:10px 20px;border-radius:999px;transition:background .2s,color .2s}
.job-apply:hover{background:var(--green-ink);color:#fff}

.apply-note{background:var(--cream);border-radius:20px;padding:24px 28px;margin-top:40px;border:1px solid var(--line)}
.apply-note p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}

/* ============ Press ============ */
.press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:40px}
@media(max-width:680px){.press-grid{grid-template-columns:1fr}}
.press-card{display:block;background:#fff;border-radius:20px;padding:24px 28px;border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.press-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 20px 40px -18px rgba(15,60,24,.15)}
.press-source{font-size:12px;font-weight:700;color:var(--green-deep);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.press-headline{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 14px;line-height:1.45}
.press-date{font-size:13px;color:var(--muted)}

.press-kit{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--cream);border-radius:24px;padding:32px 36px;border:1px solid var(--line);flex-wrap:wrap;margin-bottom:40px}
.press-kit h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;margin:0 0 8px}
.press-kit p{margin:0;font-size:15px;color:var(--muted)}

.press-contact{background:#fff;border-radius:24px;padding:32px 36px;border:1px solid var(--line)}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:12px;margin-bottom:48px}
.faq-item{background:#fff;border-radius:16px;border:1px solid var(--line);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--green)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:16px;font-weight:600;text-align:left;color:var(--ink);transition:background .2s}
.faq-q:hover{background:var(--cream)}
.faq-chevron{font-size:20px;font-weight:400;color:var(--orange);flex-shrink:0;width:24px;text-align:center}
.faq-a{padding:0 24px 20px;border-top:1px solid var(--line)}
.faq-a p{font-size:15px;color:var(--muted);line-height:1.65;margin:16px 0 0}
.faq-footer{text-align:center;padding-top:8px}
.faq-footer p{font-size:16px;color:var(--muted);margin:0 0 20px}

/* ============ Pesan Antar ============ */
.delivery-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
@media(max-width:880px){.delivery-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.delivery-steps{grid-template-columns:1fr}}
.delivery-step{background:#fff;border-radius:20px;padding:24px;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.delivery-step:hover{transform:translateY(-4px);border-color:var(--green)}
.ds-num{font-family:'Bricolage Grotesque',sans-serif;font-size:48px;font-weight:700;color:rgba(15,60,24,.08);line-height:1;margin-bottom:12px}
.delivery-step h4{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 8px;font-weight:700}
.delivery-step p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}

.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
@media(max-width:880px){.area-grid{grid-template-columns:repeat(2,1fr)}}
.area-card{background:#fff;border-radius:14px;padding:16px 18px;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.area-card strong{font-size:15px;font-weight:700;color:var(--ink)}
.area-card span{font-size:13px;color:var(--green-deep);font-weight:600}
.area-note{font-size:13px;color:var(--muted);margin-top:12px}

.ops-block{margin-top:64px}
.ops-card{background:var(--green-ink);color:var(--cream);border-radius:24px;padding:36px 40px;margin-top:24px}
.ops-time{font-family:'Bricolage Grotesque',sans-serif;font-size:48px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:8px}
.ops-day{font-size:16px;font-weight:600;color:rgba(255,246,227,.8);margin-bottom:14px}
.ops-card p{font-size:14px;color:rgba(255,246,227,.65);margin:0;line-height:1.55}

.channel-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
@media(max-width:760px){.channel-list{grid-template-columns:1fr}}
.channel-card{background:#fff;border-radius:20px;padding:28px;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.channel-card:hover{transform:translateY(-4px);border-color:var(--green)}
.channel-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;margin:0 0 6px}
.channel-handle{font-size:14px;font-weight:700;color:var(--green-deep);margin-bottom:12px}
.channel-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ============ Subscription ============ */
.sub-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.sub-tag{background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--green-deep)}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.plan-grid{grid-template-columns:1fr}}
.plan-card{background:#fff;border-radius:28px;padding:32px;border:2px solid var(--line);position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
.plan-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(15,60,24,.2)}
.plan-card.popular{border-color:var(--green-ink);box-shadow:0 20px 50px -20px rgba(15,60,24,.25)}
.plan-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--green-ink);color:#fff;font-size:12px;font-weight:700;padding:6px 18px;border-radius:999px;white-space:nowrap;letter-spacing:.04em}
.plan-name{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.plan-qty{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:20px}
.plan-price{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:700;color:var(--ink);line-height:1;margin-bottom:14px}
.plan-rp{font-size:18px;font-weight:600;color:var(--muted);margin-right:2px}
.plan-per{font-size:14px;font-weight:500;color:var(--muted)}
.plan-desc{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.plan-perks-list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.plan-perks-list li{font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.plan-cta{display:block;text-align:center;padding:14px 24px;border-radius:999px;font-weight:700;font-size:15px;color:#fff;transition:filter .2s,transform .2s}
.plan-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
.sub-note{max-width:640px;margin:32px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.6}

/* ============ Catering Event ============ */
.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:680px){.event-grid{grid-template-columns:1fr}}
.event-card{background:#fff;border-radius:20px;padding:28px;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.event-card:hover{transform:translateY(-4px);border-color:var(--green)}
.event-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;margin:0 0 10px;font-weight:700}
.event-card p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}

.catering-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
@media(max-width:760px){.catering-grid{grid-template-columns:1fr}}
.catering-card{background:#fff;border-radius:24px;padding:28px;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.catering-card:hover{transform:translateY(-4px);border-color:var(--green)}
.catering-name{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:700;color:var(--green-ink);margin-bottom:4px}
.catering-cup{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.catering-price{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;color:var(--orange);margin-bottom:20px}
.catering-perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.catering-perks li{font-size:14px;color:var(--muted);padding-left:16px;position:relative}
.catering-perks li::before{content:'–';position:absolute;left:0;color:var(--green)}

.catering-cta{background:var(--cream);border-radius:28px;padding:40px;margin-top:48px;text-align:center}
.catering-cta h3{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;margin:0 0 12px}
.catering-cta p{font-size:16px;color:var(--muted);margin:0}

/* ============ Loyalty Poin ============ */
.loyalty-demo{margin-bottom:0}
.ldc{background:var(--green-ink);border-radius:28px;padding:36px;color:var(--cream);max-width:580px;margin:0 auto}
.ldc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.ldc-label{font-size:13px;color:rgba(255,246,227,.65);font-weight:600;margin-bottom:6px}
.ldc-pts{font-family:'Bricolage Grotesque',sans-serif;font-size:52px;font-weight:700;line-height:1}
.ldc-tier-badge{padding:8px 20px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;flex-shrink:0;margin-top:6px}
.pts-range{width:100%;margin:20px 0 14px;accent-color:var(--rc,var(--orange));height:6px;cursor:pointer}
.ldc-bar{height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.ldc-fill{height:100%;border-radius:999px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.ldc-hint{font-size:13px;color:rgba(255,246,227,.6);margin-top:12px}

.earn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
@media(max-width:760px){.earn-grid{grid-template-columns:1fr}}
.earn-card{background:#fff;border-radius:20px;padding:28px;border:1px solid var(--line);text-align:center;transition:transform .3s}
.earn-card:hover{transform:translateY(-4px)}
.earn-num{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:700;color:var(--green-ink);margin-bottom:8px}
.earn-lbl{font-size:14px;color:var(--muted);line-height:1.4}

.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
@media(max-width:880px){.tier-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tier-grid{grid-template-columns:1fr}}
.tier-card{background:#fff;border-radius:20px;padding:24px;border:2px solid var(--line);transition:transform .3s,border-color .3s}
.tier-card:hover,.tier-card.active{border-color:var(--tc,var(--green));transform:translateY(-4px)}
.tier-name{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;margin-bottom:4px}
.tier-range{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:16px}
.tier-perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tier-perks li{font-size:13px;color:var(--muted);line-height:1.4}

.loyalty-cta{background:var(--cream);border-radius:28px;padding:48px;margin-top:48px;text-align:center}
.loyalty-cta h3{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;margin:0 0 12px}
.loyalty-cta p{font-size:16px;color:var(--muted);max-width:480px;margin:0 auto 28px;line-height:1.6}