/* =====================================================
   HOME REVAMP JWM - Blue Conversion Landing
   File khusus landing utama tahap 1 (statis/prototype)
===================================================== */
:root{
  --primary:#0a48b3;
  --primary-2:#0b63ce;
  --primary-3:#0d8bff;
  --navy:#071b3a;
  --blue-soft:#eef6ff;
  --blue-line:#dbeafe;
  --accent:#15a3ff;
  --shadow-blue:0 24px 70px rgba(10,72,179,.18);
  --shadow-soft:0 12px 36px rgba(7,27,58,.08);
}
body{background:#fff;color:#071b3a}.header{background:rgba(255,255,255,.92);box-shadow:0 8px 26px rgba(7,27,58,.05)}.nav{height:84px}.brand span{display:none}.brand img{height:58px;width:auto;max-width:260px;object-fit:contain}.nav-menu{font-size:15px;gap:24px}.nav-menu a{color:#15253d}.nav-menu a:hover{color:var(--primary)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-3));color:#fff;box-shadow:0 18px 44px rgba(10,72,179,.26)}.btn-primary:hover{box-shadow:0 22px 55px rgba(10,72,179,.34)}.btn-outline{border-color:rgba(10,72,179,.22);color:var(--primary);background:#fff}.btn-dark{background:var(--navy);color:#fff}.eyebrow{border-color:rgba(10,72,179,.16);background:#fff;color:var(--primary)}.hero{padding:92px 0 72px;background:radial-gradient(circle at 86% 15%,rgba(13,139,255,.17),transparent 31%),radial-gradient(circle at 8% 12%,rgba(10,72,179,.11),transparent 28%),linear-gradient(180deg,#f7fbff 0%,#fff 76%)}.hero-wrap{grid-template-columns:1.06fr .94fr;gap:56px}.headline .mark-blue{color:var(--primary)}.lead strong{color:#10294f}.hero-visual:before{content:'';position:absolute;inset:26px -20px -18px 28px;background:linear-gradient(135deg,rgba(10,72,179,.12),rgba(13,139,255,.2));border-radius:34px;z-index:-1;filter:blur(.2px)}.mockup{border:10px solid #fff;border-radius:34px;box-shadow:var(--shadow-blue)}.mockup img{height:405px;object-fit:cover;object-position:center}.float-card{border-color:rgba(10,72,179,.12);box-shadow:0 18px 48px rgba(10,72,179,.18);color:#071b3a}.float-card.one,.float-card.two{background:#fff}.float-card.three{left:40px;bottom:-22px;animation:float 4.2s ease-in-out infinite;background:var(--primary);color:#fff}.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;max-width:640px}.hero-stat{background:#fff;border:1px solid var(--blue-line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-soft)}.hero-stat b{display:block;font-size:22px;color:var(--primary);font-family:var(--font-head)}.hero-stat span{font-size:12px;font-weight:800;color:#53657d}.trust-pills .pill{border-color:var(--blue-line);box-shadow:0 8px 22px rgba(10,72,179,.05)}.soft{background:linear-gradient(180deg,#f5faff,#eef6ff)}.card{border-color:var(--blue-line);box-shadow:var(--shadow-soft)}.card:hover{box-shadow:var(--shadow-blue)}.icon{background:linear-gradient(135deg,rgba(10,72,179,.11),rgba(13,139,255,.17));color:var(--primary)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.section-head .lead{margin:0}.conversion-note{background:#fff;border:1px solid var(--blue-line);border-radius:24px;padding:24px;box-shadow:var(--shadow-soft)}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.check-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--blue-line);border-radius:16px;padding:13px 14px;font-weight:800;color:#17375f}.check-item:before{content:'✓';display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px}.service-card{position:relative;overflow:hidden}.service-card:after{content:'';position:absolute;right:-36px;top:-36px;width:120px;height:120px;border-radius:50%;background:rgba(13,139,255,.09)}.service-card h3{font-size:22px;margin-bottom:8px}.service-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--primary);font-weight:900}.blue-band{background:linear-gradient(135deg,#071b3a,#0a48b3);color:#fff;position:relative;overflow:hidden}.blue-band:before{content:'';position:absolute;right:-80px;top:-120px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08)}.blue-band .lead,.blue-band .text-muted{color:rgba(255,255,255,.78)}.blue-band .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none;color:#fff}.blue-band .icon{background:rgba(255,255,255,.12);color:#fff}.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}.price-card{position:relative;padding:0;overflow:hidden;border:1px solid var(--blue-line);border-radius:26px;background:#fff;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}.price-card.featured{border:2px solid var(--primary);box-shadow:var(--shadow-blue);transform:translateY(-8px)}.price-top{padding:24px 24px 18px;background:linear-gradient(180deg,#f6fbff,#fff)}.price-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--blue-soft);color:var(--primary);font-size:12px;font-weight:900;margin-bottom:14px}.best-badge{position:absolute;right:18px;top:18px;background:var(--primary);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900}.price-card h3{font-size:24px;margin:0 0 10px;font-family:var(--font-head)}.price-desc{font-size:14px;color:#60708a;min-height:66px}.price{color:var(--primary);font-size:34px;line-height:1.05}.monthly{font-size:13px;color:#66748a;font-weight:800;margin-top:6px}.price-body{padding:0 24px 24px;display:flex;flex-direction:column;flex:1}.instant-box{background:#f7fbff;border:1px dashed rgba(10,72,179,.25);border-radius:18px;padding:12px 13px;margin-bottom:15px;font-size:13px;color:#244467}.instant-box b{color:var(--primary)}.feature-list li{font-size:14px;line-height:1.45}.feature-list li.no:before{content:'×';color:#ef4444}.price-actions{margin-top:auto;padding-top:18px}.price-actions .btn{width:100%}.price-card details{margin-top:10px}.price-card summary{cursor:pointer;color:var(--primary);font-weight:900;font-size:13px}.gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.gallery-scroll{border:1px solid var(--blue-line);border-radius:28px;background:#fff;padding:14px;box-shadow:var(--shadow-soft)}.gallery-item{border-color:var(--blue-line)}.logo-card{border-color:var(--blue-line)}.cta-panel{border-radius:34px;background:linear-gradient(135deg,#071b3a,#0a48b3);color:#fff;padding:42px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;box-shadow:var(--shadow-blue);overflow:hidden;position:relative}.cta-panel:before{content:'';position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1)}.cta-panel .lead{color:rgba(255,255,255,.78)}.blog-card{padding:0;overflow:hidden}.blog-thumb{height:150px;background:linear-gradient(135deg,rgba(10,72,179,.12),rgba(13,139,255,.2));display:grid;place-items:center;font-size:34px;color:var(--primary)}.blog-body{padding:22px}.mini-label{font-size:12px;font-weight:900;color:var(--primary);text-transform:uppercase;letter-spacing:.04em}.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.contact-item{background:#fff;border:1px solid var(--blue-line);border-radius:18px;padding:16px;box-shadow:var(--shadow-soft)}.wa-float{background:#0a48b3;box-shadow:0 18px 44px rgba(10,72,179,.34)}
@media(max-width:1100px){.package-grid{grid-template-columns:repeat(2,1fr)}.price-card.featured{transform:none}.gallery-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){.brand img{height:48px}.hero-wrap{gap:36px}.section-head{display:block}.hero-stats{grid-template-columns:1fr 1fr}.cta-panel{grid-template-columns:1fr}.contact-strip{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.nav{height:72px}.brand img{height:40px;max-width:210px}.hero{padding:54px 0}.mockup img{height:260px}.hero-stats,.check-grid,.package-grid{grid-template-columns:1fr}.headline{font-size:36px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.cta-panel{padding:28px}.float-card.three{display:none}}


/* =====================================================
   SECTION: Revisi Header & Hero Atas
   Catatan: penyesuaian khusus dari mas untuk landing utama.
===================================================== */
.header .brand img,
.brand img{
  height:72px;
  max-width:320px;
}

.nav{
  height:92px;
}

.nav-menu .btn,
.btn-primary{
  color:#fff !important;
}

.hero-wrap{
  align-items:center;
}

.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-visual .mockup{
  aspect-ratio:4 / 5;
  max-height:680px;
  min-height:560px;
  width:min(100%, 520px);
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(10,72,179,.22);
  border:1px solid rgba(10,72,179,.12);
  background:#eef6ff;
}

.hero-visual .mockup img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.hero-stats{
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
  gap:16px;
  margin-top:28px;
}

.hero-stat{
  padding:22px 22px;
  min-height:178px;
  border:1px solid rgba(10,72,179,.14);
  background:rgba(255,255,255,.86);
  box-shadow:0 18px 50px rgba(10,72,179,.08);
}

.hero-stat b{
  display:block;
  font-size:19px;
  line-height:1.25;
  color:var(--primary);
  margin-bottom:10px;
}

.hero-stat span{
  font-size:13.5px;
  line-height:1.7;
  color:#53657d;
  font-weight:600;
}

.float-card.three{
  color:#fff;
}

@media (max-width: 1080px){
  .header .brand img,
  .brand img{
    height:64px;
    max-width:280px;
  }

  .nav{
    height:84px;
  }

  .hero-visual .mockup{
    min-height:460px;
    max-height:560px;
    width:min(100%, 460px);
  }

  .hero-stats{
    grid-template-columns:1fr;
  }

  .hero-stat{
    min-height:auto;
  }
}

@media (max-width: 720px){
  .header .brand img,
  .brand img{
    height:54px;
    max-width:230px;
  }

  .nav{
    height:76px;
  }

  .hero-visual .mockup{
    aspect-ratio:1 / 1;
    min-height:0;
    max-height:none;
    width:100%;
    border-radius:26px;
  }

  .hero-visual .mockup img{
    object-position:center;
  }

  .hero-stat{
    padding:20px;
  }

  .hero-stat b{
    font-size:18px;
  }

  .hero-stat span{
    font-size:13px;
  }
}


/* =====================================================
   SECTION: Fix Header Logo, CTA Button, Quick Proof
   Catatan: override kuat agar tidak kalah dari CSS lama.
===================================================== */

/* Logo header dibuat lebih jelas dan dominan */
.header .container.nav .brand,
.container.nav .brand{
  min-width:210px;
}

.header .container.nav .brand img,
.container.nav .brand img,
.brand img{
  width:190px !important;
  height:auto !important;
  max-width:190px !important;
  min-height:auto !important;
  object-fit:contain !important;
}

/* Tombol biru wajib teks putih */
.header .nav-menu a.btn.btn-primary,
.nav-menu a.btn.btn-primary,
a.btn.btn-primary,
.btn.btn-primary,
.btn-primary{
  color:#ffffff !important;
}

.header .nav-menu a.btn.btn-primary:hover,
.nav-menu a.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn.btn-primary:hover{
  color:#ffffff !important;
}

/* Quick proof dibuat lebih compact dan tidak seperti paragraf panjang */
.hero-stats{
  gap:14px !important;
  margin-top:26px !important;
}

.hero-stat{
  min-height:128px !important;
  padding:20px 18px !important;
}

.hero-stat b{
  font-size:18px !important;
  line-height:1.35 !important;
  margin-bottom:8px !important;
}

.hero-stat span{
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
}

/* Desktop: quick proof tetap 3 kolom, tetapi lebih pendek */
@media (min-width: 981px){
  .hero-stats{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }

  .hero-stat{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }
}

/* Tablet dan mobile */
@media (max-width: 980px){
  .header .container.nav .brand img,
  .container.nav .brand img,
  .brand img{
    width:170px !important;
    max-width:170px !important;
  }

  .hero-stat{
    min-height:auto !important;
  }
}

@media (max-width: 640px){
  .header .container.nav .brand img,
  .container.nav .brand img,
  .brand img{
    width:150px !important;
    max-width:150px !important;
  }

  .hero-stats{
    grid-template-columns:1fr !important;
  }

  .hero-stat{
    padding:18px !important;
  }
}


/* =====================================================
   SECTION: Fix Hero Mobile Layout
   Catatan: memastikan gambar hero turun full-width di mobile.
===================================================== */
@media (max-width: 860px){
  .hero{
    padding-top:42px !important;
  }

  .hero-wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
    align-items:start !important;
  }

  .hero-wrap > .reveal,
  .hero-visual{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .hero-visual{
    order:2 !important;
    display:block !important;
    position:relative !important;
    margin-top:4px !important;
  }

  .hero-visual .mockup{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    height:auto !important;
    border-radius:28px !important;
  }

  .hero-visual .mockup img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .hero-actions .btn{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .trust-pills{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .float-card{
    font-size:13px !important;
    padding:12px 16px !important;
  }

  .float-card.one{
    top:14px !important;
    left:14px !important;
  }

  .float-card.two{
    right:14px !important;
    bottom:18px !important;
  }

  .float-card.three{
    left:18px !important;
    bottom:-14px !important;
  }
}

@media (max-width: 480px){
  .hero{
    padding-top:30px !important;
  }

  .hero-wrap{
    gap:26px !important;
  }

  .hero-visual .mockup{
    border-radius:22px !important;
  }

  .float-card.three{
    display:none !important;
  }
}


/* =====================================================
   SECTION: Final Fix Hero Visual + Trust Pills
   Catatan: trust point dipastikan berada DI BAWAH gambar,
   bukan di samping gambar.
===================================================== */

.hero-visual{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:18px !important;
  width:100% !important;
}

.hero-photo-box{
  position:relative !important;
  width:min(100%, 520px) !important;
  margin-inline:auto !important;
}

.hero-photo-box .mockup{
  width:100% !important;
  aspect-ratio:4 / 5 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:620px !important;
  overflow:hidden !important;
  border-radius:34px !important;
}

.hero-photo-box .mockup img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

.hero-visual-trust{
  width:min(100%, 520px) !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin:4px auto 0 !important;
  position:relative !important;
  z-index:4 !important;
}

.hero-visual-trust .pill{
  width:100% !important;
  max-width:100% !important;
  justify-content:flex-start !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(10,72,179,.16) !important;
  color:#1b2b45 !important;
  box-shadow:0 12px 30px rgba(10,72,179,.08) !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

/* Pastikan float card hanya menempel pada foto, bukan pada trust pills */
.hero-photo-box .float-card{
  position:absolute !important;
  z-index:5 !important;
}

.hero-photo-box .float-card.one{
  top:22px !important;
  left:-26px !important;
}

.hero-photo-box .float-card.two{
  right:-28px !important;
  bottom:72px !important;
}

.hero-photo-box .float-card.three{
  left:42px !important;
  bottom:-20px !important;
}

/* Quick proof tetap pendek, rapi, dan tidak mengulang trust pill */
.hero-stats{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
}

.hero-stat{
  min-height:132px !important;
  padding:20px 18px !important;
}

.hero-stat b{
  font-size:18px !important;
  line-height:1.35 !important;
}

.hero-stat span{
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
}

/* Mobile layout */
@media (max-width: 860px){
  .hero-wrap{
    grid-template-columns:1fr !important;
  }

  .hero-visual{
    width:100% !important;
    margin-top:8px !important;
  }

  .hero-photo-box{
    width:100% !important;
  }

  .hero-photo-box .mockup{
    aspect-ratio:1 / 1 !important;
    max-height:none !important;
    border-radius:24px !important;
  }

  .hero-photo-box .float-card.one{
    top:12px !important;
    left:12px !important;
  }

  .hero-photo-box .float-card.two{
    right:12px !important;
    bottom:16px !important;
  }

  .hero-photo-box .float-card.three{
    display:none !important;
  }

  .hero-visual-trust{
    width:100% !important;
    margin-top:12px !important;
  }

  .hero-visual-trust .pill{
    font-size:13px !important;
    padding:12px 14px !important;
  }

  .hero-stats{
    grid-template-columns:1fr !important;
  }

  .hero-stat{
    min-height:auto !important;
  }
}


/* =====================================================
   SECTION: Visual Enhancement Landing Flow
   Catatan:
   - Menambah dekorasi halus agar section lebih hidup.
   - Tidak mengubah tema utama biru JWM.
   - Tidak menyentuh section yang dikecualikan user.
===================================================== */

/* Jarak eyebrow/span section ke judul dibuat lebih lega */
.eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:18px !important;
}

/* Untuk section-head, pastikan title tidak terlalu mepet label */
.section-head .eyebrow + .title,
.eyebrow + .title{
  margin-top:8px !important;
}

/* Elemen dekoratif umum */
.flow-qa-section,
.quality-section,
.services-section,
.solution-section,
.vendor-warning-section{
  position:relative;
  overflow:hidden;
}

.flow-qa-section > .container,
.quality-section > .container,
.services-section > .container,
.solution-section > .container,
.vendor-warning-section > .container{
  position:relative;
  z-index:2;
}

/* SECTION: Edukasi dasar - dibuat lebih focusable */
.flow-qa-section{
  background:
    radial-gradient(circle at 12% 18%, rgba(10,72,179,.08), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(13,139,255,.07), transparent 28%),
    #fff;
}

.flow-qa-section::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-140px;
  top:80px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(10,72,179,.09), rgba(13,139,255,.04));
  pointer-events:none;
}

.flow-qa-section::after{
  content:"?";
  position:absolute;
  right:clamp(28px, 5vw, 92px);
  top:clamp(80px, 12vw, 140px);
  font-family:"Plus Jakarta Sans", sans-serif;
  font-size:clamp(90px, 12vw, 180px);
  font-weight:900;
  color:rgba(10,72,179,.045);
  line-height:1;
  pointer-events:none;
}

/* Card Q&A diberi aksen garis agar tidak datar */
.qa-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.qa-card::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:24px;
  width:4px;
  border-radius:99px;
  background:linear-gradient(180deg, var(--primary), var(--primary-3));
  opacity:.78;
}

.qa-card:hover{
  transform:translateY(-4px);
  border-color:rgba(10,72,179,.24);
  box-shadow:0 24px 70px rgba(10,72,179,.12);
}

/* SECTION: Urgensi kualitas website */
.quality-section{
  background:
    linear-gradient(135deg, #eef6ff 0%, #f8fbff 52%, #eef6ff 100%) !important;
}

.quality-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(10,72,179,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,72,179,.045) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.7;
  pointer-events:none;
}

.quality-section::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-90px;
  bottom:40px;
  border-radius:48px;
  transform:rotate(18deg);
  background:rgba(10,72,179,.055);
  pointer-events:none;
}

.quality-section .urgency-card{
  position:relative;
  overflow:hidden;
}

.quality-section .urgency-card::before{
  content:"";
  position:absolute;
  width:78px;
  height:78px;
  right:-30px;
  top:-30px;
  border-radius:24px;
  background:rgba(10,72,179,.08);
  transform:rotate(14deg);
}

/* SECTION: Risiko vendor - label dibuat terlihat */
.warning-panel .eyebrow{
  color:#ffffff !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.10);
}

/* Background section vendor diberi ambience, panel tetap fokus */
.vendor-warning-section{
  background:
    radial-gradient(circle at 18% 22%, rgba(10,72,179,.10), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(13,139,255,.10), transparent 30%),
    #fff;
}

.vendor-warning-section::before{
  content:"";
  position:absolute;
  inset:auto -80px 18px auto;
  width:310px;
  height:310px;
  border-radius:999px;
  background:rgba(10,72,179,.06);
  pointer-events:none;
}

/* Garis pengarah soft pada warning items */
.warning-item{
  position:relative;
  padding-left:44px !important;
}

.warning-item::before{
  content:"!";
  position:absolute;
  left:16px;
  top:16px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

/* SECTION: Solusi JWM */
.solution-section{
  background:
    radial-gradient(circle at 14% 12%, rgba(10,72,179,.10), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%) !important;
}

.solution-section::before{
  content:"";
  position:absolute;
  top:80px;
  right:6vw;
  width:150px;
  height:150px;
  border:2px dashed rgba(10,72,179,.16);
  border-radius:44px;
  transform:rotate(16deg);
  pointer-events:none;
}

.solution-section::after{
  content:"";
  position:absolute;
  bottom:90px;
  left:5vw;
  width:110px;
  height:110px;
  border-radius:999px;
  background:rgba(13,139,255,.08);
  pointer-events:none;
}

/* SECTION: Layanan JWM - diberi jalur koneksi tipis */
.services-section{
  background:
    radial-gradient(circle at 82% 20%, rgba(13,139,255,.08), transparent 30%),
    #eef6ff !important;
}

.services-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0%, transparent 36%, rgba(10,72,179,.055) 36.2%, transparent 36.6%, transparent 100%),
    linear-gradient(65deg, transparent 0%, transparent 58%, rgba(10,72,179,.045) 58.2%, transparent 58.6%, transparent 100%);
  pointer-events:none;
}

.services-section .service-card{
  position:relative;
  overflow:hidden;
}

.services-section .service-card::before{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:92px;
  height:92px;
  border-radius:999px;
  background:rgba(10,72,179,.06);
}

.services-section .service-card .icon{
  position:relative;
  z-index:2;
}

/* Animasi sangat halus untuk elemen dekoratif */
@keyframes jwmFloatSoft{
  0%,100%{ transform:translateY(0) rotate(16deg); }
  50%{ transform:translateY(-8px) rotate(16deg); }
}

.solution-section::before{
  animation:jwmFloatSoft 5.5s ease-in-out infinite;
}

/* Responsif */
@media (max-width:860px){
  .eyebrow{
    margin-bottom:14px !important;
  }

  .flow-qa-section::after,
  .solution-section::before,
  .solution-section::after{
    display:none;
  }

  .warning-item{
    padding-left:42px !important;
  }
}


/* =====================================================
   SECTION: Paket Harga - Highlight Core Conversion Area
   Catatan: price list adalah area inti calon customer membaca harga.
===================================================== */

/* Badge Paling Diminati dibuat lebih rapi dan lebih terlihat */
.best-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:38px !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  color:#fff !important;
  background:linear-gradient(135deg, #0a48b3, #0d63d8) !important;
  box-shadow:0 14px 34px rgba(10,72,179,.24) !important;
}

.best-badge .badge-flash{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  color:#ffb000 !important;
  background:rgba(255,255,255,.16) !important;
  font-size:14px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

/* ADD-ON/Percepatan dibuat kuning transparan agar langsung ter-notice */
.instant-box{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  background:rgba(255, 184, 28, .12) !important;
  border:1px dashed rgba(255, 184, 28, .52) !important;
  color:#4a3410 !important;
  box-shadow:0 10px 28px rgba(255,184,28,.10) !important;
}

.instant-box b{
  color:#8a5a00 !important;
}

.instant-box .instant-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(255,184,28,.22) !important;
  color:#f59e0b !important;
  font-size:15px !important;
  margin-top:1px !important;
}

/* Enterprise tetap fleksibel, tapi style tetap premium */
.instant-box-blue{
  background:rgba(10,72,179,.075) !important;
  border-color:rgba(10,72,179,.22) !important;
  color:#1b2b45 !important;
  box-shadow:0 10px 28px rgba(10,72,179,.08) !important;
}

.instant-box-blue b{
  color:#0a48b3 !important;
}

.instant-box-blue .instant-icon{
  background:rgba(10,72,179,.10) !important;
  color:#0a48b3 !important;
}

/* Animasi details/show fitur agar tidak kaku */
.price-details{
  overflow:hidden !important;
}

.price-details summary{
  cursor:pointer !important;
  transition:color .2s ease, transform .2s ease !important;
}

.price-details summary:hover{
  color:var(--primary) !important;
  transform:translateX(2px);
}

.price-details[open] summary{
  margin-bottom:12px !important;
}

.price-details > .feature-list{
  animation:jwmDetailsOpen .2s ease both !important;
  transform-origin:top;
}

@keyframes jwmDetailsOpen{
  from{
    opacity:0;
    transform:translateY(-6px) scaleY(.96);
    max-height:0;
  }
  to{
    opacity:1;
    transform:translateY(0) scaleY(1);
    max-height:420px;
  }
}

/* Price card sedikit lebih responsif terhadap hover agar area harga terasa premium */
.price-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.price-card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 80px rgba(10,72,179,.13) !important;
}

/* Featured card tetap paling menonjol tanpa mengganggu bacaan */
.price-card.featured{
  position:relative !important;
}

.price-card.featured::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 2px rgba(10,72,179,.22);
}

@media (max-width:720px){
  .best-badge{
    right:16px !important;
    top:16px !important;
    padding:8px 14px !important;
    font-size:13px !important;
  }

  .instant-box{
    gap:8px !important;
  }
}


/* =====================================================
   SECTION: Paket Harga Final - TERPOPULER, Instant, Toggle
===================================================== */

/* Featured card dengan ribbon atas, bukan badge menimpa konten */
.price-card.featured{
  padding-top:0 !important;
  overflow:hidden !important;
  border-color:rgba(10,72,179,.36) !important;
}

.price-card.featured .popular-ribbon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:56px !important;
  margin:-1px -1px 22px !important;
  padding:16px 18px !important;
  background:linear-gradient(135deg, #0a48b3 0%, #0d8bff 100%) !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:14px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-radius:inherit inherit 0 0 !important;
  box-shadow:0 16px 40px rgba(10,72,179,.22) !important;
}

.price-card.featured .price-top{
  padding-top:0 !important;
}

/* Hilangkan style badge lama jika masih ada */
.best-badge{
  display:none !important;
}

/* Badge hari pengerjaan hijau */
.price-badge.workday-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(22, 163, 74, .10) !important;
  color:#16a34a !important;
  border:1px solid rgba(22, 163, 74, .14) !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

/* ADD-ON Instant dibuat ringkas dan lebih notice */
.instant-box{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:18px !important;
  border-radius:18px !important;
  background:rgba(255, 184, 28, .12) !important;
  border:1px dashed rgba(255, 184, 28, .55) !important;
  box-shadow:0 12px 30px rgba(255,184,28,.10) !important;
  color:#4a3410 !important;
}

.instant-box .instant-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, #f59e0b, #facc15) !important;
  color:#fff !important;
  font-size:15px !important;
  box-shadow:0 10px 22px rgba(245,158,11,.20) !important;
}

.instant-box div{
  display:grid !important;
  gap:5px !important;
}

.instant-box b{
  color:#8a5a00 !important;
  font-size:13px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  line-height:1.35 !important;
}

.instant-box span{
  display:block !important;
  color:#3a2a12 !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

.instant-box small{
  display:block !important;
  color:#6f4c05 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

/* Enterprise custom tetap beda warna */
.instant-box-blue{
  background:rgba(10,72,179,.075) !important;
  border-color:rgba(10,72,179,.24) !important;
  color:#1b2b45 !important;
  box-shadow:0 10px 28px rgba(10,72,179,.08) !important;
}

.instant-box-blue .instant-icon{
  background:linear-gradient(135deg, #0a48b3, #0d8bff) !important;
}

.instant-box-blue b{
  color:#0a48b3 !important;
}

.instant-box-blue span{
  color:#1b2b45 !important;
}

/* Toggle custom show/hide fitur */
.feature-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  border:0 !important;
  background:transparent !important;
  color:#0a48b3 !important;
  font-family:inherit !important;
  font-weight:900 !important;
  font-size:15px !important;
  padding:10px 0 !important;
  cursor:pointer !important;
  transition:color .2s ease, transform .2s ease !important;
}

.feature-toggle:hover{
  color:#0d8bff !important;
  transform:translateX(2px);
}

.feature-toggle .toggle-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  transition:transform .2s ease !important;
}

.feature-toggle.is-open .toggle-icon{
  transform:rotate(0deg);
}

.feature-more{
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  transform:translateY(-6px) !important;
  transition:max-height .2s ease, opacity .2s ease, transform .2s ease !important;
}

.feature-more.is-open{
  max-height:360px !important;
  opacity:1 !important;
  transform:translateY(0) !important;
}

.feature-more .feature-list{
  margin-top:8px !important;
  padding-top:4px !important;
}

/* Disable old details style if still cached */
.price-details{
  display:none !important;
}

@media (max-width:720px){
  .price-card.featured .popular-ribbon{
    min-height:50px !important;
    margin-bottom:18px !important;
  }

  .instant-box{
    padding:16px !important;
  }
}


/* =====================================================
   SECTION: Paket Harga Typography & Shape Refinement
   Catatan:
   - ADD-ON dibuat compact, medium, dan nyaman dibaca.
   - TERPOPULER dibuat seperti shape tab rounded, bukan kotak.
   - Penjelasan tidak bold, gunakan medium.
===================================================== */

/* Semua teks penjelasan dibuat medium, bukan bold */
.text-muted,
.lead,
.price-desc,
.card p,
.qa-card p,
.instant-box span,
.instant-box small,
.monthly,
.feature-list li,
.contact-item p,
.blog-card p{
  font-weight:500 !important;
}

/* Info harga bulanan jangan bold */
.monthly{
  font-weight:500 !important;
  color:#64748b !important;
}

/* Border/corner price card ditipiskan */
.price-card{
  border-width:1px !important;
}

.price-card.featured{
  border-width:1px !important;
  border-color:rgba(10,72,179,.24) !important;
}

.price-card.featured::before{
  box-shadow:0 0 0 1px rgba(10,72,179,.16) !important;
}

/* Shape TERPOPULER seperti tab rounded di atas card */
.price-card.featured .popular-ribbon{
  min-height:54px !important;
  margin:-1px -1px 0 !important;
  padding:15px 18px !important;
  border-radius:28px 28px 0 0 !important;
  background:linear-gradient(135deg, #0a48b3 0%, #0d8bff 100%) !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

/* Isi card featured diberi ruang setelah tab */
.price-card.featured .price-top{
  padding-top:22px !important;
}

/* ADD-ON layout vertikal ringkas: petir -> add-on -> butuh -> selesai */
.instant-box{
  display:grid !important;
  justify-items:center !important;
  text-align:center !important;
  gap:8px !important;
  padding:16px 14px !important;
  border-radius:18px !important;
}

.instant-box .instant-icon{
  width:28px !important;
  height:28px !important;
  font-size:14px !important;
  margin:0 !important;
}

.instant-box div{
  display:grid !important;
  justify-items:center !important;
  gap:4px !important;
}

.instant-box b{
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:.055em !important;
  line-height:1.35 !important;
}

.instant-box span{
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
}

.instant-box small{
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
}

/* Toggle fitur jangan bold tebal, cukup semibold */
.feature-toggle{
  font-weight:600 !important;
  font-size:14px !important;
}

/* Summary/details fallback jika masih ada */
.price-details summary{
  font-weight:600 !important;
}

/* Harga utama tetap boleh tegas, tapi bukan bagian deskripsi */
.price{
  font-weight:800 !important;
}

/* Card title tetap tegas, deskripsi tetap medium */
.price-card h3,
.service-card h3,
.card b{
  font-weight:800;
}

@media (max-width:720px){
  .price-card.featured .popular-ribbon{
    min-height:50px !important;
    border-radius:24px 24px 0 0 !important;
  }

  .instant-box{
    padding:15px 12px !important;
  }
}


/* =====================================================
   SECTION: Global Typography Refinement
   Catatan:
   - Headline/judul boleh bold/semi-bold.
   - Deskripsi/paragraf dibuat medium agar nyaman dibaca.
   - ADD-ON dibuat lebih kecil dan ringan.
===================================================== */

/* Deskripsi utama dan paragraf seluruh landing */
p,
.lead,
.text-muted,
.card p,
.section-head p,
.qa-card p,
.price-desc,
.monthly,
.feature-list li,
.instant-box span,
.instant-box small,
.contact-item p,
.blog-body p,
.footer p,
.solution-item,
.warning-item,
.check-item{
  font-weight:500 !important;
}

/* Penjelasan panjang jangan terasa terlalu tebal */
.lead{
  font-weight:500 !important;
  line-height:1.82 !important;
}

.text-muted{
  font-weight:500 !important;
  line-height:1.78 !important;
}

/* Judul tetap tegas */
h1, h2, h3,
.headline,
.title,
.card b,
.price-card h3,
.service-card h3{
  font-weight:800;
}

/* Label kecil boleh semi-bold, tidak terlalu berat */
.eyebrow,
.mini-label,
.price-badge,
.workday-badge{
  font-weight:700 !important;
}

/* Tombol tetap tegas untuk CTA */
.btn{
  font-weight:800 !important;
}

/* ADD-ON dibuat lebih kecil dan lebih ringan */
.instant-box{
  gap:7px !important;
  padding:14px 12px !important;
}

.instant-box .instant-icon{
  width:25px !important;
  height:25px !important;
  font-size:13px !important;
}

.instant-box div{
  gap:3px !important;
}

.instant-box b{
  font-weight:600 !important;
  font-size:11px !important;
  letter-spacing:.055em !important;
  line-height:1.3 !important;
}

.instant-box span{
  font-weight:500 !important;
  font-size:12px !important;
  line-height:1.38 !important;
}

.instant-box small{
  font-weight:500 !important;
  font-size:11.5px !important;
  line-height:1.38 !important;
}

/* Toggle tampilkan/sembunyikan fitur dibuat semibold ringan */
.feature-toggle{
  font-weight:600 !important;
  font-size:13.5px !important;
}

/* Info harga bulanan medium */
.monthly{
  font-weight:500 !important;
}

/* Beberapa label yang memang menjadi title kecil tetap cukup tegas */
.price,
.logo-card,
.hero-stat b,
.qa-card h3,
.warning-panel h2,
.solution-box h2{
  font-weight:800 !important;
}

@media (max-width:720px){
  .lead{
    line-height:1.76 !important;
  }

  .instant-box b{
    font-size:10.8px !important;
  }

  .instant-box span{
    font-size:11.8px !important;
  }

  .instant-box small{
    font-size:11.2px !important;
  }
}


/* =====================================================
   SECTION: Global Paragraph Readability Final
   Catatan:
   - Semua deskripsi/paragraf dibuat regular agar nyaman dibaca.
   - Headline, title, dan CTA tetap tegas.
===================================================== */

/* Paragraf panjang dan deskripsi umum */
p,
.lead,
.text-muted,
.section-head .lead,
.section-head p,
.card p,
.qa-card p,
.service-card p,
.price-desc,
.blog-body p,
.contact-item p,
.footer p,
.cta-panel p{
  font-weight:400 !important;
  color:#5f6f84;
}

/* Deskripsi dalam card tetap nyaman, tidak terlalu tebal */
.urgency-card p,
.flow-note p,
.solution-box p,
.warning-panel p,
.price-card p{
  font-weight:400 !important;
}

/* List fitur tetap jelas tapi tidak berat */
.feature-list li,
.check-item,
.solution-item,
.warning-item{
  font-weight:500 !important;
}

/* Subheadline hero tetap sedikit lebih kuat, tapi tidak semi-bold berat */
.hero .lead{
  font-weight:400 !important;
  color:#52657c !important;
}

/* Bagian brand di subheadline tetap tegas */
.hero .lead strong,
.lead strong{
  font-weight:800 !important;
  color:#0b1d36 !important;
}

/* Title dan headline tetap tegas */
h1, h2, h3,
.headline,
.title,
.card b,
.price-card h3,
.service-card h3,
.qa-card h3{
  font-weight:800 !important;
}

/* Eyebrow/label masih boleh semibold sebagai penanda section */
.eyebrow,
.price-badge,
.workday-badge,
.mini-label{
  font-weight:700 !important;
}

/* Tombol tetap tegas untuk CTA */
.btn{
  font-weight:800 !important;
}


/* =====================================================
   SECTION: Paket Harga - Shape TERPOPULER Final
   Catatan:
   - Warna tetap biru JWM.
   - Bentuk dibuat seperti contoh: wrapper biru + inner putih rounded.
===================================================== */

.price-card.featured.popular-card{
  padding:0 !important;
  overflow:hidden !important;
  border:none !important;
  border-radius:32px !important;
  background:linear-gradient(135deg, #0a48b3 0%, #0d8bff 100%) !important;
  box-shadow:0 28px 85px rgba(10,72,179,.18) !important;
}

.price-card.featured.popular-card::before{
  display:none !important;
}

.price-card.featured.popular-card .popular-ribbon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:58px !important;
  margin:0 !important;
  padding:16px 18px 14px !important;
  border-radius:32px 32px 0 0 !important;
  background:transparent !important;
  color:#ffffff !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

.price-card.featured.popular-card .popular-inner{
  background:#ffffff !important;
  border-radius:28px 28px 32px 32px !important;
  margin:0 !important;
  padding:28px !important;
  border:1px solid rgba(10,72,179,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.price-card.featured.popular-card .price-top{
  padding-top:0 !important;
}

.price-card.featured.popular-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 34px 95px rgba(10,72,179,.22) !important;
}

/* Pastikan override lama tidak mengubah shape ini */
.price-card.featured .popular-ribbon{
  border-radius:32px 32px 0 0 !important;
}

@media (max-width:720px){
  .price-card.featured.popular-card{
    border-radius:28px !important;
  }

  .price-card.featured.popular-card .popular-ribbon{
    min-height:52px !important;
    border-radius:28px 28px 0 0 !important;
    font-size:13px !important;
  }

  .price-card.featured.popular-card .popular-inner{
    border-radius:24px 24px 28px 28px !important;
    padding:22px !important;
  }
}


/* =====================================================
   SECTION: Paket Harga - TERPOPULER Floating Tab Final
   Catatan:
   - Card Diamond tetap sejajar dan lebar normal seperti card lain.
   - TERPOPULER hanya menjadi top tab/floating badge.
   - Border/corner tetap rapi seperti contoh.
===================================================== */

/* Reset model wrapper biru penuh sebelumnya */
.price-card.featured.popular-tab-card{
  position:relative !important;
  overflow:visible !important;
  padding:34px 26px 26px !important;
  border:1px solid rgba(10,72,179,.42) !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 24px 70px rgba(10,72,179,.12) !important;
}

/* Hilangkan efek wrapper/inner lama */
.price-card.featured.popular-tab-card .popular-inner{
  display:contents !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Garis corner/outline dibuat rapi dan tidak terlalu tebal */
.price-card.featured.popular-tab-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:28px !important;
  pointer-events:none !important;
  box-shadow:0 0 0 1px rgba(10,72,179,.18) !important;
  display:block !important;
}

/* Tab TERPOPULER floating di atas, tidak mendorong isi terlalu jauh */
.price-card.featured.popular-tab-card .popular-ribbon{
  position:absolute !important;
  left:50% !important;
  top:-21px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:min(76%, 230px) !important;
  min-height:42px !important;
  margin:0 !important;
  padding:12px 22px !important;
  border-radius:18px 18px 18px 18px !important;
  background:linear-gradient(135deg, #0a48b3 0%, #0d8bff 100%) !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  box-shadow:0 14px 34px rgba(10,72,179,.24) !important;
  z-index:5 !important;
}

/* Isi card featured kembali normal */
.price-card.featured.popular-tab-card .price-top{
  padding-top:0 !important;
}

.price-card.featured.popular-tab-card .price-body{
  width:100% !important;
}

/* Hover tetap premium */
.price-card.featured.popular-tab-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 30px 86px rgba(10,72,179,.17) !important;
}

/* Pastikan override lama wrapper biru penuh tidak menang */
.price-card.featured.popular-tab-card{
  background:#fff !important;
}

.price-card.featured.popular-tab-card .popular-ribbon + .price-top{
  margin-top:0 !important;
}

/* Untuk card grid: beri jarak atas agar tab tidak ketabrak section */
.package-grid{
  padding-top:24px !important;
}

/* Mobile */
@media (max-width:720px){
  .price-card.featured.popular-tab-card{
    padding:32px 22px 24px !important;
    border-radius:24px !important;
  }

  .price-card.featured.popular-tab-card::before{
    border-radius:24px !important;
  }

  .price-card.featured.popular-tab-card .popular-ribbon{
    top:-19px !important;
    min-height:38px !important;
    width:min(78%, 210px) !important;
    font-size:12px !important;
    border-radius:16px !important;
  }
}


/* =====================================================
   SECTION: Paket Harga - TERPOPULER Full Bar Final
   Catatan:
   - Bentuk mengikuti referensi: bar penuh di atas card.
   - Isi card tetap normal, rapi, dan sejajar seperti paket lain.
===================================================== */

/* Beri ruang di atas grid untuk bar TERPOPULER yang keluar dari card */
.package-grid{
  padding-top:56px !important;
  align-items:stretch !important;
}

/* Card Diamond kembali seperti card normal, tidak sempit dan tidak menjadi wrapper biru */
.price-card.featured.popular-featured-card{
  position:relative !important;
  overflow:visible !important;
  padding:26px !important;
  border:1px solid rgba(10,72,179,.38) !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 24px 70px rgba(10,72,179,.12) !important;
  min-width:0 !important;
}

/* Outline tipis seperti card lain */
.price-card.featured.popular-featured-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:28px !important;
  pointer-events:none !important;
  box-shadow:0 0 0 1px rgba(10,72,179,.14) !important;
  display:block !important;
}

/* Bar TERPOPULER full width seperti contoh, bukan badge kecil */
.price-card.featured.popular-featured-card .popular-ribbon{
  position:absolute !important;
  left:-1px !important;
  right:-1px !important;
  top:-50px !important;
  width:auto !important;
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:15px 18px !important;
  border-radius:28px 28px 0 0 !important;
  background:linear-gradient(135deg, #0a48b3 0%, #0d8bff 100%) !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  z-index:6 !important;
}

/* Isi Diamond harus sama rapinya dengan card lain */
.price-card.featured.popular-featured-card .price-top,
.price-card.featured.popular-featured-card .price-body{
  width:100% !important;
  min-width:0 !important;
  padding-top:0 !important;
}

/* Harga jangan pecah/berantakan */
.price-card .price{
  white-space:nowrap !important;
  letter-spacing:-.035em !important;
  line-height:1.05 !important;
}

/* Deskripsi paket jangan terlalu sempit dan tetap nyaman */
.price-card .price-desc{
  line-height:1.65 !important;
}

/* Feature list spacing dirapikan */
.price-card .feature-list{
  display:grid !important;
  gap:10px !important;
}

.price-card .feature-list li{
  line-height:1.5 !important;
}

/* ADD-ON jangan terlalu besar dan tetap rapi */
.price-card .instant-box{
  width:100% !important;
  box-sizing:border-box !important;
}

/* Button paket tetap full dan rapi */
.price-card .price-actions .btn{
  width:100% !important;
  justify-content:center !important;
}

/* Hover tetap halus */
.price-card.featured.popular-featured-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 30px 86px rgba(10,72,179,.17) !important;
}

/* Override model floating tab kecil sebelumnya */
.price-card.featured.popular-tab-card .popular-ribbon,
.price-card.featured.popular-card .popular-ribbon{
  position:absolute !important;
  left:-1px !important;
  right:-1px !important;
  top:-50px !important;
  width:auto !important;
  border-radius:28px 28px 0 0 !important;
}

/* Tablet/mobile */
@media (max-width:720px){
  .package-grid{
    padding-top:50px !important;
  }

  .price-card.featured.popular-featured-card{
    padding:24px 22px !important;
    border-radius:24px !important;
  }

  .price-card.featured.popular-featured-card::before{
    border-radius:24px !important;
  }

  .price-card.featured.popular-featured-card .popular-ribbon{
    top:-46px !important;
    min-height:48px !important;
    border-radius:24px 24px 0 0 !important;
    font-size:12px !important;
  }

  .price-card .price{
    font-size:32px !important;
  }
}


/* =====================================================
   FINAL PATCH: Paket Diamond / TERPOPULER
   Tujuan: badge menyatu dengan card seperti referensi, isi rapi,
   dan spacing mengikuti paket harga lain.
===================================================== */

.package-grid{
  padding-top:32px !important;
  align-items:stretch !important;
}

.price-card.featured.popular-featured-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:0 !important;
  border:1.5px solid rgba(10,72,179,.72) !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 24px 72px rgba(10,72,179,.14) !important;
  transform:none !important;
}

.price-card.featured.popular-featured-card::before{
  content:none !important;
  display:none !important;
}

.price-card.featured.popular-featured-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 30px 86px rgba(10,72,179,.18) !important;
}

.price-card.featured.popular-featured-card .popular-ribbon{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  min-height:52px !important;
  margin:0 !important;
  padding:15px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#0a48b3 0%,#0d8bff 100%) !important;
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  z-index:2 !important;
}

.price-card.featured.popular-featured-card .price-top{
  width:100% !important;
  padding:24px 24px 18px !important;
  background:#ffffff !important;
}

.price-card.featured.popular-featured-card .price-body{
  width:100% !important;
  min-width:0 !important;
  padding:0 24px 24px !important;
  display:flex !important;
  flex:1 !important;
  flex-direction:column !important;
}

.price-card.featured.popular-featured-card .workday-badge{
  margin-bottom:16px !important;
  padding:7px 13px !important;
  font-size:11px !important;
  border-radius:999px !important;
}

.price-card.featured.popular-featured-card h3{
  margin-bottom:10px !important;
  font-size:24px !important;
  line-height:1.2 !important;
  color:#071b3a !important;
}

.price-card.featured.popular-featured-card .price-desc{
  min-height:74px !important;
  margin:0 0 16px !important;
  color:#53657d !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

.price-card.featured.popular-featured-card .price{
  margin-top:0 !important;
  color:#0a48b3 !important;
  font-size:32px !important;
  line-height:1.05 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
}

.price-card.featured.popular-featured-card .monthly{
  margin-top:7px !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.price-card.featured.popular-featured-card .instant-box{
  position:relative !important;
  display:block !important;
  width:100% !important;
  margin:0 0 20px !important;
  padding:24px 16px 16px !important;
  border:1px dashed rgba(245,158,11,.56) !important;
  border-radius:16px !important;
  background:#fffbeb !important;
  box-shadow:none !important;
  color:#78350f !important;
  text-align:center !important;
}

.price-card.featured.popular-featured-card .instant-box .instant-icon{
  position:absolute !important;
  top:-13px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:26px !important;
  height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#fbbf24 !important;
  color:#ffffff !important;
  font-size:13px !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(245,158,11,.18) !important;
}

.price-card.featured.popular-featured-card .instant-box div{
  display:grid !important;
  gap:5px !important;
}

.price-card.featured.popular-featured-card .instant-box b{
  display:block !important;
  color:#92400e !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
}

.price-card.featured.popular-featured-card .instant-box span,
.price-card.featured.popular-featured-card .instant-box small{
  display:block !important;
  color:#78350f !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}

.price-card.featured.popular-featured-card .feature-list{
  display:grid !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
}

.price-card.featured.popular-featured-card .feature-list li{
  position:relative !important;
  padding-left:22px !important;
  color:#334155 !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
}

.price-card.featured.popular-featured-card .feature-list li::before{
  top:0 !important;
  left:0 !important;
  color:#16a34a !important;
  font-weight:900 !important;
}

.price-card.featured.popular-featured-card .feature-toggle{
  margin-top:16px !important;
  padding:8px 0 !important;
  font-size:13px !important;
  line-height:1.3 !important;
}

.price-card.featured.popular-featured-card .feature-more{
  margin-top:8px !important;
}

.price-card.featured.popular-featured-card .price-actions{
  margin-top:auto !important;
  padding-top:22px !important;
}

.price-card.featured.popular-featured-card .price-actions .btn{
  width:100% !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
}

@media (max-width:1100px){
  .package-grid{
    padding-top:0 !important;
  }
}

@media (max-width:640px){
  .price-card.featured.popular-featured-card{
    border-radius:22px !important;
  }

  .price-card.featured.popular-featured-card .popular-ribbon{
    min-height:44px !important;
    padding:13px 16px !important;
    font-size:10px !important;
  }

  .price-card.featured.popular-featured-card .price-top{
    padding:22px 20px 16px !important;
  }

  .price-card.featured.popular-featured-card .price-body{
    padding:0 20px 22px !important;
  }

  .price-card.featured.popular-featured-card .price-desc{
    min-height:auto !important;
  }

  .price-card.featured.popular-featured-card .price{
    font-size:30px !important;
    letter-spacing:-.04em !important;
  }

  .price-card.featured.popular-featured-card .instant-box{
    padding:24px 14px 15px !important;
  }
}

/* =====================================================
   FINAL PATCH: Client Logo Grid - Tanpa Card
   Scope khusus section "Dipercaya Banyak Client".
   Logo dibuat lebih besar dan jarak antar logo lebih rapat.
===================================================== */
.client-logo-section .client-logo-cloud{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:18px 24px !important;
  width:100% !important;
  margin-top:28px !important;
}

.client-logo-section .client-logo-item{
  width:100% !important;
  min-height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 2px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.client-logo-section .client-logo-item:hover{
  transform:none !important;
  box-shadow:none !important;
}

.client-logo-section .client-logo-item img{
  display:block !important;
  width:auto !important;
  max-width:180px !important;
  height:auto !important;
  max-height:82px !important;
  object-fit:contain !important;
  transform:scale(1.18) !important;
  transform-origin:center !important;
}

@media (max-width:1100px){
  .client-logo-section .client-logo-cloud{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:18px 22px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:168px !important;
    max-height:76px !important;
    transform:scale(1.14) !important;
  }
}

@media (max-width:768px){
  .client-logo-section .client-logo-cloud{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px 18px !important;
  }

  .client-logo-section .client-logo-item{
    min-height:66px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:140px !important;
    max-height:66px !important;
    transform:scale(1.08) !important;
  }
}

@media (max-width:520px){
  .client-logo-section .client-logo-cloud{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px 14px !important;
  }

  .client-logo-section .client-logo-item{
    min-height:58px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:110px !important;
    max-height:54px !important;
    transform:scale(1.04) !important;
  }
}

/* =====================================================
   FINAL PATCH: Client Logo Centered Cloud
   Scope khusus section "Dipercaya Banyak Client".
   Logo disusun rata tengah, lebih rapat, dan lebih besar.
===================================================== */
.client-logo-section .client-logo-cloud{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  column-gap:16px !important;
  row-gap:10px !important;
  width:min(100%,1180px) !important;
  margin:26px auto 0 !important;
}

.client-logo-section .client-logo-item{
  flex:0 1 142px !important;
  width:142px !important;
  min-height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 4px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.client-logo-section .client-logo-item:hover{
  transform:none !important;
  box-shadow:none !important;
}

.client-logo-section .client-logo-item img{
  display:block !important;
  width:auto !important;
  max-width:150px !important;
  height:auto !important;
  max-height:70px !important;
  object-fit:contain !important;
  transform:scale(1.12) !important;
  transform-origin:center !important;
}

@media (max-width:1100px){
  .client-logo-section .client-logo-cloud{
    column-gap:14px !important;
    row-gap:10px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:132px !important;
    width:132px !important;
    min-height:60px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:138px !important;
    max-height:66px !important;
    transform:scale(1.08) !important;
  }
}

@media (max-width:768px){
  .client-logo-section .client-logo-cloud{
    column-gap:12px !important;
    row-gap:9px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:112px !important;
    width:112px !important;
    min-height:54px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:116px !important;
    max-height:58px !important;
    transform:scale(1.04) !important;
  }
}

@media (max-width:520px){
  .client-logo-section .client-logo-cloud{
    column-gap:10px !important;
    row-gap:8px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:92px !important;
    width:92px !important;
    min-height:48px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:94px !important;
    max-height:48px !important;
    transform:scale(1.02) !important;
  }
}

/* =====================================================
   FINAL PATCH V2: Client Logo Lengkap, Rapat, Rata Tengah
   Scope khusus section "Dipercaya Banyak Client".
===================================================== */
.client-logo-section .client-logo-cloud{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px 10px !important;
  width:min(100%,1160px) !important;
  margin:22px auto 0 !important;
}

.client-logo-section .client-logo-item{
  flex:0 1 122px !important;
  width:122px !important;
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 2px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.client-logo-section .client-logo-item img{
  display:block !important;
  width:auto !important;
  max-width:138px !important;
  height:auto !important;
  max-height:64px !important;
  object-fit:contain !important;
  transform:scale(1.16) !important;
  transform-origin:center !important;
}

@media (max-width:1100px){
  .client-logo-section .client-logo-cloud{
    gap:6px 8px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:112px !important;
    width:112px !important;
    min-height:52px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:126px !important;
    max-height:60px !important;
    transform:scale(1.12) !important;
  }
}

@media (max-width:768px){
  .client-logo-section .client-logo-cloud{
    gap:6px 8px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:96px !important;
    width:96px !important;
    min-height:48px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:106px !important;
    max-height:54px !important;
    transform:scale(1.08) !important;
  }
}

@media (max-width:520px){
  .client-logo-section .client-logo-cloud{
    gap:5px 6px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:86px !important;
    width:86px !important;
    min-height:44px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:92px !important;
    max-height:46px !important;
    transform:scale(1.04) !important;
  }
}

/* =====================================================
   FINAL PATCH V3: Client Logo Spacing Lebih Rapi
   Scope khusus section "Dipercaya Banyak Client".
   Memberi jarak visual antar batas logo sekitar 5px,
   tanpa membuat logo kembali terlalu jauh.
===================================================== */
.client-logo-section .client-logo-cloud{
  gap:5px !important;
  width:min(100%,1160px) !important;
}

.client-logo-section .client-logo-item{
  flex:0 1 145px !important;
  width:145px !important;
  min-height:70px !important;
  padding:0 !important;
}

.client-logo-section .client-logo-item img{
  max-width:138px !important;
  max-height:62px !important;
  transform:none !important;
}

@media (max-width:1100px){
  .client-logo-section .client-logo-cloud{
    gap:5px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:132px !important;
    width:132px !important;
    min-height:66px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:126px !important;
    max-height:58px !important;
    transform:none !important;
  }
}

@media (max-width:768px){
  .client-logo-section .client-logo-cloud{
    gap:5px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:112px !important;
    width:112px !important;
    min-height:58px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:106px !important;
    max-height:50px !important;
    transform:none !important;
  }
}

@media (max-width:520px){
  .client-logo-section .client-logo-cloud{
    gap:5px !important;
  }

  .client-logo-section .client-logo-item{
    flex-basis:96px !important;
    width:96px !important;
    min-height:50px !important;
  }

  .client-logo-section .client-logo-item img{
    max-width:90px !important;
    max-height:44px !important;
    transform:none !important;
  }
}