/* ==========================================================================
   g7forsale.com.my — Deep Navy · White · Champagne Gold
   ========================================================================== */

:root{
  /* Navy */
  --navy-950:#050C17;
  --navy-900:#0A1729;
  --navy-850:#0D1E34;
  --navy-800:#12263F;
  --navy-700:#1A3454;
  --navy-600:#24456B;
  --navy-line:rgba(214,183,127,.18);

  /* Champagne gold */
  --gold-700:#8C6A31;
  --gold-600:#A67C3D;
  --gold-500:#C0994F;
  --gold-400:#D6B77F;
  --gold-300:#E8D3A9;
  --gold-200:#F3E6CC;
  --gold-grad:linear-gradient(120deg,#A67C3D 0%,#E8D3A9 42%,#C9A45E 72%,#F1E2C2 100%);
  --gold-grad-soft:linear-gradient(120deg,#D6B77F,#F3E6CC 55%,#D6B77F);

  /* Neutrals */
  --white:#FFFFFF;
  --paper:#F7F8FB;
  --paper-2:#EFF2F7;
  --ink:#0B1523;
  --ink-2:#33445C;
  --ink-3:#63758E;
  --hair:#DFE5EE;

  --ok:#2E9E6B;
  --warn:#C2861B;
  --stop:#C0453C;

  --wrap:1180px;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px;
  --sh-1:0 2px 8px rgba(10,23,41,.06);
  --sh-2:0 12px 34px rgba(10,23,41,.10);
  --sh-3:0 28px 70px rgba(5,12,23,.32);
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.72;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:-.028em;font-weight:800}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{width:min(var(--wrap),calc(100vw - 44px));margin-inline:auto}
.wrap-narrow{width:min(880px,calc(100vw - 44px));margin-inline:auto}

/* Inversion: bekas lebar, lajur teks sempit, kad boleh kembang penuh bekas */
.inv-wrap{width:min(1240px,calc(100vw - 44px));margin-inline:auto}
.inv-text{max-width:720px;margin-inline:auto}

/* ---------- Section shells ---------- */
.sec{--sec-py:100px;--sec-lap:0px;padding:var(--sec-py) 0;position:relative}
.sec-bg{display:none}
.sec-dark{background:var(--navy-900);color:#E9EFF7}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-deep{background:var(--navy-950);color:#E9EFF7}
.sec-light{background:var(--white)}
.sec-paper{background:var(--paper)}

.sec-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 340px at 88% -8%,rgba(214,183,127,.14),transparent 62%),
    radial-gradient(520px 300px at 4% 104%,rgba(214,183,127,.08),transparent 60%);
}
.sec-dark>*{position:relative;z-index:1}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:20px;
}
.sec-dark .eyebrow,.sec-deep .eyebrow{color:var(--gold-300)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}

.h-xl{font-size:clamp(2.1rem,5.4vw,3.5rem)}
.h-lg{font-size:clamp(1.85rem,4vw,2.7rem)}
.h-md{font-size:clamp(1.35rem,2.5vw,1.75rem)}

.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-2);line-height:1.78}
h2 + .lede,.h-lg + .lede{margin-top:20px}
.sec-dark .lede,.sec-deep .lede{color:#B9C7DA}
.muted{color:var(--ink-3);font-size:.92rem}
.sec-dark .muted{color:#8497AF}
.center{text-align:center}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head--wide{max-width:1040px;margin-bottom:44px}
.sec-head--wide .lede{max-width:760px}
.doc-verify{margin-top:46px;max-width:72ch}
.doc-hint{
  display:inline-flex;align-items:center;gap:10px;margin:30px 0 0;
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  padding:9px 17px;border-radius:100px;
  background:rgba(11,21,35,.04);border:1px solid var(--hair);
}
.doc-hint svg{width:15px;height:15px;flex:none;opacity:.6}
.sec-head.center{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 30px;border-radius:100px;font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none}
.btn-gold{
  background:var(--gold-grad);color:#2A1D06;
  box-shadow:0 10px 26px rgba(166,124,61,.34),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(166,124,61,.44),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{border-color:rgba(214,183,127,.4);color:var(--gold-300);background:rgba(214,183,127,.05)}
.btn-ghost:hover{background:rgba(214,183,127,.13);transform:translateY(-2px)}
.btn-navy{background:var(--navy-900);color:#fff}
.btn-navy:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-lg{padding:19px 38px;font-size:1.04rem}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:90;
  background:rgba(5,12,23,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(214,183,127,.14);
  transition:background .35s var(--ease),padding .35s var(--ease);
}
.nav-in{display:flex;align-items:center;gap:26px;padding:13px 0}
.nav.scrolled{background:rgba(5,12,23,.94)}
.nav.scrolled .nav-in{padding:11px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.16rem;color:#fff;letter-spacing:-.032em;line-height:1}
.logo-mark{
  width:52px;height:52px;flex:none;display:block;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(166,124,61,.20));
  transition:width .35s var(--ease),height .35s var(--ease);
}
.nav.scrolled .logo-mark{width:43px;height:43px}
.logo-mark-full{width:64px;height:64px}
.logo em{font-style:normal;color:var(--gold-300)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:.9rem;font-weight:600;color:#AFC0D6}
.nav-links a{position:relative;transition:color .25s var(--ease);padding:4px 0}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--gold-200)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (hover:none){
  .nav-links a:hover{color:#AFC0D6}
  .nav-links a:hover::after{transform:scaleX(0)}
}
.nav-price{
  display:flex;flex-direction:column;line-height:1.15;
  margin-left:12px;padding-right:22px;
  border-right:1px solid rgba(214,183,127,.22);
}
.nav-price b{font-size:1.04rem;color:var(--gold-300);letter-spacing:-.025em;font-weight:800}
.nav-price span{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:#8195AE;font-weight:700;margin-top:2px}
.nav-cta{padding:11px 22px;font-size:.88rem}
.nav-burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:var(--gold-300);border-radius:2px;margin:4px 0;transition:.3s var(--ease)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--navy-950);color:#fff;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;padding:118px 0 92px;
}
.hero-bg{position:absolute;inset:0;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:56% center}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(4,10,20,.92) 0%,rgba(4,10,20,.84) 22%,rgba(4,10,20,.60) 42%,
                    rgba(4,10,20,.22) 66%,rgba(4,10,20,.10) 100%),
    linear-gradient(to top,rgba(4,10,20,.94) 0%,rgba(4,10,20,.32) 22%,transparent 48%),
    radial-gradient(760px 420px at 84% 10%,rgba(214,183,127,.15),transparent 62%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(214,183,127,.5),transparent);
}
.hero-in{position:relative;z-index:2}
.hero-copy{max-width:730px}

.status-pill{
  display:inline-flex;align-items:center;gap:10px;padding:8px 17px;border-radius:100px;
  background:rgba(46,158,107,.16);border:1px solid rgba(46,158,107,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#8FE7C0;margin-bottom:26px;
}
.dot{width:8px;height:8px;border-radius:50%;background:#3FCF8E;box-shadow:0 0 0 0 rgba(63,207,142,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(63,207,142,0)}100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}}

.hero h1{
  font-size:clamp(2.25rem,4.9vw,3.75rem);line-height:1.1;margin-bottom:24px;
  text-shadow:0 2px 26px rgba(4,10,20,.5);
}
.hero h1 em{
  display:block;font-style:normal;font-weight:600;margin-top:16px;
  font-size:clamp(1.12rem,2.05vw,1.5rem);line-height:1.42;letter-spacing:-.02em;color:var(--gold-300);
}
.hero-lede{
  font-size:clamp(1rem,1.4vw,1.13rem);color:#C2D2E4;line-height:1.78;max-width:56ch;margin-bottom:22px;
  text-shadow:0 1px 16px rgba(4,10,20,.55);
}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px;padding:0}
.hero-chips li{
  font-size:.79rem;font-weight:700;letter-spacing:.015em;padding:7px 15px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(214,183,127,.3);color:var(--gold-200);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);white-space:nowrap;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{margin-top:20px;font-size:.85rem;color:#93A7C0;display:flex;flex-wrap:wrap;gap:8px 20px}
.hero-note b{color:var(--gold-300);font-weight:700}

.hero-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:2px solid rgba(214,183,127,.45);border-radius:14px;
  display:grid;justify-items:center;padding-top:7px;transition:border-color .3s var(--ease);
}
.hero-cue:hover{border-color:rgba(214,183,127,.85)}
.hero-cue span{width:3px;height:8px;border-radius:2px;background:var(--gold-300);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- Inversion / statement block ---------- */
.statement{
  border-left:3px solid transparent;border-image:var(--gold-grad) 1;
  padding:6px 0 6px 30px;margin:0 0 34px;
  font-size:clamp(1.28rem,2.5vw,1.75rem);font-weight:700;line-height:1.42;letter-spacing:-.025em;
}
.statement small{display:block;font-size:.55em;font-weight:600;color:var(--ink-3);margin-top:12px;letter-spacing:-.01em}
.sec-dark .statement small{color:#8497AF}

.tag{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.tag-them{background:#F1DCDA;color:#8E332C}
.tag-us{background:rgba(166,124,61,.13);color:var(--gold-700)}

/* ---------- Ghost background section ---------- */
.sec-ghost{
  --ghost-base:255,255,255;                                    /* asas scrim ikut latar seksyen */
  --ghost-op:.42;                                              /* kepekatan tanda air */
  --ghost-img:url("/assets/images/section-desk-bg-white.webp");
  overflow:hidden;
}
.sec-paper.sec-ghost{--ghost-base:247,248,251;--ghost-op:.24}
.sec-dark.sec-ghost{
  --ghost-base:10,23,41;--ghost-op:.34;
  --ghost-img:url("/assets/images/section-desk-bg-dark.webp");
}
.sec-deep.sec-ghost{
  --ghost-base:5,12,23;--ghost-op:.30;
  --ghost-img:url("/assets/images/section-desk-bg-dark.webp");
}
.sec-ghost::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--ghost-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:var(--ghost-op);
}
.sec-ghost::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(92deg,rgba(var(--ghost-base),.96) 0%,rgba(var(--ghost-base),.92) 34%,
                    rgba(var(--ghost-base),.62) 62%,rgba(var(--ghost-base),.74) 100%),
    linear-gradient(to bottom,rgba(var(--ghost-base),.9) 0%,rgba(var(--ghost-base),.34) 22%,
                    rgba(var(--ghost-base),.36) 74%,rgba(var(--ghost-base),.94) 100%);
}
/* kandungan penuh selebar skrin: scrim rata menegak */
.sec-paper.sec-ghost::after,
.sec-dark.sec-ghost::after,
.sec-deep.sec-ghost::after{
  background:linear-gradient(to bottom,rgba(var(--ghost-base),.96) 0%,rgba(var(--ghost-base),.76) 16%,
                             rgba(var(--ghost-base),.84) 46%,rgba(var(--ghost-base),.88) 78%,
                             rgba(var(--ghost-base),.98) 100%);
}
.sec-ghost>*{position:relative;z-index:1}

/* CTA akhir: scrim tutup penuh sebelum hujung seksyen supaya wordmark tanda air
   tidak terbaca separuh dalam jalur sempit di bawah kad, dan sambungan ke footer rata */
.sec-ghost.sec-deep.sec-cta::after{
  background:linear-gradient(to bottom,rgba(var(--ghost-base),.96) 0%,rgba(var(--ghost-base),.82) 18%,
                             rgba(var(--ghost-base),.9) 54%,rgba(var(--ghost-base),1) 84%);
}


@media (max-width:820px){
  .sec-ghost{--ghost-op:.24;--ghost-img:url("/assets/images/section-resp-bg-white.webp")}
  .sec-paper.sec-ghost{--ghost-op:.15}
  .sec-dark.sec-ghost,.sec-deep.sec-ghost{
    --ghost-op:.26;--ghost-img:url("/assets/images/section-resp-bg-dark.webp");
  }
  .sec-ghost::before{
    background-position:center top;opacity:var(--ghost-op);
  }
  .sec-ghost::after{
    background:
      linear-gradient(to bottom,rgba(var(--ghost-base),.90) 0%,rgba(var(--ghost-base),.64) 18%,
                      rgba(var(--ghost-base),.68) 46%,rgba(var(--ghost-base),.74) 74%,rgba(var(--ghost-base),.96) 100%);
  }
}

/* ---------- Registration grid ---------- */
.reg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.reg{
  display:flex;gap:18px;align-items:flex-start;padding:24px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.035);border:1px solid rgba(214,183,127,.16);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.reg:hover{border-color:rgba(214,183,127,.42);transform:translateY(-3px);background:rgba(255,255,255,.06)}
.reg-n{
  font-family:'Playfair Display',serif;font-size:1.5rem;line-height:1;font-weight:700;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;flex:none;width:34px;padding-top:2px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.reg b{display:block;font-size:1rem;color:#fff;margin-bottom:5px;letter-spacing:-.015em}
.reg span{font-size:.88rem;color:#9FB2C9;line-height:1.55;display:block}
.reg .valid{
  display:inline-block;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:3px 10px;border-radius:100px;background:rgba(214,183,127,.12);color:var(--gold-300);
}

/* ---------- Highlight trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.trio-card{
  padding:32px 28px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(214,183,127,.11),rgba(214,183,127,.03));
  border:1px solid rgba(214,183,127,.26);
}
.trio-card h3{font-size:1.08rem;color:#fff;margin-bottom:11px}
.trio-card p{font-size:.92rem;color:#A9BBD1;margin:0}
.trio-ico{font-size:1.5rem;margin-bottom:16px;display:block}

/* ---------- Document gallery ---------- */
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.doc{
  margin:0;                       /* figure ada margin lalai 40px sisi */
  cursor:zoom-in;border-radius:var(--r);overflow:hidden;background:var(--white);
  border:1px solid var(--hair);box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.doc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--gold-400)}
.doc-thumb{position:relative;height:220px;overflow:hidden;background:var(--paper-2)}
.doc-thumb img{width:100%;height:auto;transition:transform .5s var(--ease)}
.doc:hover .doc-thumb img{transform:scale(1.035)}
.doc-thumb::after{
  content:"";position:absolute;inset:auto 0 0 0;height:70px;
  background:linear-gradient(transparent,rgba(255,255,255,.96));
}
.doc-cap{padding:15px 17px 17px}
.doc-cap b{display:block;font-size:.92rem;letter-spacing:-.015em;margin-bottom:3px}
.doc-cap span{font-size:.78rem;color:var(--ink-3)}
.doc-badge{
  position:absolute;top:11px;right:11px;z-index:2;font-size:10px;font-weight:800;
  letter-spacing:.08em;padding:5px 10px;border-radius:100px;
  background:rgba(11,21,35,.86);color:var(--gold-300);backdrop-filter:blur(6px);
}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(4,10,19,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;place-items:center;padding:34px 20px;
}
.lb.open{display:grid}
.lb img{max-width:min(880px,92vw);max-height:88vh;width:auto;border-radius:8px;box-shadow:var(--sh-3)}
.lb-bar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;
  padding:20px 26px;color:#D9E4F1;font-size:.9rem;font-weight:600;
}
.lb-x{margin-left:auto;background:rgba(255,255,255,.09);border:0;color:#fff;width:38px;height:38px;border-radius:50%;font-size:19px;cursor:pointer;transition:background .25s}
.lb-x:hover{background:rgba(255,255,255,.2)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.09);border:0;color:#fff;font-size:20px;cursor:pointer;transition:background .25s;
}
.lb-nav:hover{background:rgba(214,183,127,.3)}
.lb-prev{left:20px} .lb-next{right:20px}

/* ---------- Cost table ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid rgba(214,183,127,.2);background:rgba(255,255,255,.03)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.tbl th,.tbl td{padding:16px 22px;text-align:left;border-bottom:1px solid rgba(214,183,127,.12)}
.tbl th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);font-weight:800}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .row-total td{
  background:rgba(214,183,127,.1);font-weight:800;color:#fff;font-size:1.02rem;
  border-top:1px solid rgba(214,183,127,.35);
}
.tbl .row-head td{font-weight:700;color:#fff;font-size:1.05rem;background:rgba(255,255,255,.03)}
.tbl td{color:#B9C7DA}

/* light table variant */
.tbl-light{background:var(--white);border-color:var(--hair)}
.tbl-light .tbl th{color:var(--gold-700);border-color:var(--hair)}
.tbl-light .tbl td{color:var(--ink-2);border-color:var(--hair)}
.tbl-light .tbl .col-us{background:rgba(166,124,61,.06);color:var(--ink);font-weight:600}
.tbl-light .tbl th.col-us{background:rgba(166,124,61,.12)}

/* ---------- Disclosure list ---------- */
.disc{display:grid;gap:14px;counter-reset:d}
.disc li{
  list-style:none;counter-increment:d;position:relative;
  padding:22px 26px 22px 68px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--hair);box-shadow:var(--sh-1);
}
.disc li::before{
  content:counter(d);position:absolute;left:24px;top:22px;
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--gold-grad);color:#2A1D06;font-size:.8rem;font-weight:800;
}
.disc b{display:block;margin-bottom:5px;font-size:1rem;letter-spacing:-.015em}
.disc p{font-size:.93rem;color:var(--ink-2);margin:0}

/* ---------- Buyer profiles ---------- */
.buyers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.buyer{
  padding:34px 30px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid rgba(214,183,127,.18);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.buyer:hover{transform:translateY(-4px);border-color:rgba(214,183,127,.45)}
.buyer .k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);display:block;margin-bottom:13px}
.buyer h3{font-size:1.18rem;margin-bottom:12px;color:#fff}
.buyer p{font-size:.94rem;color:#A6B9CF;margin:0}
.buyer.is-star{background:linear-gradient(160deg,rgba(214,183,127,.13),rgba(214,183,127,.03));border-color:rgba(214,183,127,.4)}

/* ---------- Steps ---------- */
.steps{display:grid;gap:0;position:relative;margin-top:8px}
.step{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:0 0 40px;position:relative}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:27px;top:56px;bottom:-6px;width:2px;
  background:linear-gradient(rgba(166,124,61,.5),rgba(166,124,61,.06));
}
.step:last-child::before{display:none}
.step-n{
  width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  background:var(--gold-grad);color:#2A1D06;font-weight:800;font-size:1.1rem;
  box-shadow:0 8px 22px rgba(166,124,61,.3);position:relative;z-index:1;
}
.step h3{font-size:1.12rem;margin-bottom:9px;padding-top:12px}
.step p{font-size:.95rem;color:var(--ink-2);margin:0}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq-i{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.faq-i.open{border-color:var(--gold-400);box-shadow:var(--sh-1)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:22px 26px;font-size:1rem;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:18px;font-family:inherit;letter-spacing:-.015em;
}
.faq-q i{
  margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(166,124,61,.12);color:var(--gold-700);font-style:normal;font-size:15px;font-weight:800;
  transition:transform .35s var(--ease),background .3s;
}
.faq-i.open .faq-q i{transform:rotate(45deg);background:var(--gold-grad);color:#2A1D06}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a div{padding:0 26px 24px;font-size:.95rem;color:var(--ink-2);line-height:1.75}

/* ---------- Final CTA ---------- */
.cta-box{
  border-radius:var(--r-xl);padding:66px 52px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-950));
  border:1px solid rgba(214,183,127,.3);
}
.cta-box::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% -10%,rgba(214,183,127,.22),transparent 65%);
}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{margin-bottom:18px}
.cta-box .lede{max-width:60ch;margin:0 auto 32px}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:28px;font-size:.86rem;color:#9FB2C9}
.trust i{font-style:normal;color:var(--gold-300);margin-right:7px;font-weight:800}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:2;background:var(--navy-950);color:#8497AF;padding:74px 0 0;border-top:1px solid rgba(214,183,127,.14)}

.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1.05fr;gap:44px}
.foot-brand .logo{margin-bottom:18px}
.foot-brand p{margin:0;max-width:36ch;font-size:.88rem;line-height:1.75;color:#7A8CA5}

.foot-col h3{
  margin:0 0 16px;color:#fff;font-size:.74rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;
}
.foot-col a{display:block;padding:6px 0;font-size:.88rem;line-height:1.5;color:#7A8CA5;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--gold-300)}
.foot-col .foot-more{margin-top:4px;color:var(--gold-400);font-weight:700}
.foot-col .foot-more:hover{color:var(--gold-200)}

/* penafian: label + senarai dua lajur supaya ia tidak jadi dinding teks
   yang berhenti di tengah-tengah wrap dengan lubang kosong di kanan */
.foot-note{margin-top:48px}
.foot-note h3{
  margin:0 0 18px;color:#8497AF;font-size:.7rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}
/* guna trek yang SAMA dengan .foot-grid dan span 2 setiap item, supaya tepi
   lajur kanan penafian sejajar dengan tajuk lajur ketiga di atasnya */
.foot-note-list{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1.05fr;gap:16px 44px;
}
.foot-note-list li{grid-column:span 2}
.foot-note-list li{
  position:relative;padding-left:16px;
  font-size:.75rem;line-height:1.7;color:#4F607A;
}
.foot-note-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:rgba(214,183,127,.42);
}

/* jalur penuh lebar: garis pemisah bleed ke tepi skrin tanpa guna 100vw,
   jadi bar skrol tidak mencetuskan limpahan mendatar */
.foot-band{margin-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 28px;padding:22px 0 34px;font-size:.8rem;color:#4F607A;
}
.fb-copy{margin:0}
.fb-copy a{
  color:#8497AF;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.22);
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease);
}
.fb-copy a:hover{color:var(--gold-300);text-decoration-color:var(--gold-500)}

.fb-follow{display:flex;align-items:center;gap:12px}
.fb-follow>span{color:#8497AF;font-weight:600}
.fb-icons{display:flex;gap:10px}
.fb-icons a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(214,183,127,.3);color:var(--gold-300);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.fb-icons a svg{width:16px;height:16px;fill:currentColor;display:block}
.fb-icons a:hover{background:var(--gold-grad);border-color:transparent;color:#2A1D06;transform:translateY(-2px)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}.rv-3{transition-delay:.24s}.rv-4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .dot{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:46px}
  .docs{grid-template-columns:repeat(3,1fr)}
  .trio{grid-template-columns:1fr;gap:16px}
}
/* julat tablet: mampatkan nav supaya pautan kekal tapi muat */
@media (min-width:861px) and (max-width:1060px){
  .nav-in{gap:14px}
  .logo{font-size:1.02rem;gap:10px}
  .logo-mark{width:44px;height:44px}
  .nav.scrolled .logo-mark{width:38px;height:38px}
  .nav-links{gap:17px;font-size:.83rem}
  .nav-price{margin-left:4px;padding-right:14px}
  .nav-price b{font-size:.94rem}
  .nav-price span{font-size:8.5px;letter-spacing:.12em}
  .nav-cta{padding:10px 16px;font-size:.82rem}
}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-price{margin-left:auto;border-right:0;padding-right:0}
  .reg-grid,.buyers{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(2,1fr)}
  .sec{--sec-py:76px}
  .cta-box{padding:48px 26px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap,.wrap-narrow,.inv-wrap{width:calc(100vw - 34px)}
  .hero{padding:140px 0 72px}
  .hero h1{font-size:clamp(1.95rem,7.6vw,2.5rem)}
  .nav-price b{font-size:.94rem}
  .nav-cta{padding:10px 16px;font-size:.82rem}
  .logo span.logo-t{display:none}
  .nav .logo-mark{width:46px;height:46px}
  .logo-mark-full{width:54px;height:54px}
  .docs{grid-template-columns:1fr 1fr;gap:13px}
  .doc-thumb{height:158px}
  .step{grid-template-columns:48px 1fr;gap:18px}
  .step-n{width:44px;height:44px;font-size:.95rem;border-radius:14px}
  .step::before{left:21px;top:46px}
  .step h3{padding-top:7px}
  .disc li{padding:20px 20px 20px 60px}
  .disc li::before{left:18px}
  .statement{padding-left:20px}
  .tbl th,.tbl td{padding:13px 15px}
  .hero-cta .btn{width:100%}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (max-width:365px){
  .hero{padding:130px 0 76px}
  .hero h1{font-size:1.72rem;margin-bottom:18px}
  .hero h1 em{margin-top:10px;font-size:1rem}
  .hero-lede{font-size:.94rem;line-height:1.68;margin-bottom:16px}
  .hero-chips{gap:7px;margin-bottom:20px}
  .hero-chips li{font-size:.72rem;padding:6px 12px}
  .status-pill{margin-bottom:18px;font-size:.72rem;padding:7px 14px}
  .hero-note{margin-top:16px;gap:6px 14px;font-size:.8rem}
  .btn{padding:15px 20px;font-size:.92rem}
  .btn-lg{padding:17px 22px;font-size:.96rem}
  .nav-cta{padding:10px 14px;font-size:.8rem}
  .nav-in{gap:12px}
  .docs{grid-template-columns:1fr}
  .doc-thumb{height:200px}
}

/* ---------- Hero: potret / mobile ---------- */
@media (max-width:820px){
  .hero{align-items:flex-end;padding:96px 0 66px}
  .hero-lede{display:none}
  .status-pill{margin-bottom:16px}
  .hero h1{font-size:clamp(1.9rem,6.3vw,2.5rem);margin-bottom:16px}
  .hero h1 em{margin-top:10px;font-size:clamp(1rem,3.5vw,1.2rem);line-height:1.36;color:#C6D5E7;font-weight:500}
  .hero-lede{font-size:.99rem;line-height:1.66;margin-bottom:18px}
  .hero-chips{gap:8px;margin-bottom:22px}
  .hero-chips li{font-size:.74rem;padding:6px 12px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn-ghost{
    background:none;border:0;padding:8px 0;color:var(--gold-300);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  }
  .hero-note{display:flex;margin-top:16px;font-size:.75rem;gap:6px 14px;color:#93A7C0}
  .hero-bg img{object-position:center 26%}
  .hero-scrim{
    background:
      linear-gradient(to top,rgba(4,10,20,.96) 0%,rgba(4,10,20,.90) 26%,rgba(4,10,20,.56) 46%,
                      rgba(4,10,20,.12) 70%,rgba(4,10,20,.32) 100%),
      radial-gradient(560px 320px at 76% 12%,rgba(214,183,127,.16),transparent 62%);
  }
  .hero-copy{max-width:none}
  .hero-cue{display:grid;bottom:14px;width:23px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .hero-cue span{animation:none}
}

/* ---------- Hero: skrin desktop pendek ---------- */
@media (min-width:821px) and (max-height:900px){
  .hero{padding:100px 0 74px}
  .hero h1{font-size:clamp(1.95rem,3.5vw,2.85rem);margin-bottom:18px}
  .hero h1 em{margin-top:12px;font-size:clamp(1.02rem,1.7vw,1.24rem)}
  .hero-lede{margin-bottom:18px;font-size:1rem;line-height:1.7}
  .hero-chips{margin-bottom:22px}
  .hero-cta .btn-lg{padding:16px 30px}
  .hero-note{margin-top:16px}
  .status-pill{margin-bottom:20px}
}

/* ---------- Sticky hero + kesan bertindih ---------- */
.sec-overlap{
  position:relative;z-index:2;
  border-radius:40px 40px 0 0;
  box-shadow:0 -22px 60px rgba(4,10,20,.34),0 -1px 0 rgba(255,255,255,.5) inset;
}
.sec-overlap::before,.sec-overlap::after{border-radius:inherit}

/* SEMUA saiz skrin: kandungan hero MENATAL, hanya latar yang kekal statik.
   Kandungan guna svh (tinggi ketika bar alamat kelihatan) supaya tidak terpotong.
   Lapisan latar guna lvh (tinggi ketika bar alamat menyorok) supaya tiada jurang
   di bawah bila bar itu hilang semasa skrol. */
.hero{position:relative;height:auto;min-height:100svh;z-index:0}
.hero-bg,.hero-scrim{position:fixed;top:0;left:0;width:100%;height:100lvh}

@media (prefers-reduced-motion:reduce){
  .hero{position:relative;height:auto;min-height:100svh}
  .hero-bg,.hero-scrim{position:absolute;width:auto;height:auto;inset:0}
  .sec-ghost::before{background-attachment:scroll}
  .sec-overlap{border-radius:0;box-shadow:none}
}

/* ---------- Acquisition comparison (seksyen inversion) ---------- */
.acq{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px;align-items:stretch}
.acq-card{
  border-radius:var(--r-lg);padding:34px 32px 36px;
  border:1px solid var(--hair);background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.acq-card.is-us{
  border-color:rgba(166,124,61,.45);
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(250,244,233,.9));
  box-shadow:0 20px 48px rgba(166,124,61,.16);
}

.acq-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:26px}
.acq-num{
  font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;line-height:1;font-weight:700;
  font-variant-numeric:lining-nums;color:var(--ink-3);flex:none;padding-top:2px;
}
.acq-card.is-us .acq-num{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.acq-kicker{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.acq-card.is-us .acq-kicker{color:var(--gold-600)}
.acq-head h3{font-size:1.22rem;letter-spacing:-.025em}
.acq-card.is-us .acq-head h3{color:var(--gold-700)}

.acq-row{padding:22px 0 0;margin-top:20px;border-top:1px solid var(--hair)}
.acq-key{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:11px;
}
.acq-val{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;line-height:1.45}
.acq-val--sm{font-size:.98rem;font-weight:600;color:var(--ink-2);line-height:1.6}
.acq-bar{display:block;height:28px;width:min(74%,230px);border-radius:6px;background:var(--ink)}
.acq-note{display:block;margin-top:11px;font-size:.9rem;color:var(--ink-3)}
.acq-price{
  display:block;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  font-size:clamp(1.85rem,2.9vw,2.4rem);line-height:1;letter-spacing:-.03em;
}

.acq-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.acq-steps li{
  font-size:.82rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  background:rgba(166,124,61,.1);border:1px solid rgba(166,124,61,.24);
  padding:6px 13px;border-radius:100px;white-space:nowrap;
}
.acq-steps li:not(:last-child)::after{
  content:"\2192";display:inline-block;margin:0 -6px 0 10px;
  color:var(--gold-600);font-weight:800;
}

.acq-close{margin-top:44px}
.acq-quote{
  font-size:clamp(1.15rem,1.9vw,1.42rem);font-weight:700;line-height:1.5;letter-spacing:-.025em;
  color:var(--ink);padding-left:24px;border-left:3px solid transparent;border-image:var(--gold-grad) 1;
  margin-bottom:20px;
}
.acq-sub{font-size:.95rem;line-height:1.78;color:var(--ink-2);padding-left:24px}

@media (max-width:820px){
  .inv-text h2 br{display:none}
  .acq{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .acq-card{padding:28px 24px 30px}
  .acq-bar{width:min(86%,220px)}
  .acq-close{margin-top:30px}
  .acq-quote,.acq-sub{padding-left:18px}
}

/* ---------- Footer: susunan responsif ---------- */
/* dua lajur: jenama TIDAK merentang penuh, kalau tidak lajur keempat tersorang
   pada baris ketiga dengan separuh kanan kosong */
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px 32px}
  .foot-note-list{grid-template-columns:1fr 1fr;gap:14px 32px}
  .foot-note-list li{grid-column:auto}
}
@media (max-width:820px){
  .foot{padding:56px 0 0}
  .foot-note{margin-top:38px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-note-list{grid-template-columns:1fr;gap:12px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:30px}
}

/* hover tidak boleh melekat pada peranti sentuh selepas jari tersentuh semasa skrol */
@media (hover:none){
  .foot-col a:hover{color:#7A8CA5}
  .foot-col .foot-more:hover{color:var(--gold-400)}
  .fb-copy a:hover{color:#8497AF;text-decoration-color:rgba(255,255,255,.22)}
  .fb-icons a:hover{background:none;border-color:rgba(214,183,127,.3);color:var(--gold-300);transform:none}
}

/* ==========================================================================
 Bertindih > latar melekat > kandungan menatal > bertindih  (SEMUA saiz skrin)
 Setiap seksyen memaku latarnya sendiri sementara kandungan menatal di atasnya,
 kemudian seksyen berikutnya menyeluk naik menutupinya.
 ========================================================================== */
/* overflow:clip, BUKAN hidden. overflow:hidden mencipta bekas skrol, dan
   position:sticky di dalam bekas skrol yang tidak menatal tidak akan melekat. */
.sec-ghost{overflow:clip}

/* susunan cat mesti ikut urutan DOM supaya seksyen kemudian menutup yang awal.
   .sec-overlap ada z-index:2 yang akan menariknya ke atas SEMUA seksyen selepasnya. */
.sec,.sec-overlap{z-index:auto}

/* seksyen menyeluk naik atas seksyen sebelumnya, padding atas dinaikkan
   supaya kedudukan kandungan tidak berubah */
.sec{
  --sec-lap:44px;
  margin-top:calc(-1 * var(--sec-lap));
  padding-top:calc(var(--sec-py) + var(--sec-lap));
  border-radius:40px 40px 0 0;
  box-shadow:0 -24px 60px rgba(4,10,20,.34),0 -1px 0 rgba(214,183,127,.22) inset;
}

/* lapisan latar lama (pseudo) diganti dengan .sec-bg yang boleh melekat */
/* seksyen PERTAMA tidak menyeluk naik. Hero mesti penuh satu skrin dan
   petunjuk skrol di bawahnya tidak boleh tertutup sebelum pengguna skrol. */
.hero + .sec{margin-top:0;padding-top:var(--sec-py)}

.sec-ghost::before,.sec-ghost::after{display:none}
.sec-ghost > .sec-bg{
  display:block;position:sticky;top:0;z-index:0;pointer-events:none;
  height:100lvh;
  margin-top:calc(-1 * (var(--sec-py) + var(--sec-lap)));
  margin-bottom:calc(var(--sec-py) + var(--sec-lap) - 100lvh);
}
.sec-bg::before,.sec-bg::after{content:"";position:absolute;inset:0}
/* --ghost-op desktop (.42 cerah) ditala untuk latar yang diregang ke seluruh
   tinggi seksyen. Dalam mod melekat imej dimuatkan ke 100lvh sahaja, jadi logo
   jauh lebih besar dan tajam. Darab turun supaya kekuatannya sama seperti dulu. */
.sec-bg::before{
  background-image:var(--ghost-img);
  background-size:cover;background-position:center top;
  opacity:calc(var(--ghost-op) * .58);
}
/* scrim lebih pekat berbanding versi bukan melekat. Sebabnya latar kini
   dimuatkan ke 100lvh, bukan ke seluruh tinggi seksyen, jadi logo tanda air
   jadi jauh lebih besar dan sentiasa berada dalam zon bacaan. */
.sec-bg::after{
  background:linear-gradient(to bottom,rgba(var(--ghost-base),.95) 0%,rgba(var(--ghost-base),.85) 24%,
                             rgba(var(--ghost-base),.87) 56%,rgba(var(--ghost-base),.91) 84%,
                             rgba(var(--ghost-base),.98) 100%);
}
.sec-dark .sec-bg::after,.sec-deep .sec-bg::after{
  background:linear-gradient(to bottom,rgba(var(--ghost-base),.92) 0%,rgba(var(--ghost-base),.74) 22%,
                             rgba(var(--ghost-base),.78) 54%,rgba(var(--ghost-base),.85) 82%,
                             rgba(var(--ghost-base),.97) 100%);
}
/* CTA akhir: kekalkan pembetulan terdahulu, scrim tutup penuh sebelum hujung
   supaya wordmark "FOR SALE" tidak terbaca separuh pada sambungan ke footer */
.sec-cta .sec-bg::after{
  background:linear-gradient(to bottom,rgba(var(--ghost-base),.92) 0%,rgba(var(--ghost-base),.74) 24%,
                             rgba(var(--ghost-base),.84) 58%,rgba(var(--ghost-base),1) 88%);
}

/* ---------- Penalaan mudah alih: seluk lebih kecil, bucu lebih kecil,
     scrim lebih nipis kerana --ghost-op mudah alih memang lebih rendah ---------- */
@media (max-width:820px){
  /* nilai mudah alih memang sudah rendah (.24 / .15 / .26), guna terus */
  .sec-bg::before{opacity:var(--ghost-op)}
  .sec{
    --sec-lap:34px;
    border-radius:30px 30px 0 0;
    box-shadow:0 -18px 44px rgba(4,10,20,.36),0 -1px 0 rgba(214,183,127,.22) inset;
  }
  .sec-bg::after{
    background:linear-gradient(to bottom,rgba(var(--ghost-base),.94) 0%,rgba(var(--ghost-base),.80) 24%,
                               rgba(var(--ghost-base),.82) 56%,rgba(var(--ghost-base),.88) 84%,
                               rgba(var(--ghost-base),.97) 100%);
  }
  .sec-dark .sec-bg::after,.sec-deep .sec-bg::after{
    background:linear-gradient(to bottom,rgba(var(--ghost-base),.90) 0%,rgba(var(--ghost-base),.68) 22%,
                               rgba(var(--ghost-base),.72) 54%,rgba(var(--ghost-base),.80) 82%,
                               rgba(var(--ghost-base),.96) 100%);
  }
  .sec-cta .sec-bg::after{
    background:linear-gradient(to bottom,rgba(var(--ghost-base),.92) 0%,rgba(var(--ghost-base),.74) 24%,
                               rgba(var(--ghost-base),.84) 58%,rgba(var(--ghost-base),1) 88%);
  }
}

/* kurangkan gerakan: aliran biasa, tiada latar melekat */
@media (prefers-reduced-motion:reduce){
  .sec-ghost > .sec-bg{position:absolute;top:0;left:0;right:0;height:100%;margin:0}
  .sec-ghost{overflow:hidden}
}

/* ---------- Nav mudah alih: buang harga, kekalkan label sebelah logo ---------- */
@media (max-width:860px){
  .nav-price{display:none}
  .nav-cta{margin-left:auto}
  /* label dipulihkan seperti desktop */
  .logo span.logo-t{display:inline;white-space:nowrap}
}
@media (max-width:600px){
  .nav-in{gap:12px}
  .logo{gap:10px;font-size:1.02rem}
}
@media (max-width:400px){
  .logo{gap:8px;font-size:.94rem}
  .nav .logo-mark{width:42px;height:42px}
  .nav.scrolled .logo-mark{width:36px;height:36px}
}

/* skrin sangat pendek: kandungan hero memang tidak muat satu skrin,
   jadi petunjuk skrol dibuang supaya ia tidak tergantung separuh terpotong */
@media (max-width:820px) and (max-height:640px){
  .hero{padding:84px 0 44px}
  .hero-cue{display:none}
}

/* ==========================================================================
   Jadual pada skrin sempit: muat skrin, tiada skrol mendatar
   .tbl ada min-width:460px, jadi di bawah ~550px lajur nilai terpotong keluar
   kotak dan pembaca terpaksa leret ke tepi untuk baca lajur yang paling penting.
   ========================================================================== */
@media (max-width:560px){
  .tbl-wrap{overflow-x:hidden}
  .tbl{min-width:0;font-size:.86rem}

  /* jadual kos: kekal dua lajur, cuma dimampatkan */
  .tbl th,.tbl td{padding:12px 13px}
  .tbl td:last-child,.tbl th:last-child{white-space:nowrap}

  /* jadual perbandingan: tiga lajur tidak boleh muat, jadi setiap baris
     dijadikan satu kad bertindan. Tajuk lajur datang dari data-lbl. */
  .tbl-light .tbl,
  .tbl-light .tbl tbody,
  .tbl-light .tbl tr,
  .tbl-light .tbl td{display:block;width:auto}
  .tbl-light .tbl thead{display:none}
  .tbl-light .tbl tr{padding:16px 15px;border-bottom:1px solid var(--hair)}
  .tbl-light .tbl tr:last-child{border-bottom:0}
  .tbl-light .tbl td{border:0;padding:0;text-align:left;white-space:normal;background:none}
  .tbl-light .tbl td:first-child{
    font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:12px;
  }
  .tbl-light .tbl td:first-child b{font-weight:800}
  .tbl-light .tbl td[data-lbl]{margin-top:9px;line-height:1.5}
  .tbl-light .tbl td[data-lbl]::before{
    content:attr(data-lbl);display:block;margin-bottom:3px;
    font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .tbl-light .tbl td.col-us{
    background:rgba(166,124,61,.09);border-radius:10px;padding:10px 12px;
    color:var(--ink);font-weight:600;
  }
  .tbl-light .tbl td.col-us::before{color:var(--gold-700)}
}

/* Skrin paling sempit: jadual kos pun tidak muat dua lajur.
   Nilai terpanjang "RM372,000 - 386,000" dengan nowrap makan 207px daripada
   284px yang ada, jadi lajur label tinggal 77px. Tindankan saja. */
@media (max-width:400px){
  .tbl-wrap:not(.tbl-light) .tbl,
  .tbl-wrap:not(.tbl-light) .tbl tbody,
  .tbl-wrap:not(.tbl-light) .tbl tr,
  .tbl-wrap:not(.tbl-light) .tbl td{display:block;width:auto}
  .tbl-wrap:not(.tbl-light) .tbl thead{display:none}
  .tbl-wrap:not(.tbl-light) .tbl tr{
    padding:13px 14px;border-bottom:1px solid rgba(214,183,127,.12);
  }
  .tbl-wrap:not(.tbl-light) .tbl tr:last-child{border-bottom:0}
  .tbl-wrap:not(.tbl-light) .tbl td{
    border:0;padding:0;text-align:left;white-space:normal;line-height:1.5;
  }
  .tbl-wrap:not(.tbl-light) .tbl td:last-child{
    margin-top:5px;white-space:nowrap;font-weight:800;color:var(--gold-300);
  }
  .tbl-wrap:not(.tbl-light) .tbl .row-head td:last-child,
  .tbl-wrap:not(.tbl-light) .tbl .row-total td:last-child{color:var(--gold-200)}
  .tbl-wrap:not(.tbl-light) .tbl .row-total td:first-child{color:#fff}
  /* latar jalur berpindah dari td ke tr, kalau tidak ia jadi dua bar berasingan
     mengikut lebar teks, bukan satu jalur penuh */
  .tbl-wrap:not(.tbl-light) .tbl .row-head{background:rgba(255,255,255,.04)}
  .tbl-wrap:not(.tbl-light) .tbl .row-total{
    background:rgba(214,183,127,.1);border-top:1px solid rgba(214,183,127,.35);
  }
  .tbl-wrap:not(.tbl-light) .tbl .row-head td,
  .tbl-wrap:not(.tbl-light) .tbl .row-total td{background:none;border-top:0}
}