/* =========================================================================
   PT CAHAYA KERTO RAHARJO — GO REFFIL
   Liquid-glass / sunny-yellow design system
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------- */
:root{
  /* -- Brand colour core -- */
  --sun-core:   #FFC531;   /* primary bright yellow                */
  --sun-soft:   #FFDB70;   /* lighter yellow, gradient highlight    */
  --sun-deep:   #F5A300;   /* deeper amber-yellow, gradient shadow  */
  --amber:      #C97F0E;   /* bronze-gold, links / mid accents      */
  --amber-ink:  #8A5A12;   /* darker bronze, small text accents     */
  --espresso:   #2B1D10;   /* warm near-black, primary text         */
  --espresso-2: #4A3520;   /* softer warm brown, secondary text     */
  --cream:      #FFF6E1;   /* warm off-white, text on dark panels   */
  --leaf:       #2E7D4F;   /* eco accent, used sparingly            */

  /* -- Glass material -- */
  --glass-fill:     rgba(255,255,255,.40);
  --glass-fill-hi:  rgba(255,255,255,.60);
  --glass-fill-lo:  rgba(255,255,255,.22);
  --glass-edge:     rgba(255,255,255,.75);
  --glass-edge-soft:rgba(255,255,255,.35);
  --glass-dark:     rgba(43,29,16,.55);
  --glass-dark-hi:  rgba(43,29,16,.72);
  --blur-lg: blur(28px);
  --blur-md: blur(18px);
  --blur-sm: blur(10px);

  /* -- Shadows (warm-tinted, never neutral grey) -- */
  --shadow-lift:  0 24px 60px -24px rgba(120,72,0,.45);
  --shadow-soft:  0 14px 34px -16px rgba(120,72,0,.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 12px rgba(120,72,0,.08);
  --shadow-dark:  0 20px 50px -18px rgba(0,0,0,.55);

  /* -- Radius scale -- */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-full: 999px;

  /* -- Type -- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.85rem;

  /* -- Spacing -- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  --container-w: 1200px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 110px; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--espresso);
  background: var(--sun-core);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  color: var(--espresso);
  line-height: 1.14;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
p{ margin: 0 0 1em; color: var(--espresso-2); }
p:last-child{ margin-bottom: 0; }
strong{ color: var(--espresso); }

:focus-visible{
  outline: 3px solid var(--espresso);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

section{ position: relative; padding: var(--sp-8) 0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   3. BACKDROP — sunny gradient field + drifting liquid blobs
   ----------------------------------------------------------------------- */
.sun-field{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% -10%, var(--sun-soft) 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 0%, #FFE9A8 0%, transparent 45%),
    linear-gradient(190deg, var(--sun-core) 0%, var(--sun-deep) 100%);
}
.blob-layer{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  will-change: transform;
}
.blob-1{ width: 46vw; height: 46vw; background: #FFEFC2; top: -14vw; left: -12vw; animation: drift1 26s ease-in-out infinite; }
.blob-2{ width: 34vw; height: 34vw; background: #FFB347; top: 30vh; right: -14vw; animation: drift2 32s ease-in-out infinite; opacity:.4;}
.blob-3{ width: 30vw; height: 30vw; background: #FFFDF4; bottom: -10vw; left: 18vw; animation: drift1 30s ease-in-out infinite reverse; opacity:.5;}
.blob-4{ width: 22vw; height: 22vw; background: #CDEFCF; bottom: 6vh; right: 8vw; animation: drift2 24s ease-in-out infinite; opacity:.3; }
@keyframes drift1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(3vw,4vw) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-4vw,3vw) scale(.94);} }
@media (prefers-reduced-motion: reduce){ .blob{ animation: none; } }

/* -------------------------------------------------------------------------
   4. GLASS PRIMITIVES
   ----------------------------------------------------------------------- */
.glass{
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  border-radius: var(--r-lg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .glass{
    backdrop-filter: var(--blur-lg) saturate(150%);
    -webkit-backdrop-filter: var(--blur-lg) saturate(150%);
    background: var(--glass-fill-lo);
  }
}

.glass-panel{ padding: var(--sp-7); }
.glass-dark{
  background: var(--glass-dark-hi);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--cream);
  box-shadow: var(--shadow-dark);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .glass-dark{ backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); background: rgba(43,29,16,.62); }
}
.glass-dark h1, .glass-dark h2, .glass-dark h3, .glass-dark h4{ color: var(--cream); }
.glass-dark p{ color: rgba(255,246,225,.78); }

.glass-pill{
  border-radius: var(--r-full);
  background: var(--glass-fill-hi);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-soft);
}
@supports (backdrop-filter: blur(1px)){
  .glass-pill{ backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); background: rgba(255,255,255,.38); }
}

/* -------------------------------------------------------------------------
   5. TYPOGRAPHY HELPERS
   ----------------------------------------------------------------------- */
.section-head{ max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ font-size: var(--fs-3xl); }
.section-head p{ font-size: var(--fs-md); }

.lede{ font-family: var(--font-display); font-size: var(--fs-lg); font-style: italic; color: var(--espresso-2); font-weight: 400; }

/* -------------------------------------------------------------------------
   6. BUTTONS
   ----------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .9em 1.7em;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(155deg, #FFDE85, #E8940B 78%);
  color: var(--espresso);
  box-shadow: 0 14px 28px -12px rgba(154,92,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{ box-shadow: 0 18px 34px -12px rgba(154,92,0,.65), inset 0 1px 0 rgba(255,255,255,.7); }

.btn-ghost{
  background: var(--glass-fill-hi);
  color: var(--espresso);
  border-color: var(--glass-edge);
}
@supports (backdrop-filter: blur(1px)){ .btn-ghost{ backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);} }
.btn-ghost:hover{ background: #fff; }

.btn-dark{
  background: var(--espresso);
  color: var(--cream);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.55);
}
.btn-dark:hover{ background: #3a2716; }

.btn-block{ width: 100%; }
.btn-sm{ padding: .7em 1.3em; font-size: var(--fs-xs); }

/* -------------------------------------------------------------------------
   7. HEADER / NAV — floating glass pill
   ----------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 18px; left: 0; right: 0;
  z-index: 200;
  padding: 0 20px;
}
.nav-shell{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 12px 10px 20px;
  transition: box-shadow .3s var(--ease);
}
.brand{ display: flex; align-items: center; gap: .65rem; flex: none; }
.brand img{ height: 34px; width: auto; }
.brand-sep{ width: 1px; height: 26px; background: rgba(43,29,16,.18); }
.brand-sub{ font-size: .68rem; line-height: 1.2; color: var(--amber-ink); font-weight: 700; letter-spacing: .01em; max-width: 108px; }

.navmenu{ display: flex; }
.navmenu ul{ display: flex; align-items: center; gap: var(--sp-5); }
@supports not (gap: 1rem){
  .navmenu ul li:not(:last-child){ margin-right: var(--sp-5); }
}
.navmenu a{
  font-size: .93rem;
  font-weight: 600;
  color: var(--espresso-2);
  padding: .4em 0;
  position: relative;
}
.navmenu a::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--amber-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.navmenu a:hover::after, .navmenu a.active::after{ transform: scaleX(1); }
.navmenu .dropdown{ position: relative; }
.navmenu .dropdown > a{ display: flex; align-items: center; gap: .3em; }
.navmenu .dropdown > a svg{ width: 12px; height: 12px; transition: transform .2s var(--ease); }
.navmenu .dropdown ul{
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  flex-direction: column; gap: 0; min-width: 190px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
@supports (backdrop-filter: blur(1px)){ .navmenu .dropdown ul{ backdrop-filter: var(--blur-md); background: rgba(255,255,255,.75);} }
.navmenu .dropdown:hover ul{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.navmenu .dropdown:hover > a svg{ transform: rotate(180deg); }
.navmenu .dropdown ul a{ display: block; padding: .6em .8em; border-radius: var(--r-sm); font-weight: 500; }
.navmenu .dropdown ul a:hover{ background: rgba(201,127,14,.12); }
.navmenu .dropdown ul a::after{ display: none; }

.nav-cta{ display: flex; align-items: center; gap: var(--sp-3); }
.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--glass-fill-hi);
  align-items: center; justify-content: center;
}
.nav-toggle svg{ width: 20px; height: 20px; }

@media (max-width: 1080px){
  .navmenu{
    position: fixed; inset: 90px 16px auto 16px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    padding: var(--sp-5);
    transform: translateY(-16px) scale(.98);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all .3s var(--ease);
  }
  .navmenu.open{ transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
  .navmenu ul{ flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .navmenu a{ display: block; padding: .8em .4em; }
  .navmenu .dropdown ul{ position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none; background: rgba(201,127,14,.06); margin: .3em 0 .3em .6em; display: none; }
  .navmenu .dropdown.open ul{ display: flex; }
  .navmenu .dropdown:hover ul{ display: none; }
  .navmenu .dropdown.open:hover ul{ display: flex; }
  .brand-sub{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .nav-cta .btn-label{ display: none; }
}
@media (min-width: 1081px){ .nav-toggle{ display:none; } }

/* -------------------------------------------------------------------------
   8. HERO
   ----------------------------------------------------------------------- */
.hero{
  padding: 170px 0 var(--sp-8);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-8);
  align-items: center;
}
.hero-badge{
  display: inline-flex; align-items: center; gap: .6em;
  padding: .5em .9em .5em .5em;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-5);
}
.hero-badge img{ width: 26px; height: 26px; border-radius: 50%; background: #fff; padding: 3px; }
.hero-badge span{ font-size: .82rem; font-weight: 700; color: var(--amber-ink); }

.hero h1{
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-5);
}
.hero-desc{ font-size: var(--fs-md); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-7); }

.hero-trust{ display: flex; align-items: center; gap: .8em; }
.hero-trust img{ height: 40px; width: auto; }
.hero-trust p{ font-size: .82rem; margin: 0; max-width: 30ch; }
.hero-trust strong{ display:block; font-size: .88rem; }

.hero-visual{ position: relative; }
.hero-frame{
  position: relative;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
}
.hero-frame img{ border-radius: calc(var(--r-xl) - 14px); }

.stat-chip{
  position: absolute;
  display: flex; align-items: center; gap: .7em;
  padding: .8em 1.1em;
  border-radius: var(--r-md);
  min-width: 168px;
}
.stat-chip .stat-icon{
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(155deg,#FFDE85,#E8940B);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.stat-chip .stat-icon svg{ width: 19px; height: 19px; color: var(--espresso); }
.stat-chip strong{ display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1; }
.stat-chip span{ font-size: .74rem; color: var(--espresso-2); font-weight: 600; }
.stat-1{ top: 6%; left: -8%; }
.stat-2{ bottom: 8%; right: -6%; }

@media (max-width: 1080px){
  .hero{ padding-top: 150px; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; max-width: 480px; margin: 0 auto var(--sp-4); }
  .stat-1{ left: -4%; }
  .stat-2{ right: -4%; }
}
@media (max-width: 600px){
  .hero h1{ font-size: var(--fs-2xl); }
  .stat-chip{ position: static; margin-top: var(--sp-3); }
  .stat-chip + .stat-chip{ margin-top: var(--sp-3); }
  .hero-frame{ margin-bottom: var(--sp-4); }
}

/* -------------------------------------------------------------------------
   9. ABOUT
   ----------------------------------------------------------------------- */
.about-grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--sp-8);
  align-items: center;
}
.about-media{ position: relative; }
.about-media img{ border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.about-media::before{
  content: "";
  position: absolute; inset: -14px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: calc(var(--r-lg) + 14px);
  z-index: -1;
}
.about-copy h2{ font-size: var(--fs-3xl); }
.about-copy .lede{ display:block; margin-bottom: var(--sp-4); }
.about-copy p{ font-size: var(--fs-sm); }

.feature-rows{ margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.feature-row{ display: flex; gap: .9em; padding: var(--sp-4); border-radius: var(--r-md); }
.feature-row .ic{
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset);
}
.feature-row .ic svg{ width: 20px; height: 20px; color: var(--amber-ink); }
.feature-row h5{ font-size: .98rem; margin-bottom: .25em; font-family: var(--font-body); font-weight: 700; }
.feature-row p{ font-size: .82rem; margin: 0; }

@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .feature-rows{ grid-template-columns: 1fr; }
  .about-media{ max-width: 420px; margin: 0 auto; }
}

/* -------------------------------------------------------------------------
   10. VISI & MISI
   ----------------------------------------------------------------------- */
.vm-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.vm-col{ padding: var(--sp-7); }
.vm-col + .vm-col{ border-left: 1px solid rgba(255,255,255,.5); }
.vm-tag{ display:flex; align-items:center; gap:.6em; margin-bottom: var(--sp-4); }
.vm-tag .ic{ width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-inset); }
.vm-tag .ic svg{ width: 22px; height: 22px; color: var(--amber-ink); }
.vm-tag h3{ margin: 0; font-size: var(--fs-xl); }
.vm-col p{ font-size: var(--fs-sm); }
.vm-list{ display: flex; flex-direction: column; gap: .85em; }
.vm-list li{ display: flex; gap: .7em; font-size: var(--fs-sm); color: var(--espresso-2); }
.vm-list li svg{ width: 18px; height: 18px; flex: none; margin-top: .2em; color: var(--amber-ink); }

@media (max-width: 860px){
  .vm-panel{ grid-template-columns: 1fr; }
  .vm-col + .vm-col{ border-left: none; border-top: 1px solid rgba(255,255,255,.5); }
}

/* -------------------------------------------------------------------------
   11. CARA KERJA — connected step path
   ----------------------------------------------------------------------- */
.steps-path{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  counter-reset: step;
}
.steps-path::before{
  content: "";
  position: absolute;
  top: 34px; left: 8%; right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--amber-ink) 0 10px, transparent 10px 18px);
  opacity: .45;
}
.step-item{ position: relative; text-align: left; padding: 0 var(--sp-2); }
.step-num{
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
  position: relative; z-index: 1;
  background: linear-gradient(155deg,#FFDE85,#E8940B);
  box-shadow: 0 14px 26px -12px rgba(154,92,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.step-num svg{ width: 28px; height: 28px; color: var(--espresso); }
.step-item h4{ font-size: 1.02rem; margin-bottom: .35em; }
.step-item p{ font-size: .84rem; }

@media (max-width: 980px){
  .steps-path{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps-path::before{ display: none; }
}

/* -------------------------------------------------------------------------
   12. PROYEK KAMI — tabs
   ----------------------------------------------------------------------- */
.tabs-shell{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  min-height: 420px;
}
.tab-list{ display: flex; flex-direction: column; padding: var(--sp-5); gap: var(--sp-2); border-right: 1px solid rgba(255,255,255,.5); }
.tab-btn{
  display: flex; align-items: center; gap: .9em;
  padding: .95em 1em;
  border: none; background: transparent;
  border-radius: var(--r-md);
  text-align: left;
  transition: background .25s var(--ease);
}
.tab-btn .ic{ width: 40px; height: 40px; border-radius: 50%; flex: none; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.5); }
.tab-btn .ic svg{ width: 19px; height: 19px; color: var(--amber-ink); }
.tab-btn h5{ margin: 0; font-size: .92rem; font-family: var(--font-body); font-weight: 700; color: var(--espresso-2); }
.tab-btn:hover{ background: rgba(255,255,255,.35); }
.tab-btn.active{ background: rgba(255,255,255,.62); box-shadow: var(--shadow-inset); }
.tab-btn.active h5{ color: var(--espresso); }

.tab-panels{ position: relative; padding: var(--sp-7); }
.tab-panel{ display: none; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.tab-panel.active{ display: grid; animation: fadein .4s var(--ease); }
@keyframes fadein{ from{ opacity: 0; transform: translateY(6px);} to{ opacity: 1; transform: translateY(0);} }
.tab-panel h3{ font-size: var(--fs-xl); margin-bottom: .4em; }
.tab-panel p{ font-size: .92rem; margin-bottom: var(--sp-4); }
.tab-media{ position: relative; }
.tab-media img{ border-radius: var(--r-md); }
.tab-flag{
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: .6em .9em;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: .6em;
}
.tab-flag svg{ width: 18px; height: 18px; color: var(--amber-ink); }
.tab-flag strong{ display: block; font-size: .82rem; }
.tab-flag span{ font-size: .68rem; color: var(--espresso-2); }

@media (max-width: 900px){
  .tabs-shell{ grid-template-columns: 1fr; }
  .tab-list{ flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,.5); }
  .tab-btn{ flex: none; }
  .tab-btn h5{ white-space: nowrap; }
  .tab-panel{ grid-template-columns: 1fr; }
  .tab-panels{ padding: var(--sp-5); }
}

/* -------------------------------------------------------------------------
   13. KEUNGGULAN + LEGALITAS
   ----------------------------------------------------------------------- */
.adv-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-bottom: var(--sp-8); }
.adv-card{ padding: var(--sp-6); }
.adv-card .ic{ width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; margin-bottom: var(--sp-4); box-shadow: var(--shadow-inset); }
.adv-card .ic svg{ width: 25px; height: 25px; color: var(--amber-ink); }
.adv-card h4{ font-size: 1.08rem; margin-bottom: .5em; }
.adv-card p{ font-size: .87rem; }

.legal-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.legal-media{ position: relative; }
.legal-media img{ border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.legal-copy h3{ font-size: var(--fs-2xl); margin-bottom: .5em; }
.legal-copy p{ font-size: var(--fs-sm); }
.legal-badges{ display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.legal-badge{ display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: var(--r-full); }
.legal-badge svg{ width: 18px; height: 18px; color: var(--leaf); }
.legal-badge span{ font-size: .8rem; font-weight: 700; }

@media (max-width: 980px){
  .adv-grid{ grid-template-columns: 1fr; }
  .legal-grid{ grid-template-columns: 1fr; }
  .legal-media{ order: 2; max-width: 460px; margin: 0 auto; }
}

/* -------------------------------------------------------------------------
   14. TESTIMONIALS
   ----------------------------------------------------------------------- */
.testi-viewport{ overflow: hidden; margin: 0 -12px; padding: 8px 12px 28px; }
.testi-track{ display: flex; gap: var(--sp-5); transition: transform .5s var(--ease); }
.testi-card{ flex: 0 0 calc(33.333% - 22px); padding: var(--sp-5); display: flex; flex-direction: column; }
.testi-top{ display: flex; align-items: center; gap: .8em; margin-bottom: var(--sp-4); }
.testi-top img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.8); }
.testi-name{ font-size: .92rem; font-weight: 700; margin: 0; }
.testi-role{ font-size: .74rem; color: var(--espresso-2); }
.testi-stars{ display: flex; gap: 2px; margin-top: 2px; }
.testi-stars svg{ width: 12px; height: 12px; color: var(--amber); }
.testi-card p{ font-size: .88rem; flex: 1; }
.testi-quote{ width: 26px; height: 26px; color: rgba(43,29,16,.18); margin-bottom: .3em; }

.testi-nav{ display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.testi-dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(43,29,16,.25); border: none; padding: 0; transition: background .25s var(--ease), transform .25s var(--ease); }
.testi-dot.active{ background: var(--amber-ink); transform: scale(1.2); }
.testi-arrow{ width: 46px; height: 46px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; flex: none; }
.testi-arrow svg{ width: 20px; height: 20px; }
.testi-controls{ display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-2); }

@media (max-width: 980px){ .testi-card{ flex-basis: calc(50% - 14px); } }
@media (max-width: 640px){ .testi-card{ flex-basis: 100%; } }

/* -------------------------------------------------------------------------
   15. KEMITRAAN / PRICING — dispenser-meter styled tiers
   ----------------------------------------------------------------------- */
.price-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.price-card{
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  position: relative;
}
.price-card.featured{
  background: var(--glass-fill-hi);
  transform: translateY(-14px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(255,255,255,.9);
}
@supports (backdrop-filter: blur(1px)){ .price-card.featured{ background: rgba(255,255,255,.55); } }
.price-tag{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: .4em 1.1em;
  border-radius: var(--r-full);
  background: var(--espresso);
  color: var(--cream);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: var(--shadow-dark);
}
.price-area{ font-size: .76rem; font-weight: 700; color: var(--amber-ink); margin-bottom: .2em; }
.price-card h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

.meter{
  border-radius: var(--r-sm);
  background: var(--espresso);
  padding: .95em 1.1em;
  margin-bottom: var(--sp-5);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
.meter::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
}
.meter-label{ font-size: .62rem; letter-spacing: .12em; color: rgba(255,246,225,.55); font-weight: 700; margin-bottom: .2em; position: relative; }
.meter-value{
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.7rem;
  color: #FFD866;
  letter-spacing: .02em;
  position: relative;
  text-shadow: 0 0 14px rgba(255,216,102,.5);
}
.meter-value small{ font-size: .95rem; font-weight: 600; margin-right: .15em; color: rgba(255,216,102,.85); }

.price-list{ margin-bottom: var(--sp-5); }
.price-list-title{ font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--amber-ink); margin-bottom: .7em; }
.price-list ul{ display: flex; flex-direction: column; gap: .55em; margin-bottom: var(--sp-4); }
.price-list li{ display: flex; justify-content: space-between; gap: .8em; font-size: .82rem; color: var(--espresso-2); border-bottom: 1px dashed rgba(43,29,16,.15); padding-bottom: .5em; }
.price-list li span:last-child{ font-weight: 700; color: var(--espresso); white-space: nowrap; }
.price-req{ display: flex; flex-direction: column; gap: .5em; margin-bottom: var(--sp-4); }
.price-req li{ display: flex; gap: .6em; font-size: .78rem; color: var(--espresso-2); }
.price-req li svg{ width: 15px; height: 15px; flex: none; margin-top: .15em; color: var(--leaf); }

.price-support{ display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: var(--sp-5); }
.price-support span{
  font-size: .7rem; font-weight: 700; padding: .35em .8em;
  border-radius: var(--r-full);
  background: rgba(46,125,79,.12); color: var(--leaf);
}
.price-free{ background: rgba(201,127,14,.14); color: var(--amber-ink); }

.price-card .btn{ margin-top: auto; }

@media (max-width: 980px){
  .price-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .price-card.featured{ transform: none; }
}

/* Brochure download card */
.brochure-card{
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: .5fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.brochure-media{ position: relative; }
.brochure-media img{
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  transform: rotate(-3deg);
  transition: transform .4s var(--ease);
}
.brochure-card:hover .brochure-media img{ transform: rotate(0deg) scale(1.02); }
.brochure-copy h3{ font-size: var(--fs-lg); margin-bottom: .4em; }
.brochure-copy p{ font-size: .9rem; }
.brochure-actions{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

@media (max-width: 760px){
  .brochure-card{ grid-template-columns: 1fr; text-align: center; }
  .brochure-media{ max-width: 240px; margin: 0 auto; }
  .brochure-actions{ justify-content: center; }
}

/* -------------------------------------------------------------------------
   16. KONTAK
   ----------------------------------------------------------------------- */
.contact-grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-5); }
.contact-info{ padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-item{ display: flex; gap: 1em; }
.contact-item .ic{ width: 44px; height: 44px; border-radius: 50%; flex: none; background: rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-inset); }
.contact-item .ic svg{ width: 20px; height: 20px; color: var(--amber-ink); }
.contact-item h5{ margin: 0 0 .2em; font-size: .92rem; font-family: var(--font-body); font-weight: 700; }
.contact-item p{ font-size: .84rem; }
.contact-socials{ display: flex; gap: .6em; margin-top: var(--sp-2); }
.contact-socials a{ width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); transition: background .2s var(--ease), transform .2s var(--ease); }
.contact-socials a:hover{ background: #fff; transform: translateY(-2px); }
.contact-socials svg{ width: 19px; height: 19px; color: var(--amber-ink); }

.contact-form-panel{ padding: var(--sp-6); }
.contact-form-panel h3{ font-size: var(--fs-xl); margin-bottom: .3em; }
.contact-form-panel > p{ font-size: .88rem; margin-bottom: var(--sp-5); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field{ margin-bottom: var(--sp-4); }
.field label{ display: block; font-size: .78rem; font-weight: 700; color: var(--espresso-2); margin-bottom: .4em; }
.field input, .field textarea{
  width: 100%;
  padding: .85em 1em;
  border-radius: var(--r-sm);
  border: 1px solid rgba(43,29,16,.18);
  background: rgba(255,255,255,.65);
  font-family: inherit;
  font-size: .92rem;
  color: var(--espresso);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--amber-ink); background: rgba(255,255,255,.9); }
.field textarea{ resize: vertical; min-height: 120px; }
.form-status{ font-size: .82rem; margin-bottom: var(--sp-3); display: none; }
.form-status.visible{ display: block; }
.form-status.ok{ color: var(--leaf); }
.form-status.err{ color: #b3261e; }

@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .form-row{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   17. FOOTER — deep espresso glass
   ----------------------------------------------------------------------- */
.site-footer{
  margin-top: var(--sp-8);
  padding: var(--sp-8) 0 0;
  background: linear-gradient(180deg, #3A2712, var(--espresso) 55%);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.site-footer::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 15% 0%, rgba(255,197,49,.18), transparent 60%);
  pointer-events: none;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr .8fr .8fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.footer-brand{ display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-logos{ display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.footer-logos img{ height: 40px; width: auto; }
.footer-logos .fl-eagle{ height: 56px; }
.footer-brand p{ color: rgba(255,246,225,.72); font-size: .86rem; max-width: 34ch; }
.footer-col h5{ font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,246,225,.55); margin-bottom: var(--sp-4); }
.footer-col ul{ display: flex; flex-direction: column; gap: .75em; }
.footer-col a{ font-size: .88rem; color: rgba(255,246,225,.85); transition: color .2s var(--ease); }
.footer-col a:hover{ color: var(--sun-soft); }
.footer-col p{ font-size: .86rem; color: rgba(255,246,225,.78); margin-bottom: .6em; }

.footer-bottom{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-6);
  font-size: .8rem;
  color: rgba(255,246,225,.6);
  position: relative;
}
.footer-social{ display: flex; gap: .6em; }
.footer-social a{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease); }
.footer-social a:hover{ background: rgba(255,255,255,.18); }
.footer-social svg{ width: 17px; height: 17px; color: var(--cream); }

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------------------
   18. FLOATING WHATSAPP BUTTON
   ----------------------------------------------------------------------- */
.wa-float{
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 250;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(155deg,#4ADE80,#1F9D55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -10px rgba(31,157,85,.6);
  transition: transform .25s var(--ease);
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width: 28px; height: 28px; color: #fff; }

/* -------------------------------------------------------------------------
   19. SCROLL-TOP
   ----------------------------------------------------------------------- */
.scroll-top{
  position: fixed;
  right: 22px; bottom: 92px;
  z-index: 249;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-fill-hi);
  border: 1px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s var(--ease);
}
.scroll-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top svg{ width: 18px; height: 18px; color: var(--espresso); }

/* -------------------------------------------------------------------------
   20. SCROLL REVEAL (single, subtle)
   ----------------------------------------------------------------------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------------------------
   21. MISC RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 640px){
  section{ padding: var(--sp-7) 0; }
  .glass-panel{ padding: var(--sp-5); }
  .section-head h2{ font-size: var(--fs-2xl); }
  .vm-col{ padding: var(--sp-5); }
}

/* -------------------------------------------------------------------------
   22. MOTION — hero entrance, floating accents, glow, hover lift, sheen
   ----------------------------------------------------------------------- */
@keyframes riseIn{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* Base state is always fully visible; only browsers that understand
   @supports (and therefore reliably run keyframe animations) opt into
   the hidden+animated version, so content never gets stuck invisible. */
.hero-badge, .hero h1, .hero-desc, .hero-actions, .hero-trust, .hero-visual{ opacity: 1; }
@supports (animation-name: riseIn){
  .hero-badge{ opacity: 0; animation: riseIn .7s var(--ease) .05s forwards; }
  .hero h1{ opacity: 0; animation: riseIn .7s var(--ease) .15s forwards; }
  .hero-desc{ opacity: 0; animation: riseIn .7s var(--ease) .25s forwards; }
  .hero-actions{ opacity: 0; animation: riseIn .7s var(--ease) .35s forwards; }
  .hero-trust{ opacity: 0; animation: riseIn .7s var(--ease) .45s forwards; }
  .hero-visual{
    opacity: 0;
    animation: riseIn .8s var(--ease) .3s forwards, floaty 5.5s ease-in-out 1.4s infinite;
  }
}

@keyframes floaty{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
@keyframes floatySm{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
.stat-1{ animation: floatySm 4.2s ease-in-out .2s infinite; }
.stat-2{ animation: floatySm 4.8s ease-in-out .6s infinite; }

@keyframes meterGlow{
  0%, 100%{ text-shadow: 0 0 14px rgba(255,216,102,.5); }
  50%{ text-shadow: 0 0 24px rgba(255,216,102,.9); }
}
.meter-value{ animation: meterGlow 2.6s ease-in-out infinite; }

/* Hover lift for repeated cards (kept off the reveal shorthand so the
   one-time entrance transition never delays a later hover response) */
.adv-card, .price-card, .testi-card, .feature-row, .brochure-card{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.adv-card:hover, .testi-card:hover{ transform: translateY(-8px); }
.price-card:not(.featured):hover{ transform: translateY(-8px); }
.feature-row:hover{ transform: translateX(4px); }
.step-item .step-num{ transition: transform .35s var(--ease); }
.step-item:hover .step-num{ transform: scale(1.08) rotate(-4deg); }
.tab-btn{ transition: background .25s var(--ease), transform .25s var(--ease); }
.tab-btn:hover{ transform: translateX(3px); }

/* the featured pricing card keeps its permanent elevated position — these
   two rules must stay in this order and after .reveal.in (higher class
   count = higher specificity, so they always win) */
.price-card.featured.reveal{ transform: translateY(-14px); }
.price-card.featured:hover{ transform: translateY(-20px); }

/* button sheen sweep */
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after{ left: 130%; }

.brand img{ transition: transform .3s var(--ease); }
.brand:hover img{ transform: scale(1.05); }

@media (prefers-reduced-motion: reduce){
  .hero-badge, .hero h1, .hero-desc, .hero-actions, .hero-trust, .hero-visual{
    opacity: 1; animation: none;
  }
}