/* ==========================================================================
   HOME-PREMIUM.CSS — "Cinematic Botanical Luxury" homepage upgrade layer
   Scope: #public-home + .nav-home (homepage only). Loaded AFTER style.css.
   Does NOT touch :root, admin, or other public pages.
   Palette: #0E2B0F forest · #1F5F21 herbal · #7CA37D sage · #F4F0E6 ivory
            #C89B4A propolis gold · #D99A35 honey amber
   ========================================================================== */
#public-home{
  --cbl-forest:#0E2B0F;
  --cbl-herbal:#1F5F21;
  --cbl-sage:#7CA37D;
  --cbl-ivory:#F4F0E6;
  --cbl-gold:#C89B4A;
  --cbl-amber:#D99A35;
  --cbl-ink:#1a2e25;
  --cbl-muted:#6b7a70;
  /* hero-only deep botanical tones (revision) */
  --cbl-hero-deep:#08261C;
  --cbl-hero-mid:#164C36;
  --cbl-hero-sage:#6F967F;
  overflow-x:hidden;
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--cbl-ivory);
}
#public-home *{ box-sizing:border-box; }
#public-home img{ max-width:100%; }
#public-home section[id]{ scroll-margin-top:84px; }

/* ---------- scroll reveal (own classes, never touches global .reveal) ---- */
#public-home .cbl-reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s cubic-bezier(.16,.8,.28,1), transform 1s cubic-bezier(.16,.8,.28,1);
  will-change:opacity,transform;
}
#public-home .cbl-reveal.in-view{ opacity:1; transform:none; }
#public-home .cbl-reveal-scale{ opacity:0; transform:translateY(20px) scale(.95); transition:opacity 1.1s cubic-bezier(.16,.8,.28,1), transform 1.1s cubic-bezier(.16,.8,.28,1); }
#public-home .cbl-reveal-scale.in-view{ opacity:1; transform:none; }

/* ---------- shared kicker / buttons / pills ------------------------------ */
#public-home .cbl-kicker{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--cbl-gold); font-weight:700; margin-bottom:14px; }
#public-home .cbl-kicker-center{ text-align:center; }
#public-home .cbl-kicker-gold{ color:var(--cbl-gold); }
#public-home .cbl-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:1px solid transparent; font-family:'Plus Jakarta Sans',sans-serif;
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, filter .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
#public-home .cbl-btn svg{ transition:transform .35s cubic-bezier(.16,.8,.28,1); }
#public-home .cbl-btn:hover svg{ transform:translateX(3px); }
#public-home .cbl-btn:active{ transform:translateY(0) scale(.97) !important; }
#public-home .cbl-btn-gold{
  background:linear-gradient(120deg,#f0d29e 0%,#e0ab52 38%,var(--cbl-gold) 65%,#b8893a 100%);
  background-size:180% 180%; color:#1a2e25;
  box-shadow:0 14px 34px rgba(200,155,74,.32), 0 0 0 1px rgba(255,255,255,.15) inset;
  animation:cblGoldBreathe 4s ease-in-out infinite;
}
#public-home .cbl-btn-gold:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.08); box-shadow:0 22px 48px rgba(200,155,74,.5), 0 0 0 1px rgba(255,255,255,.25) inset; background-position:100% 50%; }
#public-home .cbl-btn-gold::after{ content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg); }
#public-home .cbl-btn-gold:hover::after{ animation:cblSweep .8s ease forwards; }
@keyframes cblSweep{ to{ left:135%; } }
@keyframes cblGoldBreathe{ 0%,100%{ box-shadow:0 14px 34px rgba(200,155,74,.32), 0 0 0 1px rgba(255,255,255,.15) inset; } 50%{ box-shadow:0 14px 40px rgba(200,155,74,.5), 0 0 0 1px rgba(255,255,255,.2) inset; } }
#public-home .cbl-btn-ghost{ background:rgba(244,240,230,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--cbl-ivory); border-color:rgba(244,240,230,.4); }
#public-home .cbl-btn-ghost:hover{ background:rgba(244,240,230,.16); border-color:var(--cbl-gold); color:var(--cbl-gold); transform:translateY(-3px) scale(1.02); box-shadow:0 14px 30px rgba(0,0,0,.25); }
#public-home .cbl-btn-outline{ background:transparent; color:var(--cbl-herbal); border-color:rgba(31,95,33,.4); }
#public-home .cbl-btn-outline:hover{ background:var(--cbl-herbal); color:#fff; border-color:var(--cbl-herbal); transform:translateY(-3px) scale(1.02); }
#public-home .cbl-btn-outline-light{ background:transparent; color:var(--cbl-ivory); border-color:rgba(244,240,230,.4); }
#public-home .cbl-btn-outline-light:hover{ background:var(--cbl-gold); color:#1a2e25; border-color:var(--cbl-gold); transform:translateY(-3px) scale(1.02); }
#public-home .cbl-btn-sm{ padding:11px 22px; font-size:11px; }
@media(prefers-reduced-motion: reduce){ #public-home .cbl-btn-gold{ animation:none; } }
#public-home .cbl-pill{ display:inline-block; padding:8px 18px; border-radius:999px; font-size:11.5px; font-weight:600; background:rgba(31,95,33,.08); color:#1f5f21; border:1px solid rgba(31,95,33,.12); box-shadow:0 2px 8px rgba(14,43,15,.04); }
#public-home .cbl-pill-gold{ background:rgba(200,155,74,.16); color:#8a6d3a; border-color:rgba(200,155,74,.3); }

/* ==========================================================================
   HEADER — transparent over dark hero, solid cream after scroll
   (only when <nav> has .nav-home, i.e. homepage; other pages untouched)
   ========================================================================== */
.nav-home{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; background:transparent !important; border-bottom:1px solid transparent !important; box-shadow:none !important; backdrop-filter:blur(0px) !important; }
.nav-home .brand-name{ color:#f3efe4 !important; font-family:'Fraunces',serif !important; }
.nav-home .nav-link{ color:#dde7df !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:600 !important; letter-spacing:.01em; }
.nav-home .nav-link:hover{ color:var(--cbl-gold) !important; }
.nav-home.nav-scrolled{ background:rgba(247,243,234,.94) !important; backdrop-filter:blur(12px) !important; border-bottom:1px solid rgba(14,43,15,.08) !important; box-shadow:0 8px 30px rgba(14,43,15,.08) !important; }
.nav-home.nav-scrolled .brand-name{ color:var(--herbal,#1f5f21) !important; }
.nav-home.nav-scrolled .nav-link{ color:#2c4a3b !important; }
.nav-home.nav-scrolled .nav-link:hover{ color:var(--herbal,#1f5f21) !important; }
.nav-home .btn-nav-login{ background:rgba(244,240,230,.10) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#f3efe4 !important; border-color:rgba(244,240,230,.45) !important; }
.nav-home .btn-nav-login:hover{ background:rgba(244,240,230,.2) !important; border-color:var(--cbl-gold) !important; color:var(--cbl-gold) !important; }
.nav-home.nav-scrolled .btn-nav-login{ background:rgba(31,95,33,.06) !important; color:var(--herbal,#1f5f21) !important; border-color:rgba(14,43,15,.15) !important; }
.nav-home.nav-scrolled .btn-nav-login:hover{ background:rgba(31,95,33,.12) !important; color:var(--herbal,#1f5f21) !important; border-color:var(--herbal,#1f5f21) !important; }
/* mobile dropdown panel is always an opaque overlay when opened — keep it
   visually consistent (light cream + dark readable text) regardless of the
   transparent/scrolled top-bar state or viewport width. Previously this had
   two conflicting rules (one light, one dark) that could leave pale text on
   a light panel depending on width — this single rule replaces both. */
#mobile-menu{ background:var(--cream) !important; }
#mobile-menu .nav-link{ color:var(--herbal,#1f5f21) !important; }
#mobile-menu .nav-link:hover{ color:var(--gold,#c89b4a) !important; }
@media(max-width:1023px){
  .nav-home{ background:rgba(14,43,15,.55) !important; backdrop-filter:blur(10px) !important; }
  .nav-home .brand-name{ color:#f3efe4 !important; }
}
/* fallback in case Tailwind's CDN responsive classes (hidden/lg:flex, lg:hidden)
   fail to apply — force the hamburger toggle to only show below desktop width
   on the homepage nav. */
@media(min-width:1024px){
  .nav-home .cbl-nav-toggle{ display:none !important; }
}

/* ================================ HERO =================================== */
.cbl-hero{
  position:relative; overflow:hidden;
  padding:104px 0 60px;
  color:var(--cbl-ivory);
  background-color:var(--cbl-forest); /* dark fallback while hero-photo-bg.jpg loads, or if it fails to load */
}
.cbl-hero-bg{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  /* Foto baru dari user SUDAH termasuk produk (real product shot, disatukan
     langsung dengan botanical scene) — jadi tidak perlu lagi elemen produk
     terpisah/floating di atasnya. background-size:contain dipakai supaya
     SELURUH foto (botol + panggung batu + daun sekitarnya) selalu utuh
     ketampil apa adanya — botolnya gak pernah membesar berlebihan lagi
     walau di layar lebar/pendek, karena gak pernah di-cover-crop-zoom.
     Sisa ruang di kiri/kanan otomatis ketutup warna dasar forest (lihat
     background-color di .cbl-hero) — pas juga buat area teks. */
  background-image:
    linear-gradient(90deg, rgba(8,38,28,.95) 0%, rgba(8,38,28,.6) 30%, rgba(8,38,28,.1) 55%, rgba(8,38,28,0) 100%),
    url('../hero-product-scene.jpg');
  background-size: cover, contain;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  filter: saturate(1.04) contrast(1.03);
  transform-origin:center center;
  animation:cblHeroKenBurns 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cblHeroKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.02) translate(-.5%,0); }
}
@media(prefers-reduced-motion: reduce){
  .cbl-hero-bg{ animation:none; }
}
/* Di bawah 900px kolom teks & panggung foto jadi satu kolom penuh (lihat
   .cbl-hero-stage-split), jadi foto (contain) diposisikan center-top area
   bawah supaya tetap utuh dan tidak numpuk sama teks di atasnya. */
@media(max-width:900px){
  .cbl-hero-bg{
    background-size: cover, contain;
    background-position: center, center bottom;
  }
  @keyframes cblHeroKenBurns{
    0%{ transform:scale(1) translate(0,0); }
    100%{ transform:scale(1.015) translate(0,-.3%); }
  }
  /* Split-hero baru: di mobile, KONTEN TEKS ada di ATAS, panggung PRODUK ada
     di BAWAH (order di .cbl-hero-stage-split). Jadi arah gelapnya perlu
     gelap di atas (belakang teks) → makin terang ke bawah (biar panggung
     produk & batu/background botanical kelihatan jelas). */
  .cbl-hero-scrim{
    background:
      radial-gradient(60% 45% at 50% 82%, rgba(217,154,53,.12) 0%, rgba(217,154,53,0) 60%),
      linear-gradient(180deg, rgba(4,20,13,.9) 0%, rgba(4,20,13,.72) 30%, rgba(4,20,13,.32) 58%, rgba(4,20,13,.12) 100%);
  }
  .cbl-hero-vignette{
    background:radial-gradient(130% 80% at 50% 12%, transparent 45%, rgba(4,20,13,.55) 100%);
  }
}
.cbl-hero-scrim{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(217,154,53,.08) 0%, rgba(217,154,53,0) 60%),
    linear-gradient(100deg, rgba(4,20,13,.94) 0%, rgba(4,20,13,.82) 28%, rgba(4,20,13,.58) 52%, rgba(4,20,13,.48) 100%);
}
.cbl-hero-vignette{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(4,20,13,.55) 100%); }
.cbl-particles{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; pointer-events:none; width:100%; height:100%; }
.cbl-leaf{ position:absolute; z-index:1; pointer-events:none; opacity:.7; }
.cbl-leaf-tr{ top:-6%; right:-4%; width:38%; max-width:440px; }
.cbl-leaf-bl{ bottom:-8%; left:-5%; width:30%; max-width:340px; transform:scaleX(-1) rotate(180deg); }
.cbl-hero-fog{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; pointer-events:none; background:linear-gradient(180deg, rgba(4,20,13,0) 72%, rgba(4,20,13,.32) 100%); }

/* — falling leaves: pure CSS, GPU-only (transform+opacity), no JS/canvas cost — */
.cbl-leaves-fall{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; pointer-events:none; overflow:hidden; }
.cbl-leaf-fall{ position:absolute; top:-6%; left:var(--x,10%); opacity:0; animation:cblLeafFall linear infinite; animation-duration:var(--dur,18s); animation-delay:var(--delay,0s); will-change:transform,opacity; }
@keyframes cblLeafFall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); opacity:0; }
  10%{ opacity:.55; }
  50%{ transform:translate3d(var(--drift,22px),55vh,0) rotate(190deg); }
  90%{ opacity:.4; }
  100%{ transform:translate3d(calc(var(--drift,22px) * -1),120vh,0) rotate(360deg); opacity:0; }
}
@media(max-width:640px){ .cbl-leaf-fall:nth-child(even){ display:none; } }
@media(prefers-reduced-motion: reduce){ .cbl-leaf-fall{ display:none; } }

.cbl-hero-stage{ position:relative; z-index:4; width:100%; text-align:center; display:flex; flex-direction:column; align-items:flex-start; }

/* — foto baru dari user sudah berisi produk yang menyatu dengan scene,
   jadi hero cukup satu kolom teks (kiri) di atas foto, tanpa elemen
   produk terpisah/floating lagi. — */
.cbl-hero-stage-split{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; max-width:640px; width:100%; margin:20px 0 0; text-align:left; }
.cbl-hero-left{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; max-width:640px; width:100%; }
.cbl-hero-copy-left{ margin-bottom:0; }
.cbl-h1-left{ text-align:left; }
.cbl-sub-left{ text-align:left; margin:0; }
.cbl-price-row-left, .cbl-cta-left{ justify-content:flex-start; }

/* — daun blur di depan (foreground botanical blur), sangat halus — */
.cbl-leaf-fg{ position:absolute; z-index:2; pointer-events:none; filter:blur(3px); opacity:.5; }
.cbl-leaf-fg-bl{ bottom:-4%; left:-2%; width:22%; max-width:230px; }
@media(max-width:900px){ .cbl-leaf-fg{ display:none; } }

@media(max-width:900px){
  .cbl-hero-stage-split{ align-items:center; text-align:center; max-width:100%; margin:12px auto 0; }
  .cbl-hero-left{ align-items:center; text-align:center; max-width:100%; }
  .cbl-h1-left, .cbl-sub-left{ text-align:center; }
  .cbl-sub-left{ margin:0 auto; }
  .cbl-price-row-left, .cbl-cta-left{ justify-content:center; }
}
.cbl-hero-copy{ max-width:640px; margin-bottom:6px; }
.cbl-eyebrow{ font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--cbl-gold); font-weight:700; margin-bottom:18px; }
.cbl-h1{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(34px,4.8vw,54px); line-height:1.12; letter-spacing:-.01em;
  color:var(--cbl-ivory); margin:0 0 16px;
}
.cbl-h1 em{ font-style:italic; color:var(--cbl-gold); font-weight:600; }
.cbl-sub{ font-size:16px; line-height:1.8; color:#c3d2c7; margin:0; max-width:440px; }

/* hs-slides tetap ada sebagai data container tersembunyi untuk slider paket (public.js) */
#public-home .hs-slides{ display:none !important; }

/* — price + CTA below product — */
.cbl-hero-bottom{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; gap:18px; }
.cbl-price-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.cbl-price-badge{
  position:relative; overflow:hidden; min-width:168px;
  background:linear-gradient(155deg, rgba(200,155,74,.16) 0%, rgba(244,240,230,.04) 65%);
  border:1px solid rgba(200,155,74,.4); border-radius:18px; padding:14px 24px;
  display:flex; flex-direction:column; line-height:1.22;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease;
}
.cbl-price-badge::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--cbl-gold), transparent); }
.cbl-price-badge:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); }
.cbl-price-badge .hs-price-value{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--cbl-gold); transition:opacity .25s ease; }
.cbl-price-badge .hs-price-label{ font-size:10.5px; font-weight:600; color:#c3d2c7; text-transform:uppercase; letter-spacing:.1em; margin-top:3px; transition:opacity .25s ease; }
.cbl-trust-pill{
  display:flex; align-items:center; gap:12px; padding:12px 22px; border-radius:18px;
  background:linear-gradient(155deg, rgba(244,240,230,.09) 0%, rgba(244,240,230,.03) 65%);
  border:1px solid rgba(244,240,230,.2); color:var(--cbl-ivory);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
}
.cbl-trust-pill:hover{ transform:translateY(-3px); border-color:rgba(200,155,74,.4); box-shadow:0 20px 42px rgba(0,0,0,.3); }
.cbl-trust-pill-icon{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--cbl-gold); background:linear-gradient(135deg, rgba(200,155,74,.4), rgba(200,155,74,.12)); box-shadow:inset 0 0 0 1px rgba(200,155,74,.45); }
.cbl-trust-pill-text{ display:flex; flex-direction:column; line-height:1.3; }
.cbl-trust-pill-text strong{ font-size:12.5px; font-weight:700; }
.cbl-trust-pill-text small{ font-size:10px; font-weight:600; color:#9db3a4; text-transform:uppercase; letter-spacing:.07em; margin-top:1px; }
.cbl-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* — stats + scroll hint — */
.cbl-hero-stats{ position:relative; z-index:4; box-sizing:border-box; max-width:760px; margin:44px auto 0; width:100%; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:24px 24px 0; border-top:1px solid rgba(244,240,230,.12); }
.cbl-hero-stats .st{ position:relative; flex:1 1 140px; text-align:center; padding:16px 18px; border-radius:16px; background:rgba(8,38,28,.35); border:1px solid rgba(200,155,74,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .35s cubic-bezier(.16,.8,.28,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; cursor:default; overflow:hidden; }
.cbl-hero-stats .st::before{ content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg, transparent, rgba(200,155,74,.55), transparent); }
.cbl-hero-stats .st:hover{ transform:translateY(-6px); background:rgba(244,240,230,.1); border-color:rgba(200,155,74,.5); box-shadow:0 18px 36px rgba(0,0,0,.3); }
.cbl-hero-stats .st div:first-child{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--cbl-gold); }
.cbl-hero-stats .st div:last-child{ font-size:11px; color:#9db3a4; margin-top:3px; letter-spacing:.06em; text-transform:uppercase; }

/* ============================ MEET S-PROPOLIS ============================ */
.cbl-meet{ background:var(--cbl-ivory); padding:110px 24px; overflow:hidden; position:relative; }
.cbl-meet-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center; }
.cbl-meet-title{ font-family:'Fraunces',serif; font-weight:500; line-height:.98; font-size:clamp(44px,6.5vw,80px); color:var(--cbl-forest); margin:0 0 22px; letter-spacing:-.01em; }
.cbl-meet-title span{ display:block; color:var(--cbl-herbal); font-style:italic; }
.cbl-rule{ width:64px; height:2px; background:linear-gradient(90deg,var(--cbl-gold),transparent); margin:24px 0 28px; }
.cbl-meet-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:21px; color:var(--cbl-forest); line-height:1.6; margin:0 0 18px; }
.cbl-meet-text{ font-size:14.5px; line-height:1.9; color:#5c6a60; max-width:420px; margin:0; }
.cbl-meet-visual{ position:relative; }
.cbl-frame-glow{ position:absolute; inset:-14px; border-radius:28px; background:radial-gradient(60% 60% at 50% 40%, rgba(200,155,74,.25), transparent 70%); z-index:0; filter:blur(14px); }
.cbl-meet-visual img{ position:relative; z-index:1; width:100%; display:block; border-radius:22px; object-fit:cover; box-shadow:0 44px 80px -24px rgba(14,43,15,.4); }

/* ============================ TRUST BAR ================================== */
.cbl-trustbar{ background:#fff; border-bottom:1px solid rgba(14,43,15,.07); }
.cbl-trustbar-inner{ max-width:1180px; margin:0 auto; padding:40px 24px; display:flex; flex-wrap:wrap; gap:22px; }
.cbl-trust-item{ flex:1 1 200px; display:flex; gap:14px; align-items:flex-start; padding:4px 22px 4px 0; border-right:1px solid rgba(14,43,15,.07); transition:transform .3s ease; }
.cbl-trust-item:last-child{ border-right:none; }
.cbl-trust-item:hover{ transform:translateY(-3px); }
.cbl-trust-icon{ width:46px; height:46px; border-radius:14px; flex-shrink:0; background:linear-gradient(135deg,rgba(31,95,33,.12),rgba(200,155,74,.16)); display:flex; align-items:center; justify-content:center; color:var(--cbl-herbal); box-shadow:0 4px 12px rgba(31,95,33,.08); transition:transform .35s cubic-bezier(.16,.8,.28,1); }
.cbl-trust-item:hover .cbl-trust-icon{ transform:scale(1.08) rotate(-4deg); }
.cbl-trust-title{ font-weight:700; font-size:14px; color:var(--cbl-ink); }
.cbl-trust-sub{ font-size:12px; color:var(--cbl-muted); margin-top:4px; line-height:1.5; }
@media(max-width:900px){ .cbl-trust-item{ border-right:none; border-bottom:1px solid rgba(14,43,15,.07); padding:0 0 18px; } .cbl-trust-item:last-child{ border-bottom:none; } }

/* ======================= THE POWER OF PROPOLIS =========================== */
.cbl-story{ position:relative; overflow:hidden; padding:120px 24px; background:linear-gradient(155deg, var(--cbl-herbal) 0%, var(--cbl-forest) 100%); color:#eef4ee; }
.cbl-story-glow{ position:absolute; width:70%; aspect-ratio:1; border-radius:50%; z-index:0; background:radial-gradient(circle, rgba(200,155,74,.18) 0%, rgba(200,155,74,0) 70%); top:-15%; right:-12%; pointer-events:none; }
.cbl-leaf-story{ bottom:-10%; left:-6%; width:32%; max-width:360px; transform:rotate(20deg); }
.cbl-story-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }
.cbl-story-visual{ position:relative; border-radius:22px; overflow:hidden; box-shadow:0 44px 80px -20px rgba(0,0,0,.55); }
.cbl-story-visual img{ width:100%; display:block; aspect-ratio:4/3.4; object-fit:cover; }
.cbl-story-caption{ position:absolute; left:20px; bottom:18px; font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:#f3efe4; background:rgba(14,43,15,.5); padding:6px 14px; border-radius:999px; backdrop-filter:blur(6px); }
.cbl-story-title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(32px,4.4vw,52px); line-height:1.08; margin:0 0 22px; color:#f3efe4; letter-spacing:-.01em; }
.cbl-story-title em{ font-style:italic; color:var(--cbl-gold); }
.cbl-story-text{ font-size:14.5px; line-height:1.95; color:#c3d1c7; max-width:460px; margin:0 0 16px; }
.cbl-story-sign{ display:flex; align-items:center; gap:14px; margin-top:30px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--cbl-gold); font-weight:700; }
.cbl-story-sign-line{ width:50px; height:1px; background:var(--cbl-gold); display:inline-block; }

/* ============================ MANFAAT S-PROPOLIS =========================== */
.cbl-benefits{ max-width:1200px; margin:0 auto; padding:100px 24px 70px; }
.cbl-benefit-note{ text-align:center; font-size:11.5px; color:var(--cbl-muted); opacity:.8; margin:34px auto 0; max-width:560px; line-height:1.7; }

/* ---------- MANFAAT — interactive spotlight showcase ------------------- */
.cbl-benefits-showcase{ display:grid; grid-template-columns:.86fr 1.14fr; gap:30px; align-items:start; }

/* -- spotlight stage (left, dark, auto-rotates) -- */
.cbl-benefits-stage{
  position:sticky; top:104px;
  overflow:hidden; isolation:isolate; text-align:center;
  border-radius:28px; padding:60px 36px 48px;
  min-height:600px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--cbl-herbal) 0%, var(--cbl-forest) 100%);
  box-shadow:0 40px 76px -26px rgba(14,43,15,.5), 0 0 0 1px rgba(244,240,230,.06) inset;
}
.cbl-benefits-hex{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; pointer-events:none; }
.cbl-benefits-stage-glow{
  position:absolute; left:50%; top:22%; width:230px; height:230px; margin-left:-115px; z-index:0;
  border-radius:50%; background:radial-gradient(circle, var(--accent,#C89B4A) 0%, transparent 68%);
  opacity:.4; filter:blur(6px); pointer-events:none; transition:opacity .3s ease;
}
.cbl-benefits-stage.is-switching .cbl-benefits-stage-glow{ opacity:.15; }
.cbl-benefits-ringwrap{ position:relative; width:132px; height:132px; margin:0 auto 22px; z-index:1; }
.cbl-benefits-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.cbl-benefits-ring-track{ fill:none; stroke:rgba(244,240,230,.14); stroke-width:3; }
.cbl-benefits-ring-fill{ fill:none; stroke:var(--accent,#C89B4A); stroke-width:3; stroke-linecap:round; transition:stroke .35s ease; }
.cbl-benefits-stage-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cbl-benefits-stage-icon svg{ width:44px; height:44px; color:var(--accent,#C89B4A); transition:color .35s ease; }
.cbl-benefits-stage-icon.is-pop svg{ animation:cblBenefitIconPop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes cblBenefitIconPop{ 0%{ transform:scale(.55) rotate(-10deg); opacity:0; } 55%{ transform:scale(1.18) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.cbl-benefits-stage-index{ position:relative; z-index:1; font-family:'Fraunces',serif; font-weight:700; font-size:13px; letter-spacing:.05em; color:var(--accent,#C89B4A); margin-bottom:10px; transition:color .35s ease; }
.cbl-benefits-stage-index em{ font-style:normal; font-weight:500; color:rgba(244,240,230,.38); margin-left:3px; }
.cbl-benefits-stage-title{ position:relative; z-index:1; font-family:'Fraunces',serif; font-weight:500; font-size:25px; line-height:1.22; color:#f3efe4; margin:0 0 12px; transition:opacity .28s ease, transform .28s ease; }
.cbl-benefits-stage-desc{ position:relative; z-index:1; font-size:13.5px; line-height:1.85; color:#c3d1c7; max-width:300px; margin:0 auto; transition:opacity .28s ease, transform .28s ease; }
.cbl-benefits-stage.is-switching .cbl-benefits-stage-title,
.cbl-benefits-stage.is-switching .cbl-benefits-stage-desc{ opacity:0; transform:translateY(8px); }
@media(prefers-reduced-motion: reduce){ .cbl-benefits-ring-fill{ display:none; } }

.cbl-benefits-stage-divider{ position:relative; z-index:1; width:40px; height:1px; background:rgba(244,240,230,.2); margin:32px auto 28px; }
.cbl-benefits-stage-dots{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:9px; }
.cbl-benefits-dot{
  all:unset; box-sizing:border-box; cursor:pointer;
  width:7px; height:7px; border-radius:999px; background:rgba(244,240,230,.28);
  transition:width .35s cubic-bezier(.16,.8,.28,1), background .35s ease;
}
.cbl-benefits-dot:hover{ background:rgba(244,240,230,.5); }
.cbl-benefits-dot.is-active{ width:24px; background:var(--dot-accent,#C89B4A); }
.cbl-benefits-dot.is-active:hover{ background:var(--dot-accent,#C89B4A); }
.cbl-benefits-dot:focus-visible{ outline:2px solid rgba(244,240,230,.6); outline-offset:3px; border-radius:999px; }

/* -- numbered rows (right, always fully readable, click to focus stage) -- */
.cbl-benefits-rows{ display:flex; flex-direction:column; gap:10px; }
.cbl-benefits-row{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:flex-start; gap:15px; padding:16px 18px;
  border-radius:16px; background:#fff; border:1px solid rgba(14,43,15,.07);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
}
.cbl-benefits-row:hover{ transform:translateX(5px); box-shadow:0 14px 30px rgba(14,43,15,.08); border-color:color-mix(in srgb, var(--row-accent,#C89B4A) 45%, rgba(14,43,15,.07)); }
.cbl-benefits-row.is-active{ border-color:color-mix(in srgb, var(--row-accent,#C89B4A) 55%, rgba(14,43,15,.07)); box-shadow:0 16px 34px rgba(14,43,15,.1); background:color-mix(in srgb, var(--row-accent,#C89B4A) 5%, #ffffff); }
.cbl-benefits-row-num{
  flex-shrink:0; width:30px; height:30px; border-radius:9px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:13px; color:#fff;
  background:var(--row-accent,#1F5F21); transition:transform .3s cubic-bezier(.16,.8,.28,1), box-shadow .3s ease;
}
.cbl-benefits-row.is-active .cbl-benefits-row-num{ transform:scale(1.12); box-shadow:0 6px 16px color-mix(in srgb, var(--row-accent,#C89B4A) 55%, transparent); }
.cbl-benefits-row-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:var(--row-accent,#1F5F21); background:color-mix(in srgb, var(--row-accent,#1F5F21) 13%, #ffffff);
  transition:transform .3s ease;
}
.cbl-benefits-row-icon svg{ width:18px; height:18px; }
.cbl-benefits-row.is-active .cbl-benefits-row-icon{ transform:scale(1.1) rotate(-4deg); }
.cbl-benefits-row-body{ flex:1; min-width:0; }
.cbl-benefits-row-title{ display:block; font-weight:700; font-size:14.5px; color:var(--cbl-ink); margin-bottom:4px; }
.cbl-benefits-row-desc{ display:block; font-size:12.3px; line-height:1.65; color:var(--cbl-muted); }
.cbl-benefits-row-arrow{
  flex-shrink:0; margin-top:2px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--row-accent,#1F5F21);
  background:color-mix(in srgb, var(--row-accent,#1F5F21) 13%, #ffffff);
  opacity:0; transform:translateX(-5px); transition:opacity .3s ease, transform .3s ease;
}
.cbl-benefits-row.is-active .cbl-benefits-row-arrow, .cbl-benefits-row:hover .cbl-benefits-row-arrow{ opacity:1; transform:translateX(0); }

@media(max-width:900px){
  .cbl-benefits-showcase{ grid-template-columns:1fr; gap:24px; }
  .cbl-benefits-stage{ position:static; padding:44px 28px 36px; min-height:0; }
  .cbl-benefits-stage-divider{ margin:26px auto 22px; }
}
@media(max-width:640px){
  .cbl-benefits-row{ padding:14px; gap:12px; }
  .cbl-benefits-stage-title{ font-size:22px; }
}

/* ========================== PRODUCT COLLECTION =========================== */
.cbl-products{ max-width:1200px; margin:0 auto; padding:110px 24px 80px; }
.cbl-section-head{ text-align:center; max-width:620px; margin:0 auto 56px; }
.cbl-section-title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,4.2vw,46px); color:var(--cbl-forest); margin:0 0 14px; line-height:1.12; letter-spacing:-.01em; }
.cbl-section-title em{ font-style:italic; color:var(--cbl-gold); }
.cbl-section-title-light{ color:#f3efe4; }
.cbl-section-desc{ color:var(--cbl-muted); font-size:15px; line-height:1.75; margin:0; }
.cbl-section-desc-light{ color:#9db3a4; }
.cbl-product-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,300px)); justify-content:center; gap:30px; }
.cbl-product-card{ position:relative; background:#fff; border-radius:22px; overflow:hidden; border:1px solid rgba(14,43,15,.06); box-shadow:0 14px 40px rgba(14,43,15,.07); transition:transform .5s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease; }
.cbl-product-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(14,43,15,.14); }
.cbl-product-media{ aspect-ratio:1; overflow:hidden; background:linear-gradient(160deg,#eef2ec,#e2e9e0); position:relative; }
.cbl-product-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,.8,.28,1); display:block; }
.cbl-product-card:hover .cbl-product-media img{ transform:scale(1.07); }
.cbl-product-media-glow{ position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(70% 60% at 50% 30%, rgba(200,155,74,0) 0%, rgba(200,155,74,.18) 100%); opacity:0; transition:opacity .6s ease; }
.cbl-product-card:hover .cbl-product-media-glow{ opacity:1; }
.cbl-product-body{ padding:22px 22px 24px; }
.cbl-product-cat{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cbl-gold); font-weight:700; }
.cbl-product-name{ font-family:'Fraunces',serif; font-size:23px; font-weight:700; margin:6px 0 8px; color:var(--cbl-ink); line-height:1.2; }
.cbl-product-desc{ font-size:12.5px; color:var(--cbl-muted); line-height:1.65; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cbl-product-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid rgba(14,43,15,.07); }
.cbl-product-price{ font-family:'Fraunces',serif; font-size:19px; font-weight:700; color:var(--cbl-herbal); }
.cbl-product-links{ display:flex; gap:14px; align-items:center; }
.cbl-link-detail{ font-size:12px; font-weight:700; color:var(--cbl-ink); text-decoration:none; border-bottom:1px solid rgba(26,46,37,.3); padding-bottom:2px; transition:border-color .3s; }
.cbl-link-detail:hover{ border-color:var(--cbl-herbal); }
.cbl-link-buy{ font-size:12px; font-weight:700; color:var(--cbl-amber); text-decoration:none; display:flex; align-items:center; gap:5px; transition:color .3s; }
.cbl-link-buy:hover{ color:var(--cbl-gold); }
.cbl-products-cta{ text-align:center; margin-top:50px; }

/* ============================== TESTIMONI ================================ */
.cbl-testimonials{ max-width:1200px; margin:0 auto; padding:10px 24px 100px; }
.cbl-testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.cbl-testi-card{ position:relative; background:#fff; border-radius:22px; padding:30px 26px 26px; border:1px solid rgba(14,43,15,.06); box-shadow:0 14px 40px rgba(14,43,15,.07); transition:transform .5s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease; display:flex; flex-direction:column; }
.cbl-testi-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(14,43,15,.14); }
.cbl-testi-quote-mark{ position:absolute; top:14px; right:22px; font-family:'Fraunces',serif; font-size:56px; line-height:1; color:var(--cbl-gold); opacity:.22; pointer-events:none; }
.cbl-testi-stars{ display:flex; gap:3px; color:var(--cbl-gold); margin-bottom:14px; }
.cbl-testi-message{ font-size:14px; line-height:1.75; color:var(--cbl-ink); margin:0 0 22px; flex:1; }
.cbl-testi-person{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid rgba(14,43,15,.07); }
.cbl-testi-avatar{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--cbl-sage),var(--cbl-herbal)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.cbl-testi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.cbl-testi-name{ font-size:13.5px; font-weight:700; color:var(--cbl-ink); }
.cbl-testi-role{ font-size:11.5px; color:var(--cbl-muted); margin-top:1px; }

/* ========================= TOP AGENTS LEADERBOARD ======================== */
.cbl-agents{ position:relative; overflow:hidden; padding:110px 24px; background:linear-gradient(160deg, var(--cbl-herbal) 0%, var(--cbl-forest) 100%); color:#e8efe9; }
.cbl-agents-glow{ position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:70%; max-width:640px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(200,155,74,.14) 0%, rgba(200,155,74,0) 70%); pointer-events:none; z-index:1; }
.cbl-leaf-agents{ bottom:-40px; right:-30px; width:280px; }
.cbl-agents-inner{ max-width:1000px; margin:0 auto; position:relative; z-index:2; }

/* ---------- live badge ---------- */
.cbl-live-badge{ display:inline-flex; align-items:center; gap:8px; margin:2px auto 0; padding:7px 16px; border-radius:999px; background:rgba(244,240,230,.06); border:1px solid rgba(200,155,74,.28); font-size:11.5px; color:#c9d4cc; letter-spacing:.01em; }
.cbl-live-dot{ width:7px; height:7px; border-radius:50%; background:#6fcf97; box-shadow:0 0 0 0 rgba(111,207,151,.6); flex-shrink:0; animation:cblLivePulse 2s ease-out infinite; }
@keyframes cblLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(111,207,151,.55); } 70%{ box-shadow:0 0 0 8px rgba(111,207,151,0); } 100%{ box-shadow:0 0 0 0 rgba(111,207,151,0); } }

/* ---------- period tabs ---------- */
.cbl-period-tabs{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:30px 0 10px; position:relative; z-index:3; }
.cbl-period-tab{ font-family:'Plus Jakarta Sans',sans-serif; appearance:none; cursor:pointer; padding:10px 22px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.02em; background:rgba(244,240,230,.06); border:1px solid rgba(244,240,230,.16); color:#c9d4cc; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.cbl-period-tab:hover{ background:rgba(244,240,230,.12); color:#f3efe4; transform:translateY(-1px); }
.cbl-period-tab:focus-visible{ outline:2px solid var(--cbl-gold); outline-offset:2px; }
.cbl-period-tab.is-active{ background:linear-gradient(120deg,#e0ab52,var(--cbl-gold)); border-color:transparent; color:#1a2e25; box-shadow:0 8px 20px rgba(200,155,74,.35); }
.cbl-period-range{ text-align:center; font-size:12px; color:#8fa79b; margin:0 0 40px; letter-spacing:.02em; transition:opacity .25s ease; }

/* ---------- podium ---------- */
.cbl-podium{ display:flex; align-items:flex-end; justify-content:center; gap:22px; flex-wrap:wrap; perspective:1200px; }
.cbl-podium-item{
  text-align:center; position:relative; width:200px; padding:6px 6px 0;
  border-radius:20px; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease, opacity .4s ease;
}
.cbl-podium-item::before{ content:''; position:absolute; inset:14px 0 auto; top:38px; bottom:0; border-radius:18px; background:rgba(244,240,230,.03); border:1px solid rgba(244,240,230,.07); z-index:-1; opacity:0; transition:opacity .4s ease; }
.cbl-podium-item:hover::before{ opacity:1; }
.cbl-podium-item:hover{ box-shadow:0 20px 46px rgba(0,0,0,.28); }
.cbl-podium-item.is-first{ width:230px; }
.cbl-podium-item.is-updating{ opacity:.35; }
.cbl-podium-link{ position:absolute; inset:0; z-index:5; border-radius:20px; }
.cbl-podium-item.is-empty .cbl-podium-link{ pointer-events:none; }

.cbl-medal-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; margin-bottom:-18px; z-index:3; background:linear-gradient(135deg,#e6c488,var(--cbl-gold)); color:#1a2e25; box-shadow:0 8px 22px rgba(200,155,74,.4); }
.cbl-podium-item.rank-2 .cbl-medal-badge{ background:linear-gradient(135deg,#dfe5e1,#9aa7a0); color:#3a4640; box-shadow:0 8px 22px rgba(154,167,160,.35); }
.cbl-podium-item.rank-3 .cbl-medal-badge{ background:linear-gradient(135deg,#d3a582,#a9744f); color:#fff; box-shadow:0 8px 22px rgba(169,116,79,.35); }
.cbl-medal-num{ font-family:'Fraunces',serif; font-weight:700; font-size:20px; }
.cbl-crown{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:20px; height:20px; color:var(--cbl-gold); filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

.cbl-agent-avatar{ position:relative; width:84px; height:84px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,rgba(244,240,230,.14),rgba(244,240,230,.05)); border:2px solid rgba(200,155,74,.4); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:30px; font-weight:700; color:#f3efe4; overflow:hidden; }
.cbl-agent-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.cbl-podium-item.is-first .cbl-agent-avatar{ width:104px; height:104px; font-size:36px; border-color:var(--cbl-gold); box-shadow:0 0 0 4px rgba(200,155,74,.18), 0 16px 36px rgba(200,155,74,.3); animation:cblCrownGlow 3.2s ease-in-out infinite; }
.cbl-podium-item.is-empty .cbl-agent-avatar{ border-style:dashed; color:#9db3a4; }
@keyframes cblCrownGlow{ 0%,100%{ box-shadow:0 0 0 4px rgba(200,155,74,.18), 0 16px 36px rgba(200,155,74,.3); } 50%{ box-shadow:0 0 0 7px rgba(200,155,74,.28), 0 16px 44px rgba(200,155,74,.45); } }

.cbl-agent-name{ font-weight:700; font-size:15px; color:#f3efe4; transition:opacity .2s ease; }
.cbl-podium-item.is-first .cbl-agent-name{ font-size:17px; }
.cbl-podium-item.is-empty .cbl-agent-name{ color:#9db3a4; font-weight:600; }
.cbl-agent-city{ font-size:11.5px; color:#9db3a4; margin:3px 0 8px; transition:opacity .2s ease; }
.cbl-agent-total{ font-family:'Fraunces',serif; font-size:20px; font-weight:700; color:var(--cbl-gold); font-variant-numeric:tabular-nums; }
.cbl-podium-item.is-first .cbl-agent-total{ font-size:24px; }
.cbl-podium-item.rank-2 .cbl-agent-total{ color:#cfd6d1; }
.cbl-podium-item.rank-3 .cbl-agent-total{ color:#d3a582; }
.cbl-podium-item.is-empty .cbl-agent-total{ color:#6b8378; }

.cbl-agent-meta{ font-size:10.5px; color:#8fa79b; margin-top:5px; letter-spacing:.02em; }
.cbl-agent-progress{ height:4px; border-radius:99px; background:rgba(244,240,230,.1); margin:8px auto 0; max-width:120px; overflow:hidden; }
.cbl-agent-progress-bar{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cbl-sage),var(--cbl-gold)); width:0%; transition:width 1s cubic-bezier(.16,.8,.28,1); }

.cbl-podium-bar{ margin-top:18px; height:70px; border-radius:14px 14px 0 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-bottom:none; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:rgba(244,240,230,.35); position:relative; overflow:hidden; }
.cbl-podium-bar::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent); transform:translateX(-100%); }
.cbl-podium-item:hover .cbl-podium-bar::after{ animation:cblBarSheen 1.1s ease; }
@keyframes cblBarSheen{ to{ transform:translateX(100%); } }
.cbl-podium-item.is-first .cbl-podium-bar{ height:100px; background:rgba(200,155,74,.14); border-color:rgba(200,155,74,.4); color:var(--cbl-gold); font-size:30px; }
.cbl-podium-item.rank-2 .cbl-podium-bar{ height:80px; }
.cbl-podium-item.is-empty .cbl-podium-bar{ color:rgba(244,240,230,.15); }
.cbl-agents-cta{ text-align:center; margin-top:46px; }

/* ================================ REWARD ================================= */
.cbl-reward{ max-width:1180px; margin:0 auto; padding:100px 24px 70px; }
.cbl-reward-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:980px; margin:0 auto; }
.cbl-reward-card{ background:#fff; border-radius:22px; padding:34px 26px 28px; position:relative; box-shadow:0 18px 48px rgba(14,43,15,.09); border:1px solid rgba(14,43,15,.06); transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease; }
.cbl-reward-card:hover{ transform:translateY(-5px); box-shadow:0 28px 60px rgba(14,43,15,.14); }
.cbl-reward-card.is-first{ transform:translateY(-10px); border-color:rgba(200,155,74,.45); box-shadow:0 24px 56px rgba(200,155,74,.22); }
.cbl-reward-card.is-first:hover{ transform:translateY(-15px); }
.cbl-reward-ribbon{ position:absolute; top:-12px; left:26px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px; color:#fff; }
.cbl-reward-card.is-gold .cbl-reward-ribbon{ background:linear-gradient(135deg,#e6c488,var(--cbl-gold)); color:#1a2e25; }
.cbl-reward-card.is-silver .cbl-reward-ribbon{ background:linear-gradient(135deg,#c9d4cc,#8a978e); }
.cbl-reward-card.is-bronze .cbl-reward-ribbon{ background:linear-gradient(135deg,#c4906a,#8a5a3a); }
.cbl-reward-amount{ font-family:'Fraunces',serif; font-size:38px; font-weight:700; margin:10px 0 4px; line-height:1.1; }
.cbl-reward-card.is-gold .cbl-reward-amount{ color:var(--cbl-gold); }
.cbl-reward-card.is-silver .cbl-reward-amount{ color:#8a978e; }
.cbl-reward-card.is-bronze .cbl-reward-amount{ color:#a9744f; }
.cbl-reward-sub{ font-size:12.5px; color:var(--cbl-muted); margin-bottom:8px; }
.cbl-reward-syarat{ font-size:12px; font-weight:600; color:#8a5a2e; margin-bottom:18px; }
.cbl-reward-terms{ list-style:none; padding:16px 0 0; margin:16px 0 0; border-top:1px solid rgba(14,43,15,.08); font-size:14.5px; font-weight:500; line-height:1.85; color:#3a4a40; text-align:left; }
.cbl-reward-terms li{ position:relative; padding-left:22px; margin-bottom:6px; }
.cbl-reward-terms li:last-child{ margin-bottom:0; }
.cbl-reward-terms li::before{ content:"\2713"; position:absolute; left:0; top:1px; color:var(--cbl-gold); font-weight:700; }
.cbl-reward-meta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.cbl-reward-block-next{ margin-top:64px; padding-top:56px; border-top:1px solid rgba(14,43,15,.08); }
.cbl-reward-block-name{ text-align:center; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; color:var(--cbl-gold,#c89b4a); margin:0 0 24px; }
.cbl-reward-block-desc{ text-align:center; max-width:640px; margin:0 auto 34px; font-size:14.5px; line-height:1.75; color:var(--cbl-muted); }
.cbl-reward-block-name + .cbl-reward-block-desc{ margin-top:-12px; }

/* ============================ PROMO / EVENT ============================== */
.cbl-promoevent{ max-width:1180px; margin:0 auto; padding:10px 24px 90px; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; }
.cbl-pe-card{ border-radius:24px; overflow:hidden; position:relative; min-height:340px; display:flex; align-items:flex-end; box-shadow:0 24px 56px rgba(14,43,15,.15); }
.cbl-pe-card img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,.8,.28,1); }
.cbl-pe-card:hover img{ transform:scale(1.06); }
.cbl-pe-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(14,43,15,.15) 0%, rgba(14,43,15,.88) 100%); }
.cbl-pe-body{ position:relative; padding:30px; color:#f3efe4; width:100%; }
.cbl-pe-tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.cbl-pe-tag-promo{ background:#ee4d2d; color:#fff; }
.cbl-pe-tag-event{ background:rgba(200,155,74,.22); color:#e8d5a8; border:1px solid rgba(200,155,74,.45); }
.cbl-pe-title{ font-family:'Fraunces',serif; font-size:28px; font-weight:700; margin:0 0 8px; line-height:1.2; }
.cbl-pe-desc{ font-size:13.5px; color:#c9d4cc; margin:0 0 18px; line-height:1.65; }
.cbl-pe-reward{ font-size:12.5px; color:var(--cbl-gold); margin-bottom:16px; font-weight:600; }
.cbl-pe-card-dark{ background:linear-gradient(160deg,var(--cbl-herbal),var(--cbl-forest)); }
.cbl-leaf-event{ top:-20px; right:-20px; width:180px; opacity:.6; }
.cbl-pe-empty{ position:relative; padding:30px; color:var(--cbl-muted); background:#fff; width:100%; text-align:center; align-self:center; }
.cbl-pe-empty-light{ color:#9db3a4; background:transparent; }

/* ============================ CLOSING CTA ================================ */
.cbl-closing{ position:relative; overflow:hidden; padding:86px 24px; background:linear-gradient(160deg,var(--cbl-herbal),var(--cbl-forest)); color:#e8efe9; text-align:center; }
.cbl-closing::before{ content:''; position:absolute; width:55%; aspect-ratio:1; border-radius:50%; left:50%; top:-40%; transform:translateX(-50%); background:radial-gradient(circle, rgba(200,155,74,.16) 0%, rgba(200,155,74,0) 70%); pointer-events:none; }
.cbl-closing-inner{ max-width:640px; margin:0 auto; position:relative; z-index:2; }
.cbl-closing-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* ============================== RESPONSIVE =============================== */
@media(max-width:900px){
  .cbl-meet-grid, .cbl-story-grid{ grid-template-columns:1fr; gap:40px; }
  .cbl-meet-copy{ order:2; }
  .cbl-podium-item, .cbl-podium-item.is-first{ width:160px; }
  .cbl-podium-item.is-first{ order:-1; }
  .cbl-podium{ gap:14px; }
}
@media(max-width:640px){
  .cbl-hero{ padding:104px 18px 30px; }
  .cbl-h1{ font-size:clamp(26px,7.4vw,38px); line-height:1.18; }
  .cbl-cta{ flex-direction:column; width:100%; align-items:stretch; }
  .cbl-cta .cbl-btn{ justify-content:center; }
  .cbl-hero-stats{ gap:8px; }
  .cbl-hero-stats .st div:first-child{ font-size:21px; }
  .cbl-meet, .cbl-story, .cbl-products, .cbl-testimonials, .cbl-agents, .cbl-reward, .cbl-closing{ padding-left:18px; padding-right:18px; }
  .cbl-podium{ flex-direction:column; align-items:center; }
  .cbl-podium-item, .cbl-podium-item.is-first{ width:100%; max-width:280px; }
  /* Peringkat #1 tetap tampil paling atas saat podium jadi satu kolom di HP
     (dulu di-reset ke order:0 di sini, jadi menimpa order:-1 dari breakpoint
     tablet di atas — akibatnya Juara 1 malah nyempil di tengah antara
     Peringkat #2 & #3, bukan tampil paling menonjol duluan). */
  .cbl-podium-item.is-first{ order:-1; }
  .cbl-podium-bar{ height:50px !important; }
  .cbl-period-tabs{ gap:6px; }
  .cbl-period-tab{ padding:9px 16px; font-size:11.5px; }
  .cbl-live-badge{ font-size:10.5px; text-align:center; }
}

/* ========================== REDUCED MOTION =============================== */
@media (prefers-reduced-motion: reduce){
  #public-home .cbl-reveal, #public-home .cbl-reveal-scale{ opacity:1; transform:none; transition:none; }
  .cbl-product-media img, .cbl-pe-card img, .cbl-btn, .cbl-product-card, .cbl-testi-card, .cbl-reward-card, .cbl-podium-item{ transition:none; }
  .cbl-particles{ display:none; }
  .cbl-live-dot, .cbl-podium-item.is-first .cbl-agent-avatar{ animation:none; }
  .cbl-podium-item{ transform:none !important; }
}

/* ======================= POWER OF PROPOLIS — centered hero splash (Option B) =======================
   Section baru pengganti .cbl-story. Semua class baru (.cbl-power-*), CSS lama TIDAK diubah. */
#public-home .cbl-power{
  position:relative; overflow:hidden; padding:110px 24px 100px;
  background:linear-gradient(160deg, var(--cbl-herbal) 0%, var(--cbl-forest) 55%, #0a1f0b 100%);
  color:#eef4ee;
}
#public-home .cbl-power-rays{
  position:absolute; left:50%; top:40%; width:920px; height:920px; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(200,155,74,.10) 0deg, transparent 30deg, rgba(200,155,74,.08) 60deg, transparent 90deg, rgba(200,155,74,.10) 120deg, transparent 150deg, rgba(200,155,74,.08) 180deg, transparent 210deg, rgba(200,155,74,.10) 240deg, transparent 270deg, rgba(200,155,74,.08) 300deg, transparent 330deg, rgba(200,155,74,.10) 360deg);
  -webkit-mask:radial-gradient(circle, #000 0%, transparent 65%);
  mask:radial-gradient(circle, #000 0%, transparent 65%);
  animation:cblPowerRays 30s linear infinite; pointer-events:none; z-index:0;
}
@keyframes cblPowerRays{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
#public-home .cbl-power-particles{ position:absolute; inset:0; pointer-events:none; z-index:1; }
#public-home .cbl-power-particles span{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #f0d29e 0%, rgba(200,155,74,0) 70%);
  animation:cblPowerFloat 7s ease-in-out infinite; opacity:.6;
}
#public-home .cbl-power-particles span:nth-child(1){ top:18%; left:14%; animation-delay:0s; }
#public-home .cbl-power-particles span:nth-child(2){ top:28%; right:16%; animation-delay:1.2s; width:4px; height:4px; }
#public-home .cbl-power-particles span:nth-child(3){ bottom:30%; left:18%; animation-delay:2.4s; width:8px; height:8px; }
#public-home .cbl-power-particles span:nth-child(4){ bottom:36%; right:14%; animation-delay:3.6s; }
#public-home .cbl-power-particles span:nth-child(5){ top:56%; left:7%; animation-delay:1.8s; width:5px; height:5px; }
#public-home .cbl-power-particles span:nth-child(6){ top:62%; right:7%; animation-delay:4.2s; width:4px; height:4px; }
@keyframes cblPowerFloat{ 0%,100%{ transform:translateY(0) scale(1); opacity:.35; } 50%{ transform:translateY(-22px) scale(1.35); opacity:.9; } }
#public-home .cbl-power-inner{ max-width:1080px; margin:0 auto; position:relative; z-index:2; text-align:center; }
#public-home .cbl-power-head{ max-width:680px; margin:0 auto; }
#public-home .cbl-power-title{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(34px,5vw,58px);
  line-height:1.08; letter-spacing:-.01em; color:var(--cbl-ivory); margin:0 0 18px;
}
#public-home .cbl-power-title em{ font-style:italic; color:var(--cbl-gold); font-weight:600; }
#public-home .cbl-power-lead{ font-size:15px; line-height:1.85; color:#c3d1c7; max-width:600px; margin:0 auto; }
#public-home .cbl-power-visual{
  position:relative; width:min(340px,72vw); height:min(340px,72vw); margin:48px auto 42px;
  display:flex; align-items:center; justify-content:center;
}
#public-home .cbl-power-splash{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#public-home .cbl-power-splash-glow{
  position:absolute; inset:10%; border-radius:50%;
  background:radial-gradient(circle, rgba(200,155,74,.38) 0%, rgba(200,155,74,.10) 45%, transparent 70%);
  filter:blur(10px); animation:cblPowerPulse 4.5s ease-in-out infinite;
}
@keyframes cblPowerPulse{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.12); opacity:1; } }
#public-home .cbl-power-splash-ring{
  position:absolute; inset:5%; border-radius:50%;
  border:2px solid transparent;
  background:
    linear-gradient(rgba(14,43,15,0), rgba(14,43,15,0)) padding-box,
    conic-gradient(from 0deg, rgba(200,155,74,0), #f0d29e, rgba(200,155,74,.95), #D99A35, rgba(200,155,74,0)) border-box;
  animation:cblPowerRing 12s linear infinite;
  box-shadow:0 0 60px rgba(200,155,74,.28), inset 0 0 40px rgba(200,155,74,.12);
}
@keyframes cblPowerRing{ to{ transform:rotate(360deg); } }
#public-home .cbl-power-drop{
  position:absolute; border-radius:50% 50% 50% 0; transform:rotate(45deg);
  background:linear-gradient(135deg,#f0d29e,#D99A35);
  box-shadow:0 4px 14px rgba(217,154,53,.55);
}
#public-home .cbl-power-drop-1{ width:18px; height:18px; top:7%; left:20%; animation:cblPowerFloat 5s ease-in-out infinite; }
#public-home .cbl-power-drop-2{ width:12px; height:12px; bottom:13%; right:17%; animation:cblPowerFloat 6s ease-in-out infinite 1s; }
#public-home .cbl-power-drop-3{ width:10px; height:10px; top:32%; right:7%; animation:cblPowerFloat 5.5s ease-in-out infinite 2s; }
#public-home .cbl-power-product{
  position:relative; z-index:2; max-height:84%; width:auto; max-width:68%;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(200,155,74,.28));
  animation:cblPowerFloat 6s ease-in-out infinite;
}
#public-home .cbl-power-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:960px; margin:0 auto;
}
#public-home .cbl-power-card{
  text-align:center; padding:28px 22px 26px; border-radius:18px;
  background:linear-gradient(160deg, rgba(244,240,230,.09) 0%, rgba(244,240,230,.03) 70%);
  border:1px solid rgba(244,240,230,.16);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.16,.8,.28,1), border-color .4s ease, box-shadow .4s ease;
}
#public-home .cbl-power-card:hover{ transform:translateY(-6px); border-color:rgba(200,155,74,.5); box-shadow:0 28px 56px rgba(0,0,0,.38), inset 0 0 0 1px rgba(200,155,74,.18); }
#public-home .cbl-power-card-icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--cbl-gold);
  background:linear-gradient(135deg, rgba(200,155,74,.35), rgba(200,155,74,.10));
  box-shadow:inset 0 0 0 1px rgba(200,155,74,.5), 0 8px 20px rgba(200,155,74,.2);
}
#public-home .cbl-power-card-icon svg{ width:24px; height:24px; }
#public-home .cbl-power-card-title{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--cbl-ivory); margin:0 0 8px; }
#public-home .cbl-power-card-desc{ font-size:12.5px; line-height:1.7; color:#a9bcb0; margin:0; }
#public-home .cbl-power-sign{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:46px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--cbl-gold); font-weight:700;
}
@media(max-width:860px){
  #public-home .cbl-power-cards{ grid-template-columns:1fr; max-width:420px; }
  #public-home .cbl-power{ padding:80px 20px 70px; }
  #public-home .cbl-power-visual{ margin:36px auto 32px; }
}
@media(prefers-reduced-motion: reduce){
  #public-home .cbl-power-rays, #public-home .cbl-power-splash-ring, #public-home .cbl-power-splash-glow,
  #public-home .cbl-power-product, #public-home .cbl-power-particles span, #public-home .cbl-power-drop{ animation:none; }
}

/* — override: produk pakai asset gambar golden splash (splash sudah baked-in di gambar) — */
#public-home .cbl-power-splash{ display:none; }
#public-home .cbl-power-visual{ width:min(440px,88vw); height:auto; margin:40px auto 36px; }
#public-home .cbl-power-product{
  max-width:100%; width:100%; height:auto; max-height:none; border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 60px rgba(200,155,74,.22);
  filter:none; animation:cblPowerFloat 6s ease-in-out infinite;
}

/* ======================= MANFAAT — BENTO GRID (Opsi C) =======================
   Layout bento asimetris: 1 kartu featured besar (dark, span 2x2) + 5 kartu kecil.
   Interaktivitas (klik / auto-rotate) di-handle home-premium.js. */
/* ==== BENTO v4 — Featured persegi panjang kiri + Product kanan + Small Cards kecil tanpa ikon ==== */
#public-home .cbl-bento{ max-width:1200px; margin:0 auto; padding:100px 24px 80px; position:relative; }
#public-home .cbl-bento::before{
  content:''; position:absolute; top:60px; right:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,155,74,.10), transparent 70%); pointer-events:none; z-index:0;
}
#public-home .cbl-bento-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:auto; gap:16px; margin-top:44px; position:relative; z-index:1;
}
#public-home .cbl-bento-card{
  position:relative; border-radius:18px; padding:18px 18px; text-align:left;
  background:#fff; border:1px solid rgba(14,43,15,.07);
  box-shadow:0 8px 24px rgba(14,43,15,.05);
  transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease, border-color .3s ease;
  cursor:pointer; overflow:hidden; font-family:inherit;
}
#public-home button.cbl-bento-card{ appearance:none; -webkit-appearance:none; }
#public-home .cbl-bento-card::before{
  content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(135deg, var(--accent), transparent 130%); opacity:0; transition:opacity .4s ease;
}
#public-home .cbl-bento-small:hover{ transform:translateY(-4px) scale(1.01); border-color:var(--accent); box-shadow:0 14px 32px rgba(14,43,15,.12); }
#public-home .cbl-bento-small:hover::before{ opacity:.06; }

/* Kartu featured besar — kiri atas, LEBIH PANJANG (span 4 kolom) */
#public-home .cbl-bento-featured{
  grid-column:span 4; cursor:default;
  background:linear-gradient(155deg, var(--cbl-herbal) 0%, var(--cbl-forest) 100%);
  color:#eef4ee; border:none; min-height:240px;
  box-shadow:0 24px 50px -16px rgba(14,43,15,.45), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column; justify-content:center; gap:10px; padding:28px 30px;
  border-radius:22px; position:relative;
}
#public-home .cbl-bento-featured::after{
  content:''; position:absolute; right:-10%; bottom:-18%; width:45%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
  filter:blur(16px); pointer-events:none; z-index:0;
}
#public-home .cbl-bento-featured::before{
  content:''; position:absolute; top:-25%; left:-8%; width:38%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(200,155,74,.18), transparent 70%);
  filter:blur(12px); pointer-events:none; z-index:0; opacity:1;
}
#public-home .cbl-bento-num{
  font-family:'Fraunces',serif; font-size:11px; font-weight:700; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, #fff);
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
#public-home .cbl-bento-featured .cbl-bento-num{ background:rgba(244,240,230,.12); color:#f0d29e; width:32px; height:32px; border-radius:10px; font-size:12px; }
#public-home .cbl-bento-title-sm{ font-family:'Fraunces',serif; font-size:13.5px; font-weight:600; color:var(--cbl-ink); margin:0; line-height:1.35; position:relative; z-index:1; }
#public-home .cbl-bento-title{ font-family:'Fraunces',serif; font-size:clamp(22px,2.4vw,30px); font-weight:600; color:var(--cbl-ivory); margin:0; position:relative; z-index:1; }
#public-home .cbl-bento-desc{ font-size:13px; line-height:1.7; color:#c3d1c7; margin:0; max-width:100%; position:relative; z-index:1; }
#public-home .cbl-bento-progress{ position:absolute; left:0; bottom:0; height:3px; width:0%; background:linear-gradient(90deg, var(--cbl-gold), #f0d29e); border-radius:0 2px 2px 0; z-index:2; }
#public-home .cbl-bento-progress.is-anim{ animation:cblBentoProgress 5s linear forwards; }
@keyframes cblBentoProgress{ from{ width:0%; } to{ width:100%; } }

/* ===== Product Visual — PALING KANAN atas, LEBIH KECIL (span 2 kolom) ===== */
#public-home .cbl-bento-product-visual{
  grid-column:span 2; position:relative; border-radius:22px; overflow:hidden;
  background:linear-gradient(155deg, #faf7ef 0%, #f0ead8 50%, #e8dfc5 100%);
  border:1px solid rgba(200,155,74,.18);
  box-shadow:0 16px 40px -16px rgba(200,155,74,.22), inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; min-height:240px;
}
#public-home .cbl-bento-product-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:65%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(200,155,74,.32) 0%, rgba(200,155,74,.1) 40%, transparent 70%);
  filter:blur(8px); pointer-events:none;
}
#public-home .cbl-bento-product-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72%; aspect-ratio:1; border-radius:50%;
  border:2px dashed rgba(200,155,74,.22);
  animation:cblProductRingSpin 25s linear infinite; pointer-events:none;
}
#public-home .cbl-bento-product-ring::before{
  content:''; position:absolute; inset:10px; border-radius:50%;
  border:1px solid rgba(200,155,74,.12);
}
@keyframes cblProductRingSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
#public-home .cbl-bento-product-img{
  position:relative; z-index:2; max-width:82%; max-height:82%;
  object-fit:contain; filter:drop-shadow(0 14px 28px rgba(31,95,33,.25));
  transition:transform .6s cubic-bezier(.16,.8,.28,1);
}
#public-home .cbl-bento-product-visual:hover .cbl-bento-product-img{ transform:scale(1.04) rotate(-1deg); }
#public-home .cbl-bento-product-badge{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(200,155,74,.28); box-shadow:0 6px 18px rgba(14,43,15,.08);
  font-size:11px; color:#3a2e12; white-space:nowrap;
}
#public-home .cbl-bento-product-badge-dot{
  width:6px; height:6px; border-radius:50%; background:var(--cbl-gold);
  box-shadow:0 0 0 2px rgba(200,155,74,.18);
}

/* ===== Kartu kecil — LEBIH KECIL, TANPA IKON, span 2 kolom (3 per baris) ===== */
#public-home .cbl-bento-small{
  grid-column:span 2; border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:row; align-items:center; gap:10px;
  box-shadow:0 6px 20px rgba(14,43,15,.05), 0 0 0 1px rgba(14,43,15,.04);
  min-height:0;
}
#public-home .cbl-bento-small:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(14,43,15,.12), 0 0 0 1px var(--accent);
}
#public-home .cbl-bento-small .cbl-bento-num{
  flex-shrink:0; margin:0;
}

/* ===== Responsive ===== */
@media(max-width:860px){
  #public-home .cbl-bento-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
  #public-home .cbl-bento-featured{ grid-column:span 4; min-height:220px; padding:24px 26px; }
  #public-home .cbl-bento-product-visual{ grid-column:span 4; min-height:240px; }
  #public-home .cbl-bento-small{ grid-column:span 2; }
}
@media(max-width:560px){
  #public-home .cbl-bento-grid{ grid-template-columns:1fr; gap:12px; }
  #public-home .cbl-bento-featured{ grid-column:auto; min-height:200px; padding:22px 20px; }
  #public-home .cbl-bento-product-visual{ grid-column:auto; min-height:220px; }
  #public-home .cbl-bento-small{ grid-column:auto; padding:12px 14px; }
  #public-home .cbl-bento-product-img{ max-width:55%; }
  #public-home .cbl-bento-title-sm{ font-size:13px; }
}
@media(prefers-reduced-motion: reduce){
  #public-home .cbl-bento-progress.is-anim{ animation:none; width:100%; }
  #public-home .cbl-bento-product-ring{ animation:none; }
  #public-home .cbl-bento-product-visual:hover .cbl-bento-product-img{ transform:none; }
}


/* ============================================================
   THE POWER OF PROPOLIS — SPLIT GLASS MODERN (Opsi 3)
   Override layout: produk di kiri, konten & benefit di kanan.
   Aktif HANYA jika section punya class .cbl-power--split.
   Background hijau SAMA dengan website asli (herbal -> forest).
   Gambar produk STATIS (tanpa animasi float/zoom/drift).
   CSS lama TIDAK diubah — ini tambahan override di akhir file.
   ============================================================ */
#public-home .cbl-power--split{
  background:
    radial-gradient(760px 440px at 50% 32%, rgba(200,155,74,.10), transparent 62%),
    linear-gradient(160deg, var(--cbl-herbal) 0%, var(--cbl-forest) 55%, #0a1f0b 100%);
}
/* satu orb emas subtle saja (tidak kontras), orb teal dihilangkan */
#public-home .cbl-power--split::before,
#public-home .cbl-power--split::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(60px);
}
#public-home .cbl-power--split::before{ width:320px; height:320px; top:-80px; right:8%; background:rgba(200,155,74,.22); opacity:.5; animation:cblPowerFloat 8s ease-in-out infinite; }
#public-home .cbl-power--split::after{ display:none; }

/* two-column: product left, content right */
#public-home .cbl-power--split .cbl-power-inner{
  max-width:1180px; text-align:left;
  display:flex; align-items:center; gap:56px; flex-wrap:wrap;
}
#public-home .cbl-power--split .cbl-power-col--media{ flex:1 1 360px; max-width:520px; position:relative; z-index:2; }
#public-home .cbl-power--split .cbl-power-col--content{ flex:1 1 420px; min-width:0; position:relative; z-index:2; }

/* glass frame around product image — gambar DIAM (no float/zoom) */
#public-home .cbl-power--split .cbl-power-visual{
  width:100%; height:auto; margin:0; padding:16px; border-radius:28px;
  background:linear-gradient(150deg, rgba(244,240,230,.12), rgba(244,240,230,.03));
  border:1px solid rgba(244,240,230,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.42), 0 0 60px rgba(200,155,74,.14), inset 0 1px 0 rgba(244,240,230,.2);
  transform:none !important; animation:none !important;
}
#public-home .cbl-power--split .cbl-power-product{
  position:relative; z-index:2; display:block; width:100%; max-width:100%; height:auto; max-height:none; border-radius:20px;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));
  animation:none !important; transform:none !important;
}
#public-home .cbl-power--split .cbl-power-splash{ opacity:.5; }

/* content column — left aligned */
#public-home .cbl-power--split .cbl-power-head{ max-width:none; margin:0 0 28px; text-align:left; }
#public-home .cbl-power--split .cbl-power-title{ text-align:left; }
#public-home .cbl-power--split .cbl-kicker-center{ text-align:left; }
#public-home .cbl-power--split .cbl-power-lead{ margin:0; max-width:none; }

/* benefit cards: stacked vertical, icon + text horizontal, glass style */
#public-home .cbl-power--split .cbl-power-cards{
  display:grid; grid-template-columns:1fr; gap:14px; max-width:none; margin:0;
}
#public-home .cbl-power--split .cbl-power-card{
  text-align:left; display:flex; align-items:flex-start; gap:16px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(150deg, rgba(244,240,230,.10), rgba(244,240,230,.03));
  border:1px solid rgba(244,240,230,.16);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#public-home .cbl-power--split .cbl-power-card:hover{
  transform:translateX(6px) translateY(-2px);
  border-color:rgba(200,155,74,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 0 0 1px rgba(200,155,74,.2);
}
#public-home .cbl-power--split .cbl-power-card-icon{ margin:0; flex-shrink:0; }
#public-home .cbl-power--split .cbl-power-card-body{ min-width:0; }
#public-home .cbl-power--split .cbl-power-card-title{ margin:0 0 4px; }
#public-home .cbl-power--split .cbl-power-sign{ justify-content:flex-start; margin-top:30px; }

/* responsive: stack on tablet / mobile */
@media(max-width:900px){
  #public-home .cbl-power--split .cbl-power-inner{ gap:36px; }
  #public-home .cbl-power--split .cbl-power-col--media{ max-width:420px; margin:0 auto; width:100%; }
}
@media(max-width:560px){
  #public-home .cbl-power--split .cbl-power-visual{ padding:12px; border-radius:22px; }
  #public-home .cbl-power--split .cbl-power-product{ border-radius:14px; }
  #public-home .cbl-power--split .cbl-power-card{ padding:16px; gap:12px; }
}

/* ======================= TESTIMONI — 3 kolom auto-scroll (.cbl-tmq-*) =======================
   Section testimoni: 3 kolom kartu yang auto-scroll vertikal (looping), kecepatan beda tiap
   kolom. Data dari tabel `testimonials` (admin panel), dibagi round-robin ke 3 kolom di PHP.
   Class lama (.cbl-testi-grid, .cbl-testi-card, dst.) TIDAK dihapus supaya tidak memengaruhi
   halaman lain yang mungkin masih memakainya. */
#public-home .cbl-testi-dark{
  position:relative; overflow:hidden; padding:110px 24px 100px;
  max-width:none; width:100%; margin:0;
  background:linear-gradient(160deg, var(--cbl-herbal) 0%, var(--cbl-forest) 58%, #0a1f0b 100%);
}
#public-home .cbl-testi-glow{
  position:absolute; top:-8%; left:50%; transform:translateX(-50%); width:70%; max-width:640px; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, rgba(200,155,74,.16) 0%, rgba(200,155,74,0) 70%);
  pointer-events:none; z-index:1;
}
#public-home .cbl-testi-dark .cbl-leaf-agents{ bottom:-40px; right:-30px; width:280px; }
#public-home .cbl-testi-inner{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }

/* ---- Row of columns, faded top/bottom edges ---- */
#public-home .cbl-tmq-row{
  display:flex; justify-content:center; gap:22px; margin-top:48px;
  max-height:640px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
#public-home .cbl-tmq-col{ flex:1 1 0; max-width:320px; overflow:hidden; }
#public-home .cbl-tmq-col-2{ display:none; }
#public-home .cbl-tmq-col-3{ display:none; }
@media(min-width:900px){ #public-home .cbl-tmq-col-2{ display:block; } }
@media(min-width:1180px){ #public-home .cbl-tmq-col-3{ display:block; } }

#public-home .cbl-tmq-track{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px;
  animation:cblTmqScroll var(--tmq-dur,28s) linear infinite;
}
#public-home .cbl-tmq-col:hover .cbl-tmq-track{ animation-play-state:paused; }
@keyframes cblTmqScroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

/* ---- Card ---- */
#public-home .cbl-tmq-card{
  padding:28px 24px; border-radius:20px;
  background:linear-gradient(155deg, rgba(24,42,25,.9) 0%, rgba(8,18,9,.94) 100%);
  border:1px solid rgba(244,240,230,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
}
#public-home .cbl-tmq-card:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 28px 56px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  border-color:rgba(200,155,74,.35);
}
#public-home .cbl-tmq-msg{ font-size:13.5px; line-height:1.7; color:#dce6dd; margin:0; }
#public-home .cbl-tmq-person{ display:flex; align-items:center; gap:12px; margin-top:20px; }
#public-home .cbl-tmq-avatar{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--cbl-sage),var(--cbl-herbal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px;
  box-shadow:0 0 0 2px rgba(200,155,74,.3);
}
#public-home .cbl-tmq-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#public-home .cbl-tmq-name{ font-size:13.5px; font-weight:700; color:#f6f3ea; }
#public-home .cbl-tmq-role{ font-size:11.5px; color:#93a99a; margin-top:1px; }

@media(max-width:560px){
  #public-home .cbl-tmq-row{ max-height:560px; }
  #public-home .cbl-tmq-card{ padding:22px 20px; }
}
@media(prefers-reduced-motion: reduce){
  #public-home .cbl-tmq-track{ animation:none; }
}