/* =============================================================================
   RESET & ROOT VARIABLES
   ============================================================================= */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Primary blue accent */
  --p:#d52635;
  --p2:#cc0052;
  --p3:#99003d;
  --p4:#800033;
  /* Backgrounds — LIGHTER Red family */
  --bg0:#e6ecff;        /* deepest */
  --bg1:#e46772;        /* main body */
  --bg2:#d52635;        /* section alt */
  --bg3:#e46772;        /* section alt 2 */
  /* UI — RED accent (menggantikan orange) */
  --red:#d52635;
  --red2:#ad1f2a;
  --green:#16833e;
  --white:#000;
  --text:#000000;
  --muted:#000000;
  --border:rgb(195, 34, 48);
  --border2:rgb(221, 60, 73);
  --card:rgb(0, 115, 230);
  --card2:rgb(0, 102, 204);
}

/* =============================================================================
   BASE
   ============================================================================= */

html{scroll-behavior:smooth}
body,body.bst-movers-page{font-family:'Nunito',sans-serif;color:var(--text);background:var(--bg1)!important;overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--p);border-radius:3px}

/* =============================================================================
   TOP BAR
   ============================================================================= */

.topbar{position:fixed;top:0;left:0;right:0;z-index:210;height:46px;background:rgb(173, 31, 42);backdrop-filter:blur(10px);border-bottom:1px solid rgb(240, 168, 174);display:flex;align-items:center;justify-content:space-between;padding-top:12px;}
.topbar-links{display:flex;align-items:center;gap:0;list-style:none; padding-top:45px; }
.topbar-links li{display:flex;align-items:center; margin-top:0px; margin-bottom: 23px;}
.topbar-links li+li::before{content:'·';color:#000000;margin-top:16px; margin-left:8px; margin-right:8px; margin-bottom:14px; font-size:14px}
.topbar-links a{font-size:12px;color:#000000;text-decoration:none;font-weight:600; margin-top:16px; margin-bottom:12px; font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;transition:color .2s;padding:14px 0}
.topbar-links a:hover{color:rgb(240, 168, 174)}
.topbar-right{font-size:14px;color:#000000;font-weight:500;display:flex;align-items:center;gap:6px;padding-right:40px;}
.topbar-dot{width:8px;height:8px;margin-bottom:15px; border-radius:50%;background:var(--green);animation:pulse 2s infinite;box-shadow:0 0 5px var(--green)}

/* =============================================================================
   NAV
   ============================================================================= */

.nav{position:fixed;top:45px;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding-top:18px ; padding-left:48px;height:100px;background:#dd3c49;backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border2);transition:all .35s cubic-bezier(.4,0,.2,1)}
.nav.scrolled{background:rgb(173, 31, 42);border-bottom-color:rgba(128,191,255,.25);box-shadow:0 4px 32px rgba(0,0,0,.35)}
.nav-logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;color:#990000;text-decoration:none;display:flex;align-items:center;gap:13px}
.nav-logo img{height:64px;width:auto;border-radius:6px}
.nav-logo em{color:#000000;font-style:bold}
.nav-links{display:flex;gap:6px;list-style:none ;}
.nav-links a{font-size:16px;color:var(--muted);text-decoration:none;font-weight:700; font-family: 'Plus Jakarta Sans', sans-serif; padding:18px 18px; margin-top:22px;border-radius:10px;transition:all .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:3px;left:50%;right:50%;height:2px;background:var(--p);border-radius:1px;transition:all .3s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover{color:var(--white);background:rgba(128,191,255,.08)}
.nav-links a:hover::after{left:18px;right:18px}
.nav-right{display:flex;align-items:center;gap:12px; padding-right: 40px;}
.nav-cta{position:relative;overflow:hidden;background:var(--red);color:#000000;padding:13px 26px;border-radius:12px;font-size:15px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px rgba(229,53,53,.35)}
.nav-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s ease}
.nav-cta:hover::before{transform:translateX(100%)}
.nav-cta:hover{background:rgb(240, 143, 143);transform:translateY(-2px);box-shadow:0 8px 28px rgba(229,53,53,.45)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:100%;height:2px;background:var(--text);border-radius:1px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:140x; left:0;right:0;background:rgb(255, 128, 128);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:84px 24px 24px; z-index:199;transform:translateY(-20px);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:all}
.mobile-menu a{display:block;padding:12px 16px;color:var(--muted);text-decoration:none;font-weight:600;font-size:17px;border-radius:8px;transition:all .2s}
.mobile-menu a:hover{color:var(--text);background:rgba(128,191,255,.08)}
.mob-cta{margin-top:12px;background:var(--red)!important;color:#000!important;text-align:center;font-weight:700!important;font-size:15px;border-radius:12px;padding:14px!important;font-family:'Plus Jakarta Sans',sans-serif}

.nav-links {
  list-style: none !important;
}

/* =============================================================================
   NAV DROPDOWN — paste setelah .mob-cta di front-page.css
   (hapus semua CSS dropdown versi sebelumnya dulu)
   ============================================================================= */

/* Ganti bagian .nav-has-dropdown dan .nav-dropdown-trigger di CSS lu */

.nav-has-dropdown {
  position: relative;
  display: flex;        /* ← tambah ini */
  align-items: center; /* ← dan ini */
}

.nav-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 18px 18px !important;
    margin-top: -17px !important;
}

.nav-dropdown-trigger::after { display: none !important; }

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active {
  border-color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.1) !important;
  color: var(--white) !important;
}

/* Chevron */
.nav-chevron {
  flex-shrink: 0;
  opacity: .75;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.nav-dropdown-trigger.active .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Panel */
.nav-layanan-panel {
  display: none;
  position: fixed;
  top: 70px;
  background: rgb(120,15,25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  z-index: 9999;
}

/* Panah kecil di atas panel */
.nav-layanan-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 32px;
  width: 11px;
  height: 11px;
  background: rgb(120,15,25);
  border-left: 1px solid rgba(255,255,255,.15);
  border-top: 1px solid rgba(255,255,255,.15);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

/* Items */
.nav-layanan-panel a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin-top: 0 !important;
  border-radius: 8px !important;
  border: none !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: background .15s ease;
}

.nav-layanan-panel a::after { display: none !important; }

.nav-layanan-panel a:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* Divider */
.nlp-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 6px 8px;
}

/* "Lihat Semua Layanan" row */
.nlp-all {
  justify-content: space-between !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  margin-top: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.nlp-all:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .nav-layanan-panel { display: none !important; }
  .nav-chevron { display: none !important; }
  .nav-dropdown-trigger {
    border: none !important;
    padding: 18px 18px !important;
    margin-top: 22px !important;
  }
}

/* =============================================================================
   HERO
   ============================================================================= */

.hero{min-height:100vh;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(128,191,255,.16) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 10% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,var(--bg0) 0%,var(--bg1) 50%,rgb(51, 0, 0) 100%);padding:210px 48px 100px;position:relative;overflow:hidden}
/* =============================================================================
   HERO BACKGROUND SLIDER
   Paste setelah baris .hero{...} di front-page.css
   ============================================================================= */

/* Slider container — cover penuh hero section */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;         /* di bawah .hero-grid-bg dan konten */
  overflow: hidden;
}

/* Tiap slide */
.hsl-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
}

.hsl-slide.hsl-active {
  opacity: 1;
}

.hsl-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay — tipis, biar image keliatan tapi konten tetap terbaca */
.hsl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(140, 10, 20, 0.55);   /* warna merah gelap transparan */
  z-index: 1;
}

/* Dot navigation — vertikal di sisi kiri tengah */
.hsl-dots {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsl-dot {
  width: 6px;
  height: 32px;
  border-radius: 3px;
  background: rgba(255,255,255,.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.hsl-dot.hsl-dot-active {
  height: 52px;
  background: rgba(255,255,255,.9);
}

.hsl-dot:hover:not(.hsl-dot-active) {
  background: rgba(255,255,255,.55);
}

/* Pastiin z-index hero konten di atas slider */
.hero-grid-bg { z-index: 1; }
.orb           { z-index: 1; }
.hero-inner    { z-index: 2; }

/* Mobile — sembunyiin dot kalau terlalu kecil */
@media (max-width: 600px) {
  .hsl-dots { left: 12px; }
  .hsl-dot  { width: 4px; height: 22px; }
  .hsl-dot.hsl-dot-active { height: 38px; }
}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(128,191,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(128,191,255,.05) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 60% 40%,black 30%,transparent 100%);pointer-events:none}
.orb{position:absolute;border-radius:50%;pointer-events:none;animation:drift 20s ease-in-out infinite alternate}
.orb1{width:500px;height:500px;top:-150px;right:-100px;background:radial-gradient(circle,rgba(128,191,255,.12) 0%,transparent 70%);animation-duration:22s}
.orb2{width:400px;height:400px;bottom:-100px;left:10%;background:radial-gradient(circle,rgba(229,53,53,.08) 0%,transparent 70%);animation-duration:18s;animation-delay:-8s}
.orb3{width:300px;height:300px;top:30%;left:40%;background:radial-gradient(circle,rgba(128,191,255,.06) 0%,transparent 70%);animation-duration:25s;animation-delay:-4s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,20px) scale(1.05)}}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(128,191,255,.12);border:1px solid rgba(128,191,255,.28);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:700;color:#000000;);margin-bottom:28px;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bdot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;box-shadow:0 0 6px var(--green)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:54px;font-weight:800;line-height:1.08;margin-bottom:22px;color:var(--white);letter-spacing:-.025em}
h1 .hl{background:linear-gradient(135deg,#000000 0%,#000000 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:17px;color:var(--muted);line-height:1.75;margin-bottom:38px;max-width:440px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--red) 0%,#CC2222 100%);color:#000;padding:15px 32px;border-radius:12px;font-size:15px;font-weight:700;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 4px 20px rgba(229,53,53,.4);transition:all .35s cubic-bezier(.4,0,.2,1);isolation:isolate}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-100%);transition:transform .7s ease}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary::after{content:'';position:absolute;inset:-3px;border-radius:15px;background:inherit;opacity:.5;filter:blur(10px);transform:scaleY(.7) scaleX(.9) translateY(8px);z-index:-1;transition:all .35s ease}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(229,53,53,.55)}
.btn-primary:hover::after{opacity:.7;filter:blur(14px);transform:scaleY(.8) scaleX(.95) translateY(10px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-primary .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:ripple-out .6s ease-out;pointer-events:none}
@keyframes ripple-out{to{transform:scale(4);opacity:0}}
.btn-secondary{position:relative;overflow:hidden;background:rgba(128,191,255,.1);color:var(--white);padding:15px 32px;border-radius:12px;font-size:15px;font-weight:600;border:1px solid rgba(128,191,255,.25);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn-secondary::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);transform:translateX(-100%);transition:transform .7s ease}
.btn-secondary:hover::before{transform:translateX(100%)}
.btn-secondary:hover{border-color:rgba(128,191,255,.6);background:rgba(128,191,255,.18);transform:translateY(-2px);box-shadow:0 8px 24px rgba(128,191,255,.2)}
.trust-pills{display:flex;gap:20px;flex-wrap:wrap}
.tpill{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.tpill .ck{width:18px;height:18px;border-radius:50%;background:rgb(32, 172, 83);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;border:1px solid rgba(34,197,94,.3)}

/* =============================================================================
   HERO VISUAL / CARD
   ============================================================================= */

.hero-visual{display:flex;flex-direction:column;gap:16px}
.hero-card{background:rgba(128,191,255,.07);border:1px solid rgba(128,191,255,.15);border-radius:20px;padding:28px;backdrop-filter:blur(16px);box-shadow:0 24px 64px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border2)}
.card-avi{width:40px;height:40px;border-radius:10px;background:rgba(128,191,255,.15);border:1px solid rgba(128,191,255,.25);display:flex;align-items:center;justify-content:center;font-size:20px}
.ct{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:var(--white)}
.cs{font-size:12px;color:var(--muted)}
.status-badge{margin-left:auto;background:rgb(32, 172, 83);color:#d4f7e1;font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;font-family:'Plus Jakarta Sans',sans-serif;border:1px solid rgba(34,197,94,.25);white-space:nowrap}
.prog-wrap{margin-bottom:20px}
.prog-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600}
.prog-track{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:3px;width:75%;animation:fillBar 1.5s ease .3s both}
@keyframes fillBar{from{width:0}to{width:75%}}
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500}
.sico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.sico.done{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.2)}
.sico.active{background:rgba(128,191,255,.15);border:2px solid var(--p);animation:activePulse 2s ease-in-out infinite}
@keyframes activePulse{0%,100%{box-shadow:0 0 0 0 rgba(128,191,255,.3)}50%{box-shadow:0 0 0 6px rgba(128,191,255,0)}}
.sico.todo{background:rgba(255,255,255,.05);border:1px solid var(--border2)}
.sl{color:#000000}.ss{font-size:11px;color:#00000f;font-weight:400}
.sl.active-lbl{color:#000000;font-weight:700}.sl.todo-lbl{color:#000000}
.hero-badges-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hbadge{background:rgba(128,191,255,.08);border:1px solid rgba(128,191,255,.14);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;transition:all .3s ease}
.hbadge:nth-child(1){animation:flt 4s ease-in-out infinite alternate}
.hbadge:nth-child(2){animation:flt 4s ease-in-out 1.2s infinite alternate}
@keyframes flt{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.hbadge:hover{background:rgba(128,191,255,.16);border-color:rgba(128,191,255,.35);transform:translateY(-4px)!important;animation-play-state:paused}
.hbicon{font-size:20px}
.hbt{font-size:12px;font-weight:700;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif}
.hbs{font-size:11px;color:var(--muted)}

/* =============================================================================
   STATS BAR
   ============================================================================= */

.stats-bar{background:linear-gradient(140deg,#3762e1 0%,#ad1f2a 50%,#dd3c49 80%,#f0a8ae 100%);border-top:1px solid rgba(128,191,255,.15);border-bottom:1px solid rgba(128,191,255,.15);padding:32px 48px;display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.sitem{text-align:center;padding:0 48px;border-right:1px solid rgba(128,191,255,.1)}
.sitem:last-child{border-right:none}
.snum{font-family:'Plus Jakarta Sans',sans-serif;font-size:36px;font-weight:800;background:linear-gradient(135deg,var(--white) 0%,var(--p2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.sdesc{font-size:12px;color:var(--muted);margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* =============================================================================
   SECTIONS
   ============================================================================= */

.section{padding:80px 48px;max-width:1100px;margin:0 auto;background:transparent}
#layanan{max-width:100%;background:radial-gradient(ellipse 80% 60% at 30% 40%,rgba(128,191,255,.1) 0%,transparent 60%),linear-gradient(160deg,var(--bg0) 0%,var(--bg1) 50%,rgb(51,0,0) 100%)}
.sec-full{padding:80px 48px}
.sec-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:#000000;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:10px}
.sec-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:38px;font-weight:800;line-height:1.18;margin-bottom:14px;color:#000000}
.sec-sub{font-size:16px;color:#000000;line-height:1.75;max-width:540px;margin-bottom:48px}

.sec-label1{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:#ffffff;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:10px}
.sec-title1{font-family:'Plus Jakarta Sans',sans-serif;font-size:38px;font-weight:800;line-height:1.18;margin-bottom:14px;color:#ffffff}
.sec-sub1{font-size:16px;color:#ffffff;line-height:1.75;max-width:540px;margin-bottom:48px}


/* =============================================================================
   PROCESS
   ============================================================================= */

.process-bg{background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(128,191,255,.16) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 10% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,rgb(199 101 101)  0%,var(--bg1) 50%,var(--bg0) 100%);border-top:1px solid var(--border2)}
.process-inner{max-width:1100px;margin:0 auto;padding:80px 48px}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pitem{padding:36px 28px;border-right:1px solid var(--border2)}
.pitem:last-child{border-right:none}
.pnum{font-family:'Plus Jakarta Sans',sans-serif;font-size:72px;font-weight:800;color:var(--muted);line-height:1}
.pibox{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.pibox.b{background:rgba(128,191,255,.12);border:1px solid rgba(128,191,255,.2)}
.pibox.o{background:rgba(229,53,53,.12);border:1px solid rgba(229,53,53,.2)}
.pibox.g{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)}
.ptitle{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;color:var(--white)}
.pdesc{font-size:14px;color:var(--muted);line-height:1.65}
.pcta{display:inline-flex;align-items:center;gap:5px;margin-top:16px;font-size:13px;color:var(--muted);font-weight:700;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s}
.pcta:hover{gap:9px;color:var(--p2)}
.mid-banner{background:linear-gradient(135deg,rgba(229,53,53,.16) 0%,rgb(246, 188, 188) 100%);border-top:1px solid rgba(229,53,53,.18);border-bottom:1px solid rgba(229,53,53,.1);padding:32px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.mbt{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:var(--white);margin-bottom:4px}
.mbs{font-size:14px;color:var(--muted)}


/* =============================================================================
   SERVICES
   ============================================================================= */
.svc-bg{background:radial-gradient(ellipse 80% 60% at 30% 40%,rgba(128,191,255,.14) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,rgb(51,0,0) 0%,var(--bg1) 50%,var(--bg0) 100%);border-top:1px solid var(--border2)}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:0 48px}
.svc-card{background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(128,191,255,.16) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 10% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,#ed9298 50%,var(--bg0) 100%);border:1px solid rgb(0, 0, 0);border-radius:18px;padding:28px;transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,rgba(128,191,255,.07) 0%,transparent 60%);opacity:0;transition:opacity .35s}
.svc-card:hover{border-color:rgba(128,191,255,.35);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 0 1px rgba(128,191,255,.12)}
.svc-card:hover::after{opacity:1}
.svc-title{font-family:'Plus Jakarta Sans',sans-serif;align-content:justify;font-size:18px;font-weight:700;margin-bottom:8px;color:var(--white)}
.svc-desc{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:600;margin-bottom:8px;color:var(--white)}
.svc-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px; margin-top:12px;}
.svc-ico.b{background:rgb(255, 255, 255);border:1px solid rgb(228, 103, 114)}
.svc-ico.o{background:rgb(255, 255, 255);border:1px solid rgb(228, 103, 114)}
.svc-ico.g{background:rgb(255, 255, 255);border:1px solid rgb(228, 103, 114)}
.svc-ico.p{background:rgb(255, 255, 255);border:1px solid rgb(228, 103, 114)}
.svc-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;color:var(--white)}
.svc-desc{font-size:14px;color:#000000;line-height:1.65;margin-bottom:16px}
.svc-feats{display:flex;flex-direction:column;gap:7px}
.svc-feat{display:flex;align-items:center;gap:8px;font-size:13px;color:#000000;font-weight:560}
.svc-feat::before{content:'✓';width:16px;height:16px;border-radius:50%;background:rgb(22, 131, 62);color:rgb(212, 247, 226);font-size:9px;font-weight:800;border:1px solid rgb(212, 247, 226);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-lnk{display:inline-flex;align-items:center;gap:5px;margin-top:18px;color:#000000;font-size:13px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;text-decoration:none;transition:all .2s}
.svc-lnk:hover{gap:9px;color:rgb(255, 255, 255)}

/* ============================================================
   CSS — tambahkan ke front-page.css setelah blok #layanan yang ada
   ============================================================ */
 
/* Section jadi relative buat nampung absolute bg */
.svc-has-bg {
  position: relative;
  overflow: hidden;
}
 
/* Background image — full cover */
.svc-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* subtle parallax — hapus kalau mau flat */
  z-index: 0;
}
 
/* Overlay merah tipis — sesuaikan opacity di sini */
.svc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(120, 10, 20, 0.62); /* ← naikkan angka = lebih gelap */
  z-index: 1;
}
 
/* Grid lines merah seperti di hero */
.svc-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(213, 38, 53, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 38, 53, 0.18) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}
 
/* Pastiin konten section di atas semua layer */
#layanan .reveal,
#layanan .svc-grid {
  position: relative;
  z-index: 3;
}
 
/* Sec-label & sec-title tetap keliatan di atas bg */
#layanan .sec-label,
#layanan .sec-title,
#layanan .sec-sub {
  position: relative;
  z-index: 3;
}
 

 
/* =============================================================================
   OUR CLIENTS
   ============================================================================= */
 
.clients-bg{background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(128,191,255,.16) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 10% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,#1a3898 0%,var(--bg1) 50%,var(--bg0) 100%);border-top:1px solid var(--border2);overflow:hidden}
.clients-inner{max-width:900px;margin:0 auto;padding:10px 24px 60px}
.clients-header{text-align:center;margin-bottom:40px}
.clients-header .sec-label{margin-bottom:10px}
.clients-header .sec-title{margin-bottom:14px}
.clients-header .sec-sub{margin:0 auto}
 
/* ── ROW 1: Logo Slider — single row, 3 tampil sekaligus ── */
.clients-logo-grid{overflow:hidden;position:relative;margin-bottom:16px}
.clg-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.clg-item{flex:0 0 calc(100% / 3);box-sizing:border-box;padding:0 7px}
.clg-item img{width:100%;aspect-ratio:1/1;object-fit:contain;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px;display:block;transition:all .3s ease}
.clg-item:hover img{background:rgba(255,255,255,.18);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
 
/* ── ROW 2: Gallery Slider — smooth translateX ── */
.clients-gallery{position:relative;margin-bottom:20px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.15)}
 
/* overflow container */
.gal-track{overflow:hidden;width:100%;border-radius:16px}
 
/* inner flex strip yang bergeser */
.gal-inner{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
 
/* Desktop: 2 slide per view — tiap slide 50% lebar */
.gal-slide{flex:0 0 50%;box-sizing:border-box;padding:0 5px}
.gal-slide:first-child{padding-left:0}
.gal-slide:last-child{padding-right:0}
.gal-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:12px}
 
/* dots */
.gal-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 12px}
.gdot{width:8px;height:8px;border-radius:20px;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:all .35s ease;flex-shrink:0}
.gdot.active{width:24px;background:#fff}
 
/* arrows */
.gal-arrow{position:absolute;top:40%;transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;padding:0}
.gal-arrow:hover{background:rgba(213,38,53,.85)}
.gal-prev{left:10px}
.gal-next{right:10px}
 
/* MOBILE: 1 slide per view */
@media(max-width:768px){
  .clg-item{flex:0 0 calc(100% / 3)} /* logo tetap 3 kolom di mobile */
  .gal-slide{flex:0 0 100%;padding:0}
  .gal-slide img{border-radius:0}
  .gal-track{border-radius:0}
  .gal-prev{left:8px}
  .gal-next{right:8px}
}
 
/* CTA BAWAH */
.clients-cta-wrap{text-align:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--border2)}
.clients-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
 
/* RESPONSIVE */
@media(max-width:600px){
  .clients-inner{padding:40px 16px 40px}
  .clients-logo-grid{gap:10px}
  .clg-item{border-radius:12px;padding:14px 8px}
  .gal-arrow{width:30px;height:30px;font-size:18px}
  .gal-prev{left:8px}
  .gal-next{right:8px}
}

/* =============================================================================
   WHY US
   ============================================================================= */

.why-bg{background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(128,191,255,.16) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 10% 80%,rgba(229,53,53,.1) 0%,transparent 50%),linear-gradient(160deg,var(--bg0) 0%,var(--bg1) 50%,#1a3898 100%);border-top:1px solid var(--border2)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wcard{padding:24px;border-radius:18px;background:rgba(128,191,255,.05);border:1px solid var(--border2);transition:all .3s ease}
.wcard:hover{border-color:rgba(128,191,255,.3);background:rgba(128,191,255,.1);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.wico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.wtitle{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;margin-bottom:6px;color:var(--white)}
.wdesc{font-size:13px;color:var(--muted);line-height:1.65}

/* =============================================================================
   WHY V2
   ============================================================================= */

.why-v2-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.why-v2-left .sec-sub { margin-bottom: 32px; text-align: left; }

.why-v2-points { display: flex; flex-direction: column; gap: 20px; }

.why-v2-point { display: flex; align-items: flex-start; gap: 16px; }

.wvp-ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.wvp-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px;
}

.wvp-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }

/* ── Image Slider ── */
.why-v2-right { display: flex; justify-content: center; }

/* === UKURAN — edit di sini === */
.wis-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;   /* lebar */
  aspect-ratio: 3/4;  /* portrait ratio */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}

/* Images — pure CSS cross-fade */
.wis-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);  /* smooth fade */
}

.wis-img.wis-img-active { opacity: 1; }

/* Hover overlay */
.wis-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(180, 20, 30, 0.18);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.wis-wrap:hover .wis-overlay { opacity: 1; }

/* Next button — putih, icon merah */
.wis-next {
  position: absolute;
  bottom: 20px; right: 20px;
  z-index: 3;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wis-next:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
  .why-v2-inner { grid-template-columns: 1fr; gap: 40px; }
  .wis-wrap { max-width: 100%; aspect-ratio: 4/3; }
}
/* =============================================================================
   TESTIMONIALS
   ============================================================================= */

.testi-bg{background:linear-gradient(180deg,rgb(30, 63, 174) 0%,var(--bg2) 100%);border-top:1px solid var(--border2)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:rgba(128,191,255,.05);border-radius:18px;padding:24px;border:1px solid var(--border2);transition:all .3s ease}
.tcard:hover{transform:translateY(-4px);border-color:rgba(128,191,255,.25);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.tstars{color:#FBBF24;font-size:14px;margin-bottom:12px;letter-spacing:2px}
.ttext{font-size:14px;color:rgba(200,220,255,.75);line-height:1.7;margin-bottom:16px;font-style:italic}
.tauthor{display:flex;align-items:center;gap:10px}
.tavi{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
.tname{font-size:13px;font-weight:700;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif}
.tloc{font-size:12px;color:var(--muted)}

/* =============================================================================
   SURVEY / FORM
   ============================================================================= */

.survey-bg{background:radial-gradient(ellipse 80% 70% at 80% 50%,rgb(128, 157, 255)0%,transparent 60%),linear-gradient(180deg,var(--bg2) 0%,rgb(248, 211, 214) 100%);border-top:1px solid var(--border2)}
.survey-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1100px;margin:0 auto;padding:80px 48px}
.survey-form-box{background:rgba(128,191,255,.06);border-radius:22px;padding:36px;border:1px solid rgba(128,191,255,.15);backdrop-filter:blur(16px);box-shadow:0 24px 64px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
.sf-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:var(--white);margin-bottom:4px}
.sf-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.fg{margin-bottom:16px}
.fl{display:block;font-size:13px;font-weight:600;color:rgba(232,243,255,.6);margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.02em}
.fi,.fs{width:100%;padding:12px 16px;border:1px solid rgba(128,191,255,.15);border-radius:10px;font-size:14px;font-family:'Nunito',sans-serif;color:var(--white);background:rgba(128,191,255,.06);transition:all .25s;outline:none}
.fi::placeholder{color:rgba(255,255,255,.3)}
.fi:focus,.fs:focus{border-color:rgba(128,191,255,.5);background:rgba(128,191,255,.1);box-shadow:0 0 0 3px rgba(128,191,255,.12)}
.fs option{background:#112e80;color:var(--white)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-wa{position:relative;overflow:hidden;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;width:100%;padding:16px;border-radius:13px;font-size:15px;font-weight:700;border:none;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;margin-top:8px;box-shadow:0 4px 20px rgba(37,211,102,.3);transition:all .35s cubic-bezier(.4,0,.2,1)}
.btn-wa::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-100%);transition:transform .7s ease}
.btn-wa:hover::before{transform:translateX(100%)}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(37,211,102,.4)}
.benefit-list{display:flex;flex-direction:column;gap:24px}
.bitem{display:flex;gap:16px;align-items:flex-start}
.bico{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.bico.b{background:rgba(128,191,255,.12);border:1px solid rgba(128,191,255,.2)}
.bico.o{background:rgba(229,53,53,.12);border:1px solid rgba(229,53,53,.2)}
.bico.g{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)}
.btitle{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;color:var(--white);margin-bottom:4px}
.bdesc{font-size:14px;color:var(--muted);line-height:1.65}

/* =============================================================================
   TRUST BAR
   ============================================================================= */

.trust-bar{background:rgba(128,191,255,.04);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:24px 48px;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.tritem{display:flex;align-items:center;gap:10px}
.tribox{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.tribox.g{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)}
.tribox.b{background:rgba(128,191,255,.12);border:1px solid rgba(128,191,255,.2)}
.tribox.o{background:rgba(229,53,53,.12);border:1px solid rgba(229,53,53,.2)}
.tribox.gr{background:rgba(255,255,255,.06);border:1px solid var(--border2)}
.tritxt strong{display:block;font-size:13px;font-weight:700;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif}
.tritxt span{font-size:12px;color:var(--muted)}

/* =============================================================================
   FAQ
   ============================================================================= */

.faq-bg{background:linear-gradient(180deg,#f2a6ab 0%,var(--bg1) 100%);border-top:1px solid var(--border2)}
.faq-inner{max-width:1100px;margin:0 auto;padding:80px 48px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:0}
.faq-item{border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:rgba(128,191,255,.04);transition:border-color .25s}
.faq-item.open{border-color:rgba(128,191,255,.3);background:rgba(128,191,255,.07)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--white);transition:color .2s;user-select:none}
.faq-item.open .faq-q{color:var(--p)}
.faq-icon{width:26px;height:26px;border-radius:50%;border:1px solid rgba(128,191,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;color:var(--p);transition:all .35s cubic-bezier(.4,0,.2,1);background:rgba(128,191,255,.06)}
.faq-item.open .faq-icon{background:rgba(128,191,255,.18);transform:rotate(45deg);border-color:rgba(128,191,255,.5)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),padding .35s ease}
.faq-a-inner{padding:0 20px 18px;font-size:14px;color:var(--muted);line-height:1.7}
.faq-item.open .faq-a{max-height:300px}

/* =============================================================================
   FINAL CTA
   ============================================================================= */

.final-cta{background:radial-gradient(ellipse 100% 100% at 50% 0%,rgb(255, 128, 128) 0%,transparent 50%),linear-gradient(180deg,var(--bg0) 0%,rgb(102, 0, 0) 100%);padding:100px 48px;text-align:center;position:relative;overflow:hidden}
.final-cta::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(128,191,255,.35),transparent)}
.fcinner{position:relative;z-index:2}
.fclabel{font-size:12px;color:#ffffff;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:16px;font-family:'Plus Jakarta Sans',sans-serif;opacity:.8}
.final-cta h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:52px;font-weight:800;color:var(--white);line-height:1.12;margin-bottom:16px}
.final-cta h2 em{background:linear-gradient(54deg,#6d1010 0%,#5c1c1c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}
.final-cta p{font-size:17px;color:var(--muted);max-width:480px;margin:0 auto 40px;line-height:1.7}
.fc-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-white{position:relative;overflow:hidden;background:#fff;color:var(--bg1);padding:16px 36px;border-radius:12px;font-size:15px;font-weight:700;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 4px 20px rgba(255,255,255,.18);transition:all .35s cubic-bezier(.4,0,.2,1)}
.btn-white::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(18,46,128,.1) 50%,transparent 65%);transform:translateX(-100%);transition:transform .7s ease}
.btn-white:hover::before{transform:translateX(100%)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(255,255,255,.22)}
.btn-outline-w{position:relative;overflow:hidden;background:transparent;color:var(--white);padding:16px 36px;border-radius:12px;font-size:15px;font-weight:600;border:1px solid rgba(255,255,255,.2);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;transition:all .3s ease}
.btn-outline-w:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* =============================================================================
   FOOTER
   ============================================================================= */

.footer{background:rgb(152, 27, 37);border-top:1px solid rgba(128,191,255,.12)}
.footer-main{max-width:1100px;margin:0 auto;padding:60px 48px 48px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:#000000;text-decoration:none;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-logo img{height:36px;width:auto;border-radius:4px}
.footer-logo em{color:#000000;font-style:normal}
.footer-tagline{font-size:14px;color:var(--muted);line-height:1.7;max-width:240px;margin-bottom:24px}
.fci{display:flex;align-items:center;gap:10px;font-size:13px;color:#000000;margin-bottom:10px;text-decoration:none;transition:color .2s}
.fci:hover{color:var(--p)}
.fci-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.fcol-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.flink{display:block;font-size:14px;color:#000000;text-decoration:none;margin-bottom:10px;transition:all .2s;padding-left:0}
.flink:hover{color:#f0a8ae;padding-left:5px}
.socials{display:flex;gap:10px;margin-top:4px;margin-bottom:24px}
.social-btn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none;transition:all .25s}
.social-btn:hover{background:rgba(128,191,255,.15);border-color:rgba(128,191,255,.3);transform:translateY(-2px)}
.footer-divider{height:1px;background:var(--border2);max-width:1100px;margin:0 auto}
.footer-bottom{max-width:1100px;margin:0 auto;padding:20px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:13px;color:rgba(255,255,255,.25)}
.footer-badges{display:flex;gap:8px}
.fbadge{font-size:11px;color:rgba(255,255,255,.3);border:1px solid var(--border2);padding:4px 10px;border-radius:6px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif}

/* =============================================================================
   FLOATING WHATSAPP
   ============================================================================= */

.float-wa{position:fixed;bottom:28px;right:28px;z-index:1000;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(37,211,102,.45);text-decoration:none;animation:waggle 5s ease-in-out infinite}
@keyframes waggle{0%,70%,100%{transform:scale(1)}75%{transform:scale(1.14)}80%{transform:scale(.95)}85%{transform:scale(1.08)}90%{transform:scale(.98)}}
.float-wa:hover{transform:scale(1.12)!important;box-shadow:0 8px 32px rgba(37,211,102,.6);animation:none}
.fwa-tip{position:absolute;right:68px;background:rgba(10,24,72,.95);color:var(--white);font-size:13px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;padding:7px 14px;border-radius:10px;white-space:nowrap;border:1px solid var(--border);opacity:0;transform:translateX(8px);transition:all .25s ease;pointer-events:none}
.float-wa:hover .fwa-tip{opacity:1;transform:translateX(0)}

/* =============================================================================
   SCROLL REVEAL
   ============================================================================= */

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}

/* =============================================================================
   UTILITIES
   ============================================================================= */

.wasvg{fill:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media(max-width:900px){
  .topbar{padding:0 16px;}.topbar-right{display:none}
  .nav{top:46px;padding:0 20px;height:74px}.nav-links,.nav-cta{display:none}.hamburger{display:flex}
  .mobile-menu{display:block;top:110px}
  .hero{padding:148px 20px 72px}.hero-inner{grid-template-columns:1fr;gap:40px}
  h1{font-size:38px}
  .stats-bar{padding:24px 20px;gap:0}.sitem{padding:0 16px}.snum{font-size:26px}
  .process-inner{padding:60px 20px}.process-grid{grid-template-columns:1fr;gap:0}
  .pitem{border-right:none;border-bottom:1px solid var(--border2);padding:28px 0}.pitem:last-child{border-bottom:none}
  .mid-banner{padding:24px 20px;flex-direction:column;text-align:center}
  .section{padding:60px 20px}.sec-full{padding:60px 20px}
  #layanan .reveal,#layanan .svc-grid{padding-left:12px;padding-right:0}
  .svc-grid{grid-template-columns:1fr;padding:0 20px}.why-grid{grid-template-columns:1fr 1fr;gap:14px}.testi-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}.faq-inner{padding:60px 20px}
  .survey-inner{grid-template-columns:1fr;padding:60px 20px;gap:40px}
  .trust-bar{padding:20px;gap:24px}.final-cta{padding:72px 20px}.final-cta h2{font-size:36px}
  .footer-main{grid-template-columns:1fr 1fr;padding:48px 20px 32px;gap:32px}.footer-bottom{padding:20px}
  .fwa-tip{display:none}
}
@media(max-width:500px){
  h1{font-size:32px}.hero-ctas{flex-direction:column}
  .btn-primary,.btn-secondary{text-align:center;justify-content:center}
  .why-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr}.frow{grid-template-columns:1fr}.fc-btns{flex-direction:column;align-items:center}
}