*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:  #0b1f3a; --navy2: #132d52; --blue: #1565c0;
      --red: #d32f2f;   --red2:  #b71c1c;
      --white: #fff;    --gray:  #f2f5f9;
      --text:  #1a2740; --muted: #5a6b80; --gold: #f9a825;
    }
    html { scroll-behavior:smooth; }
    body { font-family:'Barlow',sans-serif; color:var(--text); background:#fff; overflow-x:hidden; }

    /* ── NAVBAR ─────────────────────────────── */
    .navbar {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      height:66px; display:flex; align-items:center; justify-content:space-between;
      padding:0 48px;
      background:rgba(9,22,50,0.97); backdrop-filter:blur(14px);
      box-shadow:0 2px 24px rgba(0,0,0,.35);
    }
    .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
    .nav-logo-text {
      font-family:'Barlow Condensed',sans-serif;
      font-size:26px; font-weight:900; font-style:italic;
      color:#fff; letter-spacing:.5px; line-height:1;
    }
    .nav-logo-text em { color:var(--red); font-style:normal; }
    .nav-logo-sub {
      font-family:'Barlow Condensed',sans-serif;
      font-size:10px; font-weight:600;
      letter-spacing:3px; color:rgba(255,255,255,.45);
      text-transform:uppercase; margin-top:2px;
    }
    .nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
    .nav-links a {
      color:rgba(255,255,255,.82); text-decoration:none;
      font-size:14px; font-weight:500; padding:6px 16px;
      border-radius:6px; transition:all .2s; position:relative;
    }
    .nav-links a.active, .nav-links a:hover { color:#fff; }
    .nav-links a.active::after {
      content:''; display:block; position:absolute;
      bottom:2px; left:16px; right:16px; height:2px;
      background:var(--red); border-radius:2px;
    }
    .nav-cta {
      background:var(--red) !important; color:#fff !important;
      border-radius:30px !important; padding:9px 20px !important;
      font-weight:700 !important; font-size:13.5px !important;
      display:flex !important; align-items:center !important; gap:7px !important;
    }
    .nav-cta:hover { background:var(--red2) !important; }
    .nav-cta::after { display:none !important; }

    /* ── HERO ────────────────────────────────── */
    #hero {
      position:relative; min-height:100vh;
      display:flex; align-items:center; overflow:hidden;
      padding-top:66px;
    }
    .hero-bg {
      position:absolute; inset:0;
      background-image:url('assets/img/animasi-G-PEST3.jpg');
      background-size:cover; background-position:center top;
    }
    /* ── HERO OVERLAY — dibuat terang, tidak digelapkan ── */
    .hero-overlay {
      display: none;
    }

    .hero-overlay-b {
      display: none;

    }
    .hero-inner {
      position:relative; z-index:2;
      max-width:1200px; margin:0 auto;
      padding:80px 48px 110px; width:100%;
    }
    .hero-badge {
      display:inline-flex; align-items:center; gap:7px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
      color:rgba(255,255,255,.9); border-radius:30px;
      padding:5px 16px; font-size:11.5px; font-weight:600;
      text-transform:uppercase; letter-spacing:1.5px; margin-bottom:22px;
    }
    .hero-title {
      font-family:'Barlow Condensed',sans-serif;
      font-size:clamp(56px,8vw,100px); font-weight:900;
      color:#fff; line-height:.93;
      text-transform:uppercase; letter-spacing:-2px; margin-bottom:12px;
    }
    .hero-title .red { color:var(--red); }
    .hero-subtitle {
      font-family:'Barlow Condensed',sans-serif;
      font-size:clamp(18px,2.5vw,28px); font-weight:600;
      color:rgba(255,255,255,.76); letter-spacing:1px; margin-bottom:28px;
    }
    .btn-hero {
      display:inline-flex; align-items:center; gap:9px;
      background:var(--red); color:#fff; border:none;
      padding:14px 32px; border-radius:50px;
      font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
      box-shadow:0 8px 24px rgba(211,47,47,.45); transition:all .3s;
    }
    .btn-hero:hover {
      background:var(--red2); color:#fff; text-decoration:none;
      transform:translateY(-2px); box-shadow:0 14px 32px rgba(211,47,47,.55);
    }
    .hero-stats {
      display:flex; gap:32px; margin-top:44px;
      padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
    }
    .hero-stat .num {
      font-family:'Barlow Condensed',sans-serif;
      font-size:34px; font-weight:800; color:#fff; line-height:1;
    }
    .hero-stat .num sup { font-size:18px; }
    .hero-stat .lbl {
      font-size:10.5px; color:rgba(255,255,255,.48);
      text-transform:uppercase; letter-spacing:1px; margin-top:3px;
    }
    .hero-wave { position:absolute; bottom:-2px; left:0; width:100%; z-index:3; line-height:0; }
    .hero-wave svg { display:block; width:100%; }

    /* ── SECTIONS COMMON ─────────────────────── */
    section { padding:80px 0; }
    .container { max-width:1200px; margin:0 auto; padding:0 48px; }
    .sec-eyebrow {
      display:block; font-size:11.5px; font-weight:700;
      color:var(--red); text-transform:uppercase;
      letter-spacing:3px; margin-bottom:8px;
    }
    .sec-title {
      font-family:'Barlow Condensed',sans-serif;
      font-size:clamp(32px,4vw,50px); font-weight:800;
      color:var(--navy); text-transform:uppercase;
      letter-spacing:-.5px; line-height:1.05;
      position:relative; display:inline-block;
    }
    .sec-title::after {
      content:''; display:block; width:52px; height:4px;
      background:var(--red); border-radius:2px; margin-top:8px;
    }
    .sec-title.center::after { margin:8px auto 0; }
    .sec-header { text-align:center; margin-bottom:52px; }

    /* ── LAYANAN ─────────────────────────────── */
    #layanan {
    background: var(--gray);
    padding: 60px 0;
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;

      max-width: 1200px;
      margin: 0 auto;          /* Biar grid-nya di tengah */
      justify-content: center; /* Tengah horizontal */
    }
    img {
      border-radius: 10px;
    }
    .svc-card {
      background: #fff;
      border-radius: 14px;
      padding: 28px 18px 24px;
      text-align: center;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all .3s ease;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: block;
      box-shadow: 0 2px 14px rgba(0,0,0,.06);

      max-width: 260px;   /* Biar nggak kepanjangan */
      margin: 0 auto;     /* Tengah per card */
    }
  
    .svc-card::after {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:3px; background:var(--red);
      transform:scaleX(0); transition:transform .3s; transform-origin:left;
    }
    .svc-card:hover { border-color:rgba(211,47,47,.2); box-shadow:0 12px 32px rgba(0,0,0,.11); transform:translateY(-6px); color:inherit; text-decoration:none; }
    .svc-card:hover::after { transform:scaleX(1); }
    .svc-ico {
      width:78px; height:78px; border-radius:50%; font-size:34px;
      background:var(--gray); display:flex; align-items:center; justify-content:center;
      margin:0 auto 16px; border:3px solid transparent; transition:all .3s;
    }
    .svc-card:hover .svc-ico { border-color:rgba(211,47,47,.22); background:rgba(211,47,47,.06); }
    .svc-card h3 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:16px; font-weight:800; color:var(--navy);
      text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
    }
    .svc-card p { font-size:12.5px; color:var(--muted); line-height:1.65; }
    .svc-more {
      display:inline-flex; align-items:center; gap:4px;
      font-size:12px; font-weight:700; color:var(--red);
      margin-top:12px; opacity:0; transition:opacity .3s;
    }
    .svc-card:hover .svc-more { opacity:1; }

    /* ── MODALS ─────────────────────────────── */
    .moverlay {
      position:fixed; inset:0; background:rgba(0,0,0,.6);
      z-index:2000; display:flex; align-items:center; justify-content:center;
      padding:20px; opacity:0; pointer-events:none;
      transition:opacity .3s; backdrop-filter:blur(5px);
    }
    .moverlay.open { opacity:1; pointer-events:all; }
    .mbox {
      background:#fff; border-radius:20px; max-width:560px; width:100%;
      overflow:hidden; transform:scale(.9) translateY(24px); transition:transform .3s;
      box-shadow:0 30px 80px rgba(0,0,0,.3);
    }
    .moverlay.open .mbox { transform:scale(1) translateY(0); }
    .mhd {
      background:linear-gradient(135deg,var(--navy),var(--navy2));
      padding:26px 30px; display:flex; align-items:center; gap:16px;
    }
    .mico {
      font-size:38px; width:62px; height:62px;
      background:rgba(255,255,255,.12); border-radius:14px;
      display:flex; align-items:center; justify-content:center;
    }
    .mhd h2 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:22px; font-weight:800; color:#fff; text-transform:uppercase;
    }
    .mhd p { color:rgba(255,255,255,.55); font-size:12.5px; margin-top:2px; }
    .mx {
      margin-left:auto; background:rgba(255,255,255,.14); border:none;
      color:#fff; width:36px; height:36px; border-radius:50%;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:17px; transition:background .2s;
    }
    .mx:hover { background:rgba(255,255,255,.28); }
    .mbd { padding:26px 30px; }
    .mbd p { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:18px; }
    .mlist { list-style:none; margin-bottom:22px; }
    .mlist li {
      display:flex; align-items:flex-start; gap:9px;
      padding:9px 0; border-bottom:1px solid #f0f3f7;
      font-size:13.5px; color:var(--text);
    }
    .mlist li:last-child { border:none; }
    .mlist li i { color:var(--red); font-size:15px; flex-shrink:0; margin-top:2px; }
    .mact { display:flex; gap:10px; }
    .btn-wa {
      flex:1; background:#25d366; color:#fff; padding:12px;
      border:none; border-radius:50px; font-size:14px; font-weight:700;
      cursor:pointer; text-decoration:none;
      display:flex; align-items:center; justify-content:center; gap:8px;
      transition:all .3s;
    }
    .btn-wa:hover { background:#20bc5a; color:#fff; text-decoration:none; transform:translateY(-1px); }
    .btn-bk {
      background:var(--gray); color:var(--text); padding:12px 20px; border:none;
      border-radius:50px; font-size:13.5px; font-weight:600; cursor:pointer;
      display:flex; align-items:center; gap:6px; transition:background .2s;
    }
    .btn-bk:hover { background:#dde3ec; }

    /* ── BOOKING ─────────────────────────────── */
    #booking { padding:0; background:var(--navy); overflow:hidden; }
    .bk-wrap { display:grid; grid-template-columns:1fr 1.15fr; }
    .bk-left {
      position:relative; min-height:520px;
      display:flex; flex-direction:column; justify-content:center;
      padding:60px 52px;
    }
    .bk-photo {
      position:absolute; inset:0;
      background-image:url('assets/img/animasi-G-PEST.jpg');
      background-size:cover; background-position:center; opacity:.28;
    }
    .bk-grad { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,22,50,.87),rgba(20,40,80,.72)); }
    .bk-body { position:relative; z-index:1; }
    .bk-body h2 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:42px; font-weight:900; color:#fff;
      text-transform:uppercase; line-height:1.05; margin-bottom:12px;
    }
    
    .bk-body h2 span { color:var(--red); }
    .bk-body p { color:rgba(255,255,255,.62); font-size:14px; line-height:1.75; margin-bottom:24px; }
    .bk-perks { list-style:none; display:flex; flex-direction:column; gap:11px; }
    .bk-perks li { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.8); font-size:14px; }
    .bk-perks li i { color:#4fc3f7; font-size:16px; }
    .bk-right { background:#fff; padding:52px; display:flex; flex-direction:column; justify-content:center; }
    .bk-right h3 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:28px; font-weight:800; color:var(--navy);
      text-transform:uppercase; margin-bottom:4px;
    }
    .bk-sub { color:var(--muted); font-size:13px; margin-bottom:26px; }
    .f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    .f-full { margin-bottom:14px; }
    .f-g { display:flex; flex-direction:column; gap:5px; }
    .f-g label { font-size:11.5px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.8px; }
    .f-g input, .f-g select, .f-g textarea {
      border:1.5px solid #dde3ec; border-radius:10px;
      padding:11px 14px; font-family:'Barlow',sans-serif;
      font-size:14px; color:var(--text); background:#fafbfc;
      outline:none; transition:border-color .2s,box-shadow .2s;
    }
    .f-g input:focus,.f-g select:focus,.f-g textarea:focus {
      border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.1); background:#fff;
    }
    .f-g textarea { resize:vertical; min-height:90px; }
    .btn-wa-send {
      width:100%; padding:14px; background:#25d366; color:#fff; border:none;
      border-radius:50px; font-family:'Barlow',sans-serif;
      font-size:15px; font-weight:700; cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:9px;
      margin-top:6px; box-shadow:0 6px 22px rgba(37,211,102,.3); transition:all .3s;
    }
    .btn-wa-send:hover { background:#20bc5a; transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,.42); }

    /* ── WHY US ─────────────────────────────── */
    #mengapa { background:var(--gray); }
    .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
    .why-card {
      background:#fff; border-radius:16px; padding:30px 22px;
      text-align:center; box-shadow:0 3px 18px rgba(0,0,0,.06); transition:transform .3s;
    }
    .why-card:hover { transform:translateY(-5px); }
    .why-ico {
      width:62px; height:62px; border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      font-size:27px; color:#fff; margin:0 auto 18px;
    }
    .why-card h4 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:18px; font-weight:800; color:var(--navy);
      text-transform:uppercase; margin-bottom:8px;
    }
    .why-card p { font-size:13px; color:var(--muted); line-height:1.65; }

    /* ── TESTIMONI ──────────────────────────── */
    #testimoni { background:#fff; }
    .testi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
    .testi-card {
      background:var(--gray); border-radius:16px; padding:28px;
      transition:transform .3s,box-shadow .3s;
    }
    .testi-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.09); }
    .tq { font-size:42px; color:var(--red); line-height:.9; font-family:Georgia,serif; margin-bottom:10px; }
    .tt { font-size:14.5px; color:var(--text); line-height:1.8; font-style:italic; margin-bottom:20px; }
    .ta { display:flex; align-items:center; gap:12px; }
    .tav {
      width:44px; height:44px; border-radius:50%;
      background:linear-gradient(135deg,var(--navy),var(--blue));
      display:flex; align-items:center; justify-content:center;
      color:#fff; font-weight:700; font-size:17px; flex-shrink:0;
    }
    .tn { font-size:14px; font-weight:700; color:var(--navy); }
    .tl { font-size:12px; color:var(--muted); }
    .ts { color:var(--gold); font-size:13px; margin-top:2px; }

    /* ── FOOTER ─────────────────────────────── */
    footer { background:var(--navy); color:rgba(255,255,255,.7); }
    .ft-main { padding:60px 0 40px; }
    .ft-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px; margin-bottom:48px; }
    .ft-brand {
      font-family:'Barlow Condensed',sans-serif;
      font-size:30px; font-weight:900; font-style:italic;
      color:#fff; letter-spacing:.5px; margin-bottom:10px;
    }
    .ft-brand em { color:var(--red); font-style:normal; }
    .ft-tag { font-size:13.5px; line-height:1.75; margin-bottom:22px; }
    .ft-socs { display:flex; gap:10px; }
    .ft-soc {
      width:36px; height:36px; border-radius:8px;
      background:rgba(255,255,255,.08); color:rgba(255,255,255,.65);
      font-size:16px; display:flex; align-items:center; justify-content:center;
      text-decoration:none; transition:all .2s;
    }
    .ft-soc:hover { background:var(--red); color:#fff; }
    .ft-col h4 {
      font-family:'Barlow Condensed',sans-serif;
      font-size:15px; font-weight:800; color:#fff;
      text-transform:uppercase; letter-spacing:1px;
      margin-bottom:18px; padding-bottom:10px; position:relative;
    }
    .ft-col h4::after {
      content:''; position:absolute; bottom:0; left:0;
      width:28px; height:2.5px; background:var(--red); border-radius:2px;
    }
    .ft-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .ft-links a {
      color:rgba(255,255,255,.58); text-decoration:none;
      font-size:13.5px; display:flex; align-items:center; gap:7px; transition:color .2s;
    }
    .ft-links a i { color:var(--red); font-size:11px; }
    .ft-links a:hover { color:#fff; }
    .ft-cnt { display:flex; flex-direction:column; gap:12px; }
    .ft-ci { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; }
    .ft-ci i { color:var(--red); font-size:16px; flex-shrink:0; margin-top:1px; }

    /* Map */
    .ft-map { width:100%; height:220px; overflow:hidden; display:block; }
    .ft-map iframe { width:100%; height:100%; border:0; filter:grayscale(25%) brightness(.85); display:block; }

    /* Info bar */
    .ft-bar { background:#070f1e; padding:16px 0; font-size:12.5px; color:rgba(255,255,255,.38); }
    .ft-bar-in { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
    .ft-bar-info { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .sep { opacity:.3; }

    /* ── FLOATING WA ────────────────────────── */
    .wa-fab {
      position:fixed; bottom:28px; right:28px; z-index:999;
      background:#25d366; color:#fff; padding:13px 22px;
      border-radius:50px; text-decoration:none;
      font-weight:700; font-size:14px;
      display:flex; align-items:center; gap:10px;
      box-shadow:0 6px 28px rgba(37,211,102,.5); transition:all .3s;
      animation:wab 2.5s ease-in-out infinite;
    }
    .wa-fab i { font-size:22px; }
    .wa-fab:hover { background:#20bc5a; color:#fff; text-decoration:none; transform:translateY(-3px); box-shadow:0 10px 36px rgba(37,211,102,.6); }
    @keyframes wab {
      0%,100%{box-shadow:0 6px 28px rgba(37,211,102,.5);}
      50%{box-shadow:0 6px 40px rgba(37,211,102,.75),0 0 0 8px rgba(37,211,102,.12);}
    }

    /* ── SCROLL REVEAL ──────────────────────── */
    [data-r]{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
    [data-r].on{opacity:1;transform:translateY(0);}
    [data-d="1"]{transition-delay:.1s}[data-d="2"]{transition-delay:.2s}
    [data-d="3"]{transition-delay:.3s}[data-d="4"]{transition-delay:.4s}
    [data-d="5"]{transition-delay:.5s}

    /* ── RESPONSIVE ─────────────────────────── */
    @media(max-width:1100px){
      .svc-grid{grid-template-columns:repeat(3,1fr);}
      .ft-grid{grid-template-columns:1fr 1fr;}
      .why-grid{grid-template-columns:repeat(2,1fr);}
    }
    @media(max-width:768px){
      .navbar{padding:0 20px;} .nav-links{display:none;}
      .hero-inner{padding:60px 24px 110px;}
      .hero-stats{gap:18px;}
      .bk-wrap{grid-template-columns:1fr;}
      .bk-left{padding:40px 28px;min-height:240px;}
      .bk-right{padding:40px 28px;}
      .f-row{grid-template-columns:1fr;}
      .svc-grid{grid-template-columns:repeat(2,1fr);}
      .testi-grid{grid-template-columns:1fr;}
      .ft-grid{grid-template-columns:1fr;}
      .container{padding:0 22px;}
      .why-grid{grid-template-columns:1fr 1fr;}
      .ft-bar-in{flex-direction:column;align-items:flex-start;}
    }
    
    .hero-content{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:40px;
    }

    .hero-text{
      flex:1;
    }

    .hero-image {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-end; /* supaya gambar rata bawah */
      overflow: hidden;
      max-height: calc(100vh - 66px); /* tinggi hero dikurangi navbar */
    }

    .hero-image img {
      width: 100%;        /* ikuti lebar flex container */
      max-width: 580px;   /* batas maksimal agar tidak terlalu besar */
      height: auto;
      object-fit: contain;
      display: block;
    }
    @media (max-width: 768px) {
  .bk-wrap {
    grid-template-columns: 1fr;
  }

  .bk-left {
    padding: 40px 24px;
    min-height: 200px;
  }

  .bk-right {
    padding: 40px 24px;        /* padding seimbang kiri & kanan */
    width: 100%;
    box-sizing: border-box;
  }

  .bk-right h3,
  .bk-sub {
    text-align: left;          /* atau center kalau mau ditengah */
  }

  .f-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .f-full,
  .f-g,
  .f-g input,
  .f-g select,
  .f-g textarea {
    width: 100%;
    box-sizing: border-box;    /* pastikan tidak overflow */
  }

  .btn-wa-send {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ============================================================
   HERO MOBILE FIX
   Tempel di bagian PALING BAWAH main.css (setelah semua style)
   ============================================================ */

/* ── FIX DESKTOP: pastikan hero-image tidak overlap hero-text ── */
.hero-content {
  display: flex;
  align-items: flex-end;          /* rata bawah */
  justify-content: space-between;
  gap: 32px;
}

.hero-text {
  flex: 0 0 auto;
  max-width: 520px;               /* batasi lebar teks agar tidak membentang ke gambar */
  z-index: 2;
}

.hero-image {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: visible;
  max-height: calc(100vh - 66px);
  pointer-events: none;
}

.hero-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── FIX OVERLAY DESKTOP: sedikit lebih terang biar gambar tetap kelihatan ── */
.hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(8, 18, 40, 0.90) 0%,
    rgba(10, 24, 50, 0.75) 38%,
    rgba(10, 28, 55, 0.20) 65%,
    rgba(10, 28, 55, 0.00) 100%
  ) !important;
}

/* ── MOBILE HERO FIX (max-width: 768px) ── */
@media (max-width: 768px) {

  /* 1. Hilangkan overlay gelap – biar gambar background jelas */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(6, 14, 34, 0.72) 0%,
      rgba(6, 14, 34, 0.45) 55%,
      rgba(6, 14, 34, 0.65) 100%
    ) !important;
  }

  /* Hilangkan overlay bawah juga */
  .hero-overlay-b {
    display: none;
  }

  /* 2. Susun konten: gambar di atas, teks di bawah – tidak saling menutupi */
  .hero-inner {
    padding: 16px 20px 80px;
  }

  .hero-content {
    flex-direction: column;          /* stack vertikal */
    align-items: center;
    gap: 0;
  }

  /* 3. Gambar teknisi: tampil di atas, proporsional, TIDAK blur */
  .hero-image {
    order: -1;                       /* gambar di atas */
    width: 100%;
    max-height: 260px;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
  }

  .hero-image img {
    max-width: 240px;
    width: auto;
    height: 260px;
    object-fit: contain;
    object-position: bottom center;
    /* HAPUS filter blur jika ada */
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* 4. Teks: di bawah gambar, teks lebih kecil agar rapi */
  .hero-text {
    order: 1;
    max-width: 100%;
    text-align: center;
    padding-top: 12px;
  }

  /* Badge */
  .hero-badge {
    font-size: 10px;
    padding: 5px 14px;
    margin-bottom: 14px;
  }

  /* Judul besar */
  .hero-title {
    font-size: clamp(38px, 11vw, 58px) !important;
    letter-spacing: -1px;
    line-height: 0.92;
    margin-bottom: 10px;
  }

  /* Subjudul */
  .hero-subtitle {
    font-size: clamp(15px, 4vw, 20px) !important;
    margin-bottom: 20px;
  }

  /* Tombol CTA */
  .btn-hero {
    padding: 12px 28px;
    font-size: 14px;
    width: auto;
    display: inline-flex;
    justify-content: center;
  }

  /* Statistik */
  .hero-stats {
    gap: 14px;
    margin-top: 28px;
    padding-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stat .num {
    font-size: 26px;
  }

  .hero-stat .lbl {
    font-size: 9.5px;
  }
}

/* ── EXTRA SMALL (HP kecil < 420px) ── */
@media (max-width: 420px) {
  .hero-title {
    font-size: clamp(32px, 10vw, 44px) !important;
  }

  .hero-image {
    max-height: 200px;
  }

  .hero-image img {
    height: 200px;
    max-width: 180px;
  }

  .hero-stats {
    gap: 10px;
  }

  .hero-stat .num {
    font-size: 22px;
  }
}