/* ─── Card visibility fix di white bg ─────────────────────────────────────── */
section .bg-white {
  box-shadow: 0 4px 16px -6px rgba(12, 48, 73, 0.08), 0 1px 3px rgba(12, 48, 73, 0.04);
  border-color: rgba(12, 48, 73, 0.08) !important;
}

/* ─── Corak Chain Pattern (motif Variasi Desaturated Steel) ───────────────── */
.chain-bg-tl {
  position: absolute;
  top: 40px; left: -60px;
  width: 280px; height: 520px;
  background-image: url('assets/pattern-chain-vertical.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.chain-bg-br {
  position: absolute;
  bottom: -80px; right: -60px;
  width: 380px; height: 380px;
  background-image: url('assets/pattern-chain.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  transform: rotate(15deg);
}
.chain-bg-tr {
  position: absolute;
  top: -40px; right: -40px;
  width: 320px; height: 320px;
  background-image: url('assets/pattern-chain.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}
.chain-bg-bl {
  position: absolute;
  bottom: -50px; left: -50px;
  width: 280px; height: 280px;
  background-image: url('assets/pattern-chain.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  transform: rotate(10deg);
}
/* Versi terang untuk bg navy (invert + cooler tone) */
.chain-on-dark {
  filter: invert(1) brightness(1.4) hue-rotate(190deg);
  opacity: 0.10;
}
.chain-divider {
  display: block;
  width: 80px;
  height: 28px;
  background-image: url('assets/pattern-chain.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.45;
  margin: 0 auto 12px;
}

/* ─── Stats Cycling Animation (nyala bergantian) ──────────────────────────── */
.stat-item {
  transition: transform 0.55s cubic-bezier(.4,0,.2,1), opacity 0.55s ease;
  opacity: 0.55;
  position: relative;
}
.stat-item .stat-num {
  transition: color 0.55s ease, text-shadow 0.55s ease, transform 0.55s ease;
}
.stat-item.stat-active {
  opacity: 1;
  transform: translateY(-6px) scale(1.10);
}
.stat-item.stat-active .stat-num {
  color: #ffffff;
  text-shadow:
    0 0 24px rgba(217, 220, 222, 0.85),
    0 0 60px rgba(119, 151, 172, 0.6);
}

/* ─── Flow Row Horizontal (Process & Implementation) ──────────────────────── */
.flow-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Step node */
.flow-step {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 2px solid rgba(12, 48, 73, 0.1);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  transition: all 0.5s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 14px -4px rgba(12, 48, 73, 0.1);
  overflow: hidden;
}

.flow-step:hover,
.flow-step.flow-active {
  border-color: #44607A;
  background: linear-gradient(135deg, rgba(119,151,172,0.16), rgba(68,96,122,0.10));
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 0 0 4px rgba(119,151,172,0.30),
    0 18px 38px -10px rgba(12,48,73,0.32);
}

.flow-num {
  font-size: 11px;
  font-weight: 900;
  color: #7797AC;
  letter-spacing: 1px;
  transition: color 0.4s ease;
}
.flow-step:hover .flow-num,
.flow-step.flow-active .flow-num { color: #44607A; }

.flow-icon {
  font-size: 30px;
  margin: 6px 0 4px;
  filter: grayscale(0.4);
  transition: filter 0.4s ease, transform 0.4s ease;
  display: inline-block;
}
.flow-step:hover .flow-icon,
.flow-step.flow-active .flow-icon {
  filter: grayscale(0) drop-shadow(0 0 12px rgba(68,96,122,0.6));
  transform: scale(1.2);
}

.flow-name {
  font-weight: 900;
  font-size: 13px;
  color: #0C3049;
  margin-top: 4px;
  line-height: 1.2;
}
.flow-desc {
  font-size: 10.5px;
  color: rgba(12, 48, 73, 0.65);
  margin-top: 5px;
  line-height: 1.4;
}

/* ─── Connector ── */
.flow-conn {
  flex: 1 1 40px;
  min-width: 32px;
  position: relative;
  align-self: center;
  height: 4px;
  /* Default: dashed line muted */
  background-image: repeating-linear-gradient(
    to right,
    rgba(12, 48, 73, 0.22) 0,
    rgba(12, 48, 73, 0.22) 6px,
    transparent 6px,
    transparent 13px
  );
  border-radius: 2px;
}
/* Active fill: slate dashed traveling left → right */
.flow-conn-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background-image: repeating-linear-gradient(
    to right,
    #44607A 0,
    #44607A 6px,
    transparent 6px,
    transparent 13px
  );
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(119,151,172,0.7));
  transition: none;
}
.flow-conn.flow-conn-active .flow-conn-fill {
  animation: connFill var(--conn-duration, 1.1s) linear forwards;
}
@keyframes connFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Mobile: stack vertikal (animation tetap left→right pakai horizontal connector kecil) */
@media (max-width: 767px) {
  .flow-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .flow-step { flex: 0 0 auto; }
  .flow-conn {
    flex: 0 0 24px;
    height: 24px;
    width: 4px;
    align-self: center;
    margin: 4px 0;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(12, 48, 73, 0.22) 0,
      rgba(12, 48, 73, 0.22) 6px,
      transparent 6px,
      transparent 13px
    );
  }
  .flow-conn-fill {
    width: 100%;
    height: 0%;
    background-image: repeating-linear-gradient(
      to bottom,
      #44607A 0,
      #44607A 6px,
      transparent 6px,
      transparent 13px
    );
  }
  .flow-conn.flow-conn-active .flow-conn-fill {
    animation: connFillV var(--conn-duration, 1.1s) linear forwards;
  }
  @keyframes connFillV {
    from { height: 0%; }
    to   { height: 100%; }
  }
}

/* ─── Nav Dropdown ────────────────────────────────────────────────────────── */
.nav-group { position: relative; }
.nav-trigger { cursor: pointer; background: none; border: 0; padding: 6px 0; color: inherit; font: inherit; }
.nav-caret { transition: transform 0.25s ease; }
.nav-group.open .nav-trigger { color: #7797AC; }
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  background: #ffffff;
  border: 1px solid rgba(12, 48, 73, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 38px -10px rgba(12, 48, 73, 0.28);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}
/* Jembatan transparan supaya hover tidak putus di celah trigger→menu */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.nav-group.open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #0C3049;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.nav-menu a:hover {
  background: rgba(119, 151, 172, 0.13);
  color: #44607A;
  padding-left: 16px;
}
.nav-menu a.active { background: rgba(119, 151, 172, 0.16); color: #44607A; }

/* Penanda halaman aktif di nav atas */
.nav-top-active { color: #0C3049; position: relative; }
.nav-top-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #44607A;
  border-radius: 2px;
}
.nav-trigger.nav-top-active::after { right: 16px; }

/* Section anchor offset (nav fixed ±60px) */
section[id], div[id] { scroll-margin-top: 84px; }

/* ─── FAQ Accordion ───────────────────────────────────────────────────────── */
.faq-q { cursor: pointer; transition: background 0.25s ease; }
.faq-item:hover .faq-q { background: rgba(119, 151, 172, 0.08); }
.faq-ico { transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
.faq-item.faq-open .faq-ico { transform: rotate(45deg); }
/* Body collapse via grid-rows trick → smooth height tanpa JS ukur tinggi */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(.4,0,.2,1);
}
.faq-a > div { overflow: hidden; }
.faq-item.faq-open .faq-a { grid-template-rows: 1fr; }

/* ─── Count-up emphasis ───────────────────────────────────────────────────── */
.countup { font-variant-numeric: tabular-nums; }

/* ─── Global ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background-image: radial-gradient(rgba(27, 42, 59, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}
#hero .grid-cols-8 > div { background: rgba(240, 237, 230, 0.1); margin: 4px; border-radius: 4px; }

/* ─── BSF Animation Stage ─────────────────────────────────────────────────── */
#bsf-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: visible; /* lalat boleh terbang keluar viewport edge */
}

/* Egg trap PERLU clipping container terpisah supaya tetap di corner */
#bsf-wood { clip-path: inset(-50% -50% 0 0); }

/* ── Egg Trap POJOK KANAN BAWAH, smaller ── */
#bsf-wood {
  position: absolute;
  bottom: -12px;
  right: -20px;
  width: 160px;
  height: auto;
  filter: drop-shadow(-2px -2px 8px rgba(0,0,0,0.2));
}

/* ─── BSF Flies (side-view 3D) ────────────────────────────────────────────── */
.fly {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 28px;
  transform-origin: center;
  will-change: transform;
  /* Drop shadow → efek 3D lalat ngambang di atas page */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));
  pointer-events: auto;   /* bisa diklik walau stage pointer-events:none */
  cursor: pointer;
}
/* Perbesar area klik lalat sedikit (transparan, gak keliatan) */
.fly::before {
  content: "";
  position: absolute;
  inset: -13px;
}

/* ─── BSF Chat Bubble (klik lalat → info BSF) ─────────────────────────────── */
#bsf-bubble {
  position: fixed;
  z-index: 70;
  max-width: 250px;
  background: #ffffff;
  border: 1px solid rgba(12, 48, 73, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 42px -12px rgba(12, 48, 73, 0.42);
  padding: 14px 30px 14px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.95);
  transform-origin: bottom center;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
#bsf-bubble.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* Ekor balon (default mengarah ke bawah → lalat di bawah balon) */
#bsf-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px; left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
  filter: drop-shadow(0 2px 1px rgba(12, 48, 73, 0.1));
}
#bsf-bubble.below::after {
  bottom: auto; top: -9px;
  border-top: 0;
  border-bottom: 10px solid #ffffff;
  filter: drop-shadow(0 -2px 1px rgba(12, 48, 73, 0.1));
}
.bsf-bubble-row { display: flex; gap: 10px; align-items: flex-start; }
.bsf-bubble-ava {
  font-size: 20px; line-height: 1; flex-shrink: 0;
  background: #0C3049;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.bsf-bubble-text {
  font-size: 12.5px; line-height: 1.55;
  color: #0C3049; font-weight: 500;
  margin: 3px 0 0;
}
.bsf-bubble-name { font-weight: 900; color: #44607A; }
.bsf-bubble-close {
  position: absolute; top: 7px; right: 9px;
  background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: rgba(12, 48, 73, 0.4);
  transition: color 0.15s ease;
}
.bsf-bubble-close:hover { color: #0C3049; }
.fly svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ── Wing flap KUPU-KUPU LAMBAT — side view (2 wings beda timing untuk 3D) ── */
.wing-near, .wing-far {
  transform-box: fill-box;
}
.wing-near { transform-origin: 32px 17px; animation: wingNear 0.32s ease-in-out infinite; }
.wing-far  { transform-origin: 30px 17px; animation: wingFar  0.32s ease-in-out infinite; animation-delay: -0.05s; }

@keyframes wingNear {
  0%, 100% { transform: rotate(-40deg) translateY(-3px) scaleY(0.5); }
  50%      { transform: rotate(15deg)  translateY(3px)  scaleY(1.1); }
}
@keyframes wingFar {
  0%, 100% { transform: rotate(-35deg) translateY(-2px) scaleY(0.4); }
  50%      { transform: rotate(12deg)  translateY(2px)  scaleY(0.95); }
}

/* ── Saat hinggap: sayap folded back ── */
.fly.resting .wing-near { animation: wingNearRest 3s ease-in-out infinite; }
.fly.resting .wing-far  { animation: wingFarRest  3s ease-in-out infinite; }
@keyframes wingNearRest {
  0%, 100% { transform: rotate(-30deg) translateY(-1px) scaleY(0.45); }
  50%      { transform: rotate(-26deg) translateY(0px)  scaleY(0.5); }
}
@keyframes wingFarRest {
  0%, 100% { transform: rotate(-28deg) translateY(-1px) scaleY(0.4); }
  50%      { transform: rotate(-24deg) translateY(0px)  scaleY(0.45); }
}

/* ── ★ LEG RUBBING — gerakan kaki depan gosok saat hinggap ── */
.legs-front {
  transform-origin: 42px 22px;
  transform-box: fill-box;
}
.fly.resting .legs-front {
  animation: legRub 0.34s ease-in-out infinite;
}
@keyframes legRub {
  0%, 100% { transform: rotate(-10deg) translateY(0px); }
  50%      { transform: rotate(8deg)   translateY(-1px); }
}

/* Responsive mobile */
@media (max-width: 640px) {
  #bsf-wood { width: 110px; bottom: -8px; right: -15px; }
  .fly { width: 38px; height: 17px; }
}

/* Fade-in awal */
#bsf-stage { animation: stageIn 1s ease forwards; opacity: 0; animation-delay: 0.6s; }
@keyframes stageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}