:root{
      --navy:#0D2B4F;
      --navy-2:#061A33;
      --navy-3:#123A67;
      --gold:#C9973D;
      --gold-2:#E3B765;
      --gold-dark:#9E7224;
      --white:#FFFFFF;
      --soft:#F2F4F7;
      --soft-2:#F8FAFC;
      --text:#0D2B4F;
      --muted:#667085;
      --line:#E5E7EB;
      --danger:#B54708;
      --success:#C9973D;
      --shadow:0 18px 50px rgba(13,43,79,.12);
      --shadow2:0 22px 55px rgba(13,43,79,.16);
      --max:1240px;
    }
	
	/* ===============================
   APEX DROPDOWN MENU
================================ */

.desktop-menu{
  overflow:visible;
}

.nav-item-apex{
  position:relative;
  display:flex;
  align-items:center;
}

.nav-link-apex{
  display:flex !important;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.dropdown-arrow-apex{
  font-size:11px;
  color:var(--gold);
  transition:.22s ease;
}

.has-dropdown-apex:hover .dropdown-arrow-apex{
  transform:rotate(180deg);
}

.dropdown-menu-apex{
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%) translateY(12px);
  width:420px;
  background:#fff;
  border:1px solid rgba(201,151,61,.26);
  border-radius:24px;
  padding:16px;
  box-shadow:0 22px 55px rgba(13,43,79,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.22s ease;
  z-index:2000;
}

.dropdown-menu-apex::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:20px;
  height:20px;
  background:#fff;
  border-left:1px solid rgba(201,151,61,.26);
  border-top:1px solid rgba(201,151,61,.26);
}

.has-dropdown-apex:hover .dropdown-menu-apex{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.dropdown-menu-apex a{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:15px 14px !important;
  border-radius:16px;
  color:var(--navy) !important;
  text-transform:none !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.2;
  transition:.2s ease;
}

.dropdown-menu-apex a::after{
  display:none !important;
}

.dropdown-menu-apex a:hover{
  background:linear-gradient(135deg,rgba(201,151,61,.13),rgba(13,43,79,.04));
  transform:translateX(4px);
}

.drop-icon-apex{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(201,151,61,.14);
  color:var(--gold-dark);
  font-size:22px;
}

.dropdown-menu-apex strong{
  display:block;
  color:var(--navy);
  font-size:15px;
  margin-bottom:4px;
}

.dropdown-menu-apex small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
     font-family: 'Roboto', sans-serif;
      background:#f5f9fb;
      color:var(--text);
      line-height:1.45;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    .container{width:min(var(--max),calc(100% - 165px));margin:auto}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:56px;
      padding:15px 26px;
      border-radius:999px;
      font-size:16px;
      font-weight:900;
      border:0;
      cursor:pointer;
      text-align:center;
      transition:.22s ease;
      white-space:nowrap;
    }
    .btn-green{
      background:linear-gradient(135deg,var(--green),var(--green-dark));
      color:#fff;
      box-shadow:0 14px 28px rgba(10,197,82,.30);
    }
    .btn-green:hover,
    .btn-orange:hover{
      transform:translateY(-2px);
      filter:saturate(1.05);
    }
    .btn-orange{
      background:linear-gradient(135deg,var(--orange),var(--orange2));
      color:#fff;
      box-shadow:0 14px 30px rgba(255,105,31,.32);
    }
    .btn-outline{
      background:rgba(255,255,255,.10);
      color:#fff;
      border:2px solid rgba(255,255,255,.72);
      backdrop-filter:blur(4px);
    }

    .section{padding:48px 0}
    .section-title{
      font-size:clamp(25px,3vw,38px);
      line-height:1.12;
      font-weight:950;
      color:#142f3f;
      margin-bottom:22px;
      letter-spacing:-.4px;
    }
    .section-title span{color:#0a9f50}

    .site-wrap{
      width:100%;
      min-height:100vh;
      background:#fff;
      overflow:hidden;
    }

    /* HEADER */
    .top-header{
      width:100%;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(8px);
      padding:10px 0;
      position:sticky;
      top:0;
      z-index:1000;
      box-shadow:0 6px 22px rgba(0,0,0,.05);
    }
    .header-inner{
      width:min(var(--max),calc(100% - 165px));
      margin:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:26px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:16px;
      min-width:0;
      flex:0 0 auto;
    }
    .tri-logo{
      width:54px;
      height:54px;
      flex:0 0 auto;
      position:relative;
      display:grid;
      place-items:center;
    }
    .tri-logo::before{
      content:"";
      width:0;height:0;
      border-left:22px solid transparent;
      border-right:22px solid transparent;
      border-bottom:40px solid #111;
      position:absolute;
      top:5px;
    }
    .tri-logo::after{
      content:"";
      width:0;height:0;
      border-left:16px solid transparent;
      border-right:16px solid transparent;
      border-bottom:29px solid #ff3e2d;
      position:absolute;
      top:13px;
    }
    .brand-name{
      font-size:32px;
      line-height:1;
      font-weight:950;
      letter-spacing:.5px;
      color:var(--brand);
      white-space:nowrap;
    }
    .brand-name .one{
      display:inline-block;
      background:var(--red);
      color:#fff;
      padding:4px 11px 5px;
      border-radius:8px;
      margin-left:5px;
    }
    .brand-sub{
      margin-top:8px;
      color:#2d3138;
      font-size:16px;
      font-weight:900;
      white-space:nowrap;
    }
    .desktop-menu{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:28px;
      margin-left:auto;
      font-size:15px;
      font-weight:900;
      color:#21313a;
    }
    .desktop-menu a{
      padding:12px 0;
      position:relative;
	  text-transform: uppercase;
	  font-size: 15px !important;
  font-weight: 600 !important;
	  
    }
    .desktop-menu a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:4px;
      width:0;
      height:3px;
      background:var(--lime);
      border-radius:99px;
      transition:.22s ease;
    }
    .desktop-menu a:hover::after{width:100%}
    .header-cta .btn{
      min-height:52px;
      padding:13px 22px;
      font-size:15px;
      border-radius:15px;
    }
    #menuCheck{display:none}
    .menu-toggle{
      width:58px;
      height:58px;
      border:0;
      border-radius:14px;
      background:var(--lime);
      display:none;
      place-items:center;
      cursor:pointer;
      box-shadow:0 12px 28px rgba(185,239,61,.28);
      flex:0 0 auto;
    }
    .hamburger{
      width:28px;
      height:20px;
      position:relative;
    }
    .hamburger::before,
    .hamburger::after,
    .hamburger span{
      content:"";
      position:absolute;
      left:0;
      width:100%;
      height:4px;
      background:#15313a;
      border-radius:99px;
    }
    .hamburger::before{top:0}
    .hamburger span{top:8px}
    .hamburger::after{bottom:0}
    .mobile-menu{
      display:none;
      background:#fff;
      border-top:1px solid var(--line);
      padding:12px 24px 24px;
    }
    .mobile-menu a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:15px 6px;
      border-bottom:1px solid var(--line);
      font-weight:900;
      color:#1c303a;
    }
    .mobile-menu .btn{
      width:100%;
      margin-top:16px;
      border-radius:14px;
    }
    #menuCheck:checked ~ .mobile-menu{display:block}

    /* HERO */
    .hero{
      position:relative;
      min-height:690px;
      overflow:hidden;
      background:
        linear-gradient(90deg,
          rgba(12,43,79,.20) 0%,
          rgba(12,43,79,.10) 31%,
          rgba(12,43,79,.45) 55%,
          rgba(12,43,79,.91) 77%,
          rgba(12,43,79,.96) 100%
        ),
        url("basmirayap.jpg");
      background-size:cover;
      background-position:left center;
      display:flex;
      align-items:center;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:130px;
      background:linear-gradient(180deg,transparent,rgba(29,86,187,.48));
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:2;
      width:min(var(--max),calc(100% - 48px));
      margin:auto;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      min-height:690px;
      padding:70px 0 86px;
    }
    .hero-copy{
      max-width:650px;
      margin-left:auto;
      text-align:left;
      padding:26px 0;
    }
    .kicker{
      color:var(--yellow);
      font-size:22px;
      font-weight:950;
      margin-bottom:20px;
      letter-spacing:.2px;
    }
    .hero h1{
    font-size: clamp(53px,3vw,101px);
      line-height:.94;
      letter-spacing:-3px;
      color:#deae56;
      font-weight:950;
      margin-bottom:22px;
    }
    .hero h1 span{
      color:var(--yellow);
      display:block;
    }
    .hero p{
      max-width:590px;
      color:#f0f7fa;
      font-size:24px;
      line-height:1.5;
      margin-bottom:26px;
    }
    .hero-bullets{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:28px;
    }
    .hero-bullets span{
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.20);
      color:#fff;
      border-radius:999px;
      padding:9px 13px;
      font-size:13px;
      font-weight:900;
    }
    .hero-bullets span::before{
      content:"✓";
      color:#70ffab;
      margin-right:7px;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }
    .hero-actions .btn{
      min-height:60px;
      padding-inline:28px;
    }
    .floating-phone{
      position:absolute;
      right:24px;
      top:50%;
      transform:translateY(-50%);
      width:72px;
      height:72px;
      border-radius:50%;
      background:#15c85b;
      color:#fff;
      border:6px solid #fff;
      display:grid;
      place-items:center;
      font-size:30px;
      box-shadow:0 18px 38px rgba(0,0,0,.25);
      z-index:3;
    }

    /* QUICK BENEFITS */
    .quick-benefits{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      background:#fff;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .quick-item{
      padding:20px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      text-align:left;
      border-right:1px solid var(--line);
    }
    .quick-item:last-child{border-right:0}
    .q-icon{
      width:48px;
      height:48px;
      border-radius:15px;
      background:#f1f7fa;
      display:grid;
      place-items:center;
      font-size:24px;
      flex:0 0 auto;
    }
    .quick-item h3{
      font-size:15px;
      color:#1e313a;
      font-weight:950;
      line-height:1.15;
    }
    .quick-item p{
      color:#6c7a84;
      font-size:12px;
      font-weight:700;
      margin-top:3px;
    }

    .problem-wrap{
      display:grid;
      grid-template-columns:1fr 285px;
      gap:18px;
      align-items:stretch;
    }
    .problem-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
    }
    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
     
      transition:.22s ease;
    }
    .card:hover{transform:translateY(-4px)}
    .pic{height:142px;background-size:cover;background-position:center}
    .card h3{
      text-align:center;
      padding:12px 10px;
      font-size:14px;
      line-height:1.15;
    }
    .p1{background-image:url("https://images.unsplash.com/photo-1604709177225-055f99402ea3?auto=format&fit=crop&w=500&q=80")}
    .p2{background-image:url("https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=500&q=80")}
    .p3{background-image:url("https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=500&q=80")}
    .p4{background-image:url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=500&q=80")}
    .p5{background-image:url("https://images.unsplash.com/photo-1517581177682-a085bb7ffb15?auto=format&fit=crop&w=500&q=80")}
    .p6{background-image:url("https://images.unsplash.com/photo-1598300056393-4aac492f4344?auto=format&fit=crop&w=500&q=80")}
    .warning{
      border:1px solid #ffc5bb;
      background:#fff;
      border-radius:18px;
      color:#e63b25;
      padding:24px 18px;
      text-align:center;
      display:flex;
      flex-direction:column;
      justify-content:center;
      box-shadow:0 12px 28px rgba(230,59,37,.08);
    }
    .warning .wicon{font-size:52px;line-height:1;margin-bottom:10px}
    .warning h3{font-size:28px;line-height:1.1;margin-bottom:12px}
    .warning p{font-weight:700;color:#71433c}

    .offer{
      background:linear-gradient(135deg,#003f37,#006856);
      color:#fff;
      border-radius:24px;
      box-shadow:var(--shadow2);
      padding:30px;
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:28px;
      align-items:center;
      overflow:hidden;
      position:relative;
    }
    .offer::after{
      content:"";
      position:absolute;
      width:320px;height:320px;border-radius:50%;
      background:rgba(255,255,255,.06);
      right:-100px;top:-110px;
    }
    .offer small{color:#d4efe8;font-weight:700}
    .offer-kicker{font-size:13px;font-weight:900;letter-spacing:.5px;color:#d3fff3;margin-bottom:10px}
    .price-label{font-size:23px;font-weight:900}
    .price{font-size:clamp(42px,6vw,66px);line-height:1;color:var(--yellow);font-weight:950;margin:6px 0 12px}
    .check-list{list-style:none;display:grid;gap:10px;position:relative;z-index:1}
    .check-list li{font-weight:900}
    .check-list li::before{
      content:"✓";
      width:18px;height:18px;border-radius:50%;
      display:inline-grid;place-items:center;
      background:#1fc06b;color:#fff;font-size:12px;
      margin-right:9px;
    }
    .offer-actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
    .offer-actions .btn{min-width:270px}
    .offer-note{text-align:center;font-weight:800;color:#e7fff8;font-size:13px}

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:14px;
    }
    .feature{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      text-align:center;
      padding:20px 12px;
      box-shadow:0 10px 24px rgba(0,0,0,.04);
    }
    .feature .icon{
      width:46px;height:46px;border-radius:14px;
      margin:0 auto 10px;
      display:grid;place-items:center;
      background:#f1f7f5;font-size:23px;
    }
    .feature h3{font-size:15px;margin-bottom:6px}
    .feature p{font-size:12px;color:#6a7a82;font-weight:700}

    .service-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .service-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 12px 28px rgba(0,0,0,.06);
    }
    .service-card .pic{height:165px}
    .s1{background-image:url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=700&q=80")}
    .s2{background-image:url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=700&q=80")}
    .s3{background-image:url("https://images.unsplash.com/photo-1581092919535-7146ff1a590b?auto=format&fit=crop&w=700&q=80")}
    .s4{background-image:url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=700&q=80")}
    .service-body{padding:16px}
    .service-body h3{font-size:18px;margin-bottom:6px}
    .service-body p{font-size:14px;color:#687983;font-weight:700}

    .mid-cta{
      background:linear-gradient(135deg,#003f37,#00745f);
      color:#fff;
      border-radius:22px;
      box-shadow:var(--shadow2);
      padding:24px;
      display:grid;
      grid-template-columns:90px 1fr auto;
      gap:20px;
      align-items:center;
    }
    .phone{
      width:80px;height:112px;border-radius:16px;background:#fff;padding:6px;
      transform:rotate(-7deg);box-shadow:0 12px 20px rgba(0,0,0,.22);
    }
    .phone-screen{width:100%;height:100%;border-radius:12px;background:url("https://images.unsplash.com/photo-1604709177225-055f99402ea3?auto=format&fit=crop&w=300&q=80") center/cover}
    .mid-cta h2{font-size:clamp(24px,3vw,36px);line-height:1.08}
    .mid-cta p{color:#e2f8f1;font-weight:700}

    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .step{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 10px 24px rgba(0,0,0,.04);
      text-align:center;
      padding:24px 14px;
    }
    .step-num{
      width:62px;height:62px;border-radius:50%;
      margin:0 auto 12px;
      background:linear-gradient(135deg,#003f37,#008569);
      border:6px solid #e8f5f0;
      color:#fff;
      display:grid;place-items:center;
      font-size:24px;font-weight:950;
    }
    .step h3{font-size:18px;margin-bottom:7px}
    .step p{font-size:13px;color:#697981;font-weight:700}

    .faq{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px 18px;
    }
    .faq-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:13px;
      padding:16px 18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      box-shadow:0 8px 18px rgba(0,0,0,.04);
      font-weight:900;
      font-size:14px;
    }
    .faq-item span{font-size:22px;color:#0f8d52}

    .bottom-sticky{
      display:none;
    }

    footer{
      margin-top:28px;
      background:#002f28;
      color:#fff;
      padding:38px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr 1fr 1fr 1fr;
      gap:28px;
    }
    footer h3{margin-bottom:13px}
    footer p, footer li{
      list-style:none;
      color:#cce7e2;
      font-size:14px;
      margin-bottom:8px;
    }
    .social{display:flex;gap:9px;margin-top:13px}
    .social a{
      width:34px;height:34px;border-radius:50%;
      background:rgba(255,255,255,.09);
      display:grid;place-items:center;color:#fff;
    }
    .floating-wa{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:999;
      width:72px;height:72px;
      border-radius:50%;
      display:grid;place-items:center;
      background:#20c660;
      color:#fff;
      font-size:36px;
      border:5px solid #fff;
      box-shadow:0 14px 34px rgba(0,0,0,.25);
    }


    /* DOCUMENTATION / TRUST UPGRADE */
    .trust-showcase{
      background:linear-gradient(180deg,#ffffff 0%,#f5faf8 100%);
    }
    .doc-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .doc-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 12px 28px rgba(0,0,0,.06);
      transition:.22s ease;
    }
    .doc-card:hover{transform:translateY(-4px)}
    .doc-img{
      height:155px;
      background-size:cover;
      background-position:center;
    }
    .doc-body{
      padding:15px;
    }
    .doc-body h3{
      font-size:17px;
      color:#142f3f;
      margin-bottom:6px;
      font-weight:950;
    }
    .doc-body p{
      color:#657883;
      font-size:13px;
      font-weight:700;
    }
    .doc-1{background-image:url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=700&q=80")}
    .doc-2{background-image:url("https://images.unsplash.com/photo-1581092919535-7146ff1a590b?auto=format&fit=crop&w=700&q=80")}
    .doc-3{background-image:url("https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=700&q=80")}
    .doc-4{background-image:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=700&q=80")}

    .certificate-panel{
      margin-top:22px;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:22px;
      align-items:center;
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      padding:26px;
      box-shadow:0 14px 34px rgba(18,55,102,.08);
    }
    .certificate-frame{
      background:#f5f9fb;
      border:2px dashed #b8cbd6;
      border-radius:20px;
      padding:18px;
      text-align:center;
    }
    .certificate-frame img{
      width:min(280px,100%);
      margin:auto;
      display:block;
      border-radius:12px;
      box-shadow:0 10px 25px rgba(0,0,0,.10);
    }
    .certificate-copy h3{
      font-size:clamp(24px,3vw,34px);
      line-height:1.1;
      color:#142f3f;
      margin-bottom:12px;
      font-weight:950;
    }
    .certificate-copy p{
      color:#536872;
      font-size:16px;
      font-weight:700;
      margin-bottom:16px;
    }
    .trust-list{
      list-style:none;
      display:grid;
      gap:10px;
      margin-bottom:18px;
    }
    .trust-list li{
      font-weight:900;
      color:#193640;
    }
    .trust-list li::before{
      content:"✓";
      display:inline-grid;
      place-items:center;
      width:20px;
      height:20px;
      border-radius:50%;
      background:#12b85b;
      color:#fff;
      font-size:12px;
      margin-right:9px;
    }

    .client-strip{
      margin-top:22px;
      background:linear-gradient(135deg,#061947,#091f5e);
      border-radius:24px;
      padding:28px;
      color:#fff;
      display:grid;
      grid-template-columns:1fr 1.3fr;
      gap:24px;
      align-items:center;
      box-shadow:0 18px 44px rgba(6,25,71,.20);
    }
    .client-strip h3{
      font-size:28px;
      line-height:1.1;
      margin-bottom:10px;
      color:#fff;
      font-weight:950;
    }
    .client-strip p{
      color:#d7e3ff;
      font-size:15px;
      font-weight:700;
    }
    .client-logos{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
    }
    .client-logo{
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.15);
      border-radius:14px;
      padding:14px 8px;
      text-align:center;
      font-size:12px;
      font-weight:950;
      color:#fff;
    }

    /* FOOTER GOLD NEW */
    .footer-gold{
      margin-top:0;
      background:
        radial-gradient(circle at top left,rgba(255,211,61,.12),transparent 35%),
        linear-gradient(135deg,#061947 0%,#050d2b 100%);
      color:#fff;
      padding:46px 0 22px;
    }
    .footer-gold-grid{
      display:grid;
      grid-template-columns:1.05fr 1.8fr;
      gap:34px;
      align-items:start;
    }
    .about-footer-gold{
     
      padding:24px;
     
    }
    .about-footer-gold h3{
      color:#ffd33d;
      font-size:22px;
      margin-bottom:14px;
      font-weight:950;
    }
    .about-footer-content-gold p{
      color:#e9f0ff;
      font-size:15px;
      line-height:1.7;
      font-weight:700;
    }
    .footer-links-box-gold{
        display: grid;
  grid-template-columns: 10.9fr 12fr 4fr;
  gap: 20px;
    }
    

  
    .footer-links-gold{
  
      padding:22px;
      min-height:100%;
    }
    .footer-links-gold h3{
      color:#ffd33d;
      font-size:20px;
      margin-bottom:15px;
      font-weight:950;
    }
    .footer-links-gold img{
      width:200px;
      max-width:100%;
      border-radius:14px;
      background:#fff;
      padding:10px;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }
    .footer-links-gold ul{
      list-style:none;
      display:grid;
      gap:10px;
    }
    .footer-links-gold li a{
      color:#e9f0ff;
      font-weight:800;
      font-size:14px;
      transition:.2s ease;
    }
    .footer-links-gold li a:hover{
      color:#ffd33d;
      padding-left:4px;
    }
    .footer-links-gold li a::before{
      content:"›";
      color:#ffd33d;
      margin-right:8px;
      font-weight:950;
    }
    .footer-copyright-gold{
      border-top:1px solid rgba(255,255,255,.12);
      margin-top:26px;
      padding-top:18px;
      text-align:center;
    }
    .footer-copyright-text-gold p{
      color:#cdd8ee;
      font-size:14px;
      font-weight:700;
    }

    @media(max-width:1050px){
      .doc-grid{grid-template-columns:repeat(2,1fr)}
      .certificate-panel,.client-strip{grid-template-columns:1fr}
      .footer-gold-grid{grid-template-columns:1fr}
      .footer-links-box-gold{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:720px){
      .doc-grid,.footer-links-box-gold{grid-template-columns:1fr}
      .doc-img{height:170px}
      .certificate-panel{padding:18px}
      .client-strip{padding:20px}
      .client-logos{grid-template-columns:repeat(2,1fr)}
      .footer-gold{padding-bottom:90px}
    }

    @media(max-width:1180px){
      .desktop-menu{display:none}
      .header-cta{display:none}
      .menu-toggle{display:grid}
    }

    @media(max-width:1050px){
      .problem-wrap{grid-template-columns:1fr}
      .feature-grid{grid-template-columns:repeat(3,1fr)}
      .service-grid,.steps{grid-template-columns:repeat(2,1fr)}
      .offer{grid-template-columns:1fr 1fr}
      .offer-actions{grid-column:1/-1}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }

    @media(max-width:720px){
      .container{width:calc(100% - 28px)}
      .top-header{padding:15px 0}
      .header-inner{width:calc(100% - 28px)}
      .tri-logo{width:44px;height:44px}
      .tri-logo::before{
        border-left-width:19px;
        border-right-width:19px;
        border-bottom-width:35px;
      }
      .tri-logo::after{
        border-left-width:14px;
        border-right-width:14px;
        border-bottom-width:25px;
      }
      .brand{gap:11px}
      .brand-name{font-size:23px}
      .brand-name .one{padding:2px 8px 3px;border-radius:7px}
      .brand-sub{font-size:12px;white-space:normal}
      .menu-toggle{width:52px;height:52px}

      .hero{
        min-height:610px;
        background:
          linear-gradient(90deg,
            rgba(12,43,79,.12) 0%,
            rgba(12,43,79,.08) 32%,
            rgba(12,43,79,.55) 58%,
            rgba(12,43,79,.95) 100%
          ),
          url("basmirayap.jpg");
        background-size:cover;
        background-position:left center;
      }
      .hero-inner{
        width:calc(100% - 28px);
        min-height:610px;
        justify-content:flex-end;
        padding:34px 0 62px;
      }
      .hero-copy{
        max-width:218px;
        margin-left:auto;
        text-align:left;
      }
      .kicker{
        font-size:13px;
        margin-bottom:12px;
      }
      .hero h1{
        font-size:33px;
        line-height:1.02;
        letter-spacing:-1px;
        margin-bottom:12px;
      }
      .hero p{
        font-size:14px;
        line-height:1.45;
        max-width:210px;
        margin-bottom:16px;
      }
      .hero-bullets{
        display:grid;
        gap:6px;
        margin-bottom:16px;
      }
      .hero-bullets span{
        font-size:11px;
        padding:7px 9px;
      }
      .hero-actions .btn{
        width:100%;
        min-height:52px;
        padding:13px 14px;
        font-size:13px;
      }
      .hero-actions .btn-outline{
        display:none;
      }
      .floating-phone{
        right:12px;
        top:auto;
        bottom:24px;
        width:60px;
        height:60px;
        font-size:26px;
      }

      .quick-benefits{grid-template-columns:repeat(4,1fr)}
      .quick-item{
        display:block;
        text-align:center;
        padding:14px 5px;
      }
      .q-icon{
        width:40px;
        height:40px;
        margin:0 auto 7px;
      }
      .quick-item h3{font-size:11px}
      .quick-item p{display:none}

      .section{padding:30px 0}
      .section-title{font-size:24px;margin-bottom:16px}
      .problem-grid{grid-template-columns:1fr 1fr;gap:10px}
      .card .pic{height:105px}
      .card h3{font-size:12px}
      .warning{padding:20px}
      .warning h3{font-size:23px}
      .offer{grid-template-columns:1fr;padding:22px}
      .offer-actions .btn{min-width:unset;width:100%}
      .feature-grid{grid-template-columns:1fr 1fr;gap:10px}
      .feature{padding:14px 8px}
      .feature h3{font-size:13px}
      .feature p{font-size:11px}
      .service-grid,.steps,.footer-grid{grid-template-columns:1fr}
      .mid-cta{grid-template-columns:1fr;text-align:center}
      .phone{margin:auto}
      .mid-cta .btn{width:100%}
      .faq{grid-template-columns:1fr}
      .floating-wa{display:none}
      .bottom-sticky{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1001;
        background:#fff;
        border-top:1px solid var(--line);
        padding:10px 12px;
        gap:10px;
        box-shadow:0 -8px 24px rgba(0,0,0,.10);
      }
      .bottom-sticky .btn{
        flex:1;
        min-height:48px;
        font-size:12px;
        padding:10px 12px;
        border-radius:12px;
      }
      
    }
  
    /* APEX PEST PREMIUM NAVY & GOLD IMPLEMENTATION */
    .brand-logo-img{
     width: clamp(210px, 17vw, 360px);
      height:auto;
      display:block;
      object-fit:contain;
    }
    .footer-brand-logo-img{
      width:min(280px, 100%);
      height:auto;
      display:block;
      margin-bottom:14px;
      filter:brightness(1.08);
    }

    .btn-green,
    .btn-orange{
      background:linear-gradient(135deg,var(--navy),var(--navy-2));
      color:#fff;
      box-shadow:0 14px 30px rgba(13,43,79,.28);
    }
    .btn-orange{
      background:linear-gradient(135deg,var(--gold-2),var(--gold),var(--gold-dark));
      color:#fff;
      box-shadow:0 14px 30px rgba(201,151,61,.32);
    }
    .btn-outline{
      background:rgba(255,255,255,.10);
      color:#fff;
      border:2px solid rgba(227,183,101,.86);
    }

    body{background:var(--soft-2);color:var(--text)}
    .site-wrap{background:#fff}
    .top-header{
      background:rgba(255,255,255,.96);
      border-bottom:1px solid var(--line);
      box-shadow:0 8px 28px rgba(13,43,79,.08);
    }
    .desktop-menu{color:var(--navy)}
    .desktop-menu a::after{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
    .menu-toggle{
      background:linear-gradient(135deg,var(--gold-2),var(--gold));
      box-shadow:0 12px 28px rgba(201,151,61,.28);
    }
    .hamburger::before,.hamburger::after,.hamburger span{background:var(--navy)}
    .mobile-menu a{color:var(--navy)}

    .hero{
      background:
        linear-gradient(90deg,
          rgba(13,43,79,.12) 0%,
          rgba(13,43,79,.08) 32%,
          rgba(13,43,79,.52) 58%,
          rgba(13,43,79,.92) 100%
        ),
        url("basmirayap.jpg");
      background-size:cover;
      background-position:left center;
    }
    .hero::after{
      background:linear-gradient(180deg,transparent,rgba(13,43,79,.62));
    }
    .kicker,.hero h1 span,.section-title span,.price,.footer-links-gold h3,.about-footer-gold h3{
      color:var(--gold);
    }
    .hero-bullets span{
      border-color:rgba(201,151,61,.45);
      background:rgba(13,43,79,.35);
    }
    .hero-bullets span::before{color:var(--gold-2)}
    .floating-phone,.floating-wa{
      background:linear-gradient(135deg,var(--gold-2),var(--gold));
      color:var(--navy);
      box-shadow:0 18px 38px rgba(13,43,79,.25);
    }

    .quick-benefits,.quick-item,.card,.feature,.service-card,.step,.faq-item,.doc-card,.certificate-panel{
      border-color:var(--line);
    }
    .q-icon,.feature .icon,.step-num{
      background:rgba(201,151,61,.12);
      color:var(--gold-dark);
    }
    .quick-item h3,.section-title,.card h3,.feature h3,.service-body h3,.step h3,.faq-item,.certificate-copy h3,.doc-body h3{
      color:var(--navy);
    }

    .warning{
      border-color:rgba(201,151,61,.45);
      color:var(--gold-dark);
      background:linear-gradient(180deg,#fff,#fffaf1);
      box-shadow:0 12px 28px rgba(201,151,61,.12);
    }
    .warning p{color:#7A5A21}

    .offer,.mid-cta,.client-strip,.footer-gold,.stats{
      background:
        radial-gradient(circle at top right,rgba(201,151,61,.20),transparent 34%),
        linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
      box-shadow:var(--shadow2);
    }
    .check-list li::before,.trust-list li::before{
      background:linear-gradient(135deg,var(--gold-2),var(--gold));
      color:var(--navy);
    }
    .offer-kicker{color:var(--gold-2)}
    .offer small,.offer-note,.mid-cta p,.footer p,footer li,.about-footer-content-gold p,.footer-links-gold li a{
      color:#E7EEF7;
    }
    .footer-links-gold li a::before{color:var(--gold)}
    .footer-links-gold li a:hover{color:var(--gold-2)}
   
    .footer-copyright-gold{border-top-color:rgba(201,151,61,.22)}

    .bottom-sticky .btn-green{
      background:linear-gradient(135deg,var(--navy),var(--navy-2));
    }
    .bottom-sticky .btn-orange{
      background:linear-gradient(135deg,var(--gold-2),var(--gold));
      color:var(--navy);
    }

    /* Hide old triangle/text logo when using embedded Apex logo */
    .brand > .tri-logo,
    .brand > div:not(.apex-logo-wrap){
      display:none;
    }
    .brand .apex-logo-wrap{
      display:block;
    }

    @media(max-width:720px){
      .brand-logo-img{width:210px}
      .hero{
        background:
          linear-gradient(90deg,
            rgba(13,43,79,.08) 0%,
            rgba(13,43,79,.08) 34%,
            rgba(13,43,79,.58) 60%,
            rgba(13,43,79,.96) 100%
          ),
          url("basmirayap.jpg");
        background-size:cover;
        background-position:left center;
      }
    }

  
    /* =========================================================
       APEX PEST CTA BOOST - NAVY GOLD PREMIUM + CONVERSION
       ========================================================= */
    :root{
      --navy:#0D2B4F;
      --navy-2:#061A33;
      --navy-3:#123A67;
      --gold:#C9973D;
      --gold-2:#E3B765;
      --gold-dark:#9E7224;
      --white:#FFFFFF;
      --soft:#F2F4F7;
      --soft-2:#F8FAFC;
      --text:#0D2B4F;
      --muted:#667085;
      --line:#E5E7EB;
      --danger:#B54708;
      --success:#C9973D;
      --orange:#E3B765;
      --orange2:#C9973D;
      --green:#0D2B4F;
      --green-dark:#061A33;
      --lime:#E3B765;
      --red:#C9973D;
      --brand:#0D2B4F;
      --shadow:0 18px 50px rgba(13,43,79,.12);
      --shadow2:0 22px 55px rgba(13,43,79,.16);
      --max:1240px;
    }

    body{
      background:var(--soft-2);
      color:var(--text);
    }

    .top-header{
      background:rgba(255,255,255,.97);
      border-bottom:1px solid var(--line);
      box-shadow:0 8px 28px rgba(13,43,79,.08);
    }

    .desktop-menu,
    .mobile-menu a,
    .quick-item h3,
    .section-title,
    .card h3,
    .feature h3,
    .service-body h3,
    .step h3,
    .faq-item,
    .certificate-copy h3,
    .doc-body h3{
      color:var(--navy) !important;
    }

    .desktop-menu a::after{
      background:linear-gradient(90deg,var(--gold),var(--gold-2)) !important;
    }

    .menu-toggle{
      background:linear-gradient(135deg,var(--gold-2),var(--gold)) !important;
      box-shadow:0 12px 28px rgba(201,151,61,.28) !important;
    }

    .hamburger::before,
    .hamburger::after,
    .hamburger span{
      background:var(--navy) !important;
    }

    .hero{
      background:
        linear-gradient(90deg,
          rgba(13,43,79,.10) 0%,
          rgba(13,43,79,.08) 32%,
          rgba(13,43,79,.50) 58%,
          rgba(13,43,79,.93) 100%
        ),
        url("basmirayap.jpg") !important;
      background-size:cover !important;
      background-position:left center !important;
    }

    .hero::after{
      background:linear-gradient(180deg,transparent,rgba(13,43,79,.66)) !important;
    }

    .kicker,
    .hero h1 span,
    .section-title span,
    .price,
    .footer-links-gold h3,
    .about-footer-gold h3{
      color:#FFF !important;
    }

    .hero-copy{
      max-width:660px;
    }

    .hero h1{
      text-shadow:0 8px 26px rgba(0,0,0,.22);
    }

    .hero p{
      color:#F5F8FC !important;
      text-shadow:0 4px 14px rgba(0,0,0,.16);
    }

    .hero-bullets span{
      border-color:rgba(227,183,101,.50) !important;
      background:rgba(13,43,79,.36) !important;
      color:#fff !important;
    }

    .hero-bullets span::before{
      color:var(--gold-2) !important;
    }

    .btn-orange{
      background:linear-gradient(135deg,var(--gold-2),var(--gold),var(--gold-dark)) !important;
      color:#FFF !important;
      box-shadow:0 16px 34px rgba(201,151,61,.35) !important;
      border:1px solid rgba(255,255,255,.28);
    }

    .btn-green{
      background:linear-gradient(135deg,var(--navy),var(--navy-2)) !important;
      color:#fff !important;
      box-shadow:0 16px 34px rgba(13,43,79,.30) !important;
      border:1px solid rgba(227,183,101,.25);
    }

    .btn-outline{
      background:rgba(255,255,255,.10) !important;
      color:#fff !important;
      border:2px solid rgba(227,183,101,.86) !important;
    }

    .hero-actions .btn{
      min-height:62px;
      padding-inline:30px;
      font-size:16px;
      letter-spacing:.1px;
    }

    .floating-phone,
    .floating-wa{
      background:linear-gradient(135deg,var(--gold-2),var(--gold)) !important;
      color:var(--navy) !important;
      box-shadow:0 18px 38px rgba(13,43,79,.25) !important;
    }

    .q-icon,
    .feature .icon,
    .step-num{
      background:rgba(201,151,61,.13) !important;
      color:var(--gold-dark) !important;
    }

    .warning{
      border-color:rgba(201,151,61,.45) !important;
      color:var(--gold-dark) !important;
      background:linear-gradient(180deg,#fff,#fffaf1) !important;
      box-shadow:0 12px 28px rgba(201,151,61,.12) !important;
    }

    .warning p{
      color:#7A5A21 !important;
    }

    .offer,
    .mid-cta,
    .client-strip,
    .footer-gold,
    .stats{
      background:
        radial-gradient(circle at top right,rgba(201,151,61,.20),transparent 34%),
        linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%) !important;
      box-shadow:var(--shadow2) !important;
    }

    .check-list li::before,
    .trust-list li::before{
      background:linear-gradient(135deg,var(--gold-2),var(--gold)) !important;
      color:var(--navy) !important;
    }

    .offer-kicker{
      color:var(--gold-2) !important;
    }

    .offer small,
    .offer-note,
    .mid-cta p,
    .footer p,
    footer li,
    .about-footer-content-gold p,
    .footer-links-gold li a{
      color:#E7EEF7 !important;
    }

  

    .footer-links-gold li a::before{
      color:var(--gold) !important;
    }

    .footer-links-gold li a:hover{
      color:var(--gold-2) !important;
    }

    .footer-copyright-gold{
      border-top-color:rgba(201,151,61,.22) !important;
    }

    .bottom-sticky{
      background:rgba(255,255,255,.96) !important;
      backdrop-filter:blur(10px);
    }

    .bottom-sticky .btn-orange{
      background:linear-gradient(135deg,var(--gold-2),var(--gold)) !important;
      color:var(--navy) !important;
    }

    .bottom-sticky .btn-green{
      background:linear-gradient(135deg,var(--navy),var(--navy-2)) !important;
      color:#fff !important;
    }

/* ===============================
   MOBILE HERO FULL SOFT GRADIENT
   Gradient menutup semua gambar
================================ */
@media(max-width:720px){

  .hero{
    background:
      linear-gradient(
        180deg,
        rgba(13,43,79,.38) 0%,
        rgba(13,43,79,.46) 45%,
        rgba(13,43,79,.58) 100%
      ),
      url("basmirayap.jpg") !important;

    background-size:cover !important;
    background-position:left center !important;
  }

  .hero::before{
    display:none !important;
  }

  .hero::after{
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(13,43,79,.28) 72%,
        rgba(13,43,79,.52) 100%
      ) !important;
  }

  .hero-copy{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .kicker,
  .hero h1,
  .hero h1 span,
  .hero p{
    text-shadow:
      0 3px 12px rgba(0,0,0,.55),
      0 0 2px rgba(0,0,0,.45);
  }

  .hero-bullets span{
    background:rgba(13,43,79,.28) !important;
    border:1px solid rgba(227,183,101,.45) !important;
    color:#fff !important;
    backdrop-filter:blur(1.5px);
  }
}
  
    /* =========================================================
       APEX PEST 9.3 UPGRADE - TRUST, SOCIAL PROOF, FINAL CTA
       ========================================================= */
    .apex-proof-strip{
      background:#fff;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:18px 0;
    }
    .apex-proof-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .apex-proof-item{
      background:linear-gradient(180deg,#fff,#f8fafc);
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px 14px;
      text-align:center;
      box-shadow:0 10px 24px rgba(13,43,79,.06);
    }
    .apex-proof-item strong{
      display:block;
      color:var(--navy);
      font-size:24px;
      line-height:1;
      font-weight:950;
      margin-bottom:6px;
    }
    .apex-proof-item span{
      color:var(--muted);
      font-size:13px;
      font-weight:800;
    }

    .apex-trust-section{
      background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
    }
    .apex-section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:22px;
    }
    .apex-section-head p{
      max-width:520px;
      color:var(--muted);
      font-size:15px;
      font-weight:700;
    }

    .apex-doc-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .apex-doc-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 14px 30px rgba(13,43,79,.07);
      transition:.22s ease;
    }
    .apex-doc-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 38px rgba(13,43,79,.10);
    }
    .apex-doc-img{
      height:160px;
      background-size:cover;
      background-position:center;
      position:relative;
    }
    .apex-doc-img::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,transparent,rgba(13,43,79,.32));
    }
    .apex-doc-body{
      padding:16px;
    }
    .apex-doc-body h3{
      color:var(--navy);
      font-size:18px;
      margin-bottom:7px;
      font-weight:950;
    }
    .apex-doc-body p{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .apex-doc-1{background-image:url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=800&q=80")}
    .apex-doc-2{background-image:url("https://images.unsplash.com/photo-1581092919535-7146ff1a590b?auto=format&fit=crop&w=800&q=80")}
    .apex-doc-3{background-image:url("https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=800&q=80")}
    .apex-doc-4{background-image:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=800&q=80")}

    .apex-cert-wrap{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:22px;
      align-items:center;
      margin-top:22px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      padding:26px;
      box-shadow:0 16px 38px rgba(13,43,79,.08);
      position:relative;
      overflow:hidden;
    }
    .apex-cert-wrap::before{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:280px;
      height:280px;
      border-radius:50%;
      background:rgba(201,151,61,.10);
    }
    .apex-cert-box{
      position:relative;
      z-index:1;
      background:linear-gradient(180deg,#f8fafc,#fff);
      border:2px dashed rgba(201,151,61,.55);
      border-radius:22px;
      padding:20px;
      text-align:center;
    }
    .apex-cert-box img{
      width:min(300px,100%);
      border-radius:12px;
      box-shadow:0 12px 28px rgba(13,43,79,.16);
      background:#fff;
      padding:8px;
    }
    .apex-cert-copy{
      position:relative;
      z-index:1;
    }
    .apex-cert-copy h3{
      color:var(--navy);
      font-size:clamp(26px,3vw,38px);
      line-height:1.08;
      margin-bottom:12px;
      font-weight:950;
      letter-spacing:-.4px;
    }
    .apex-cert-copy p{
      color:var(--muted);
      font-size:16px;
      font-weight:700;
      margin-bottom:16px;
    }
    .apex-trust-list{
      list-style:none;
      display:grid;
      gap:10px;
      margin-bottom:18px;
    }
    .apex-trust-list li{
      color:var(--navy);
      font-weight:900;
      font-size:14px;
    }
    .apex-trust-list li::before{
      content:"✓";
      display:inline-grid;
      place-items:center;
      width:20px;
      height:20px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--gold-2),var(--gold));
      color:var(--navy);
      font-size:12px;
      margin-right:9px;
    }

    .apex-testimonials{
      margin-top:22px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .apex-testimonial{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      padding:20px;
      box-shadow:0 12px 28px rgba(13,43,79,.07);
    }
    .apex-stars{
      color:var(--gold);
      letter-spacing:2px;
      font-size:17px;
      margin-bottom:10px;
      font-weight:950;
    }
    .apex-testimonial p{
      color:#304452;
      font-size:14px;
      font-weight:700;
      margin-bottom:14px;
    }
    .apex-user{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--navy);
      font-weight:950;
      font-size:14px;
    }
    .apex-avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      background:rgba(201,151,61,.15);
      display:grid;
      place-items:center;
    }

    .apex-final-cta{
      background:
        radial-gradient(circle at 15% 20%,rgba(227,183,101,.20),transparent 28%),
        linear-gradient(135deg,var(--navy),var(--navy-2));
      color:#fff;
      border-radius:30px;
      padding:34px;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:center;
      box-shadow:0 22px 55px rgba(13,43,79,.22);
      overflow:hidden;
      position:relative;
    }
    .apex-final-cta h2{
      font-size:clamp(32px,4vw,52px);
      line-height:1.04;
      font-weight:950;
      letter-spacing:-.7px;
      margin-bottom:14px;
    }
    .apex-final-cta h2 span{
      color:var(--gold-2);
    }
    .apex-final-cta p{
      color:#E7EEF7;
      font-size:17px;
      font-weight:700;
      margin-bottom:18px;
      max-width:620px;
    }
    .apex-final-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:15px;
    }
    .apex-mini-trust{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .apex-mini-trust span{
      background:rgba(255,255,255,.10);
      border:1px solid rgba(227,183,101,.28);
      color:#fff;
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:900;
    }
    .apex-final-card{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(227,183,101,.25);
      border-radius:22px;
      padding:22px;
    }
    .apex-final-card h3{
      color:var(--gold-2);
      font-size:22px;
      margin-bottom:12px;
      font-weight:950;
    }
    .apex-final-card ul{
      list-style:none;
      display:grid;
      gap:10px;
    }
    .apex-final-card li{
      color:#fff;
      font-weight:800;
      font-size:14px;
    }
    .apex-final-card li::before{
      content:"✓";
      color:var(--gold-2);
      margin-right:8px;
    }

    @media(max-width:1050px){
      .apex-proof-grid{grid-template-columns:repeat(2,1fr)}
      .apex-section-head{display:block}
      .apex-section-head p{margin-top:-8px;margin-bottom:18px}
      .apex-doc-grid{grid-template-columns:repeat(2,1fr)}
      .apex-cert-wrap,.apex-final-cta{grid-template-columns:1fr}
      .apex-testimonials{grid-template-columns:1fr}
    }

    @media(max-width:720px){
      .apex-proof-grid{grid-template-columns:repeat(2,1fr);gap:10px}
      .apex-proof-item{padding:14px 8px}
      .apex-proof-item strong{font-size:20px}
      .apex-proof-item span{font-size:11px}
      .apex-doc-grid{grid-template-columns:1fr}
      .apex-doc-img{height:175px}
      .apex-cert-wrap{padding:18px;border-radius:22px}
      .apex-final-cta{padding:24px;border-radius:24px}
      .apex-final-actions .btn{width:100%}
    }


/* ===============================
   APEX SIGNS SECTION STYLE
   Inspired by image card knowledge center
================================ */

.apex-signs-section{
  padding:70px 0;
  background:#f8fafc;
}

.apex-signs-heading{
  text-align:center;
  max-width:780px;
  margin:0 auto 38px;
}

.apex-signs-heading h2{
  font-size:clamp(32px, 3vw, 54px);
  line-height:1.05;
  font-weight:950;
  color:var(--navy);
  letter-spacing:-1.2px;
  margin-bottom:14px;
}

.apex-signs-heading h2 span{
  color:var(--gold);
}

.apex-signs-heading p{
  color:var(--muted);
  font-size:17px;
  font-weight:700;
  line-height:1.6;
}

.apex-signs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.apex-sign-card{
  position:relative;
  min-height:360px;
  border-radius:24px;
  overflow:hidden;
  display:block;
  color:#fff;
  box-shadow:0 18px 44px rgba(13,43,79,.13);
  background:var(--navy);
  isolation:isolate;
  transition:.28s ease;
}

.apex-sign-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 55px rgba(13,43,79,.20);
}

.apex-sign-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  z-index:1;
  transition:.35s ease;
}

.apex-sign-card:hover img{
  transform:scale(1.06);
}

.apex-sign-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.05) 0%,
      rgba(13,43,79,.35) 42%,
      rgba(6,26,51,.92) 100%
    );
}

.apex-sign-content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  padding:28px;
}

.apex-sign-content h3{
  color:#fff;
  font-size:23px;
  line-height:1.16;
  font-weight:950;
  margin-bottom:10px;
  max-width:310px;
}

.apex-sign-content p{
  color:#e7eef7;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  margin-bottom:18px;
  max-width:330px;
}

.apex-sign-content span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold-2);
  font-size:14px;
  font-weight:950;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.22);
}

/* Warning card */
.apex-warning-card{
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.22), transparent 38%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
  display:grid;
  place-items:center;
  min-height:360px;
}

.apex-warning-card::before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(227,183,101,.32);
  border-radius:20px;
  pointer-events:none;
}

.apex-warning-inner{
  position:relative;
  z-index:3;
  text-align:center;
  padding:34px;
}

.apex-warning-icon{
  width:74px;
  height:74px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(227,183,101,.14);
  border:1px solid rgba(227,183,101,.35);
  font-size:36px;
}

.apex-warning-inner h3{
  color:var(--gold-2);
  font-size:28px;
  line-height:1.12;
  font-weight:950;
  margin-bottom:12px;
}

.apex-warning-inner p{
  color:#e7eef7;
  font-size:15px;
  font-weight:700;
  line-height:1.55;
  margin-bottom:20px;
}

.apex-warning-inner span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:var(--navy);
  font-weight:950;
  font-size:14px;
}

/* Responsive */
@media(max-width:1050px){
  .apex-signs-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .apex-signs-section{
    padding:42px 0;
  }

  .apex-signs-heading{
    text-align:left;
    margin-bottom:22px;
  }

  .apex-signs-heading h2{
    font-size:30px;
    letter-spacing:-.6px;
  }

  .apex-signs-heading p{
    font-size:14px;
  }

  .apex-signs-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .apex-sign-card{
    min-height:280px;
    border-radius:20px;
  }

  .apex-sign-content{
    padding:22px;
  }

  .apex-sign-content h3{
    font-size:21px;
  }

  .apex-sign-content p{
    font-size:13px;
  }

  .apex-warning-card{
    min-height:280px;
  }

  .apex-warning-inner{
    padding:26px;
  }
}

/* ========================================
   APEX SERVICES PREMIUM
======================================== */


.apex-services-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 38px;
}

.apex-services-kicker{
  display:inline-block;
  margin-bottom:14px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(201,151,61,.12);
  color:var(--gold, #C9973D);
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.apex-services-head h2{
font-size: 48px;
  line-height:1.02;
  font-weight:950;
  color:var(--navy, #0D2B4F);
  margin-bottom:14px;
  letter-spacing:-1.6px;
}

.apex-services-head p{
  max-width:860px;
  margin:0 auto;
  color:var(--muted, #667085);
  font-size:18px;
  line-height:1.65;
  font-weight:700;
}

.apex-services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.apex-service-card-premium{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 38px rgba(13,43,79,.07);
  transition:.28s ease;
  text-decoration:none;
}

.apex-service-card-premium:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 54px rgba(13,43,79,.14);
  border-color:rgba(201,151,61,.35);
}

.apex-service-thumb{
  position:relative;
  height:245px;
  overflow:hidden;
}

.apex-service-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.apex-service-card-premium:hover .apex-service-thumb img{
  transform:scale(1.06);
}

.apex-service-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18));
}

.apex-service-badge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--navy, #0D2B4F);
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.apex-service-body{
  padding:24px 24px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.apex-service-body h3{
  color:var(--navy, #0D2B4F);
 font-size: 20px;
  line-height: 1.15;
  font-weight: 950;
  margin-bottom: 12px;
  text-align: center;
}

.apex-service-body p{
  color:var(--muted, #667085);
  font-size:15px;
  line-height:1.65;
  font-weight:700;
  margin-bottom:16px;
}

.apex-service-points{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:8px;
}

.apex-service-points li{
  position:relative;
  padding-left:26px;
  color:#475467;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

.apex-service-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(201,151,61,.14);
  color:var(--gold, #C9973D);
  font-size:11px;
  font-weight:900;
}

.apex-service-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold, #C9973D);
  font-size:14px;
  font-weight:950;
  padding-top:16px;
  border-top:1px solid #edf1f5;
}

.apex-services-bottom-cta{
  margin-top:34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.apex-services-bottom-cta p{
  color:var(--navy, #0D2B4F);
  font-size:18px;
  font-weight:900;
}

/* Responsive */
@media(max-width:1200px){
  .apex-services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .apex-services-premium{
    padding:50px 0;
  }

  .apex-services-head{
    text-align:left;
    margin-bottom:24px;
  }

  .apex-services-head h2{
    font-size:34px;
    letter-spacing:-.8px;
  }

  .apex-services-head p{
    font-size:14px;
    line-height:1.6;
  }

  .apex-services-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .apex-service-card-premium{
    border-radius:22px;
  }

  .apex-service-thumb{
    height:210px;
  }

  .apex-service-body{
    padding:18px 18px 20px;
  }

  .apex-service-body h3{
    font-size:20px;
  }

  .apex-service-body p{
    font-size:14px;
  }

  .apex-service-points li{
    font-size:13px;
  }

  .apex-services-bottom-cta p{
    font-size:15px;
  }

  .apex-services-bottom-cta .btn{
    width:100%;
    justify-content:center;
  }
}


/* ========================================
   APEX WHY CHOOSE US SECTION
======================================== */

.apex-why-section{
  padding:80px 0;
  background:
    radial-gradient(circle at top left, rgba(201,151,61,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}

.apex-why-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  align-items:center;
}

.apex-why-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(201,151,61,.12);
  color:var(--gold, #C9973D);
  font-size:13px;
  font-weight:950;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.apex-why-kicker::before{
  content:"★";
  color:var(--gold, #C9973D);
}

.apex-why-intro h2{
  color:var(--navy, #0D2B4F);
  font-size:clamp(34px, 4vw, 58px);
  line-height:1.04;
  letter-spacing:-1.3px;
  font-weight:950;
  margin-bottom:18px;
}

.apex-why-intro p{
  color:var(--muted, #667085);
  font-size:17px;
  line-height:1.7;
  font-weight:700;
  margin-bottom:22px;
}

.apex-why-highlight{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid rgba(201,151,61,.28);
  border-radius:22px;
  padding:18px;
  margin-bottom:24px;
  box-shadow:0 14px 32px rgba(13,43,79,.08);
}

.apex-why-highlight-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  font-size:26px;
}

.apex-why-highlight strong{
  display:block;
  color:var(--navy, #0D2B4F);
  font-size:18px;
  font-weight:950;
  margin-bottom:4px;
}

.apex-why-highlight span{
  color:var(--muted, #667085);
  font-size:14px;
  font-weight:700;
}

.apex-why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.apex-why-card{
  position:relative;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  padding:24px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
  transition:.25s ease;
  overflow:hidden;
}

.apex-why-card::before{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(201,151,61,.10);
  transition:.25s ease;
}

.apex-why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,151,61,.42);
  box-shadow:0 22px 48px rgba(13,43,79,.12);
}

.apex-why-card:hover::before{
  transform:scale(1.25);
}

.apex-why-icon{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  border-radius:17px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  background:rgba(201,151,61,.13);
  color:var(--gold-dark, #9E7224);
  font-size:25px;
}

.apex-why-card h3{
  position:relative;
  z-index:1;
  color:var(--navy, #0D2B4F);
  font-size:20px;
  line-height:1.18;
  font-weight:950;
  margin-bottom:10px;
}

.apex-why-card p{
  position:relative;
  z-index:1;
  color:var(--muted, #667085);
  font-size:14px;
  line-height:1.6;
  font-weight:700;
}

/* Responsive */
@media(max-width:1050px){
  .apex-why-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .apex-why-section{
    padding:50px 0;
  }

  .apex-why-layout{
    gap:26px;
  }

  .apex-why-intro h2{
    font-size:32px;
    letter-spacing:-.8px;
  }

  .apex-why-intro p{
    font-size:14px;
    line-height:1.65;
  }

  .apex-why-highlight{
    align-items:flex-start;
    padding:16px;
    border-radius:18px;
  }

  .apex-why-highlight-icon{
    width:48px;
    height:48px;
    border-radius:15px;
    font-size:22px;
  }

  .apex-why-highlight strong{
    font-size:15px;
  }

  .apex-why-highlight span{
    font-size:12px;
  }

  .apex-why-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .apex-why-card{
    border-radius:20px;
    padding:20px;
  }

  .apex-why-icon{
    width:48px;
    height:48px;
    font-size:22px;
    margin-bottom:12px;
  }

  .apex-why-card h3{
    font-size:18px;
  }

  .apex-why-card p{
    font-size:13px;
  }

  .apex-why-intro .btn{
    width:100%;
    justify-content:center;
  }
}


/* =====================================================
   BLOG / ARTIKEL PAGE STYLE
   Untuk class:
   article-hero-page, article-page, featured-post,
   article-sidebar, blog-widget, dll.
===================================================== */

.article-hero-page{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 20px;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.68),
      rgba(13,43,79,.62)
    ),
    url("https://jasapembasmirayap.com/basmirayap/basmirayap_jakarta.jpg");
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.article-hero-page::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(201,151,61,.16), transparent 34%);
  pointer-events:none;
}

.page-title-card{
  position:relative;
  z-index:2;
  width:min(650px, 100%);
  background:#fff;
  border:1px solid rgba(201,151,61,.22);
  border-radius:24px;
  padding:38px 26px;
  text-align:center;
  box-shadow:0 22px 55px rgba(13,43,79,.16);
}

.page-title-card h1{
  color:var(--navy, #0D2B4F);
  font-size:clamp(32px,4vw,50px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.8px;
  margin-bottom:14px;
}

.breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  color:var(--muted, #667085);
  font-size:13px;
  font-weight:900;
}

.breadcrumb a{
  color:var(--gold, #C9973D);
  text-decoration:none;
}

.breadcrumb span{
  color:var(--muted, #667085);
}

/* PAGE LAYOUT */

.article-page{
  padding:68px 0 80px;
 
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:34px;
  align-items:start;
}

.article-main{
  min-width:0;
}

/* FEATURED ARTICLE */

.featured-post{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  background:#fff;

  border-radius:28px;
  overflow:hidden;
 
  margin-bottom:34px;
}

.featured-img{
  display:block;
  min-height:420px;
  overflow:hidden;
}

.featured-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.featured-post:hover .featured-img img{
  transform:scale(1.04);
}

.featured-content{
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.post-label{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:var(--gold-dark, #9E7224);
  font-size:12px;
  font-weight:950;
}

.featured-content h2{
  margin-bottom:14px;
}

.featured-content h2 a{
  color:var(--navy, #0D2B4F);
 font-size: clamp(24px,0.8vw,40px);
  line-height:1.06;
  font-weight:950;
  letter-spacing:-.8px;
  text-decoration:none;
}

.featured-content h2 a:hover{
  color:var(--gold, #C9973D);
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
  color:var(--muted, #667085);
  font-size:13px;
  font-weight:800;
}

.featured-content p{
  color:#5f7280;
  font-size:15px;
  line-height:1.7;
  font-weight:700;
  margin-bottom:22px;
}

.read-more{
  width:max-content;
  color:var(--gold, #C9973D);
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  transition:.2s ease;
}

.read-more:hover{
  color:var(--navy, #0D2B4F);
  transform:translateX(4px);
}

/* TOOLBAR */

.blog-toolbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:8px 0 22px;
}

.blog-toolbar h2{
  color:var(--navy, #0D2B4F);
  font-size:clamp(26px,3vw,38px);
  line-height:1.1;
  font-weight:950;
  margin-bottom:6px;
}

.blog-toolbar p{
  color:var(--muted, #667085);
  font-size:14px;
  font-weight:700;
}

/* AJAX RESULT / ARTICLE GRID */

#artikelResult{
  min-height:180px;
}

.artikel-loading,
.artikel-empty{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:20px;
  padding:28px;
  text-align:center;
  color:var(--muted, #667085);
  font-weight:900;
  box-shadow:0 12px 28px rgba(13,43,79,.06);
}

/* Jika ajax_artikel.php menghasilkan card, class ini siap dipakai */
.article-grid,
.artikel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.article-card,
.artikel-card{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
  transition:.25s ease;
}

.article-card:hover,
.artikel-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(13,43,79,.12);
  border-color:rgba(201,151,61,.35);
}

.article-card img,
.artikel-card img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
}

.article-card-body,
.artikel-card-body{
  padding:18px;
}

.article-card .post-label,
.artikel-card .post-label{
  margin-bottom:12px;
}

.article-card h3,
.artikel-card h3{
  margin-bottom:10px;
}

.article-card h3 a,
.artikel-card h3 a{
  color:var(--navy, #0D2B4F);
  font-size:18px;
  line-height:1.24;
  font-weight:950;
  text-decoration:none;
}

.article-card h3 a:hover,
.artikel-card h3 a:hover{
  color:var(--gold, #C9973D);
}

.article-card p,
.artikel-card p{
  color:var(--muted, #667085);
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  margin-bottom:14px;
}

/* PAGINATION */

.pagination,
.ajax-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:28px;
}

.pagination a,
.ajax-page{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e7ebf0;
  color:var(--navy, #0D2B4F);
  font-weight:950;
  text-decoration:none;
  transition:.2s ease;
}

.pagination a.active,
.ajax-page.active,
.pagination a:hover,
.ajax-page:hover{
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  border-color:transparent;
}

/* SIDEBAR */

.article-sidebar{
  position:sticky;
  top:110px;
  display:grid;
  gap:22px;
}

.blog-widget{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
}

.blog-widget h3{
  position:relative;
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
  margin-bottom:18px;
  padding-left:14px;
}

.blog-widget h3::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:4px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
}

/* SEARCH */

.blog-search{
  padding:0;
  overflow:hidden;
  display:flex;
  border-radius:18px;
}

.blog-search input{
  width:100%;
  height:56px;
  border:0;
  outline:0;
  padding:0 18px;
  color:var(--navy, #0D2B4F);
  font-weight:800;
  background:#fff;
}

.blog-search input::placeholder{
  color:#98A2B3;
}

.blog-search button{
  width:58px;
  height:56px;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
}

/* CATEGORY */

.category-list{
  list-style:none;
  display:grid;
  gap:10px;
}

.category-list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  color:var(--navy, #0D2B4F);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:.2s ease;
}

.category-list li a span{
  min-width:32px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--gold-dark, #9E7224);
  border:1px solid rgba(201,151,61,.22);
  font-size:12px;
  font-weight:950;
}

.category-list li a:hover,
.category-list li a.active{
  background:linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  transform:translateX(4px);
}

.category-list li a:hover span,
.category-list li a.active span{
  background:rgba(255,255,255,.12);
  color:var(--gold-2, #E3B765);
  border-color:rgba(227,183,101,.35);
}

/* POPULAR POST */

.popular-list{
  display:grid;
  gap:14px;
}

.popular-post{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  text-decoration:none;
  transition:.2s ease;
}

.popular-post:hover{
  background:#fffaf1;
  border-color:rgba(201,151,61,.30);
  transform:translateX(4px);
}

.popular-post img{
  width:82px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
}

.popular-post h4{
  color:var(--navy, #0D2B4F);
  font-size:13px;
  line-height:1.25;
  font-weight:950;
  margin-bottom:6px;
}

.popular-post p{
  color:var(--muted, #667085);
  font-size:12px;
  font-weight:800;
}

/* TAG */

.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.tag-cloud a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(201,151,61,.12);
  color:var(--gold-dark, #9E7224);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  transition:.2s ease;
}

.tag-cloud a:hover{
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  transform:translateY(-2px);
}

/* SIDEBAR CTA */

.sidebar-cta{
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.18), transparent 34%),
    linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  border:0;
}

.sidebar-cta h3{
  color:#fff;
}

.sidebar-cta h3::before{
  background:var(--gold-2, #E3B765);
}

.sidebar-cta p{
  color:#E7EEF7;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
  margin-bottom:18px;
}

.sidebar-cta .btn{
  width:100%;
  justify-content:center;
}

/* NEWSLETTER */

.newsletter-box{
  margin-top:42px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:30px;
  border-radius:24px;
  background:
    radial-gradient(circle at right, rgba(201,151,61,.18), transparent 35%),
    #fff;
  border:1px solid rgba(201,151,61,.20);
  box-shadow:0 16px 38px rgba(13,43,79,.08);
}

.newsletter-box h2{
  color:var(--navy, #0D2B4F);
  font-size:26px;
  line-height:1.15;
  font-weight:950;
  margin-bottom:8px;
}

.newsletter-box p{
  color:var(--muted, #667085);
  font-size:14px;
  font-weight:700;
}

.newsletter-form{
  display:flex;
  gap:12px;
}

.newsletter-form input{
  width:260px;
  height:54px;
  border:1px solid #e7ebf0;
  border-radius:14px;
  padding:0 16px;
  outline:0;
  color:var(--navy, #0D2B4F);
  font-weight:800;
  box-shadow:0 8px 20px rgba(13,43,79,.05);
}

.newsletter-form input:focus{
  border-color:rgba(201,151,61,.55);
}

.newsletter-form .btn{
  min-height:54px;
  border-radius:14px;
}

/* RESPONSIVE */

@media(max-width:1100px){
  .article-layout{
    grid-template-columns:1fr;
  }

  .article-sidebar{
    position:relative;
    top:auto;
    grid-template-columns:repeat(2,1fr);
  }

  .blog-search,
  .sidebar-cta{
    grid-column:1 / -1;
  }

  .featured-post{
    grid-template-columns:1fr;
  }

  .featured-img{
    min-height:360px;
  }

  .article-grid,
  .artikel-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .article-hero-page{
    min-height:220px;
    padding:44px 14px;
  }

  .page-title-card{
    border-radius:20px;
    padding:28px 18px;
  }

  .page-title-card h1{
    font-size:30px;
  }

  .article-page{
    padding:42px 0 58px;
  }

  .article-layout{
    gap:26px;
  }

  .featured-post{
    border-radius:22px;
  }

  .featured-img{
    min-height:260px;
  }

  .featured-content{
    padding:24px 20px;
  }

  .featured-content h2 a{
    font-size:27px;
  }

  .post-meta{
    gap:8px;
    font-size:12px;
  }

  .blog-toolbar{
    display:block;
  }

  .blog-toolbar h2{
    font-size:28px;
  }

  .article-grid,
  .artikel-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .article-sidebar{
    grid-template-columns:1fr;
  }

  .blog-widget{
    border-radius:20px;
    padding:18px;
  }

  .newsletter-box{
    grid-template-columns:1fr;
    padding:22px;
    border-radius:20px;
  }

  .newsletter-form{
    display:grid;
    gap:10px;
  }

  .newsletter-form input{
    width:100%;
  }

  .newsletter-form .btn{
    width:100%;
  }
}
/* =====================================================
   AJAX BLOG CARD RESULT
   Untuk output ajax_artikel.php:
   blog-grid, blog-card, blog-card-img, blog-card-content
===================================================== */

#artikelResult{
  width:100%;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.blog-card{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
  transition:.25s ease;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 52px rgba(13,43,79,.14);
  border-color:rgba(201,151,61,.38);
}

.blog-card-img{
  display:block;
  width:100%;
  height:220px;
  overflow:hidden;
  background:#f1f5f9;
}

.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.blog-card:hover .blog-card-img img{
  transform:scale(1.06);
}

.blog-card-content{
  padding:20px;
}

.blog-card-content .post-label{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:var(--gold-dark, #9E7224);
  font-size:12px;
  font-weight:950;
  margin-bottom:14px;
}

.blog-card-content h3{
  margin:0 0 12px;
}

.blog-card-content h3 a{
  color:var(--navy, #0D2B4F);
font-size: 17px;
  line-height: 1.24;
  font-weight: 600;
  text-decoration:none;
  display:block;
}

.blog-card-content h3 a:hover{
  color:var(--gold, #C9973D);
}

.blog-card-content .post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
  color:var(--muted, #667085);
  font-size:12px;
  font-weight:850;
}

.blog-card-content p{
  color:var(--muted, #667085);
  font-size:14px;
  line-height:1.65;

  margin:0 0 16px;
}

.blog-card-content .read-more{
  display:inline-flex;
  align-items:center;
  color:var(--gold, #C9973D);
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  transition:.2s ease;
}

.blog-card-content .read-more:hover{
  color:var(--navy, #0D2B4F);
  transform:translateX(4px);
}

/* EMPTY / LOADING */
.artikel-empty,
.artikel-loading{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:20px;
  padding:30px;
  text-align:center;
  color:var(--muted, #667085);
  box-shadow:0 12px 28px rgba(13,43,79,.06);
}

.artikel-empty h3{
  color:var(--navy, #0D2B4F);
  font-size:22px;
  font-weight:950;
  margin-bottom:8px;
}

.artikel-empty p{
  color:var(--muted, #667085);
  font-size:14px;
  font-weight:700;
}

/* PAGINATION */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:34px;
}

.pagination .ajax-page{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e7ebf0;
  color:var(--navy, #0D2B4F);
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(13,43,79,.05);
  transition:.2s ease;
}

.pagination .ajax-page:hover,
.pagination .ajax-page.active{
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  border-color:transparent;
  transform:translateY(-2px);
}

/* RESPONSIVE */
@media(max-width:1100px){
  .blog-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:720px){
  .blog-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .blog-card{
    border-radius:21px;
  }

  .blog-card-img{
    height:220px;
  }

  .blog-card-content{
    padding:17px;
  }

  .blog-card-content h3 a{
    font-size:18px;
  }

  .blog-card-content p{
    font-size:13px;
  }
}
/* =====================================
   FIX DROPDOWN HILANG SAAT KURSOR TURUN
===================================== */

/* pastikan parent dropdown punya area hover */
.has-dropdown-apex{
  position:relative;
  padding:20px 0;
  margin:-20px 0;
}

/* bridge transparan antara menu dan dropdown */
.has-dropdown-apex::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:460px;
  height:34px;
  background:transparent;
  z-index:1999;
}

/* dropdown jangan terlalu jauh dari menu */
.dropdown-menu-apex{
  top:calc(100% + 8px) !important;
  z-index:3000 !important;
}

/* tetap tampil saat hover parent, link, atau dropdown */
.has-dropdown-apex:hover .dropdown-menu-apex,
.has-dropdown-apex:focus-within .dropdown-menu-apex,
.dropdown-menu-apex:hover{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* area menu tidak boleh kepotong */
.top-header,
.header-inner,
.desktop-menu{
  overflow:visible !important;
}

/* pastikan hero tidak menimpa dropdown */
.article-hero-page,
.hero,
.page-title-card{
  position:relative;
  z-index:1;
}

.top-header{
  z-index:5000 !important;
}
/* =====================================================
   APEX / JASA PEMBASMI RAYAP - DETAIL LAYANAN PAGE
   Untuk halaman layanan anti rayap
===================================================== */

/* PAGE HERO */
.page-hero-detail{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 20px;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.68),
      rgba(13,43,79,.58)
    ),
    url("https://jasapembasmirayap.com/basmirayap/basmirayap_jakarta.jpg");
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.page-hero-detail::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(201,151,61,.16), transparent 34%);
  pointer-events:none;
}

.page-title-card{
  position:relative;
  z-index:2;
  width:min(680px, 100%);
  background:#fff;
  border:1px solid rgba(201,151,61,.22);
  border-radius:24px;
  padding:38px 28px;
  text-align:center;
  box-shadow:0 24px 60px rgba(13,43,79,.16);
}

.page-title-card h1{
  color:var(--navy, #0D2B4F);
  font-size:clamp(32px,3vw,30px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.9px;
  margin-bottom:14px;
}

.breadcrumb{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  color:var(--muted, #667085);
  font-size:13px;
  font-weight:900;
}

.breadcrumb a{
  color:var(--gold, #C9973D);
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--navy, #0D2B4F);
}

/* DETAIL PAGE LAYOUT */
.detail-page{
  padding:70px 0 86px;
 
}

.detail-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:38px;
  align-items:start;
}

/* SIDEBAR */
.detail-sidebar{
  position:sticky;
  top:115px;
  display:grid;
  gap:22px;
}

.search-widget{
  display:flex;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(13,43,79,.06);
}

.search-widget input{
  width:100%;
  height:56px;
  border:0;
  outline:0;
  padding:0 18px;
  color:var(--navy, #0D2B4F);
  font-weight:800;
  background:#fff;
}

.search-widget input::placeholder{
  color:#98A2B3;
}

.search-widget button{
  width:58px;
  height:56px;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
}

.sidebar-widget{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  padding:22px;

}

.sidebar-widget h3{
  position:relative;
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
  margin-bottom:18px;
  padding-left:14px;
}

.sidebar-widget h3::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:4px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
}

.detail-service-list{
  list-style:none;
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
}

.detail-service-list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 15px;
  border-radius:15px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  color:var(--navy, #0D2B4F);
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  text-decoration:none;
  transition:.2s ease;
}

.detail-service-list li a span{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--gold-dark, #9E7224);
  border:1px solid rgba(201,151,61,.22);
  font-weight:950;
  flex:0 0 auto;
}

.detail-service-list li a:hover,
.detail-service-list li a.active{
  background:linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  border-color:transparent;
  transform:translateX(4px);
}

.detail-service-list li a:hover span,
.detail-service-list li a.active span{
  background:rgba(255,255,255,.12);
  color:var(--gold-2, #E3B765);
  border-color:rgba(227,183,101,.35);
}

/* PROMO WIDGET */
.promo-widget{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(201,151,61,.22);
  box-shadow:0 18px 42px rgba(13,43,79,.10);
}

.promo-badge{
  padding:28px 20px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,#ff6b21,#f04f12);
}

.promo-badge strong{
  display:block;
  font-size:56px;
  line-height:1;
  font-weight:950;
  margin-bottom:6px;
}

.promo-badge span{
  font-size:16px;
  font-weight:900;
}

.promo-content{
  padding:24px 22px;
  text-align:center;
  background:
    radial-gradient(circle at bottom right, rgba(201,151,61,.16), transparent 34%),
    #fff;
}

.promo-content h3{
  color:var(--navy, #0D2B4F);
  font-size:26px;
  font-weight:950;
  line-height:1.1;
  margin-bottom:10px;
}

.promo-content p{
  color:var(--muted, #667085);
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  margin-bottom:18px;
}

.promo-content .btn{
  min-height:48px;
  padding:12px 22px;
  border-radius:12px;
}

/* ARTICLE CONTENT */
.detail-article{
  min-width:0;
}

.detail-article h2{
  color:var(--navy, #0D2B4F);
  font-size: clamp(34px,4vw,33px);
  line-height:1.08;
  letter-spacing:-.9px;
  font-weight:950;
  margin-bottom:26px;
}

.detail-article p{
  color:#5f7280;
  font-size:16px;
  line-height:1.8;
  font-weight:700;
  margin-bottom:18px;
}

/* GALLERY */
.detail-gallery{
  display:grid;
  grid-template-columns:1fr 112px;
  gap:16px;
  margin-bottom:28px;
}

.detail-main-img{
  border-radius:24px;
  overflow:hidden;
  background:#f1f5f9;
  box-shadow:0 18px 42px rgba(13,43,79,.10);
}

.detail-main-img img{
  width:100%;
  height:430px;
  object-fit:cover;
  display:block;
}

.detail-thumbs{
  display:grid;
  gap:14px;
}

.detail-thumbs img{
  width:100%;
  height:128px;
  object-fit:cover;
  border-radius:16px;
  cursor:pointer;
  border:3px solid transparent;
  box-shadow:0 10px 24px rgba(13,43,79,.08);
  opacity:.82;
  transition:.2s ease;
}

.detail-thumbs img:hover,
.detail-thumbs img.active{
  opacity:1;
  border-color:var(--gold, #C9973D);
  transform:translateY(-2px);
}

/* DETAIL HEADING */
.detail-heading{
  position:relative;
  color:var(--navy, #0D2B4F);
font-size: clamp(26px,2vw,27px);
  line-height:1.15;
  font-weight:950;
  margin:40px 0 18px;
  padding-left:16px;
}

.detail-heading::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:5px;
  height:32px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
}

/* BENEFIT DETAIL */
.benefit-grid-detail{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  align-items:center;
  margin:16px 0 32px;
}

.check-list{
  list-style:none;
  display:grid;
  gap:11px;
  padding:0;
  margin:18px 0 0;
}

.check-list li{
  position:relative;
  padding-left:30px;
  color:#d5d9e0;
  font-size:15px;
  font-weight:800;
  line-height:1.55;
}

.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  font-size:12px;
  font-weight:950;
}

.benefit-img-detail{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(13,43,79,.10);
}

.benefit-img-detail img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

/* ACCORDION */
.detail-accordion{
  display:grid;
  gap:14px;
  margin:18px 0 42px;
}

.acc-item{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(13,43,79,.06);
  transition:.2s ease;
}

.acc-item.open{
  border-color:rgba(201,151,61,.42);
}

.acc-btn{
  width:100%;
  min-height:62px;
  border:0;
  cursor:pointer;
  background:#fff;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--navy, #0D2B4F);
  font-size:15px;
  font-weight:950;
  text-align:left;
}

.acc-btn span{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(201,151,61,.14);
  color:var(--gold-dark, #9E7224);
  font-size:18px;
  font-weight:950;
}

.acc-panel{
  max-height:0;
  overflow:hidden;
  padding:0 22px;
  color:#5f7280;
  font-size:14px;
  line-height:1.7;
  font-weight:700;
  transition:max-height .25s ease;
}

.acc-item.open .acc-panel{
  padding-bottom:20px;
}

/* GUARANTEE BOX */
.guarantee-box{
  margin:42px 0 34px;
  padding:38px 32px;
  border-radius:26px;
  text-align:center;
  background:
    radial-gradient(circle at right, rgba(201,151,61,.16), transparent 34%),
    linear-gradient(135deg,#f8fafc,#ffffff);
  border:1px solid rgba(201,151,61,.22);
  box-shadow:0 16px 38px rgba(13,43,79,.08);
}

.guarantee-box h2{
  color:var(--navy, #0D2B4F);
  font-size:clamp(30px,4vw,44px);
  margin-bottom:14px;
}

.guarantee-box p{
  max-width:760px;
  margin:0 auto;
  font-size:15px;
}

/* RELATED POSTS */
.related-posts{
  margin-top:34px;
}

.related-posts h3{
  color:var(--navy, #0D2B4F);
  font-size:22px;
  font-weight:950;
  margin-bottom:16px;
}

.related-grid-detail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.related-card-detail{
  position:relative;
  min-height:145px;
  border-radius:18px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  background:var(--navy, #0D2B4F);
  box-shadow:0 12px 28px rgba(13,43,79,.10);
}

.related-card-detail img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.3s ease;
}

.related-card-detail::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(13,43,79,.10),rgba(6,26,51,.88));
}

.related-card-detail span{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:2;
  color:#fff;
  font-size:13px;
  line-height:1.25;
  font-weight:950;
}

.related-card-detail:hover img{
  transform:scale(1.06);
}

.related-empty{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:18px;
  padding:20px;
  color:var(--muted, #667085);
}

/* RESPONSIVE */
@media(max-width:1100px){
  .detail-layout{
    grid-template-columns:1fr;
  }

  .detail-sidebar{
    position:relative;
    top:auto;
    grid-template-columns:1fr 1fr;
  }

  .search-widget{
    grid-column:1 / -1;
  }

  .detail-gallery{
    grid-template-columns:1fr;
  }

  .detail-thumbs{
    grid-template-columns:repeat(3,1fr);
  }

  .benefit-grid-detail{
    grid-template-columns:1fr;
  }

  .related-grid-detail{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .page-hero-detail{
    min-height:220px;
    padding:44px 14px;
  }

  .page-title-card{
    padding:28px 18px;
    border-radius:20px;
  }

  .page-title-card h1{
    font-size:30px;
  }

  .detail-page{
    padding:42px 0 58px;
  }

  .detail-layout{
    gap:26px;
  }

  .detail-sidebar{
    grid-template-columns:1fr;
  }

  .sidebar-widget,
  .promo-widget{
    border-radius:20px;
  }

  .detail-article h2{
    font-size:32px;
    margin-bottom:20px;
  }

  .detail-article p{
    font-size:14px;
    line-height:1.7;
  }

  .detail-main-img img{
    height:260px;
  }

  .detail-thumbs{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }

  .detail-thumbs img{
    height:78px;
    border-radius:12px;
  }

  .detail-heading{
    font-size:24px;
    margin-top:32px;
  }

  .benefit-img-detail img{
    height:210px;
  }

  .acc-btn{
    min-height:58px;
    padding:16px;
    font-size:13px;
  }

  .acc-panel{
    padding:0 16px;
    font-size:13px;
  }

  .acc-item.open .acc-panel{
    padding-bottom:16px;
  }

  .guarantee-box{
    padding:28px 20px;
    border-radius:22px;
  }

  .guarantee-box h2{
    font-size:28px;
  }

  .related-grid-detail{
    grid-template-columns:1fr;
  }

  .related-card-detail{
    min-height:170px;
  }
}
/* =====================================================
   DETAIL ARTIKEL PAGE STYLE
   Untuk:
   article-detail-hero, article-detail-page,
   article-detail-main, article-sidebar, dll
===================================================== */

/* HERO DETAIL ARTIKEL */
.article-detail-hero{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 20px;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.68),
      rgba(13,43,79,.58)
    ),
    url("https://jasapembasmirayap.com/basmirayap/basmirayap_jakarta.jpg");
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.article-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(201,151,61,.18), transparent 36%);
  pointer-events:none;
}

.article-detail-hero .page-title-card{
  position:relative;
  z-index:2;
  width:min(820px, 100%);
  background:#fff;
  border:1px solid rgba(201,151,61,.24);
  border-radius:26px;
  padding:38px 32px;
  text-align:center;
  box-shadow:0 24px 60px rgba(13,43,79,.18);
}

.article-detail-hero .page-title-card h1{
  color:var(--navy, #0D2B4F);
  font-size:clamp(30px,4vw,35px);
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.8px;
  margin-bottom:14px;
}

.article-detail-hero .breadcrumb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  color:var(--muted, #667085);
  font-size:13px;
  font-weight:900;
}

.article-detail-hero .breadcrumb a{
  color:var(--gold, #C9973D);
  text-decoration:none;
}

.article-detail-hero .breadcrumb a:hover{
  color:var(--navy, #0D2B4F);
}

/* PAGE LAYOUT */
.article-detail-page{
padding: 68px 0 84px;
  background: linear-gradient(180deg,#fff 0%,#fff 100%);
}

.article-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:34px;
  align-items:start;
}

/* MAIN ARTICLE CARD */
.article-detail-main{
  min-width:0;
  background:#fff;

  border-radius:28px;
  padding:22px;

}

.article-detail-cover{
  border-radius:24px;
  overflow:hidden;
  background:#f1f5f9;
  margin-bottom:22px;
  box-shadow:0 16px 38px rgba(13,43,79,.08);
}

.article-detail-cover img{
  width:100%;
  height:430px;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.article-detail-cover:hover img{
  transform:scale(1.03);
}

/* META */
.article-detail-meta-box{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}

.article-detail-meta-box span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(201,151,61,.11);
  color:var(--gold-dark, #9E7224);
  font-size:12px;
  font-weight:900;
}

/* TITLE */
.article-detail-main > h2{
  color:var(--navy, #0D2B4F);
  font-size:clamp(30px,4vw,35px);
  line-height:1.12;
  letter-spacing:-.8px;
  font-weight:950;
  margin-bottom:20px;
}

/* CONTENT TYPOGRAPHY */
.article-detail-content{
  color:#334e5c;
  font-size:14px;
  line-height:1.85;
  font-weight:650;
}

.article-detail-content p{
  margin-bottom:18px;
}

.article-detail-content h1,
.article-detail-content h2,

.article-detail-content h4{
  color:var(--navy, #0D2B4F);
  font-weight:950;
  line-height:1.18;
  margin:32px 0 14px;
}

.article-detail-content h2{
  font-size:clamp(26px,3vw,24px);
}

.article-detail-content h3{
  position:relative;
  font-size:clamp(22px,2.5vw,28px);
  padding-left:16px;
}

.article-detail-content h3::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:5px;
  height:28px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
}

.article-detail-content ul,
.article-detail-content ol{
  margin:16px 0 22px;
  padding-left:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.article-detail-content li{
  position:relative;
  padding-left:30px;
  color:#475467;
  font-weight:750;
}

.article-detail-content li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e1c583;
  color:var(--navy, #0D2B4F);
  font-size:12px;
  font-weight:950;
}

.article-detail-content a{
  color:var(--gold, #C9973D);
  font-weight:900;
  text-decoration:none;
}

.article-detail-content a:hover{
  color:var(--navy, #0D2B4F);
}

.article-detail-content img{
  max-width:100%;
  height:auto;
  border-radius:20px;

  box-shadow:0 14px 34px rgba(13,43,79,.08);
}

.article-detail-content blockquote{
  margin:26px 0;
  padding:24px;
  border-left:5px solid var(--gold, #C9973D);
  background:#fffaf1;
  border-radius:18px;
  color:var(--navy, #0D2B4F);
  font-weight:850;
}

/* SHARE BOX */
.article-share-box{
  margin-top:34px;
  padding:24px;
  border-radius:22px;
  background:
    radial-gradient(circle at right, rgba(201,151,61,.14), transparent 34%),
    #f8fafc;
  border:1px solid rgba(201,151,61,.20);
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
}

.article-share-box h3{
  color:var(--navy, #0D2B4F);
  font-size:22px;
  font-weight:950;
  margin-bottom:6px;
}

.article-share-box p{
  color:var(--muted, #667085);
  font-size:14px;
  line-height:1.6;
  font-weight:700;
}

.share-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.share-buttons a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e7ebf0;
  color:var(--navy, #0D2B4F);
  font-size:13px;
  font-weight:950;
  text-decoration:none;
  transition:.2s ease;
}

.share-buttons a:hover{
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  border-color:transparent;
  transform:translateY(-2px);
}

/* CONSULT BOX */
.article-consult-box{
  margin-top:24px;
  padding:28px;
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.18), transparent 34%),
    linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  box-shadow:0 18px 42px rgba(13,43,79,.18);
}

.article-consult-box span{
  display:inline-flex;
  margin-bottom:8px;
  color:var(--gold-2, #E3B765);
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.article-consult-box h3{
  color:#fff;
  font-size:26px;
  line-height:1.14;
  font-weight:950;
  margin-bottom:8px;
}

.article-consult-box p{
  color:#E7EEF7;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
}

.article-consult-box .btn{
  white-space:nowrap;
}

/* RELATED DETAIL */
.related-detail-section{
  margin-top:34px;
}

.related-detail-section > h3{
  color:var(--navy, #0D2B4F);
  font-size:24px;
  font-weight:950;
  margin-bottom:16px;
}

.related-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.related-detail-card{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(13,43,79,.07);
  transition:.25s ease;
}

.related-detail-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 42px rgba(13,43,79,.12);
  border-color:rgba(201,151,61,.35);
}

.related-detail-img{
  display:block;
  height:145px;
  overflow:hidden;
  background:#f1f5f9;
}

.related-detail-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.related-detail-card:hover .related-detail-img img{
  transform:scale(1.06);
}

.related-detail-card div:not(.related-detail-img){
  padding:14px;
}

.related-detail-card span{
  display:inline-flex;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(201,151,61,.12);
  color:var(--gold-dark, #9E7224);
  font-size:11px;
  font-weight:950;
}

.related-detail-card h4 a{
  color:var(--navy, #0D2B4F);
  font-size:14px;
  line-height:1.3;
  font-weight:950;
  text-decoration:none;
}

.related-detail-card h4 a:hover{
  color:var(--gold, #C9973D);
}

/* SIDEBAR */
.article-sidebar{
  position:sticky;
  top:110px;
  display:grid;
  gap:22px;
}

.blog-widget{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
}

.blog-widget h3{
  position:relative;
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
  margin-bottom:18px;
  padding-left:14px;
}

.blog-widget h3::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:4px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
}

/* SEARCH */
.blog-search{
  padding:0;
  overflow:hidden;
  display:flex;
  border-radius:18px;
}

.blog-search input{
  width:100%;
  height:56px;
  border:0;
  outline:0;
  padding:0 18px;
  color:var(--navy, #0D2B4F);
  font-weight:800;
  background:#fff;
}

.blog-search input::placeholder{
  color:#98A2B3;
}

.blog-search button{
  width:58px;
  height:56px;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  font-size:20px;
  font-weight:950;
}

/* CATEGORY */
.category-list{
  list-style:none;
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
}

.category-list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  color:var(--navy, #0D2B4F);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:.2s ease;
}

.category-list li a span{
  min-width:32px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--gold-dark, #9E7224);
  border:1px solid rgba(201,151,61,.22);
  font-size:12px;
  font-weight:950;
}

.category-list li a:hover,
.category-list li a.active{
  background:linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  transform:translateX(4px);
}

.category-list li a:hover span,
.category-list li a.active span{
  background:rgba(255,255,255,.12);
  color:var(--gold-2, #E3B765);
  border-color:rgba(227,183,101,.35);
}

/* POPULAR POST */
.popular-list{
  display:grid;
  gap:14px;
}

.popular-post{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  text-decoration:none;
  transition:.2s ease;
}

.popular-post:hover{
  background:#fffaf1;
  border-color:rgba(201,151,61,.30);
  transform:translateX(4px);
}

.popular-post img{
  width:82px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
}

.popular-post h4{
  color:var(--navy, #0D2B4F);
  font-size:13px;
  line-height:1.25;
  font-weight:950;
  margin-bottom:6px;
}

.popular-post p{
  color:var(--muted, #667085);
  font-size:12px;
  font-weight:800;
}

/* TAG */
.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.tag-cloud a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(201,151,61,.12);
  color:var(--gold-dark, #9E7224);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  transition:.2s ease;
}

.tag-cloud a:hover{
  background:linear-gradient(135deg,var(--gold-2, #E3B765),var(--gold, #C9973D));
  color:var(--navy, #0D2B4F);
  transform:translateY(-2px);
}

/* SIDEBAR CTA */
.sidebar-cta{
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.18), transparent 34%),
    linear-gradient(135deg,var(--navy, #0D2B4F),var(--navy-2, #061A33));
  color:#fff;
  border:0;
}

.sidebar-cta h3{
  color:#fff;
}

.sidebar-cta h3::before{
  background:var(--gold-2, #E3B765);
}

.sidebar-cta p{
  color:#E7EEF7;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
  margin-bottom:18px;
}

.sidebar-cta .btn{
  width:100%;
  justify-content:center;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .article-detail-layout{
    grid-template-columns:1fr;
  }

  .article-sidebar{
    position:relative;
    top:auto;
    grid-template-columns:repeat(2,1fr);
  }

  .blog-search,
  .sidebar-cta{
    grid-column:1 / -1;
  }

  .related-detail-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .article-share-box,
  .article-consult-box{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .article-detail-hero{
    min-height:220px;
    padding:44px 14px;
  }

  .article-detail-hero .page-title-card{
    padding:28px 18px;
    border-radius:20px;
  }

  .article-detail-hero .page-title-card h1{
    font-size:28px;
  }

  .article-detail-page{
    padding:42px 0 58px;
  }

  .article-detail-layout{
    gap:26px;
  }

  .article-detail-main{
    padding:16px;
    border-radius:22px;
  }

  .article-detail-cover{
    border-radius:18px;
  }

  .article-detail-cover img{
    height:250px;
  }

  .article-detail-meta-box{
    gap:8px;
  }

  .article-detail-meta-box span{
    font-size:11px;
    min-height:30px;
    padding:7px 10px;
  }

  .article-detail-main > h2{
    font-size:27px;
  }

  .article-detail-content{
    font-size:14px;
    line-height:1.75;
  }

  .article-detail-content h2{
    font-size:24px;
  }

  .article-detail-content h3{
    font-size:21px;
  }

  .article-share-box,
  .article-consult-box{
    padding:20px;
    border-radius:20px;
  }

  .article-consult-box h3{
    font-size:22px;
  }

  .article-consult-box .btn,
  .share-buttons a{
    width:100%;
  }

  .share-buttons{
    width:100%;
  }

  .related-detail-grid{
    grid-template-columns:1fr;
  }

  .related-detail-img{
    height:180px;
  }

  .article-sidebar{
    grid-template-columns:1fr;
  }

  .blog-widget{
    border-radius:20px;
    padding:18px;
  }
}
.artikel-meta-detail{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 24px;
}

.artikel-meta-detail span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 13px;
  border-radius:999px;
  background:#f4f7f8;
  color:#31505c;
  font-size:13px;
  font-weight:800;
}

.artikel-lainnya-section{
  margin-top:44px;
}

.artikel-lainnya-section > h2{
  margin-bottom:22px;
}

.artikel-lainnya-section .post-item{
  height:100%;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 28px rgba(13,43,79,.07);
  transition:.25s ease;
}

.artikel-lainnya-section .post-item:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 42px rgba(13,43,79,.12);
}

.artikel-lainnya-section .post-item-content h2{
  font-size:18px;
  line-height:1.35;
  margin:10px 0 12px;
}

.artikel-lainnya-section .post-item-content h2 a{
  color:#0D2B4F;
  text-decoration:none;
  font-weight:900;
}

.artikel-lainnya-section .post-item-content h2 a:hover{
  color:#C9973D;
}

.tag-label-artikel{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:#f2e8d5;
  color:#9E7224;
  font-size:12px;
  font-weight:900;
}

.read-more-artikel{
  display:inline-flex;
  color:#C9973D;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.read-more-artikel:hover{
  color:#0D2B4F;
}

.artikel-kosong-box{
  padding:18px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e7ebf0;
  color:#667085;
  font-weight:800;
}

/* =====================================================
   META ARTIKEL
===================================================== */

.artikel-meta-detail{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 26px;
}

.artikel-meta-detail span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 13px;
  border-radius:999px;
  background:#f4f7f8;
  color:#31505c;
  font-size:13px;
  font-weight:800;
}


/* =====================================================
   LAYANAN KAMI DI TENGAH ARTIKEL
===================================================== */



.article-inner-services .article-inner-services-wrap{
  width:100%;
}

.article-inner-services .apex-services-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 28px;
}

.article-inner-services .apex-services-kicker{
  display:inline-flex;
  margin-bottom:12px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.article-inner-services .apex-services-head h2{
  color:#0D2B4F;
  font-size:clamp(30px,4vw,46px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.8px;
  margin-bottom:12px;
}

.article-inner-services .apex-services-head p{
  color:#667085;
  font-size:15px;
  line-height:1.7;
  font-weight:700;
  margin:0 auto;
}

.article-inner-services .apex-services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.article-inner-services .apex-service-card-premium{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(13,43,79,.07);
  transition:.25s ease;
}

.article-inner-services .apex-service-card-premium:hover{
  transform:translateY(-5px);
  border-color:rgba(201,151,61,.38);
  box-shadow:0 22px 48px rgba(13,43,79,.12);
}

.article-inner-services .apex-service-thumb{
  width:100%;
  height:190px;
  overflow:hidden;
  background:#f1f5f9;
}

.article-inner-services .apex-service-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.article-inner-services .apex-service-card-premium:hover .apex-service-thumb img{
  transform:scale(1.06);
}

.article-inner-services .apex-service-body{
  padding:18px;
}

.article-inner-services .apex-service-body h3{
  color:#0D2B4F;
  font-size:20px;
  line-height:1.18;
  font-weight:950;
  margin-bottom:10px;
}

.article-inner-services .apex-service-body p{
  color:#667085;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  margin-bottom:13px;
}

.article-inner-services .apex-service-link{
  display:inline-flex;
  color:#C9973D;
  font-size:13px;
  font-weight:950;
}

.article-inner-services .apex-services-bottom-cta{
  margin-top:26px;
  padding:22px;
  border-radius:22px;
  background:
    radial-gradient(circle at right, rgba(227,183,101,.18), transparent 34%),
    linear-gradient(135deg,#0D2B4F,#061A33);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.article-inner-services .apex-services-bottom-cta p{
  color:#fff;
  font-size:18px;
  line-height:1.35;
  font-weight:950;
  margin:0;
}
.benefit-grid-detail .check-list li{
 

  color: #5f7280 !important;

}

.article-inner-services .apex-services-bottom-cta .btn{
  white-space:nowrap;
}


/* =====================================================
   RESPONSIVE LAYANAN DI ARTIKEL
===================================================== */

@media(max-width:900px){
  .article-inner-services .apex-services-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .article-inner-services{
  
    border-radius:22px;
  }

  .article-inner-services .apex-services-head{
    text-align:left;
    margin-bottom:20px;
  }

  .article-inner-services .apex-services-head h2{
    font-size:30px;
  }

  .article-inner-services .apex-services-head p{
    font-size:14px;
  }

  .article-inner-services .apex-service-thumb{
    height:210px;
  }

  .article-inner-services .apex-services-bottom-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .article-inner-services .apex-services-bottom-cta p{
    font-size:16px;
  }

  .article-inner-services .apex-services-bottom-cta .btn{
    width:100%;
    justify-content:center;
  }
}

/* =====================================================
   JENIS JENIS RAYAP SECTION
===================================================== */

.termite-type-section{
  padding:80px 0;
  background:
    radial-gradient(circle at top left, rgba(201,151,61,.10), transparent 34%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.termite-type-container{
  width:min(1180px, calc(100% - 36px));
  margin:0 auto;
}

.termite-type-head{
  max-width:820px;
  margin:0 auto 44px;
  text-align:center;
}

.termite-type-head span{
  display:inline-flex;
  align-items:center;
  margin-bottom:14px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.termite-type-head h2{
  color:#0D2B4F;
font-size: clamp(32px, 3vw, 54px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-1px;
  margin-bottom:16px;
}

.termite-type-head p{
  color:#667085;
  font-size:17px;
  line-height:1.7;
  font-weight:700;
}

.termite-type-list{
  display:grid;
  gap:28px;
}

.termite-type-card{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:34px;
  align-items:center;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:30px;
  padding:32px;
 
  overflow:hidden;
  position:relative;
  transition:.28s ease;
}

.termite-type-card::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(201,151,61,.11);
  pointer-events:none;
}

.termite-type-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,151,61,.38);
  box-shadow:0 26px 60px rgba(13,43,79,.14);
}

.termite-type-card.reverse{
  grid-template-columns:430px 1fr;
}

.termite-type-card.reverse .termite-type-content{
  order:2;
}

.termite-type-card.reverse .termite-type-image{
  order:1;
}

.termite-type-content{
  position:relative;
  z-index:2;
}

.termite-label{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.termite-type-content h3{
  color:#0D2B4F;
  font-size:clamp(26px,3vw,38px);
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.5px;
  margin-bottom:14px;
}

.termite-type-content p{
  color:#475467;
  font-size:16px;
  line-height:1.75;
  font-weight:700;
  margin-bottom:18px;
}

.termite-type-content ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.termite-type-content li{
  position:relative;
  padding-left:30px;
  color:#344054;
  font-size:15px;
  font-weight:850;
  line-height:1.45;
}

.termite-type-content li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:21px;
  height:21px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#F2A926;
  color:#0D2B4F;
  font-size:12px;
  font-weight:950;
}

.termite-type-image{
  position:relative;
  z-index:2;
  height:300px;
  border-radius:24px;
  overflow:hidden;
  background:#f1f5f9;
  box-shadow:0 16px 38px rgba(13,43,79,.12);
}

.termite-type-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(13,43,79,.02),rgba(13,43,79,.18));
  pointer-events:none;
}

.termite-type-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.termite-type-card:hover .termite-type-image img{
  transform:scale(1.06);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .termite-type-card,
  .termite-type-card.reverse{
    grid-template-columns:1fr;
  }

  .termite-type-card.reverse .termite-type-content,
  .termite-type-card.reverse .termite-type-image{
    order:initial;
  }

  .termite-type-image{
    height:340px;
  }
}

@media(max-width:720px){
  .termite-type-section{
    padding:52px 0;
  }

  .termite-type-container{
    width:min(100% - 28px, 1180px);
  }

  .termite-type-head{
    text-align:left;
    margin-bottom:26px;
  }

  .termite-type-head h2{
    font-size:31px;
    letter-spacing:-.7px;
  }

  .termite-type-head p{
    font-size:14px;
    line-height:1.65;
  }

  .termite-type-list{
    gap:20px;
  }

  .termite-type-card{
    padding:18px;
    border-radius:24px;
    gap:20px;
  }

  .termite-type-content h3{
    font-size:25px;
  }

  .termite-type-content p{
    font-size:14px;
    line-height:1.65;
  }

  .termite-type-content li{
    font-size:13px;
  }

  .termite-type-image{
    height:230px;
    border-radius:18px;
  }
}

/* =====================================================
   KENAPA MEMILIH KAMI - IMAGE LEFT VERSION
===================================================== */

.apex-why-image-section{
  padding:85px 0;
  background:
    radial-gradient(circle at top left, rgba(201,151,61,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  overflow:hidden;
}

.apex-why-image-layout{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:46px;
  align-items:center;
}

/* LEFT IMAGE */
.apex-why-image-box{
  position:relative;
  min-height:640px;
  border-radius:34px;
  overflow:hidden;
  background:#f1f5f9;
  box-shadow:0 26px 70px rgba(13,43,79,.16);
}

.apex-why-image-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.04) 0%,
      rgba(13,43,79,.12) 45%,
      rgba(6,26,51,.70) 100%
    );
  z-index:2;
  pointer-events:none;
}

.apex-why-image-box img{
  width:100%;
  height:100%;
  min-height:640px;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:.4s ease;
}

.apex-why-image-box:hover img{
  transform:scale(1.04);
}

.apex-why-image-badge{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:3;
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(201,151,61,.32);
  box-shadow:0 18px 44px rgba(6,26,51,.22);
  backdrop-filter:blur(10px);
}

.apex-why-image-badge strong{
  display:block;
  color:#0D2B4F;
  font-size:28px;
  line-height:1;
  font-weight:950;
  margin-bottom:6px;
}

.apex-why-image-badge span{
  display:block;
  color:#667085;
  font-size:14px;
  font-weight:850;
}

/* RIGHT CONTENT */
.apex-why-image-content{
  min-width:0;
}

.apex-why-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:13px;
  font-weight:950;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.apex-why-kicker::before{
  content:"★";
}

.apex-why-image-content h2{
  color:#0D2B4F;
  font-size:clamp(36px,4.8vw,64px);
  line-height:1.03;
  letter-spacing:-1.5px;
  font-weight:950;
  margin-bottom:18px;
}

.apex-why-image-content > p{
  color:#667085;
  font-size:17px;
  line-height:1.75;
  font-weight:750;
  margin-bottom:28px;
}

/* CARD GRID */
.apex-why-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.apex-why-mini-card{
  position:relative;
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  padding:22px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
  overflow:hidden;
  transition:.25s ease;
}

.apex-why-mini-card::before{
  content:"";
  position:absolute;
  right:-35px;
  top:-35px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(201,151,61,.11);
  transition:.25s ease;
}

.apex-why-mini-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,151,61,.42);
  box-shadow:0 22px 48px rgba(13,43,79,.12);
}

.apex-why-mini-card:hover::before{
  transform:scale(1.25);
}

.apex-why-mini-icon{
  position:relative;
  z-index:2;
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:23px;
}

.apex-why-mini-card h3{
  position:relative;
  z-index:2;
  color:#0D2B4F;
  font-size:20px;
  line-height:1.18;
  font-weight:950;
  margin-bottom:9px;
}

.apex-why-mini-card p{
  position:relative;
  z-index:2;
  color:#667085;
  font-size:14px;
  line-height:1.6;

}

/* BOTTOM CTA */
.apex-why-bottom{
  margin-top:24px;
  display:grid;
  gap:18px;
}

.apex-why-guarantee{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid rgba(201,151,61,.28);
  border-radius:22px;
  padding:18px;
  box-shadow:0 14px 32px rgba(13,43,79,.08);
}

.apex-why-guarantee-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  font-size:26px;
}

.apex-why-guarantee strong{
  display:block;
  color:#0D2B4F;
  font-size:18px;
  font-weight:950;
  margin-bottom:4px;
}

.apex-why-guarantee span{
  color:#667085;
  font-size:14px;
  font-weight:750;
}

.apex-why-bottom .btn{
  width:max-content;
  min-height:54px;
  padding:15px 26px;
  border-radius:999px;
  font-weight:950;
}

/* RESPONSIVE */
@media(max-width:1150px){
  .apex-why-image-layout{
    grid-template-columns:1fr;
  }

  .apex-why-image-box{
    min-height:520px;
  }

  .apex-why-image-box img{
    min-height:520px;
  }
}

@media(max-width:720px){
  .apex-why-image-section{
    padding:52px 0;
  }

  .apex-why-image-layout{
    gap:28px;
  }

  .apex-why-image-box{
    min-height:390px;
    border-radius:26px;
  }

  .apex-why-image-box img{
    min-height:390px;
  }

  .apex-why-image-badge{
    left:18px;
    right:18px;
    bottom:18px;
    padding:18px;
    border-radius:20px;
  }

  .apex-why-image-badge strong{
    font-size:23px;
  }

  .apex-why-image-content h2{
    font-size:34px;
    letter-spacing:-.8px;
  }

  .apex-why-image-content > p{
    font-size:14px;
    line-height:1.65;
  }

  .apex-why-mini-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .apex-why-mini-card{
    padding:20px;
    border-radius:20px;
  }

  .apex-why-guarantee{
    align-items:flex-start;
    padding:16px;
  }

  .apex-why-guarantee-icon{
    width:48px;
    height:48px;
    border-radius:15px;
    font-size:22px;
  }

  .apex-why-guarantee strong{
    font-size:15px;
  }

  .apex-why-guarantee span{
    font-size:12px;
  }

  .apex-why-bottom .btn{
    width:100%;
    justify-content:center;
  }
}

.apex-why-heading-v2-section{
  padding: 70px 0 38px;
  background: #f8fafc;
}

.apex-why-heading-v2-wrap{
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.apex-why-heading-v2-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #efe9dd;
  color: #a9781d;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.apex-why-heading-v2-wrap h2{
  max-width: 1100px;
  margin: 0 auto 24px;
  color: #0d2b4f;

  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -1.8px;
  font-size: clamp(32px, 3vw, 54px);
}

.apex-why-heading-v2-wrap p{
  max-width: 1080px;
  margin: 0 auto;
  color: #667085;
  font-size: 24px;
  line-height: 1.7;
  font-weight: 700;
}

/* tablet */
@media (max-width: 991px){
  .apex-why-heading-v2-section{
    padding: 56px 0 30px;
  }

  .apex-why-heading-v2-kicker{
    font-size: 15px;
    padding: 12px 22px;
    margin-bottom: 20px;
  }

  .apex-why-heading-v2-wrap h2{
    font-size: 52px;
    max-width: 820px;
  }

  .apex-why-heading-v2-wrap p{
    font-size: 19px;
    max-width: 860px;
  }
}

/* mobile */
@media (max-width: 767px){
  .apex-why-heading-v2-section{
    padding: 46px 0 22px;
  }

  .apex-why-heading-v2-wrap{
    padding: 0 8px;
  }

  .apex-why-heading-v2-kicker{
    font-size: 13px;
    padding: 10px 18px;
    margin-bottom: 16px;
  }

  .apex-why-heading-v2-wrap h2{
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.8px;
    margin-bottom: 16px;
  }

  .apex-why-heading-v2-wrap p{
    font-size: 15px;
    line-height: 1.7;
  }
}

/* =========================
ABOUT / PROFIL PAGE - APEX STYLE
Navy + Gold Premium
========================= */

:root {
  --apex-navy: #0D2B4F;
  --apex-navy-dark: #061A33;
  --apex-navy-soft: #123A67;
  --apex-gold: #C9973D;
  --apex-gold-light: #E3B765;
  --apex-gold-dark: #9E7224;
  --apex-white: #ffffff;
  --apex-soft: #f8fafc;
  --apex-soft-2: #f3f6f9;
  --apex-muted: #667085;
  --apex-text: #0D2B4F;
  --apex-border: #e7ebf0;
  --apex-shadow: 0 22px 55px rgba(13,43,79,.12);
  --apex-shadow-hover: 0 28px 70px rgba(13,43,79,.18);
}

.container-about {
  width: min(1180px, 92%);
  margin: auto;
}

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

.about-hero {
  position: relative;
  min-height: 520px;
  padding: 120px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(6, 26, 51, 0.92) 0%,
      rgba(13, 43, 79, 0.76) 48%,
      rgba(201, 151, 61, 0.30) 100%
    ),
    url("https://www.indopestone.com/gambar_jasa/indopetone.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(227,183,101,.25), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(13,43,79,.35), transparent 34%);
  pointer-events: none;
  z-index: 1;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(6,26,51,.10) 0%,
      rgba(6,26,51,.25) 100%
    );
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  width: min(900px, 92%);
  margin: auto;
  color: var(--apex-white);
}

.about-hero-content .section-label {
  color: var(--apex-gold-light);
}

.section-label,
.mini-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--apex-gold);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 13px;
}

.section-label::before,
.mini-title::before {
  content: "";
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--apex-gold-light), var(--apex-gold));
  display: inline-block;
  border-radius: 20px;
}

.about-hero h1 {
  max-width: 850px;
  margin: 18px auto;
  color: #fff;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.2px;
  text-shadow: 0 8px 25px rgba(0,0,0,.28);
}

.about-hero p {
  font-size: 18px;
  line-height: 1.8;
  max-width: 760px;
  margin: auto;
  color: rgba(255,255,255,.92);
  font-weight: 650;
}

/* =========================
SECTION SPACING
========================= */

.about-intro,
.about-why,
.vision-mission,
.service-method {
  padding: 92px 0;
}

/* =========================
INTRO SECTION
========================= */

.about-intro {
  background:
    radial-gradient(circle at top left, rgba(201,151,61,.08), transparent 30%),
    #ffffff;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.about-text h2,
.section-heading h2,
.vm-card h2,
.cta-content h2 {
  color: var(--apex-text);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.12;
  margin: 16px 0 20px;
  font-weight: 950;
  letter-spacing: -1px;
}

.about-text p,
.section-heading p,
.vm-card p,
.method-box p,
.why-card p,
.cta-content p {
  color: var(--apex-muted);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 650;
}

.about-text a {
  color: var(--apex-gold-dark);
  font-weight: 900;
  text-decoration: none;
}

.about-text a:hover {
  color: var(--apex-navy);
}

.about-checklist {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 13px;
}

.about-checklist li {
  position: relative;
  padding-left: 36px;
  color: var(--apex-text);
  font-weight: 850;
  line-height: 1.5;
}

.about-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--apex-gold-light), var(--apex-gold));
  color: var(--apex-navy);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 950;
}

/* =========================
IMAGE CARD
========================= */

.about-image-card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 28px 75px rgba(13,43,79,.18);
  min-height: 520px;
  background: var(--apex-navy);
  isolation: isolate;
}

.about-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.04) 0%,
      rgba(13,43,79,.18) 45%,
      rgba(6,26,51,.72) 100%
    );
  z-index: 2;
  pointer-events: none;
}

.about-image-card img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: .45s ease;
}

.about-image-card:hover img {
  transform: scale(1.04);
}

.experience-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  z-index: 3;
  background: linear-gradient(135deg, var(--apex-gold-light), var(--apex-gold));
  color: var(--apex-navy);
  padding: 20px 25px;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(201,151,61,.34);
  border: 1px solid rgba(255,255,255,.35);
}

.experience-badge strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
}

.experience-badge span {
  font-weight: 900;
  font-size: 14px;
}

/* =========================
WHY SECTION
========================= */

.about-why {
  background:
    radial-gradient(circle at top right, rgba(201,151,61,.08), transparent 28%),
    var(--apex-soft);
}

.section-heading.center {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 48px;
}

.section-heading.center .mini-title {
  justify-content: center;
}

.why-grid,
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.why-card,
.method-box,
.vm-card {
  position: relative;
  background: var(--apex-white);
  border: 1px solid var(--apex-border);
  border-radius: 26px;
  padding: 30px;
  transition: .25s ease;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(13,43,79,.06);
}

.why-card::before,
.method-box::before {
  content: "";
  position: absolute;
  right: -38px;
  top: -38px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(201,151,61,.10);
  transition: .25s ease;
}

.why-card:hover,
.method-box:hover {
  transform: translateY(-7px);
  border-color: rgba(201,151,61,.40);
  box-shadow: var(--apex-shadow-hover);
}

.why-card:hover::before,
.method-box:hover::before {
  transform: scale(1.25);
}

.why-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  background: rgba(201,151,61,.13);
  color: var(--apex-gold-dark);
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 20px;
}

.why-card h3,
.method-box h3 {
  position: relative;
  z-index: 2;
  color: var(--apex-text);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
  font-weight: 950;
}

.why-card p,
.method-box p {
  position: relative;
  z-index: 2;
}

/* =========================
VISION MISSION
========================= */

.vision-mission {
  background: #fff;
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.vm-card {
  min-height: 360px;
  box-shadow: 0 14px 34px rgba(13,43,79,.07);
}

.vm-card.dark {
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.13), transparent 30%),
    linear-gradient(135deg, var(--apex-navy), var(--apex-navy-dark));
  color: var(--apex-white);
  border-color: rgba(227,183,101,.20);
}

.vm-card.dark ul {
  padding-left: 20px;
  margin: 18px 0 0;
}

.vm-card.dark li {
  color: rgba(255,255,255,.88);
  margin-bottom: 14px;
  line-height: 1.7;
  font-weight: 650;
}

.vm-card.dark .mini-title,
.vm-card.dark h2 {
  color: var(--apex-white);
}

.vm-card.dark .mini-title::before {
  background: linear-gradient(90deg, var(--apex-gold-light), var(--apex-gold));
}

/* =========================
SERVICE METHOD
========================= */

.service-method {
  background:
    radial-gradient(circle at bottom left, rgba(201,151,61,.08), transparent 32%),
    #ffffff;
}

.method-box {
  min-height: 230px;
}

/* =========================
CTA SECTION
========================= */

.about-cta {
  padding: 95px 0;
  background:
    linear-gradient(
      135deg,
      rgba(6,26,51,.96),
      rgba(13,43,79,.92)
    ),
    url("images/bg-anti-rayap.jpg") center/cover no-repeat;
  color: var(--apex-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.25), transparent 30%),
    radial-gradient(circle at bottom left, rgba(201,151,61,.16), transparent 32%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: auto;
}

.cta-content h2,
.cta-content p,
.cta-content .mini-title {
  color: var(--apex-white);
}

.cta-content .mini-title::before {
  background: var(--apex-gold-light);
}

.cta-content h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.12;
}

.cta-content p {
  color: rgba(255,255,255,.85);
}

.cta-buttons {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary-about,
.btn-outline-about {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 950;
  text-decoration: none;
  transition: .25s ease;
}

.btn-primary-about {
  background: linear-gradient(135deg, var(--apex-gold-light), var(--apex-gold));
  color: var(--apex-navy);
  box-shadow: 0 14px 30px rgba(201,151,61,.30);
}

.btn-primary-about:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(201,151,61,.40);
}

.btn-outline-about {
  border: 2px solid rgba(227,183,101,.82);
  color: var(--apex-white);
}

.btn-outline-about:hover {
  background: var(--apex-white);
  color: var(--apex-navy);
  border-color: var(--apex-white);
}

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

@media (max-width: 992px) {
  .about-grid,
  .vm-grid {
    grid-template-columns: 1fr;
  }

  .why-grid,
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-hero {
    min-height: 420px;
    padding: 90px 18px;
  }

  .about-image-card,
  .about-image-card img {
    min-height: 440px;
  }
}

@media (max-width: 576px) {
  .about-intro,
  .about-why,
  .vision-mission,
  .service-method,
  .about-cta {
    padding: 58px 0;
  }

  .why-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .about-image-card,
  .about-image-card img {
    min-height: 330px;
  }

  .about-image-card {
    border-radius: 24px;
  }

  .experience-badge {
    left: 18px;
    bottom: 18px;
    padding: 16px 20px;
    border-radius: 17px;
  }

  .experience-badge strong {
    font-size: 32px;
  }

  .about-hero {
    min-height: 390px;
    padding: 75px 16px;
  }

  .about-hero h1 {
    font-size: 34px;
    letter-spacing: -.6px;
  }

  .about-hero p {
    font-size: 15px;
    line-height: 1.7;
  }

  .about-text h2,
  .section-heading h2,
  .vm-card h2,
  .cta-content h2 {
    font-size: 30px;
    letter-spacing: -.5px;
  }

  .about-text p,
  .section-heading p,
  .vm-card p,
  .method-box p,
  .why-card p,
  .cta-content p {
    font-size: 14px;
  }

  .why-card,
  .method-box,
  .vm-card {
    padding: 22px;
    border-radius: 21px;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .btn-primary-about,
  .btn-outline-about {
    width: 100%;
  }
}

/* ===============================
   FLOATING CS CHAT
================================ */

.cs-float-chat{
  position:fixed;
  right:28px;
  bottom:32px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  animation:csFloatIn .5s ease both;
}

.cs-avatar-wrap{
  width:82px;
  height:82px;
  border-radius:50%;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  border:6px solid #fff;
  box-shadow:0 18px 38px rgba(13,43,79,.22);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  animation:csPulse 2.2s infinite;
}

.cs-avatar-wrap::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  right:5px;
  bottom:8px;
  background:#18c964;
  border:3px solid #fff;
  border-radius:50%;
}

.cs-avatar-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cs-chat-bubble{
  position:relative;
  background:#fff;
  border:1px solid rgba(201,151,61,.28);
  border-radius:18px;
  padding:12px 16px;
  min-width:170px;
  box-shadow:0 16px 34px rgba(13,43,79,.16);
  transform-origin:right center;
  animation:csBubble 2.4s ease-in-out infinite;
}

.cs-chat-bubble::after{
  content:"";
  position:absolute;
  right:-8px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:16px;
  height:16px;
  background:#fff;
  border-top:1px solid rgba(201,151,61,.28);
  border-right:1px solid rgba(201,151,61,.28);
}

.cs-chat-bubble strong{
  display:block;
  color:#0D2B4F;
  font-size:14px;
  font-weight:950;
  line-height:1.2;
  margin-bottom:3px;
}

.cs-chat-bubble span{
  display:block;
  color:#667085;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}

/* Hover */
.cs-float-chat:hover .cs-avatar-wrap{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 22px 48px rgba(13,43,79,.30);
}

.cs-float-chat:hover .cs-chat-bubble{
  transform:translateX(-4px);
}

/* Animations */
@keyframes csPulse{
  0%{
    box-shadow:0 18px 38px rgba(13,43,79,.22), 0 0 0 0 rgba(201,151,61,.45);
  }
  70%{
    box-shadow:0 18px 38px rgba(13,43,79,.22), 0 0 0 16px rgba(201,151,61,0);
  }
  100%{
    box-shadow:0 18px 38px rgba(13,43,79,.22), 0 0 0 0 rgba(201,151,61,0);
  }
}

@keyframes csBubble{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
}

@keyframes csFloatIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile */
@media(max-width:720px){
  .cs-float-chat{
    right:16px;
    bottom:18px;
    gap:8px;
  }

  .cs-avatar-wrap{
    width:68px;
    height:68px;
    border-width:5px;
  }

  .cs-chat-bubble{
    min-width:145px;
    padding:10px 13px;
    border-radius:15px;
  }

  .cs-chat-bubble strong{
    font-size:13px;
  }

  .cs-chat-bubble span{
    font-size:12px;
  }
}

/* =====================================================
   DOKUMENTASI PENGERJAAN
===================================================== */

.work-docs-section{
  padding:85px 0;
  background:
    radial-gradient(circle at top left, rgba(201,151,61,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.work-docs-heading{
  max-width:900px;
  margin:0 auto 42px;
  text-align:center;
}

.work-docs-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  padding:12px 24px;
  border-radius:999px;
  background:#efe9dd;
  color:#9E7224;
  font-size:14px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.work-docs-heading h2{
  max-width:860px;
  margin:0 auto 18px;
  color:#0D2B4F;
  font-size:clamp(32px, 3vw, 54px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-1.4px;
}

.work-docs-heading p{
  max-width:820px;
  margin:0 auto;
  color:#667085;
  font-size:17px;
  line-height:1.75;
  font-weight:700;
}

/* GRID */
.docs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.doc-thumb{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  background:#fff;
  border:1px solid #e7ebf0;
  box-shadow:0 18px 42px rgba(13,43,79,.09);
  transition:.28s ease;
}

.doc-thumb:hover{
  transform:translateY(-7px);
  box-shadow:0 28px 65px rgba(13,43,79,.16);
  border-color:rgba(201,151,61,.38);
}

.doc-thumb a{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

.doc-thumb figure{
  margin:0;
  height:300px;
  overflow:hidden;
  background:#f1f5f9;
}

.doc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.45s ease;
}

.doc-thumb:hover img{
  transform:scale(1.08);
}

.doc-thumb a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(
      180deg,
      rgba(13,43,79,.02) 0%,
      rgba(13,43,79,.20) 50%,
      rgba(6,26,51,.76) 100%
    );
  opacity:0;
  transition:.25s ease;
}

.doc-thumb:hover a::before{
  opacity:1;
}

.doc-view-btn{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:3;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  font-size:13px;
  font-weight:950;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(12px);
  transition:.25s ease;
}

.doc-thumb:hover .doc-view-btn{
  opacity:1;
  transform:translateY(0);
}

/* LIGHTBOX */
.doc-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(6,26,51,.88);
  backdrop-filter:blur(8px);
}

.doc-lightbox.active{
  display:flex;
}

.doc-lightbox-content{
  position:relative;
  width:min(1100px, 100%);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:docZoom .22s ease both;
}

.doc-lightbox-content img{
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(227,183,101,.35);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}

.doc-lightbox-caption{
  margin-top:14px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(227,183,101,.25);
  color:#fff;
  font-size:14px;
  font-weight:850;
  text-align:center;
}

.doc-lightbox-close{
  position:absolute;
  top:22px;
  right:24px;
  z-index:100000;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0D2B4F;
  font-size:32px;
  line-height:1;
  font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}

.doc-lightbox-close:hover{
  background:linear-gradient(135deg,#E3B765,#C9973D);
}

.doc-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:100000;
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0D2B4F;
  font-size:42px;
  font-weight:700;
  line-height:1;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}

.doc-lightbox-nav:hover{
  background:linear-gradient(135deg,#E3B765,#C9973D);
}

.doc-lightbox-prev{
  left:26px;
}

.doc-lightbox-next{
  right:26px;
}

@keyframes docZoom{
  from{
    opacity:0;
    transform:scale(.94);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* RESPONSIVE */
@media(max-width:1100px){
  .docs-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .doc-thumb figure{
    height:280px;
  }
}

@media(max-width:720px){
  .work-docs-section{
    padding:55px 0;
  }

  .work-docs-heading{
    text-align:left;
    margin-bottom:26px;
  }

  .work-docs-kicker{
    font-size:12px;
    padding:10px 18px;
    margin-bottom:14px;
  }

  .work-docs-heading h2{
    font-size:32px;
    letter-spacing:-.7px;
  }

  .work-docs-heading p{
    font-size:14px;
    line-height:1.65;
  }

  .docs-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .doc-thumb{
    border-radius:22px;
  }

  .doc-thumb figure{
    height:260px;
  }

  .doc-view-btn{
    opacity:1;
    transform:none;
  }

  .doc-lightbox{
    padding:18px;
  }

  .doc-lightbox-close{
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    font-size:28px;
  }

  .doc-lightbox-nav{
    width:44px;
    height:44px;
    font-size:34px;
  }

  .doc-lightbox-prev{
    left:12px;
  }

  .doc-lightbox-next{
    right:12px;
  }

  .doc-lightbox-content img{
    max-height:72vh;
    border-radius:16px;
  }
}

/* =====================================================
   PERIZINAN LEGALITAS / TRUST SECTION
===================================================== */

.apex-trust-section{
  padding:80px 0;
  background:
    radial-gradient(circle at top right, rgba(201,151,61,.10), transparent 32%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.apex-section-head{

  text-align:center;
}

.apex-section-head .section-title{
  color:#0D2B4F;
font-size: clamp(32px, 3vw, 54px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-1.4px;
  margin-bottom:16px;
}

.apex-section-head p{
  color:#667085;
  font-size:17px;
  line-height:1.75;
  font-weight:700;
  margin:0 auto;
}

/* WRAPPER KIRI KANAN */
.apex-cert-wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
  padding:56px;
  border-radius:34px;
  background:#fff;
  border:1px solid #e7ebf0;
  box-shadow:0 24px 70px rgba(13,43,79,.10);
  overflow:hidden;
}

.apex-cert-wrap::before{
  content:"";
  position:absolute;
  right:-95px;
  top:-95px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(201,151,61,.12);
  pointer-events:none;
}

/* =====================================================
   SLIDER KIRI TANPA PLUGIN
===================================================== */

.apex-legal-left{
  position:relative;
  z-index:2;
  min-width:0;
}

.legal-slider-js{
  position:relative;
  width:100%;
  padding:34px;
  border-radius:28px;
  border:3px dashed rgba(201,151,61,.55);
  background:
    radial-gradient(circle at center, rgba(201,151,61,.07), transparent 45%),
    #f8fafc;
  overflow:hidden;
  user-select:none;
  touch-action:pan-y;
}

.legal-slider-track{
  position:relative;
  width:100%;
  height:430px;
  overflow:hidden;
}

.legal-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transform:translateX(35px);
  transition:.45s ease;
  pointer-events:none;
}

.legal-slide.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  pointer-events:auto;
  z-index:2;
}

.feature-image-gold{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 20px 52px rgba(13,43,79,.11);
}

.feature-image-gold figure{
  width:100%;
  height:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.feature-image-gold img{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:contain;
  display:block;
  border-radius:18px;
}

/* BUTTON SLIDER */
.legal-slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  font-size:34px;
  line-height:1;
  font-weight:900;
  box-shadow:0 12px 28px rgba(13,43,79,.18);
  transition:.22s ease;
}

.legal-slider-btn:hover{
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 18px 36px rgba(13,43,79,.24);
}

.legal-prev{
  left:14px;
}

.legal-next{
  right:14px;
}

/* DOTS */
.legal-slider-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
}

.legal-slider-dots button{
  width:10px;
  height:10px;
  border:0;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  background:#d6dee8;
  transition:.22s ease;
}

.legal-slider-dots button.active{
  width:30px;
  background:#C9973D;
}

/* =====================================================
   KONTEN KANAN
===================================================== */

.apex-cert-copy{
  position:relative;
  z-index:2;
}

.apex-cert-copy h3{
  color:#0D2B4F;
 font-size: clamp(32px, 2vw, 54px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-1px;
  margin-bottom:18px;
}

.apex-cert-copy p{
  color:#667085;
  font-size:18px;
  line-height:1.65;
  font-weight:700;
  margin-bottom:24px;
}

.apex-trust-list{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:grid;
  gap:14px;
}

.apex-trust-list li{
  position:relative;
  padding-left:46px;
  color:#0D2B4F;
  font-size:17px;
  line-height:1.4;
  font-weight:600;
}

.apex-trust-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-3px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  font-size:18px;
  font-weight:950;
  box-shadow:0 10px 22px rgba(201,151,61,.28);
}

.apex-cert-copy .btn{
  min-height:56px;
  padding:15px 30px;
  border-radius:999px;
  font-weight:950;
}

/* TESTIMONIAL */
.apex-testimonials{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.apex-testimonial{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  padding:24px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
}

.apex-stars{
  color:#C9973D;
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:12px;
}

.apex-testimonial p{
  color:#667085;
  font-size:14px;
  line-height:1.65;
  font-weight:700;
  margin-bottom:16px;
}

.apex-user{
  display:flex;
  align-items:center;
  gap:10px;
  color:#0D2B4F;
  font-weight:950;
}

.apex-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(201,151,61,.13);
}

/* RESPONSIVE */
@media(max-width:1100px){
  .apex-cert-wrap{
    grid-template-columns:1fr;
    padding:36px;
  }

  .apex-testimonials{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .apex-trust-section{
    padding:52px 0;
  }

  .apex-section-head{
    text-align:left;
    margin-bottom:26px;
  }

  .apex-section-head .section-title{
    font-size:32px;
  }

  .apex-section-head p{
    font-size:14px;
  }

  .apex-cert-wrap{
    padding:20px;
    border-radius:26px;
    gap:28px;
  }

  .legal-slider-js{
    padding:16px;
    border-radius:22px;
  }

  .legal-slider-track{
    height:300px;
  }

  .feature-image-gold{
    padding:16px;
    border-radius:18px;
  }

  .feature-image-gold img{
    max-height:250px;
  }

  .legal-slider-btn{
    width:38px;
    height:38px;
    font-size:28px;
  }

  .legal-prev{
    left:6px;
  }

  .legal-next{
    right:6px;
  }

  .apex-cert-copy h3{
    font-size:30px;
  }

  .apex-cert-copy p{
    font-size:14px;
  }

  .apex-trust-list li{
    font-size:14px;
    padding-left:40px;
  }

  .apex-trust-list li::before{
    width:28px;
    height:28px;
    font-size:15px;
  }

  .apex-cert-copy .btn{
    width:100%;
    justify-content:center;
  }
}

/* =====================================================
   APEX MOBILE HEADER BARU
   Class baru total agar tidak bentrok
===================================================== */

/* default desktop: sembunyikan header mobile baru */
.apx-mobile-header{
  display:none;
}

@media(max-width:900px){

  /* sembunyikan header desktop lama di mobile */
  .top-header{
    display:none !important;
  }

  .apx-mobile-header{
    display:block;
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:99999;
    background:#fff;
    border-bottom:1px solid #e7ebf0;
    box-shadow:0 10px 30px rgba(13,43,79,.06);
  }

  .apx-mobile-top{
    height:108px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 24px;
    background:#fff;
  }

  .apx-mobile-logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    max-width:72%;
  }

  .apx-mobile-logo img{
    width:230px;
    max-width:100%;
    height:auto;
    display:block;
  }

  .apx-mobile-toggle{
    width:58px;
    height:58px;
    border:0;
    border-radius:17px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:6px;
    cursor:pointer;
    background:linear-gradient(135deg,#E3B765,#C9973D);
    box-shadow:0 12px 28px rgba(201,151,61,.30);
    flex:0 0 auto;
    padding:0;
  }

  .apx-mobile-toggle span{
    width:30px;
    height:4px;
    border-radius:999px;
    background:#0D2B4F;
    display:block;
    transition:.25s ease;
  }

  .apx-mobile-toggle.active span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
  }

  .apx-mobile-toggle.active span:nth-child(2){
    opacity:0;
  }

  .apx-mobile-toggle.active span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
  }

  .apx-mobile-panel{
    display:none;
    background:#fff;
    border-top:1px solid #e7ebf0;
    box-shadow:0 20px 50px rgba(13,43,79,.12);
    max-height:calc(100vh - 108px);
    overflow-y:auto;
    overflow-x:hidden;
  }

  .apx-mobile-panel.active{
    display:block;
    animation:apxMobileDown .22s ease both;
  }

  @keyframes apxMobileDown{
    from{
      opacity:0;
      transform:translateY(-8px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  .apx-mobile-nav{
    display:block;
    padding:22px 24px 28px;
  }

  .apx-mobile-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:17px 8px;
    border-bottom:1px solid #e7ebf0;
    color:#0D2B4F;
    text-decoration:none;
    font-size:20px;
    line-height:1.2;
    font-weight:950;
  }

  .apx-mobile-link b{
    color:#C9973D;
    font-size:26px;
    line-height:1;
  }

  /* DROPDOWN */
  .apx-mobile-dropdown{
    border-bottom:1px solid #e7ebf0;
  }

  .apx-mobile-dropdown-btn{
    width:100%;
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 8px;
    color:#0D2B4F;
    font-size:20px;
    line-height:1.2;
    font-weight:950;
    cursor:pointer;
    text-align:left;
  }

  .apx-mobile-dropdown-btn b{
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(201,151,61,.15);
    color:#9E7224;
    font-size:20px;
    line-height:1;
    transition:.25s ease;
  }

  .apx-mobile-dropdown.active .apx-mobile-dropdown-btn b{
    transform:rotate(45deg);
    background:linear-gradient(135deg,#E3B765,#C9973D);
    color:#0D2B4F;
  }

  .apx-mobile-dropdown-list{
    display:none;
    grid-template-columns:1fr;
    gap:10px;
    padding:0 0 18px;
  }

  .apx-mobile-dropdown.active .apx-mobile-dropdown-list{
    display:grid;
  }

  .apx-mobile-dropdown-list a{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:14px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e7ebf0;
    color:#0D2B4F;
    text-decoration:none;
    box-shadow:none;
  }

  .apx-mobile-dropdown-list a:hover{
    background:#fffaf1;
    border-color:rgba(201,151,61,.38);
  }

  .apx-mobile-dropdown-list i{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(201,151,61,.13);
    font-size:22px;
    font-style:normal;
  }

  .apx-mobile-dropdown-list strong{
    display:block;
    color:#0D2B4F;
    font-size:15px;
    line-height:1.25;
    font-weight:950;
    margin-bottom:4px;
    white-space:normal;
  }

  .apx-mobile-dropdown-list small{
    display:block;
    color:#667085;
    font-size:12px;
    line-height:1.35;
    font-weight:750;
    white-space:normal;
  }

  .apx-mobile-wa{
    margin-top:20px;
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px 20px;
    border-radius:999px;
    background:linear-gradient(135deg,#E3B765,#C9973D,#9E7224);
    color:#0D2B4F;
    text-decoration:none;
    font-size:16px;
    font-weight:950;
    box-shadow:0 14px 32px rgba(201,151,61,.32);
  }
}

/* desktop: pastikan header desktop tetap tampil */
@media(min-width:901px){
  .top-header{
    display:block;
  }

  .apx-mobile-header{
    display:none !important;
  }
}
/* =====================================================
   BLOG CATEGORY PAGE 3 GRID
===================================================== */

.blog-category-hero{
  padding:85px 0;
  background:
    linear-gradient(180deg,rgba(6,26,51,.72),rgba(6,26,51,.68)),
    url("https://www.indopestone.com/gambar_jasa/indopetone.jpg") center/cover no-repeat;
}

.blog-category-hero-card{
  max-width:820px;
  margin:0 auto;
  padding:42px 30px;
  border-radius:28px;
  background:#fff;
  text-align:center;
  border:1px solid rgba(201,151,61,.26);
  box-shadow:0 24px 60px rgba(13,43,79,.18);
}

.blog-category-kicker{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.blog-category-hero-card h1{
  color:#0D2B4F;
  font-size:clamp(34px,4vw,58px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-1px;
  margin-bottom:14px;
}

.blog-category-breadcrumb{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  color:#667085;
  font-size:13px;
  font-weight:850;
}

.blog-category-breadcrumb a{
  color:#C9973D;
  text-decoration:none;
  font-weight:950;
}

/* PAGE */
.blog-category-page{
  padding:76px 0;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.blog-category-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
}

.blog-category-main{
  min-width:0;
}

.blog-category-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.blog-category-label{
  display:inline-flex;
  margin-bottom:10px;
  color:#C9973D;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.blog-category-head h2{
  color:#0D2B4F;
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.8px;
}

.blog-category-head p{
  max-width:360px;
  color:#667085;
  font-size:14px;
  line-height:1.6;
  font-weight:750;
}

.blog-category-head p strong{
  color:#0D2B4F;
}

/* GRID 3 */
.blog-category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.blog-category-card{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
  transition:.25s ease;
}

.blog-category-card:hover{
  transform:translateY(-7px);
  border-color:rgba(201,151,61,.38);
  box-shadow:0 24px 54px rgba(13,43,79,.14);
}

.blog-category-img{
  display:block;
  height:215px;
  overflow:hidden;
  background:#f1f5f9;
}

.blog-category-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s ease;
}

.blog-category-card:hover .blog-category-img img{
  transform:scale(1.06);
}

.blog-category-body{
  padding:20px;
}

.blog-category-badge{
  display:inline-flex;
  margin-bottom:13px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(201,151,61,.13);
  color:#9E7224;
  font-size:12px;
  font-weight:950;
}

.blog-category-body h3{
  margin:0 0 10px;
}

.blog-category-body h3 a{
  color:#0D2B4F;
  font-size:19px;
  line-height:1.25;
  font-weight:950;
  text-decoration:none;
}

.blog-category-body h3 a:hover{
  color:#C9973D;
}

.blog-category-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:#667085;
  font-size:12px;
  font-weight:850;
  margin-bottom:13px;
}

.blog-category-body p{
  color:#667085;
  font-size:13px;
  line-height:1.65;
  font-weight:700;
  margin-bottom:15px;
}

.blog-category-read{
  display:inline-flex;
  color:#C9973D;
  font-size:13px;
  font-weight:950;
  text-decoration:none;
}

.blog-category-read:hover{
  color:#0D2B4F;
}

/* PAGINATION */
.blog-category-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:36px;
}

.blog-category-pagination a{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e7ebf0;
  color:#0D2B4F;
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(13,43,79,.05);
}

.blog-category-pagination a:hover,
.blog-category-pagination a.active{
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  border-color:transparent;
}

/* EMPTY */
.blog-category-empty{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:24px;
  padding:36px;
  text-align:center;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
}

.blog-category-empty h3{
  color:#0D2B4F;
  font-size:24px;
  font-weight:950;
  margin-bottom:8px;
}

.blog-category-empty p{
  color:#667085;
  font-size:14px;
  font-weight:700;
}

/* SIDEBAR */
.blog-category-sidebar{
  position:sticky;
  top:115px;
  display:grid;
  gap:22px;
}

.blog-category-widget{
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 14px 34px rgba(13,43,79,.07);
}

.blog-category-widget h3{
  color:#0D2B4F;
  font-size:20px;
  font-weight:950;
  margin-bottom:16px;
}

/* SEARCH */
.blog-category-search{
  display:flex;
  overflow:hidden;
  border-radius:15px;
  border:1px solid #e7ebf0;
}

.blog-category-search input{
  width:100%;
  height:50px;
  border:0;
  outline:0;
  padding:0 15px;
  color:#0D2B4F;
  font-weight:800;
}

.blog-category-search button{
  width:54px;
  height:50px;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  font-size:19px;
  font-weight:950;
}

/* CATEGORY LIST */
.blog-category-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.blog-category-list li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  color:#0D2B4F;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}

.blog-category-list li a span{
  min-width:32px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  color:#9E7224;
  border:1px solid rgba(201,151,61,.22);
  font-size:12px;
  font-weight:950;
}

.blog-category-list li a:hover,
.blog-category-list li a.active{
  background:linear-gradient(135deg,#0D2B4F,#061A33);
  color:#fff;
}

/* POPULAR */
.blog-popular-list{
  display:grid;
  gap:14px;
}

.blog-popular-item{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #eef2f5;
  text-decoration:none;
}

.blog-popular-item:hover{
  background:#fffaf1;
  border-color:rgba(201,151,61,.30);
}

.blog-popular-item img{
  width:78px;
  height:68px;
  object-fit:cover;
  border-radius:12px;
}

.blog-popular-item strong{
  display:block;
  color:#0D2B4F;
  font-size:13px;
  line-height:1.25;
  font-weight:950;
  margin-bottom:5px;
}

.blog-popular-item span{
  color:#667085;
  font-size:12px;
  font-weight:800;
}

/* CTA */
.blog-category-cta{
  background:
    radial-gradient(circle at top right, rgba(227,183,101,.18), transparent 34%),
    linear-gradient(135deg,#0D2B4F,#061A33);
  color:#fff;
  border:0;
}

.blog-category-cta h3{
  color:#fff;
}

.blog-category-cta p{
  color:#E7EEF7;
  font-size:14px;
  line-height:1.65;
  font-weight:700;
  margin-bottom:18px;
}

.blog-category-wa{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#E3B765,#C9973D);
  color:#0D2B4F;
  text-decoration:none;
  font-size:14px;
  font-weight:950;
}

/* RESPONSIVE */
@media(max-width:1150px){
  .blog-category-layout{
    grid-template-columns:1fr;
  }

  .blog-category-sidebar{
    position:relative;
    top:auto;
    grid-template-columns:repeat(2,1fr);
  }

  .blog-category-cta{
    grid-column:1 / -1;
  }
}

@media(max-width:900px){
  .blog-category-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .blog-category-hero{
    padding:48px 0;
  }

  .blog-category-hero-card{
    padding:30px 20px;
    border-radius:22px;
  }

  .blog-category-page{
    padding:48px 0;
  }

  .blog-category-head{
    display:block;
  }

  .blog-category-head p{
    margin-top:12px;
    max-width:100%;
  }

  .blog-category-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .blog-category-img{
    height:230px;
  }

  .blog-category-sidebar{
    grid-template-columns:1fr;
  }

  .blog-category-widget{
    border-radius:20px;
    padding:18px;
  }
}
/* FAQ SECTION */
#faq {
  background: #fff;
}

#faq .section-title {
  text-align: center;
  margin-bottom: 36px;
}

/* Grid FAQ */
#faq .faq {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Card */
#faq .faq-item {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.04);
  transition: 0.3s ease;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
}

/* Question */
#faq .faq-question {
  width: 100%;
  min-height: 96px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  cursor: pointer;
}

/* Title */
#faq .faq-question h3 {
  margin: 0;
  flex: 1;
  max-width: none !important;
  width: auto !important;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  color: #061d3a;
  text-align: left;
  white-space: normal;
}

/* Plus Icon */
#faq .faq-question span {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #f7efe2;
  color: #b8872f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: 0.3s ease;
}

/* Answer */
#faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#faq .faq-answer p {
  margin: 0;
  padding: 0 30px 26px;
  font-size: 16px;
  line-height: 1.75;
  color: #5b6472;
}

/* Active */
#faq .faq-item.active {
  border-color: #c69a45;
  box-shadow: 0 18px 45px rgba(184, 137, 47, 0.13);
}

#faq .faq-item.active .faq-question span {
  background: #b8872f;
  color: #fff;
  transform: rotate(45deg);
}

/* Mobile */
@media (max-width: 768px) {
  #faq .faq {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #faq .faq-question {
    min-height: auto;
    padding: 22px 20px;
  }

  #faq .faq-question h3 {
    font-size: 17px;
  }

  #faq .faq-answer p {
    padding: 0 20px 22px;
    font-size: 15px;
  }
}