/* ============================================================
     VARIABLES
  ============================================================ */
  :root {
    --w:#fff; --of:#fafafa; --lg:#f0f0f0; --mg:#8e8e8e; --dg:#3d3d3d; --bk:#1a1a1a;
    --org:#F87411; --org-sh:rgba(248,116,17,.35);
    --grn:#285C3A;
    --rsm:8px; --rmd:16px; --rlg:24px; --rxl:32px;
    --ssm:0 2px 12px rgba(0,0,0,.07);
    --smd:0 8px 32px rgba(0,0,0,.10);
    --slg:0 20px 60px rgba(0,0,0,.15);
    --tr:all .3s ease;
  }

  /* ============================================================
     RESET
  ============================================================ */
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
  html { scroll-behavior:smooth }
  body { font-family:'Inter',sans-serif; background:var(--w); color:var(--bk); line-height:1.65; overflow-x:hidden }
  h1,h2,h3,h4,h5,h6 { font-family:'Poppins',sans-serif; line-height:1.25 }
  a { text-decoration:none; color:inherit }
  ul { list-style:none }
  section { overflow:hidden }
  .container { max-width:1200px; margin:0 auto; padding:0 24px }

  /* ============================================================
     UTILITIES
  ============================================================ */
  .grad { color:var(--org); }
  .badge { display:inline-block; font-family:'Poppins',sans-serif; font-size:11px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; padding:6px 18px; border-radius:100px; background:var(--grn); color:#fff; margin-bottom:14px }
  .sec-hdr { text-align:center; max-width:620px; margin:0 auto 56px }
  .sec-hdr h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:500; color:var(--bk); margin-bottom:14px }
  .sec-hdr p { color:var(--mg); font-size:15.5px; line-height:1.75 }

  /* ============================================================
     WIPE MASK TECHNIQUE  (from rice-and-bran.html)
     ─────────────────────────────────────────────────────────────
     • .wipe-mask  = absolutely-positioned div on top of the image
       (z-index 3, same colour as section background → looks like
        the image is hidden behind the page)
     • animation-play-state: paused by default
     • JS adds .wipe-animated → animation-play-state: running
     • The mask slides away, revealing the image beneath
     ─────────────────────────────────────────────────────────────
     Direction variants
       wipe-from-left  → mask slides RIGHT  (reveals left→right)
       wipe-from-right → mask slides LEFT   (reveals right→left)
       wipe-from-top   → mask slides DOWN   (reveals top→bottom)  ← unused but defined
       wipe-from-bot   → mask slides UP     (reveals bottom→top)
  ============================================================ */
  .wipe-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    will-change: transform;
    backface-visibility: hidden;
    animation-duration: 1.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: forwards;
    animation-play-state: paused;  /* ← stays hidden until JS fires */
  }
  /* Run: JS adds this class */
  .wipe-mask.wipe-animated { animation-play-state: running }

  /* Mask colour per section background */
  .wipe-mask.bg-white  { background: #ffffff }  /* white sections */
  .wipe-mask.bg-off    { background: #fafafa }  /* off-white sections */
  .wipe-mask.bg-dark   { background: #1a1a1a }  /* dark copywriting section */

  /* LEFT: mask exits to the right */
  .wipe-mask.wipe-from-left  { animation-name: wmLeft }
  @keyframes wmLeft {
    0%   { transform: translateX(0%) }
    100% { transform: translateX(101%) }   /* 101% avoids 1-px hairline */
  }

  /* RIGHT: mask exits to the left */
  .wipe-mask.wipe-from-right { animation-name: wmRight }
  @keyframes wmRight {
    0%   { transform: translateX(0%) }
    100% { transform: translateX(-101%) }
  }

  /* BOT: mask exits upward */
  .wipe-mask.wipe-from-bot   { animation-name: wmBot }
  @keyframes wmBot {
    0%   { transform: translateY(0%) }
    100% { transform: translateY(-101%) }
  }

  /* Stagger delays for sibling wipe masks (set via data-wipe-delay in HTML) */
  /* Applied inline via JS from data-wipe-delay attribute */

  /* ============================================================
     BUTTONS
  ============================================================ */
  .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:100px; font-family:'Poppins',sans-serif; font-size:15px; font-weight:400; cursor:pointer; border:none; transition:var(--tr); text-decoration:none; white-space:nowrap }
  .btn-p { background:var(--org); color:#fff; box-shadow:0 4px 20px var(--org-sh) }
  .btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(248,116,17,.55); background:#e56800 }
  .btn-o { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.65) }
  .btn-o:hover { background:rgba(255,255,255,.12); border-color:#fff }
  .btn-w { background:#25d366; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,.35) }
  .btn-w:hover { background:#1eb856; transform:translateY(-2px) }

  /* ============================================================
     NAVBAR
  ============================================================ */
  #nb { position:fixed; top:0; left:0; right:0; z-index:999; padding:18px 0; transition:all .4s ease }
  #nb.sc { background:rgba(255,255,255,.97); backdrop-filter:blur(16px); padding:12px 0; box-shadow:0 2px 20px rgba(0,0,0,.09) }
  .ni { display:flex; align-items:center; justify-content:space-between; gap:24px }
  .nl img { height:52px; width:auto; display:block; transition:var(--tr) }
  .nls { display:flex; align-items:center; gap:6px }
  .nls a { padding:8px 16px; border-radius:100px; font-size:14px; font-weight:300; color:rgba(255,255,255,.9); transition:var(--tr) }
  #nb.sc .nls a { color:var(--dg) }
  .nls a:hover,.nls a.act { background:rgba(255,255,255,.2); color:#fff }
  #nb.sc .nls a:hover,#nb.sc .nls a.act { background:var(--lg); color:var(--bk) }
  .nb-book { background:var(--org); color:#fff!important; padding:10px 22px; border-radius:100px; font-size:13.5px; font-weight:400; font-family:'Poppins',sans-serif; transition:var(--tr); box-shadow:0 3px 14px var(--org-sh); display:inline-flex; align-items:center; gap:7px }
  .nb-book:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(248,116,17,.45) }
  .ntog { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none }
  .ntog span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:var(--tr) }
  #nb.sc .ntog span { background:var(--bk) }
  .nmob { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(20px); padding:10px 24px 18px; box-shadow:0 12px 40px rgba(0,0,0,.12); border-top:1px solid var(--lg) }
  .nmob.op { display:block }
  .nmob a { display:block; padding:11px 0; font-size:14.5px; font-weight:500; color:var(--dg); border-bottom:1px solid var(--lg) }
  .nmob a:last-child { border-bottom:none }

  /* ============================================================
     HERO
  ============================================================ */
  #hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
    background-image:url('../../images/Hero-Image.webp'),url('https://cdn.ariefagency2.my.id/wp-content/uploads/2026/03/Hero-Image.webp'); background-position:center,center; background-size:cover,cover; background-repeat:no-repeat,no-repeat; background-attachment:fixed,fixed }
  .ho { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.75) 100%) }
  .hc { position:relative; z-index:2; text-align:center; color:#fff; padding:120px 24px 80px; max-width:860px; margin:0 auto }
  .hb { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:7px 18px; font-size:12.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:24px }
  .hb::before { content:''; width:8px; height:8px; border-radius:50%; background:#25d366; animation:pd 2s infinite }
  @keyframes pd { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
  .ht { font-size:clamp(2.2rem,6vw,4.2rem); font-weight:500; line-height:1.15; margin-bottom:20px; text-shadow:0 2px 20px rgba(0,0,0,.3) }
  .ht span { color:var(--org); text-shadow:none; }
  .hs { font-size:clamp(1rem,2.2vw,1.22rem); opacity:.88; margin-bottom:36px; max-width:620px; margin-left:auto; margin-right:auto; line-height:1.7 }
  .hbtns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:56px }
  .hst { display:flex; flex-wrap:wrap; justify-content:center; gap:28px 48px }
  .hst-i { text-align:center }
  .hst-n { font-family:'Poppins',sans-serif; font-size:2rem; font-weight:500; line-height:1; margin-bottom:4px }
  .hst-l { font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; opacity:.75 }
  .hscr { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; z-index:3; animation:bn 2.5s infinite }
  @keyframes bn { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

  /* ============================================================
     COPYWRITING — dark section
  ============================================================ */
  #cw { padding:100px 0; background:var(--bk); position:relative; overflow:hidden }
  #cw::before { content:''; position:absolute; inset:0; background-image:url('../../images/Hero-Image.webp'),url('https://cdn.ariefagency2.my.id/wp-content/uploads/2026/03/Hero-Image.webp'); background-position:center,center; background-size:cover,cover; background-repeat:no-repeat,no-repeat; opacity:.07; pointer-events:none }
  .cwi { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
  /* Image wrapper — needs position:relative + overflow:hidden to contain the mask */
  .cww { position:relative; border-radius:var(--rxl); height:520px; overflow:hidden }
  .cww img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--rxl) }
  .cwo { position:absolute; inset:0; background:linear-gradient(135deg,rgba(248,116,17,.15),rgba(40,92,58,.15)); pointer-events:none; z-index:2 }
  .cwf { position:absolute; top:28px; right:28px; z-index:4; background:rgba(255,255,255,.13); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); border-radius:var(--rmd); padding:14px 20px; color:#fff; text-align:center }
  .cwf .n { font-family:'Poppins',sans-serif; font-size:1.9rem; font-weight:500; line-height:1 }
  .cwf .s { font-size:11px; opacity:.75; margin-top:2px }
  .cwt { color:#fff }
  .cwe { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; opacity:.5; margin-bottom:14px }
  .cwt h2 { font-size:clamp(1.9rem,3.2vw,2.8rem); font-weight:500; line-height:1.22; margin-bottom:24px }
  .cwt h2 em { font-style:normal; color:var(--org); }
  .cwl { font-size:16px; line-height:1.8; opacity:.78; margin-bottom:32px; font-weight:300 }
  .cwpl { margin-bottom:36px; display:flex; flex-direction:column; gap:12px }
  .cwpi { display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,.06); border-radius:var(--rmd); padding:16px 18px; border:1px solid rgba(255,255,255,.08); transition:var(--tr) }
  .cwpi:hover { background:rgba(255,255,255,.1); transform:translateX(4px) }
  .cwpic { width:40px; height:40px; border-radius:var(--rsm); background:var(--grn); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; color:#fff }
  .cwpt strong { display:block; font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; margin-bottom:3px }
  .cwpt span { font-size:13px; opacity:.65; line-height:1.55 }
  .cwcr { display:flex; gap:14px; flex-wrap:wrap }

  /* ============================================================
     ABOUT — white section
  ============================================================ */
  #about { padding:100px 0; background:var(--w) }
  .abi { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
  .abt h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:500; margin-bottom:20px; color:var(--bk) }
  .abt p { color:var(--mg); font-size:15.5px; line-height:1.8; margin-bottom:20px }
  .abm { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px }
  .mc { background:var(--of); border-radius:var(--rmd); padding:20px 22px; border:1px solid var(--lg); transition:var(--tr) }
  .mc:hover { border-color:var(--org); transform:translateY(-3px); box-shadow:var(--smd) }
  .mc .n { font-family:'Poppins',sans-serif; font-size:2rem; font-weight:500; color:var(--org); line-height:1; margin-bottom:4px }
  .mc .l { font-size:12.5px; color:var(--mg); font-weight:500 }
  /* Image wrapper — mask inside */
  .abiw { position:relative; border-radius:var(--rxl); height:480px; overflow:hidden; box-shadow:var(--slg) }
  .abiw img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
  .abib { position:absolute; bottom:24px; left:24px; z-index:4; background:#fff; border-radius:var(--rmd); padding:16px 20px; box-shadow:var(--slg); display:flex; align-items:center; gap:12px; min-width:200px }
  .abib .ic { width:44px; height:44px; border-radius:50%; background:var(--grn); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:18px }
  .abib .mn { font-family:'Poppins',sans-serif; font-size:18px; font-weight:500; color:var(--bk); line-height:1 }
  .abib .sb { font-size:11px; color:var(--mg) }

  /* ============================================================
     LAYANAN — off-white section
  ============================================================ */
  #lay { padding:100px 0; background:var(--of) }
  .pg { display:flex; flex-wrap:wrap; justify-content:center; gap:28px }
  .pc { background:var(--w); border-radius:var(--rxl); overflow:hidden; box-shadow:var(--ssm); border:1px solid var(--lg); transition:var(--tr); position:relative; display:flex; flex-direction:column; flex:0 0 calc(33.33% - 20px); min-width:280px; max-width:370px }
  .pc:hover { transform:translateY(-8px); box-shadow:var(--slg); border-color:rgba(248,116,17,.2) }
  .pc.ft { border:2px solid var(--org); background:#fff }
  .pc.ft::after { content:'TERPOPULER'; position:absolute; top:18px; right:18px; background:var(--org); color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; padding:5px 12px; border-radius:100px; z-index:4 }
  /* Image wrapper — mask inside */
  .pcw { position:relative; height:240px; overflow:hidden; flex-shrink:0 }
  .pcw img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease }
  .pc:hover .pcw img { transform:scale(1.07) }
  .pcl { position:absolute; bottom:0; left:0; background:var(--grn); color:#fff; padding:10px 18px 10px 20px; border-radius:0 12px 0 0; z-index:4 }
  .pcl .t { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.85 }
  .pcl .nm { font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; line-height:1.2 }
  .pcb { padding:22px 24px; flex:1; display:flex; flex-direction:column }
  .pcd { font-size:13.5px; color:var(--mg); line-height:1.65; margin-bottom:16px; flex:1 }
  .pcm { display:flex; gap:16px; margin-bottom:18px }
  .pcmi { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dg); font-weight:500 }
  .pcmi i { color:var(--grn); font-size:15px }
  .pcdiv { border:none; border-top:1px solid var(--lg); margin:14px 0 }
  .pcft { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mg); margin-bottom:10px }
  .pcfl { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px }
  .pcfi { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--dg); background:var(--of); border-radius:100px; padding:4px 10px }
  .pcfi i { color:var(--grn); font-size:11px }
  .pcpb { background:var(--of); border-radius:var(--rmd); padding:14px 18px; margin-bottom:18px; border:1px solid var(--lg) }
  .pcpo { font-size:14px; color:var(--mg); text-decoration:line-through; margin-bottom:2px }
  .pcpn { font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:600; color:var(--org); line-height:1 }
  .pcpnt { font-size:11.5px; color:var(--mg); margin-top:3px }
  .pcbtn { display:block; width:100%; text-align:center; padding:14px; border-radius:var(--rmd); font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; background:var(--bk); color:#fff; transition:var(--tr) }
  .pc.ft .pcbtn { background:var(--org) }
  .pcbtn:hover { opacity:.85; transform:translateY(-1px) }

  /* ============================================================
     KENAPA — white section
  ============================================================ */
  #kn { padding:100px 0; background:var(--w) }
  .fg { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
  .fc { padding:32px 28px; border-radius:var(--rxl); background:var(--of); border:1px solid var(--lg); transition:var(--tr); position:relative; overflow:hidden }
  .fc::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--org); transform:scaleX(0); transition:transform .4s ease; transform-origin:left }
  .fc:hover { transform:translateY(-6px); box-shadow:var(--smd); border-color:transparent }
  .fc:hover::before { transform:scaleX(1) }
  .fi { width:56px; height:56px; background:var(--grn); border-radius:var(--rsm); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin-bottom:20px }
  .fc h3 { font-size:16.5px; font-weight:500; color:var(--bk); margin-bottom:10px }
  .fc p { font-size:13.5px; color:var(--mg); line-height:1.7 }

  /* ============================================================
     DESTINASI — off-white section
  ============================================================ */
  #dest { padding:100px 0; background:var(--of) }
  .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
  /* .dc is also image wrapper — mask inside */
  .dc { position:relative; border-radius:var(--rxl); height:360px; cursor:pointer; box-shadow:var(--smd); overflow:hidden }
  .dc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; z-index:0 }
  .dc:hover img { transform:scale(1.08) }
  .do { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 60%,transparent 100%); transition:var(--tr); z-index:1 }
  .dc:hover .do { background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.1) 100%) }
  .din { position:absolute; bottom:0; left:0; right:0; padding:28px 24px; color:#fff; z-index:2 }
  .dca { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.75; margin-bottom:6px }
  .dti { font-family:'Poppins',sans-serif; font-size:1.3rem; font-weight:500; margin-bottom:8px; line-height:1.3 }
  .dde { font-size:13px; line-height:1.65; opacity:0; max-height:0; overflow:hidden; transition:all .4s ease; color:rgba(255,255,255,.85) }
  .dc:hover .dde { opacity:1; max-height:100px }
  .dar { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--org); margin-top:12px; opacity:0; transition:all .4s ease .1s }
  .dc:hover .dar { opacity:1 }

  /* ============================================================
     TESTIMONI — white section
  ============================================================ */
  #ts { padding:100px 0; background:var(--w) }
  .tg { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
  .tc { background:var(--of); border-radius:var(--rxl); padding:30px 28px; border:1px solid var(--lg); transition:var(--tr) }
  .tc:hover { transform:translateY(-5px); box-shadow:var(--smd); border-color:var(--org) }
  .tq { font-size:48px; line-height:1; color:var(--org); margin-bottom:12px }
  .tst { display:flex; gap:3px; margin-bottom:14px }
  .tst i { color:#f5a623; font-size:14px }
  .ttx { font-size:14px; line-height:1.75; color:var(--dg); margin-bottom:22px; font-style:italic }
  .tau { display:flex; align-items:center; gap:12px }
  .tav { width:44px; height:44px; border-radius:50%; background:var(--grn); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; flex-shrink:0 }
  .tnm { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:var(--bk) }
  .tlc { font-size:12px; color:var(--mg); margin-top:1px }

  /* ============================================================
     FAQ — off-white section
  ============================================================ */
  #faq { padding:100px 0; background:var(--of) }
  .fw { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px }
  .fi2 { background:var(--w); border-radius:var(--rlg); border:1px solid var(--lg); overflow:hidden; transition:var(--tr) }
  .fi2.op { border-color:rgba(248,116,17,.35); box-shadow:var(--smd) }
  .fq { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; background:none; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-size:15px; font-weight:400; color:var(--bk); text-align:left; transition:var(--tr) }
  .fi2.op .fq { color:var(--org) }

  .fic { width:32px; height:32px; border-radius:50%; background:var(--lg); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--mg); flex-shrink:0; transition:var(--tr) }
  .fi2.op .fic { background:var(--grn); color:#fff; transform:rotate(45deg) }
  .fa2 { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1) }
  .fi2.op .fa2 { max-height:300px }
  .fai { padding:0 24px 22px; font-size:14.5px; color:var(--mg); line-height:1.75 }

  /* ============================================================
     ARTIKEL BERANDA — sengaja tanpa AOS / wipe / reveal
  ============================================================ */
  #home-artikel { padding:100px 0; background:var(--w) }
  .hag { display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
  .hac { background:var(--w); border:1px solid var(--lg); border-radius:var(--rxl); overflow:hidden; box-shadow:var(--ssm); transition:var(--tr); display:flex; flex-direction:column; min-width:0 }
  .hac:hover { transform:translateY(-5px); box-shadow:var(--smd); border-color:rgba(248,116,17,.22) }
  .hai { display:block; height:220px; overflow:hidden; background:var(--lg) }
  .hai img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease }
  .hac:hover .hai img { transform:scale(1.04) }
  .hab { padding:24px; display:flex; flex-direction:column; flex:1 }
  .had { font-size:12px; color:var(--mg); margin-bottom:9px }
  .hab h3 { font-size:18px; font-weight:500; line-height:1.4; margin-bottom:10px; color:var(--bk) }
  .hab h3 a { transition:color .2s ease }
  .hab h3 a:hover { color:var(--org) }
  .hab p { font-size:13.5px; color:var(--mg); line-height:1.72; margin-bottom:20px; flex:1 }
  .har { display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:500; color:var(--org) }
  .haa { display:flex; justify-content:center; margin-top:38px }

  /* ============================================================
     CTA BANNER
  ============================================================ */
  #cta { padding:80px 0; background:var(--bk); position:relative; overflow:hidden }
  #cta::before { content:''; position:absolute; inset:0; background-image:url('../../images/Hero-Image.webp'),url('https://cdn.ariefagency2.my.id/wp-content/uploads/2026/03/Hero-Image.webp'); background-position:center,center; background-size:cover,cover; background-repeat:no-repeat,no-repeat; opacity:.12; pointer-events:none }
  .ctac { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap }
  .ctac h2 { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:500; color:#fff; margin-bottom:10px }
  .ctac p { color:rgba(255,255,255,.7); font-size:15px; line-height:1.65; max-width:520px }
  .ctabt { display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0 }

  /* ============================================================
     FOOTER
  ============================================================ */
  #ft { background:#111; color:rgba(255,255,255,.75); padding:72px 0 0 }
  .ftg { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.07) }
  .ftb img { height:54px; width:auto; display:block; margin-bottom:18px }
  .ftb p { font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.55); margin-bottom:22px }
  .fts { display:flex; gap:10px }
  .sb2 { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:15px; transition:var(--tr) }
  .sb2:hover { background:var(--grn); border-color:transparent; color:#fff; transform:translateY(-3px) }
  .ftc h4 { font-family:'Poppins',sans-serif; font-size:14px; font-weight:500; color:#fff; margin-bottom:20px; text-transform:uppercase; letter-spacing:1px }
  .ftl li { margin-bottom:10px }
  .ftl a { font-size:13.5px; color:rgba(255,255,255,.55); transition:var(--tr); display:flex; align-items:center; gap:8px }
  .ftl a::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--org); flex-shrink:0; opacity:0; transition:var(--tr) }
  .ftl a:hover { color:#fff; padding-left:4px }
  .ftl a:hover::before { opacity:1 }
  .fci { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px }
  .fcii { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:14px; flex-shrink:0; margin-top:1px }
  .fcil { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:2px }
  .fciv { font-size:13.5px; color:rgba(255,255,255,.75) }
  .ftbot { display:flex; align-items:center; justify-content:space-between; padding:22px 0; font-size:12.5px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:10px }
  .ftbot a { color:rgba(255,255,255,.5); transition:color .2s }
  .ftbot a:hover { color:#fff }

  /* ============================================================
     FLOATING: SCROLL-TO-TOP (left) + WA (right)
  ============================================================ */
  .stt { position:fixed; bottom:28px; left:28px; z-index:998; width:46px; height:46px; border-radius:50%; background:var(--grn); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; box-shadow:0 4px 20px rgba(40,92,58,.4); opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; cursor:pointer; border:none }
  .stt.vis { opacity:1; pointer-events:auto }
  .stt:hover { transform:translateY(-3px) }
  .wag { position:fixed; bottom:28px; right:28px; z-index:998; display:flex; flex-direction:column; align-items:flex-end; gap:8px }
  .watt { background:rgba(20,20,20,.9); color:#fff; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:600; padding:6px 14px; border-radius:100px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.25); pointer-events:none; opacity:1 }
  .waf { width:58px; height:58px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; box-shadow:0 6px 28px rgba(37,211,102,.45); transition:var(--tr); animation:wap 3s ease infinite }
  .waf:hover { background:#1eb856; transform:scale(1.1) }
  @keyframes wap { 0%,100%{box-shadow:0 6px 28px rgba(37,211,102,.45)} 50%{box-shadow:0 6px 40px rgba(37,211,102,.7),0 0 0 10px rgba(37,211,102,.1)} }

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media(max-width:1024px){
    .pc{flex:0 0 calc(50% - 16px);max-width:400px} .fg{grid-template-columns:1fr 1fr}
    .dg{grid-template-columns:1fr 1fr} .tg{grid-template-columns:1fr 1fr}
    .hag{grid-template-columns:repeat(2,1fr)}
    .ftg{grid-template-columns:1fr 1fr} .abi{gap:48px} .cwi{gap:48px}
  }
  @media(max-width:768px){
    #nb{padding:10px 0} #nb.sc{padding:8px 0} .nl img{height:38px}
    .nls,.nb-book{display:none} .ntog{display:flex}
    .pg{justify-content:center} .pc{flex:0 0 100%;max-width:420px}
    .fg{grid-template-columns:1fr} .dg{grid-template-columns:1fr}
    .tg{grid-template-columns:1fr} .hag{grid-template-columns:1fr} .abi{grid-template-columns:1fr;gap:40px}
    .abm{grid-template-columns:1fr 1fr} .cwi{grid-template-columns:1fr;gap:40px}
    .cww{height:260px} .hai{height:230px} .ftg{grid-template-columns:1fr;gap:32px}
    .ctac{flex-direction:column;text-align:center;align-items:center}
    .ctac p{max-width:100%} .ctabt{justify-content:center;width:100%}
    #hero{background-attachment:scroll} .hst{gap:20px 32px}
  }
  @media(max-width:480px){
    .btn{padding:12px 22px;font-size:13.5px} .abm{grid-template-columns:1fr}
    .dc{height:280px} .cww{height:200px} .hai{height:210px}
    .stt,.wag{bottom:20px} .stt{left:20px} .wag{right:20px}
  }