/* ============================================================
   MODON – WADI YEMM RAS EL HEKMA  |  Ultra-Fast Luxury CSS
   © 2026 Modon Holding PSC | modon wadi yemm modon ras el hekma
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --navy:        #0a1628;
  --navy-mid:    #122040;
  --royal:       #1a3557;
  --teal:        #0ea5c0;
  --teal-lt:     #38bdd6;
  --gold:        #c9a96e;
  --gold-lt:     #e0c48a;
  --white:       #ffffff;
  --sand:        #f8f4ee;
  --text:        #1f2937;
  --text-muted:  #6b7280;
  --border:      rgba(201,169,110,.25);
  --glass:       rgba(10,22,40,.75);
  --shadow-sm:   0 4px 20px rgba(10,22,40,.15);
  --shadow:      0 20px 60px rgba(10,22,40,.25);
  --shadow-lg:   0 40px 100px rgba(10,22,40,.35);
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   28px;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --dur:         .35s;
  --font-ar:     'Noto Kufi Arabic', system-ui, -apple-system, sans-serif;
  --font-en:     'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;overflow-x:hidden}
body{
  font-family:var(--font-ar);color:var(--text);background:var(--white);
  overflow-x:hidden;line-height:1.7;width:100%;max-width:100vw;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── Utility ─────────────────────────────────────────────────── */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1.5rem}
.section{padding:85px 0}
.section-sm{padding:50px 0}
.text-gold{color:var(--gold)}
.text-teal{color:var(--teal)}
.text-white{color:var(--white)}
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
.hidden{display:none!important}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5{line-height:1.25;font-weight:800}
h1{font-size:clamp(1.75rem,3.2vw,2.8rem)}
h2{font-size:clamp(1.45rem,2.8vw,2.2rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
h4{font-size:1.05rem}
p{line-height:1.75}

.section-title{color:var(--navy);margin-bottom:.75rem}
.section-title span{color:var(--gold)}
.section-sub{color:var(--text-muted);max-width:640px}
.section-sub.centered{margin-inline:auto}

/* ── Header ─────────────────────────────────────────────────── */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  height:70px;display:flex;align-items:center;
  background:rgba(10,22,40,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
#site-header .container{
  max-width:1440px;
  padding-inline:2rem;
}
#site-header.scrolled{background:rgba(10,22,40,.98);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;width:100%}

.header-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand-logo-img{height:28px;width:auto;object-fit:contain;display:block;transition:transform var(--dur) var(--ease),filter var(--dur)}
.header-logo:hover .brand-logo-img{transform:scale(1.03);filter:drop-shadow(0 0 12px rgba(201,169,110,.4))}
.footer-logo .brand-logo-img{height:42px;margin-bottom:1rem}

.header-nav{display:flex;align-items:center;gap:.25rem}
.header-nav a{color:rgba(255,255,255,.85);font-size:.82rem;font-weight:600;padding:.4em .65em;border-radius:var(--radius-sm);transition:color var(--dur),background var(--dur);white-space:nowrap}
.header-nav a:hover{color:var(--gold);background:rgba(255,255,255,.08)}

.header-actions{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.lang-btn{padding:.38em .85em;border-radius:50px;border:1px solid rgba(255,255,255,.25);color:var(--white);font-size:.78rem;font-weight:700;letter-spacing:.05em;transition:var(--dur);text-decoration:none;white-space:nowrap}
.lang-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.1)}
.cta-call{display:flex;align-items:center;gap:.45rem;padding:.48em 1.1em;border-radius:50px;background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--navy);font-size:.82rem;font-weight:800;transition:transform var(--dur),filter var(--dur);white-space:nowrap;box-shadow:0 4px 15px rgba(201,169,110,.3)}
.cta-call:hover{transform:translateY(-2px);filter:brightness(1.08)}
.cta-call svg{width:14px;height:14px;flex-shrink:0}

.menu-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--white);font-size:1.2rem;align-items:center;justify-content:center}

/* ── Hero ───────────────────────────────────────────────────── */
#hero{
  min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:var(--navy);padding:120px 0 65px;
}
/* ── Hero Background: Ultra-Fast Cinematic Ken Burns Slideshow ── */
.hero-slider, .hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-slide.active {
  opacity: 1;
  animation: kenBurnsCinematic 14s ease-in-out infinite alternate;
}

/* 🎥 High-End Smooth Ken Burns Pan & Zoom */
@keyframes kenBurnsCinematic {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.07) translate3d(-0.5%, -0.4%, 0);
  }
  100% {
    transform: scale(1.04) translate3d(0.5%, 0.4%, 0);
  }
}

/* ♿ Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.active {
    animation: none;
    transform: scale(1);
  }
}

/* Overlay: Crystal luxury lighting with deep obsidian depth (z-index 2) */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(8, 18, 34, 0.72) 0%, rgba(8, 18, 34, 0.25) 45%, rgba(8, 18, 34, 0.68) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(8, 18, 34, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content{position:relative;z-index:3;display:grid;grid-template-columns:1fr 380px;gap:3rem;align-items:center;width:100%}

.hero-h1, #hero-title{color:var(--white);font-size:clamp(2rem,3.4vw,3.1rem);font-weight:900;line-height:1.2;margin-bottom:.85rem;animation:fadeUp .8s .1s var(--ease) both;letter-spacing:-.02em;word-break:break-word;text-shadow:0 3px 20px rgba(0,0,0,.6)}
.hero-h1 .h1-sub, #hero-title span, #hero-title .h1-sub{color:var(--gold);display:block;font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:800;margin-top:.4rem;letter-spacing:.02em;text-shadow:0 2px 15px rgba(201,169,110,.4)}
.hero-sub{color:rgba(255,255,255,.92);font-size:1.02rem;max-width:560px;margin-bottom:1.85rem;animation:fadeUp .8s .2s var(--ease) both;line-height:1.8;text-shadow:0 2px 10px rgba(0,0,0,.5)}

.hero-kpis{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;animation:fadeUp .8s .3s var(--ease) both}
.kpi{
  background:rgba(10,22,40,.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,169,110,.35);border-radius:var(--radius-sm);
  padding:.75rem 1.15rem;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  box-shadow:0 8px 25px rgba(0,0,0,.3);
}
.kpi:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 30px rgba(201,169,110,.25)}
.kpi-num{
  font-size:1.6rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#ffffff 0%,var(--gold-lt) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.kpi-label{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.03em;margin-top:.35rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* Hero form card */
.hero-form-card{
  background:linear-gradient(165deg, rgba(16,32,58,.88) 0%, rgba(8,18,33,.96) 100%);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1.5px solid rgba(201,169,110,.45);border-radius:var(--radius);padding:2rem 1.8rem;
  box-shadow:0 25px 65px rgba(0,0,0,.6), 0 0 35px rgba(201,169,110,.18);
  animation:fadeLeft .8s .2s var(--ease) both;
}
.hero-form-card h3{color:var(--white);margin-bottom:.35rem;font-size:1.25rem;font-weight:800}
.hero-form-card p{color:rgba(255,255,255,.75);font-size:.84rem;margin-bottom:1.3rem}


/* ── Forms – shared ─────────────────────────────────────────── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.form-group label.dark{color:var(--text)}
.form-control{
  width:100%;padding:.8em 1em;border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:var(--white);
  transition:border-color var(--dur),background var(--dur);outline:none;
}
.form-control.dark{background:var(--sand);border-color:var(--border);color:var(--text)}
.form-control::placeholder{color:rgba(255,255,255,.35)}
.form-control.dark::placeholder{color:var(--text-muted)}
.form-control:focus{border-color:var(--gold);background:rgba(255,255,255,.12)}
.form-control.dark:focus{border-color:var(--teal);background:var(--white)}
select.form-control option{color:var(--text);background:var(--white)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8em 2em;border-radius:50px;font-family:inherit;font-size:.95rem;font-weight:700;transition:transform var(--dur) var(--ease),filter var(--dur),box-shadow var(--dur);cursor:pointer;border:none;text-align:center;position:relative;overflow:hidden}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--navy);box-shadow:0 8px 32px rgba(201,169,110,.35)}
.btn-gold::after{
  content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(25deg);
  animation:btnShimmerSweep 4.5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
.btn-gold:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.08);box-shadow:0 14px 40px rgba(201,169,110,.55)}
@keyframes btnShimmerSweep{
  0%,65%{left:-60%;opacity:0}
  70%{opacity:1}
  100%{left:140%;opacity:0}
}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-lt));color:var(--white);box-shadow:0 8px 32px rgba(14,165,192,.35)}
.btn-teal:hover{transform:translateY(-3px);filter:brightness(1.08)}
.btn-outline{border:2px solid var(--gold);color:var(--gold);background:transparent}
.btn-outline:hover{background:var(--gold);color:var(--navy)}
.btn-full{width:100%}
.btn-lg{font-size:1.05rem;padding:1em 2.5em}

.form-disclaimer{font-size:.72rem;color:rgba(255,255,255,.4);text-align:center;margin-top:.75rem}
.form-disclaimer.dark{color:var(--text-muted)}

/* ── Stats Section ──────────────────────────────────────────── */
#stats{background:var(--navy);padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden}
.stat-item{background:var(--navy-mid);padding:2rem 1.25rem;text-align:center;transition:background var(--dur)}
.stat-item:hover{background:var(--royal)}
.stat-num{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;color:var(--gold);line-height:1;display:block}
.stat-label{color:rgba(255,255,255,.75);font-size:.78rem;margin-top:.5rem;letter-spacing:.03em;line-height:1.4}
.stat-label small{display:block;color:rgba(255,255,255,.45);margin-top:.2rem;font-size:.7rem}

/* ── About Section ──────────────────────────────────────────── */
#about{background:var(--sand)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-image-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.about-image-wrap img{width:100%;height:480px;object-fit:cover;display:block}
.about-badge{
  position:absolute;bottom:-1.5rem;right:-1.5rem;background:var(--gold);color:var(--navy);
  padding:1.25rem 1.5rem;border-radius:var(--radius);text-align:center;font-weight:800;box-shadow:var(--shadow-sm);
}
.about-badge .badge-num{font-size:1.6rem;line-height:1;display:block}
.about-badge .badge-text{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem;opacity:.8}

.fact-chip{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--border);border-inline-start:3px solid var(--gold)}
.fact-chip .ft{font-size:.82rem;color:var(--text-muted);line-height:1.4}
.fact-chip .fn{font-weight:800;color:var(--navy);font-size:.92rem}

.designers{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.designer-tag{padding:.45em 1.2em;border-radius:50px;background:var(--royal);color:var(--white);font-size:.78rem;font-weight:600;letter-spacing:.05em}

/* ── Units Section ──────────────────────────────────────────── */
#units{background:var(--white)}
.units-intro{text-align:center;margin-bottom:3.5rem}

.units-tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.unit-tab{padding:.6em 1.5em;border-radius:50px;border:2px solid var(--border);color:var(--text-muted);font-size:.83rem;font-weight:600;transition:var(--dur);cursor:pointer}
.unit-tab.active,.unit-tab:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}

.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}

.unit-card{
  border-radius:var(--radius);background:var(--white);border:1px solid var(--border);
  overflow:hidden;transition:transform var(--dur),box-shadow var(--dur);
  display:flex;flex-direction:column;
}
.unit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.unit-card-badge{
  padding:.35rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-block;border-radius:50px;
}
.badge-apts{background:rgba(14,165,192,.12);color:var(--teal)}
.badge-villas{background:rgba(201,169,110,.12);color:var(--gold)}
.badge-townhouse{background:rgba(26,53,87,.12);color:var(--royal)}

.unit-card-head{padding:1.5rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--navy),var(--royal));color:var(--white);position:relative;overflow:hidden}
.unit-card-head::after{content:'';position:absolute;top:-30%;right:-10%;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.04)}
.unit-card-name{font-size:1.05rem;font-weight:700;margin:.5rem 0 .25rem}
.unit-card-sub{font-size:.78rem;color:rgba(255,255,255,.55)}
.unit-card-price{font-size:1.4rem;font-weight:800;color:var(--gold);margin-top:.5rem}
.unit-card-price span{font-size:.72rem;color:rgba(255,255,255,.5);font-weight:400}

.unit-card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.unit-rows{
  display:flex;flex-direction:column;gap:.45rem;
  margin:1rem 0 1.5rem;background:var(--sand);
  border-radius:var(--radius-sm);padding:.75rem;border:1px solid var(--border);
}
.unit-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.55rem .75rem;border-radius:6px;background:var(--white);
  border:1px solid rgba(0,0,0,.04);font-size:.82rem;
  transition:border-color var(--dur);
}
.unit-row:hover{border-color:var(--gold)}
.ur-type{font-weight:800;color:var(--navy);display:flex;flex-direction:column;gap:.1rem}
.ur-area{font-size:.74rem;color:var(--text-muted);font-weight:500}
.ur-price{text-align:end;display:flex;flex-direction:column}
.ur-price-val{font-weight:800;color:#9e7938;font-size:.9rem;white-space:nowrap}
.ur-price-lbl{font-size:.68rem;color:var(--text-muted)}

.unit-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  padding:.8em 1.5em;border-radius:50px;background:linear-gradient(135deg,var(--teal),var(--royal));
  color:var(--white);font-size:.85rem;font-weight:700;margin-top:auto;
  transition:transform var(--dur),box-shadow var(--dur);
}
.unit-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,165,192,.35)}

/* ── Full Master Fact Sheet Matrix ──────────────────────────── */
.matrix-section{
  margin-top:3.5rem;background:var(--sand);
  border-radius:var(--radius);padding:2.5rem 2rem;border:1px solid var(--border);
}
.matrix-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);
  background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);width:100%;
}
.matrix-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.85rem}
.matrix-table th{background:var(--navy);color:var(--white);padding:.9rem 1rem;font-weight:700;text-align:center;font-size:.82rem}
.matrix-table td{padding:.75rem 1rem;text-align:center;border-bottom:1px solid rgba(0,0,0,.06);font-weight:600;color:var(--text)}
.matrix-table tr:nth-child(even){background:rgba(248,244,238,.6)}
.matrix-table tr:hover{background:rgba(201,169,110,.08)}
.matrix-cat{background:linear-gradient(135deg,var(--navy),var(--royal))!important;color:var(--gold)!important;font-weight:800!important;text-align:start!important;padding:.75rem 1.25rem!important;font-size:.88rem!important;letter-spacing:.04em}

/* ── Payment Timeline ───────────────────────────────────── */
/* ── Creative Official Payment & Terms Showcase ─────────────── */
#payment {
  background: radial-gradient(circle at 50% 0%, #172d50 0%, #0a1628 55%, #050d18 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201,169,110,.2);
  border-bottom: 1px solid rgba(201,169,110,.2);
}
#payment::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(201,169,110,.15) 0%, rgba(14,165,192,.08) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}
#payment .section-title,
#payment .section-title.text-white {
  color: #ffffff !important;
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: .65rem;
}
#payment .section-title span {
  color: var(--gold) !important;
  background: linear-gradient(135deg, #ffffff 0%, #ecd39d 40%, #c9a96e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
#payment .section-sub {
  color: rgba(255,255,255,.82) !important;
  font-size: 1.05rem;
  max-width: 680px;
  margin-bottom: 3.5rem;
}

.pay-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1.25rem;
  border-radius: 50px;
  background: rgba(201,169,110,.12);
  border: 1px solid rgba(201,169,110,.4);
  color: var(--gold-lt);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 20px rgba(201,169,110,.15);
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.pay-card {
  background: linear-gradient(165deg, rgba(26, 47, 78, 0.7) 0%, rgba(10, 22, 40, 0.9) 100%);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: var(--radius);
  padding: 2.2rem 1.5rem 1.8rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.pay-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
.pay-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 169, 110, 0.65);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(201, 169, 110, 0.2);
}

/* Featured Payment Plan Card */
.pay-card--featured {
  background: linear-gradient(165deg, rgba(34, 62, 102, 0.85) 0%, rgba(13, 27, 49, 0.98) 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5), 0 0 35px rgba(201, 169, 110, 0.3);
  position: relative;
}
.pay-card--featured::before {
  background: linear-gradient(90deg, var(--gold), var(--teal-lt), var(--gold));
  height: 4px;
}
.pay-card-ribbon {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--navy);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  padding: .25rem 1rem;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  white-space: nowrap;
}

.pay-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
}
.pay-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(201,169,110,.35);
  display: grid;
  place-items: center;
  color: var(--gold);
  margin-bottom: 1rem;
  transition: transform .3s var(--ease), background .3s;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.pay-card:hover .pay-icon-box {
  transform: scale(1.08) rotate(3deg);
  background: rgba(201,169,110,.15);
  border-color: var(--gold);
}
.pay-icon-box svg {
  width: 30px;
  height: 30px;
}
.pay-icon-box.icon-teal {
  border-color: rgba(14,165,192,.45);
  color: var(--teal-lt);
}
.pay-card:hover .pay-icon-box.icon-teal {
  background: rgba(14,165,192,.18);
  border-color: var(--teal-lt);
}

.pay-card-cat {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.pay-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

/* Card Body Content Types */
.pay-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: 0;
}
.pay-feature-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .86rem;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.06);
}
.pay-feature-list li svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Plan Flow Steps (Card 2) */
.plan-flow {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1rem;
}
.plan-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10,22,40,.6);
  border: 1px solid rgba(201,169,110,.25);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
}
.plan-step-val {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}
.plan-step-val span {
  color: var(--gold);
  font-size: .95rem;
  margin-inline-start: .2rem;
}
.plan-step-lbl {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}

/* Big Stat Display (Cards 3 & 4) */
.pay-stat-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  margin-bottom: 1rem;
}
.pay-stat-num {
  font-size: 2.75rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: .35rem;
  text-shadow: 0 0 25px rgba(255,255,255,.2);
}
.pay-stat-num.stat-gold {
  color: var(--gold-lt);
  text-shadow: 0 0 25px rgba(201,169,110,.35);
}
.pay-stat-num.stat-teal {
  color: var(--teal-lt);
  text-shadow: 0 0 25px rgba(14,165,192,.35);
}
.pay-stat-sub {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pay-card-note {
  font-size: .82rem;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
  text-align: center;
  padding-top: .5rem;
  border-top: 1px dashed rgba(255,255,255,.1);
}
.pay-card-note strong {
  color: #ffffff;
}

/* Bottom Fast Action Bar */
.pay-action-bar {
  margin-top: 3.5rem;
  background: linear-gradient(135deg, rgba(201,169,110,.12) 0%, rgba(14,165,192,.08) 100%);
  border: 1px solid rgba(201,169,110,.35);
  border-radius: var(--radius);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.pay-action-text h4 {
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: .25rem;
}
.pay-action-text p {
  color: rgba(255,255,255,.75);
  font-size: .9rem;
}
.pay-action-btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive adjustment for pay-grid */
@media (max-width: 1180px) {
  .pay-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (max-width: 768px) {
  .pay-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .pay-action-bar {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  .pay-action-btns {
    width: 100%;
    justify-content: center;
  }
  .pay-action-btns .btn {
    width: 100%;
  }
}


/* ── Lead Form Section (Mid) ────────────────────────────────── */
#mid-form{background:linear-gradient(135deg,var(--teal) 0%,var(--royal) 100%);padding:80px 0}
.mid-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.mid-form-text h2{color:var(--white);margin-bottom:1rem}
.mid-form-text p{color:rgba(255,255,255,.75)}
.mid-form-contact{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}

.mid-form-card{background:var(--white);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--shadow)}
.mid-form-card h3{color:var(--navy);margin-bottom:.4rem}
.mid-form-card p{color:var(--text-muted);font-size:.85rem;margin-bottom:1.5rem}

/* ── Amenities ──────────────────────────────────────────────── */
#amenities{background:var(--sand)}
.amenities-intro{text-align:center;margin-bottom:3.5rem}
.amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.amenity-card{background:var(--white);border-radius:var(--radius);padding:1.75rem 1.25rem;text-align:center;border:1px solid var(--border);border-top:3px solid var(--teal);transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur)}
.amenity-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-top-color:var(--gold)}
.amenity-icon{font-size:1.6rem;display:block;margin-bottom:.5rem}
.amenity-name{font-size:.92rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.amenity-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5}

/* ── Gallery ────────────────────────────────────────────────── */
#gallery{background:var(--navy);padding:80px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:1rem;margin-top:2.5rem}
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer}
.gallery-item img{width:100%;height:260px;object-fit:cover;transition:transform .5s var(--ease)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item.large{grid-column:span 2;grid-row:span 1}
.gallery-item.large img{height:280px}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:1rem 1.25rem;background:linear-gradient(to top,rgba(10,22,40,.9),transparent);color:var(--white);font-size:.82rem;font-weight:600;transform:translateY(100%);transition:transform var(--dur)}
.gallery-item:hover .gallery-caption{transform:translateY(0)}

/* ── Montage Residences Showcase ────────────────────────────── */
#montage{background:linear-gradient(135deg,#07101e 0%,#0c1c33 50%,#081224 100%);padding:90px 0;color:var(--white);position:relative;overflow:hidden}
#montage::before{content:'';position:absolute;top:-20%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.12) 0%,transparent 70%);pointer-events:none}
.montage-head{text-align:center;max-width:760px;margin:0 auto 3.5rem}
.montage-head h2{font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--white);margin-bottom:.85rem}
.montage-head h2 span{color:var(--gold)}
.montage-head p{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.8}
.montage-portfolio{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0;font-size:.78rem;color:rgba(255,255,255,.6)}
.montage-portfolio span{padding:.3em .9em;border-radius:50px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}

.montage-villas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:3rem 0}
.montage-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,169,110,.25);border-radius:var(--radius);padding:1.75rem;transition:transform var(--dur),background var(--dur),border-color var(--dur)}
.montage-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.08);border-color:var(--gold)}
.montage-card-badge{display:inline-block;padding:.25em .8em;border-radius:50px;background:rgba(201,169,110,.15);color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.05em;margin-bottom:.75rem}
.montage-card h3{color:var(--white);font-size:1.2rem;margin-bottom:.4rem}
.montage-card-sub{color:rgba(255,255,255,.6);font-size:.8rem;margin-bottom:1.25rem;font-style:italic}
.montage-specs-list{display:flex;flex-direction:column;gap:.4rem;background:rgba(0,0,0,.25);padding:1rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06);margin-bottom:1.25rem}
.ms-row{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.8)}
.ms-row strong{color:var(--gold)}

.montage-privileges{margin-top:3.5rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:2.5rem 2rem}
.privileges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1.5rem}
.privilege-item{display:flex;align-items:flex-start;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.85)}
.privilege-item svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:.2rem}

/* ── Master Plan ────────────────────────────────────────────── */
#masterplan{background:var(--white);padding:80px 0}
.masterplan-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.masterplan-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:90px}
.masterplan-img img{width:100%;display:block}
.masterplan-legend h4{color:var(--navy);margin-bottom:1.25rem;font-size:1.15rem}
.masterplan-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.25rem}
.legend-item{display:flex;align-items:center;gap:.65rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text);font-weight:600}
.legend-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.ld-blue{background:rgba(14,165,192,.15);color:var(--teal)}
.ld-gold{background:rgba(201,169,110,.15);color:var(--gold)}
.ld-navy{background:rgba(26,53,87,.15);color:var(--royal)}

/* ── Location ───────────────────────────────────────────────── */
#location{background:var(--sand);padding:80px 0}
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.location-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.location-map img{width:100%;display:block}
.distances{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.dist-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--white);border-radius:var(--radius-sm);border:1px solid var(--border)}
.dist-icon{font-size:1.5rem;flex-shrink:0}
.dist-name{font-size:.85rem;color:var(--text-muted)}
.dist-val{font-size:1.05rem;font-weight:700;color:var(--navy)}

/* ── FAQ ────────────────────────────────────────────────────── */
#faq{background:var(--white);padding:80px 0}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;align-items:start}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;cursor:pointer;font-weight:600;color:var(--navy);font-size:.9rem;gap:1rem;transition:background var(--dur)}
.faq-q:hover{background:var(--sand)}
.faq-q.open{background:var(--navy);color:var(--white)}
.faq-icon{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex-shrink:0;font-size:1rem;transition:transform var(--dur),background var(--dur)}
.faq-q.open .faq-icon{transform:rotate(45deg);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.faq-a.open{max-height:400px;padding:1rem 1.5rem 1.5rem}
.faq-a p{color:var(--text-muted);font-size:.88rem;line-height:1.8}

/* ── Bottom Form ────────────────────────────────────────────── */
#bottom-form{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,rgba(14,165,192,.2) 100%);padding:80px 0;position:relative;overflow:hidden}
#bottom-form::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;border-radius:50%;background:rgba(14,165,192,.05);pointer-events:none}
.bottom-form-inner{display:grid;grid-template-columns:1fr 480px;gap:4rem;align-items:center}
.bottom-form-text h2{color:var(--white);margin-bottom:1rem}
.bottom-form-text p{color:rgba(255,255,255,.6)}
.bottom-form-card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:2rem}
.bottom-form-card h3{color:var(--white);margin-bottom:.4rem}
.bottom-form-card > p{color:rgba(255,255,255,.5);font-size:.82rem;margin-bottom:1.5rem}

/* ── Footer ─────────────────────────────────────────────────── */
#footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.07);padding:48px 0 24px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.footer-brand .logo-text{display:inline-flex;flex-direction:column;margin-right:.75rem}
.footer-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.footer-desc{color:rgba(255,255,255,.45);font-size:.82rem;line-height:1.8;max-width:300px;margin-top:.75rem}
.footer-col h5{color:var(--white);font-size:.88rem;font-weight:700;letter-spacing:.06em;margin-bottom:1rem;text-transform:uppercase}
.footer-col ul li{margin-bottom:.6rem}
.footer-col ul li a{color:rgba(255,255,255,.45);font-size:.82rem;transition:color var(--dur)}
.footer-col ul li a:hover{color:var(--gold)}
.footer-contact-item{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.45);font-size:.82rem;margin-bottom:.75rem}
.footer-contact-item svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}

.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.footer-copy{color:rgba(255,255,255,.3);font-size:.75rem}
.footer-seo{color:rgba(255,255,255,.15);font-size:.65rem}

/* ── Floating Contact Bar ───────────────────────────────────── */
#floating-bar{
  position:fixed;bottom:1.5rem;z-index:990;
  display:flex;flex-direction:column;gap:.6rem;
}
html[dir="rtl"] #floating-bar{left:1.5rem;right:auto}
html[dir="ltr"] #floating-bar{right:1.5rem;left:auto}

.float-btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-size:1.25rem;box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
  text-decoration:none;position:relative;
}
.float-btn:hover{transform:scale(1.12);box-shadow:0 12px 38px rgba(0,0,0,.5)}

/* 💬 WhatsApp Motion & Ripple */
.float-wa{background:#25d366;color:var(--white)}
.float-wa::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:rgba(37,211,102,.5);z-index:-1;
  animation:waRadarWave 2.8s cubic-bezier(.2,.8,.2,1) infinite;
}
.float-wa svg{
  animation:waIconWiggle 4.5s ease-in-out infinite;
  transform-origin:center center;
}

@keyframes waRadarWave{
  0%{transform:scale(1);opacity:.8}
  60%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
@keyframes waIconWiggle{
  0%,70%,100%{transform:scale(1) rotate(0deg)}
  75%{transform:scale(1.18) rotate(-14deg)}
  80%{transform:scale(1.18) rotate(14deg)}
  85%{transform:scale(1.12) rotate(-8deg)}
  90%{transform:scale(1.08) rotate(6deg)}
  95%{transform:scale(1) rotate(0deg)}
}

/* 📞 Phone Call Motion & Glow */
.float-call{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--navy)}
.float-call::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:rgba(201,169,110,.5);z-index:-1;
  animation:callRadarWave 2.8s cubic-bezier(.2,.8,.2,1) 1.4s infinite;
}
.float-call svg{
  animation:phoneIconRing 4.5s ease-in-out 2.25s infinite;
  transform-origin:center center;
}

@keyframes callRadarWave{
  0%{transform:scale(1);opacity:.8}
  60%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
@keyframes phoneIconRing{
  0%,70%,100%{transform:scale(1) rotate(0deg)}
  74%{transform:scale(1.16) rotate(-18deg)}
  78%{transform:scale(1.16) rotate(18deg)}
  82%{transform:scale(1.14) rotate(-12deg)}
  86%{transform:scale(1.1) rotate(10deg)}
  90%{transform:scale(1.04) rotate(-4deg)}
  94%{transform:scale(1) rotate(0deg)}
}

.float-top{background:rgba(10,22,40,.9);border:1px solid rgba(255,255,255,.2);color:var(--white);font-size:1rem;opacity:0;transition:opacity var(--dur);pointer-events:none}
.float-top.visible{opacity:1;pointer-events:auto}

/* ── Popup Modal ────────────────────────────────────────────── */
#popup-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(10,22,40,.8);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:1rem;
}
#popup-overlay.show{display:grid}
#popup-modal{
  background:var(--white);border-radius:var(--radius);width:min(500px,100%);
  max-height:90svh;overflow-y:auto;position:relative;animation:popUp .35s var(--ease) both;
}
.popup-head{
  background:linear-gradient(135deg,var(--navy),var(--royal));
  padding:2rem 2rem 1.5rem;position:relative;overflow:hidden;
}
.popup-head::after{content:'';position:absolute;top:-40%;right:-15%;width:180px;height:180px;border-radius:50%;background:rgba(14,165,192,.12)}
.popup-head h3{color:var(--white);position:relative;z-index:1;font-size:1.2rem;margin-bottom:.35rem}
.popup-head p{color:rgba(255,255,255,.65);font-size:.82rem;position:relative;z-index:1}
.popup-badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:.72rem;font-weight:700;padding:.25em .75em;border-radius:50px;margin-bottom:.75rem;position:relative;z-index:1}
.popup-body{padding:1.75rem 2rem 2rem}
.popup-close{
  position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.12);color:var(--white);display:grid;place-items:center;
  font-size:1.1rem;cursor:pointer;z-index:2;border:none;transition:background var(--dur);
}
.popup-close:hover{background:rgba(255,255,255,.25)}
.popup-timer{margin-top:.75rem;font-size:.72rem;color:var(--text-muted);text-align:center}

/* ── Lightbox ────────────────────────────────────────────────── */
#lightbox{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.95);display:none;place-items:center}
#lightbox.show{display:grid}
#lightbox img{max-width:90vw;max-height:90svh;border-radius:var(--radius-sm);object-fit:contain}
.lb-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--white);display:grid;place-items:center;cursor:pointer;font-size:1.25rem;border:none}

/* ── Loader Overlay ─────────────────────────────────────────── */
#page-loader{display:none !important;}
#page-loader.done{display:none !important;}
.loader-ring{width:56px;height:56px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:1;transform:none}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:1;transform:none}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popUp{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Mobile Nav Drawer ──────────────────────────────────────── */
#mobile-nav{
  position:fixed;top:76px;left:0;right:0;bottom:0;z-index:998;
  background:rgba(10,22,40,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transform:translateY(-100%);transition:transform .35s var(--ease);
  overflow-y:auto;padding:2rem;display:flex;flex-direction:column;
}
#mobile-nav.open{transform:translateY(0)}
.mobile-nav-links{display:flex;flex-direction:column;gap:.35rem;margin-bottom:2rem}
.mobile-nav-links a{display:block;padding:.9rem 1.2rem;border-radius:var(--radius-sm);color:rgba(255,255,255,.9);font-size:1.05rem;font-weight:600;transition:background var(--dur),color var(--dur);border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-nav-links a:hover{background:rgba(255,255,255,.08);color:var(--gold)}

/* ── Notice / Alert ─────────────────────────────────────────── */
.alert{padding:1rem 1.25rem;border-radius:var(--radius-sm);font-size:.85rem;margin-top:1rem;display:none}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#065f46;display:block}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#991b1b;display:block}

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES (Cascading from Large to Small)
   ═════════════════════════════════════════════════════════════ */

/* Laptops & Tablets Landscape (<= 1180px) */
@media (max-width:1180px){
  .header-nav{display:none}
  .menu-toggle{display:flex}
}

/* Tablets (<= 1024px) */
@media (max-width:1024px){
  .hero-content{grid-template-columns:1fr}
  .hero-form-card{display:block;margin-top:2rem}
  .about-grid,.location-grid,.mid-form-grid,.bottom-form-inner,.masterplan-inner,.footer-top{grid-template-columns:1fr}
  .stats-grid,.payment-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .about-image-wrap img{height:340px}
  .about-badge{display:none}
  .pay-timeline{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .pay-timeline-line{display:none}
  .pay-tl-card + .pay-tl-card{border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .pay-tl-card:nth-child(2),.pay-tl-card:nth-child(4){border-left:1px solid rgba(255,255,255,.06);border-top:none}
}

/* Mobile Phones (<= 768px) */
@media (max-width:768px){
  /* Header */
  #site-header{height:56px}
  #site-header .container{padding-inline:.85rem}
  .header-inner{gap:.35rem}
  .header-logo{gap:.45rem}
  .brand-logo-img{height:22px;max-width:110px;}
  .footer-logo .brand-logo-img{height:36px}
  .logo-icon{width:34px;height:34px;font-size:1rem;border-radius:8px}
  .logo-text .lg-main{font-size:.82rem}
  .logo-text .lg-sub{display:none}
  .header-actions{gap:.35rem}
  .lang-btn{padding:.28em .55em;font-size:.72rem}
  .cta-call{
    width:34px;height:34px;padding:0;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:0!important;line-height:0;
  }
  .cta-call span{display:none!important}
  .cta-call svg{width:15px;height:15px;margin:0;display:block}
  .menu-toggle{width:34px;height:34px;font-size:1.1rem}
  #mobile-nav{top:56px;padding:1.5rem 1rem}

  /* Section Spacing & Headings */
  .section{padding:50px 0}
  .section-title{font-size:1.45rem;line-height:1.3}
  .section-sub{font-size:.85rem;line-height:1.65}
  
  /* Hero */
  #hero{padding:90px 0 35px !important;min-height:auto}
  .hero-content{display:flex;flex-direction:column;gap:1.5rem;width:100%}
  .hero-text{width:100%}
  .hero-h1{font-size:1.45rem;line-height:1.2;margin-bottom:.35rem}
  .hero-h1 .h1-sub{font-size:.88rem;margin-top:.2rem}
  .hero-sub{font-size:.78rem;line-height:1.55;margin-bottom:.9rem}
  .hero-kpis{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:.5rem;width:100%;margin-bottom:.9rem;
  }
  .kpi{padding:.5rem .65rem;padding-inline-start:.5rem}
  .kpi-num{font-size:1rem}
  .kpi-label{font-size:.62rem}
  .hero-ctas{flex-direction:column;width:100%;gap:.45rem}
  .hero-ctas .btn{width:100%;font-size:.78rem;padding:.6em 1em}
  .hero-form-card{
    display:block;width:100%;margin-top:1.5rem;
    padding:1.35rem 1.1rem;border-radius:var(--radius);
  }
  .hero-form-card h3{font-size:1.05rem}
  .hero-form-card p{font-size:.78rem}

  /* Stats */
  #stats{padding:45px 0}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1px}
  .stat-item{padding:1.1rem .6rem}
  .stat-num{font-size:1.35rem}
  .stat-label{font-size:.7rem}

  /* About */
  .about-grid{display:flex;flex-direction:column;gap:1.75rem}
  .about-image-wrap img{height:230px}
  .fact-chip{padding:.75rem 1rem}
  .designers{gap:.4rem;margin-top:1rem}
  .designer-tag{font-size:.72rem;padding:.35em .8em}

  /* Units & Filter Tabs */
  .units-tabs{
    gap:.35rem;justify-content:flex-start;
    overflow-x:auto;padding-bottom:.5rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    flex-wrap:nowrap;
  }
  .units-tabs::-webkit-scrollbar{display:none}
  .unit-tab{padding:.45em 1.1em;font-size:.78rem;white-space:nowrap;flex-shrink:0}
  .units-grid{grid-template-columns:1fr;gap:1.25rem}
  .unit-card-head{padding:1.15rem}
  .unit-card-body{padding:1.15rem}
  .unit-rows{padding:.5rem;gap:.35rem;margin:.75rem 0 1rem}
  .unit-row{padding:.45rem .6rem;font-size:.78rem}
  .ur-type{font-size:.8rem}
  .ur-price-val{font-size:.82rem}
  .unit-cta{font-size:.82rem;padding:.75em 1.2em}

  /* Matrix Table */
  .matrix-section{padding:1.25rem .75rem;margin-top:1.75rem;border-radius:var(--radius-sm)}
  .matrix-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix-table{min-width:650px;font-size:.78rem}
  .matrix-table th, .matrix-table td{padding:.6rem .5rem}

  /* Payment Timeline */
  .pay-timeline{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
  .pay-timeline-line{display:none}
  .pay-tl-card{padding:1rem 0;border:none!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  .pay-tl-dot{width:56px;height:56px;margin-bottom:.75rem}
  .pay-tl-dot svg{width:22px;height:22px}
  .pay-big-num{font-size:1.45rem}
  .pay-highlight-num{font-size:1.6rem}

  /* Mid Form & Bottom Form */
  .mid-form-grid{display:flex;flex-direction:column;gap:1.5rem}
  .mid-form-card, .bottom-form-card{padding:1.35rem 1.1rem}
  .bottom-form-inner{display:flex;flex-direction:column;gap:1.5rem}

  /* Amenities */
  .amenities-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .amenity-card{padding:1rem .75rem}
  .amenity-name{font-size:.85rem}
  .amenity-desc{font-size:.72rem}

  /* Gallery */
  .gallery-grid{grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.5rem}
  .gallery-item img{height:140px}
  .gallery-item.large{grid-column:span 2}
  .gallery-item.large img{height:180px}

  /* Montage */
  .montage-head{margin-bottom:2rem}
  .montage-villas-grid{grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0}
  .montage-card{padding:1.25rem 1rem}
  .montage-privileges{padding:1.25rem 1rem;margin-top:2rem}
  .privileges-grid{grid-template-columns:1fr;gap:.75rem}

  /* Master Plan */
  .masterplan-inner{display:flex;flex-direction:column;gap:1.5rem}
  .masterplan-img{position:static}
  .masterplan-list{grid-template-columns:1fr;gap:.35rem}

  /* Location */
  .location-grid{display:flex;flex-direction:column;gap:1.5rem}
  .distances{gap:.6rem}
  .dist-item{padding:.75rem 1rem}
  .dist-val{font-size:.95rem}

  /* FAQ */
  .faq-grid{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
  .faq-q{padding:1rem 1.1rem;font-size:.84rem}
  .faq-a.open{padding:.75rem 1.1rem 1.1rem}

  /* Footer */
  .footer-top{display:flex;flex-direction:column;gap:1.5rem}
  .footer-bottom{display:flex;flex-direction:column;gap:.5rem;text-align:center}

  /* Floating Bar */
  #floating-bar{bottom:1rem;gap:.4rem}
  html[dir="rtl"] #floating-bar{left:.85rem;right:auto}
  html[dir="ltr"] #floating-bar{right:.85rem;left:auto}
  .float-btn{width:44px;height:44px;font-size:1.1rem}

  /* Modal Popup */
  #popup-modal{width:92vw;margin:auto;max-height:85vh;border-radius:var(--radius)}
  .popup-head{padding:1.25rem 1rem 1rem}
  .popup-body{padding:1.25rem 1rem}
}

/* Very Small Phones (<= 380px) */
@media (max-width:380px){
  .stats-grid,.amenities-grid{grid-template-columns:1fr 1fr}
  .hero-h1{font-size:1.55rem}
  .kpi-num{font-size:1.15rem}
  .pay-big-num{font-size:1.3rem}
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC IMMERSIVE VIDEO SHOWCASE (ULTRA-LUXURY)
   ═══════════════════════════════════════════════════════════════ */
.video-showcase-section {
  background: radial-gradient(circle at 50% 30%, #0e1a30 0%, #060a14 70%, #03050a 100%);
  position: relative;
  padding: 100px 0 110px;
  overflow: hidden;
}

.video-ambient-glow {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1100px;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.18) 0%, rgba(14, 165, 192, 0.12) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
  animation: ambientPulse 8s ease-in-out infinite alternate;
}

@keyframes ambientPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.video-frame-card {
  position: relative;
  z-index: 2;
  background: rgba(10, 16, 30, 0.75);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 
    0 30px 100px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(201, 168, 76, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.video-frame-card:hover {
  box-shadow: 
    0 40px 120px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(201, 168, 76, 0.22);
}

.video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.video-wrapper:hover video {
  transform: scale(1.015);
}

/* Cinematic Edge Vignette */
.video-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 65%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Live Cinematic Watermark Tag */
.video-live-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 10, 20, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: #f1d58a;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

html[dir="ltr"] .video-live-tag {
  right: auto;
  left: 20px;
}

.video-live-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Floating Bottom Controls (Fullscreen & Quick Action) */
.video-bottom-bar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  z-index: 10;
  pointer-events: none;
}

.video-btn-action {
  pointer-events: auto;
  background: rgba(6, 10, 20, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: #f1d58a;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.video-btn-action:hover {
  background: #C9A84C;
  color: #0b0f19;
  border-color: #C9A84C;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(201, 168, 76, 0.45);
}

.video-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: #f1d58a;
  padding: 7px 22px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .video-showcase-section { padding: 60px 0; }
  .video-frame-card { padding: 6px; border-radius: 18px; }
  .video-wrapper { border-radius: 14px; }
  .video-live-tag { top: 12px; right: 12px; font-size: 11px; padding: 4px 12px; }
  html[dir="ltr"] .video-live-tag { left: 12px; right: auto; }
  .video-bottom-bar { bottom: 12px; left: 12px; right: 12px; }
  .video-btn-action { padding: 6px 14px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-LUXURY 3D CENTER-STAGE CAROUSEL
   ═══════════════════════════════════════════════════════════════ */
.carousel-showcase-section {
  background: radial-gradient(circle at 50% 40%, #0e1a32 0%, #070d18 60%, #03060c 100%);
  position: relative;
  padding: 85px 0 95px;
  overflow: hidden;
}

.carousel-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 1200px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.16) 0%, rgba(14, 165, 192, 0.1) 50%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  animation: ambientPulse 8s ease-in-out infinite alternate;
}

.luxury-carousel-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  padding: 35px 0 20px;
  cursor: grab;
  direction: ltr !important; /* Enforces clean 1-to-1 track physics across all browsers & RTL */
}

.luxury-carousel-container:active {
  cursor: grabbing;
}

.luxury-carousel-track {
  display: flex;
  align-items: center;
  gap: 28px;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.luxury-card {
  flex: 0 0 68%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  opacity: 0.45;
  transform: scale(0.88);
  filter: brightness(0.65) blur(0.5px);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease, filter 0.85s ease, border-color 0.85s ease, box-shadow 0.85s ease;
  user-select: none;
}

.luxury-card.active {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1) blur(0);
  border: 1.5px solid rgba(201, 168, 76, 0.65);
  box-shadow: 
    0 35px 100px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(201, 168, 76, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  z-index: 5;
}

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

.luxury-card.active .luxury-card-img {
  animation: cardSlowZoom 12s ease-in-out infinite alternate;
}

@keyframes cardSlowZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.luxury-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 16, 0.9) 0%, rgba(5, 8, 16, 0.2) 40%, transparent 100%);
  pointer-events: none;
}

.luxury-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 6;
  pointer-events: none;
}

html[dir="rtl"] .luxury-card-info {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .luxury-card-info {
  direction: ltr;
  text-align: left;
}

.luxury-card-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 4px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.luxury-card-desc {
  color: #f1d58a;
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* Nav Buttons */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(8, 14, 26, 0.85);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(201, 168, 76, 0.45);
  color: #f1d58a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.carousel-nav-btn:hover {
  background: #C9A84C;
  color: #080e1a;
  border-color: #C9A84C;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 35px rgba(201, 168, 76, 0.4);
}

.carousel-prev-btn { left: 40px; }
.carousel-next-btn { right: 40px; }

/* Bottom meta bar */
.carousel-bottom-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  position: relative;
  z-index: 5;
}

.carousel-dots-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.carousel-dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.35s ease;
  padding: 0;
}

.carousel-dot-btn.active {
  background: #C9A84C;
  width: 26px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.6);
}

.carousel-counter-tag {
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: #f1d58a;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

@media (max-width: 992px) {
  .luxury-card { flex: 0 0 82%; }
  .carousel-prev-btn { left: 15px; width: 44px; height: 44px; }
  .carousel-next-btn { right: 15px; width: 44px; height: 44px; }
}

@media (max-width: 768px) {
  .carousel-showcase-section { padding: 55px 0 65px; }
  .luxury-card { flex: 0 0 86%; border-radius: 18px; }
  .luxury-card-info { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .luxury-card-title { font-size: 0.95rem; }
  .luxury-card-desc { font-size: 0.78rem; }
  .luxury-card-badge { display: none; }
  .carousel-prev-btn { left: 8px; width: 38px; height: 38px; }
  .carousel-next-btn { right: 8px; width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC VIDEO MODAL (LIGHTBOX) & PLAY TRIGGER
   ═══════════════════════════════════════════════════════════════ */
.btn-video-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-color: rgba(201, 168, 76, 0.65) !important;
  color: #f1d58a !important;
  background: rgba(10, 22, 40, 0.45);
  backdrop-filter: blur(12px);
  padding: 0.72rem 1.4rem;
  transition: all 0.3s ease;
}

.btn-video-trigger:hover {
  background: rgba(201, 168, 76, 0.18);
  border-color: #C9A84C !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 168, 76, 0.3);
}

.video-play-icon-glow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A84C, #f1d58a);
  color: #080e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-video-trigger:hover .video-play-icon-glow {
  transform: scale(1.15);
}

/* Modal Backdrop */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(4, 8, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.video-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal Card */
.video-modal-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  background: #09101f;
  border: 1px solid rgba(201, 168, 76, 0.5);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 
    0 40px 120px rgba(0, 0, 0, 0.95),
    0 0 70px rgba(201, 168, 76, 0.25);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-backdrop.active .video-modal-card {
  transform: scale(1) translateY(0);
}

/* Close Button */
.video-modal-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d172a;
  border: 1.5px solid rgba(201, 168, 76, 0.6);
  color: #f1d58a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  transition: all 0.25s ease;
}

html[dir="rtl"] .video-modal-close {
  right: auto;
  left: -18px;
}

.video-modal-close:hover {
  background: #C9A84C;
  color: #080e1a;
  transform: scale(1.1) rotate(90deg);
}

/* Player Wrapper */
.video-modal-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
}

.video-modal-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video-modal-backdrop { padding: 12px; }
  .video-modal-card { border-radius: 18px; padding: 4px; }
  .video-modal-player-wrap { border-radius: 14px; }
  .video-modal-close {
    top: -12px;
    right: -10px;
    width: 36px;
    height: 36px;
  }
  html[dir="rtl"] .video-modal-close {
    right: auto;
    left: -10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HIGH-CONVERSION MOBILE STICKY BAR & LUXURY CTA ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Sticky Mobile Bottom Conversion Bar */
.sticky-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: rgba(10, 22, 40, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201, 169, 110, 0.35);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
  animation: slideUpBar 0.4s var(--ease) both;
}

@keyframes slideUpBar {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.sticky-mobile-bar-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto;
}

.sticky-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 0.63rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  white-space: nowrap;
}

.sticky-bar-btn:active {
  transform: scale(0.96);
}

.sticky-bar-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sticky-bar-call {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.sticky-bar-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
  position: relative;
  overflow: hidden;
}

.sticky-bar-wa::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: waShine 2.5s infinite;
}

@keyframes waShine {
  0% { left: -100%; }
  20%, 100% { left: 100%; }
}

.sticky-bar-book {
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--navy);
  box-shadow: 0 4px 15px rgba(201, 169, 110, 0.4);
  font-weight: 800;
}

/* Pulse Live Advisor Dot */
.live-advisor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: #34d399;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.5);
  animation: livePulse 1.8s ease-out infinite;
}

@keyframes livePulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Exit Intent Overlay */
#exit-intent-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#exit-intent-overlay.show {
  display: flex;
  animation: fadeIn 0.3s ease both;
}

.exit-intent-card {
  background: linear-gradient(145deg, #101c33, #0a1426);
  border: 1px solid var(--gold);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 35px rgba(201, 169, 110, 0.2);
  animation: popIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

@media (max-width: 768px) {
  .sticky-mobile-bar {
    display: block;
  }
  body {
    padding-bottom: 74px; /* Space for bottom sticky bar */
  }
  #floating-bar {
    display: none !important; /* Replaced with modern bottom sticky bar */
  }
}








/* ── Modern Official Price Sheet Section ────────────────────── */
.price-sheet-section {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 50%, #0a1628 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201, 169, 110, 0.25);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
  padding: 90px 0;
}
.price-sheet-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 350px;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.price-sheet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(201, 169, 110, 0.15);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 50px;
  color: var(--gold-lt);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.price-sheet-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}
.price-tabs-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2.2rem 0 2.5rem;
}
.price-tab-btn {
  padding: 10px 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 169, 110, 0.2);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.price-tab-btn:hover {
  background: rgba(201, 169, 110, 0.15);
  border-color: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
}
.price-tab-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, #b38e4a 100%);
  border-color: var(--gold-lt);
  color: #0a1628;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.35);
  transform: translateY(-2px);
}
.price-block-card {
  background: rgba(18, 32, 64, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 20px;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.price-block-card:hover {
  border-color: rgba(201, 169, 110, 0.6);
  transform: translateY(-2px);
}
.price-block-head {
  padding: 1.25rem 1.75rem;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.2) 0%, rgba(26, 53, 87, 0.4) 100%);
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.price-block-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold-lt);
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-block-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}
.price-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.95rem;
}
.price-custom-table th {
  background: rgba(10, 22, 40, 0.85);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  white-space: nowrap;
}
.price-custom-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-weight: 600;
  vertical-align: middle;
}
.price-custom-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}
.price-custom-table tr:hover td {
  background: rgba(201, 169, 110, 0.08);
}
.price-unit-name {
  font-weight: 700;
  color: var(--white);
  font-size: 1rem;
}
.price-area-val {
  color: #38bdd6;
  font-weight: 700;
  background: rgba(14, 165, 192, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.price-start-val {
  color: var(--gold-lt);
  font-size: 1.05rem;
  font-weight: 800;
}
.price-max-val {
  color: #e2e8f0;
  font-weight: 700;
}
.badge-soldout {
  display: inline-block;
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
  padding: 4px 14px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
.price-book-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #b38e4a 100%);
  color: #0a1628;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.price-book-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(201, 169, 110, 0.4);
  background: linear-gradient(135deg, #e0c48a 0%, var(--gold) 100%);
}

/* ── Specifications & Terms Showcase Box ──────────────────── */
.terms-showcase-box {
  margin-top: 3.5rem;
  background: linear-gradient(145deg, rgba(18, 32, 64, 0.8), rgba(10, 22, 40, 0.95));
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.terms-showcase-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), #38bdd6, var(--gold), transparent);
  border-radius: 24px 24px 0 0;
}
.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.term-card-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}
.term-card-item:hover {
  background: rgba(201, 169, 110, 0.06);
  border-color: rgba(201, 169, 110, 0.45);
  transform: translateY(-3px);
}
.term-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.2), rgba(14, 165, 192, 0.2));
  border: 1px solid rgba(201, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-lt);
  margin-bottom: 1rem;
}
.term-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold-lt);
  margin-bottom: 0.75rem;
}
.term-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.term-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.5;
}
[dir="rtl"] .term-list li {
  padding-left: 0;
  padding-right: 1.4rem;
}
.term-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: 900;
}
[dir="rtl"] .term-list li::before {
  left: auto;
  right: 0;
}
.price-cta-banner {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, rgba(14, 165, 192, 0.1) 100%);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.price-cta-text h4 {
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.price-cta-text p {
  color: #94a3b8;
  font-size: 0.85rem;
}
.price-cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .price-sheet-section { padding: 60px 0; }
  .price-block-head { padding: 1rem; flex-direction: column; align-items: flex-start; }
  .price-custom-table th, .price-custom-table td { padding: 0.75rem 0.6rem; font-size: 0.82rem; }
  .terms-showcase-box { padding: 1.5rem 1.1rem; }
  .terms-grid { grid-template-columns: 1fr; gap: 1rem; }
  .price-cta-banner { flex-direction: column; text-align: center; justify-content: center; }
  .price-cta-actions { width: 100%; justify-content: center; }
  .price-cta-actions .btn { width: 100%; }
}



/* ══════════════════════════════════════════════════════════════════
   LUXURY MOBILE-FIRST UNIT & PRICE CARDS SHOWCASE
   ══════════════════════════════════════════════════════════════════ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.unit-card {
  background: #0d1e38;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
  position: relative;
}

.unit-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 25px rgba(201, 169, 110, 0.2);
}

.unit-card-head {
  padding: 1.6rem 1.6rem 1.4rem;
  background: linear-gradient(135deg, #0a1628 0%, #132a4e 100%);
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  position: relative;
}

.unit-card-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.unit-card-badge {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: 30px;
  letter-spacing: 0.03em;
  background: rgba(201, 169, 110, 0.15);
  color: #e0c48a;
  border: 1px solid rgba(201, 169, 110, 0.4);
}

.unit-deliv-badge {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  background: rgba(14, 165, 192, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 192, 0.35);
}

.unit-card-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.unit-card-sub {
  font-size: 0.86rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Big Luxury Price Range Box */
.unit-price-range-box {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.16) 0%, rgba(201, 169, 110, 0.05) 100%);
  border: 1.5px solid rgba(201, 169, 110, 0.45);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-top: 0.75rem;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.08);
}

.upr-label {
  font-size: 0.63rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.upr-value {
  font-size: 1.18rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.3;
}

.upr-value .price-num {
  color: #e0c48a;
  font-size: 1.35rem;
  font-weight: 900;
}

.upr-terms {
  font-size: 0.74rem;
  color: #38bdf8;
  font-weight: 600;
  margin-top: 0.35rem;
}

/* Card Body */
.unit-card-body {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #0a1628;
}

/* Specs Chips */
.unit-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}

.spec-chip {
  font-size: 0.63rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

/* Rows of Sub-Units */
.unit-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.35rem;
}

.unit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(19, 42, 78, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  transition: background 0.2s, border-color 0.2s;
}

.unit-row:hover {
  background: rgba(19, 42, 78, 0.95);
  border-color: rgba(201, 169, 110, 0.4);
}

.ur-type {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ur-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
}

.ur-area {
  font-size: 0.76rem;
  color: #94a3b8;
}

.ur-price {
  text-align: end;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ur-price-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #e0c48a;
  white-space: nowrap;
}

.ur-price-lbl {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 500;
}

/* Action Buttons */
.unit-card-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.65rem;
  margin-top: auto;
}

.unit-book-btn {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 10px !important;
  text-align: center;
  box-shadow: 0 4px 15px rgba(201, 169, 110, 0.25) !important;
}

.btn-wa-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #25D366;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.75rem 0.8rem;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
  white-space: nowrap;
}

.btn-wa-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .units-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .unit-card-head {
    padding: 1.2rem 1.1rem 1.1rem !important;
  }
  .unit-card-name {
    font-size: 1.2rem !important;
  }
  .unit-card-sub {
    font-size: 0.82rem !important;
  }
  .unit-price-range-box {
    padding: 0.75rem 0.85rem !important;
  }
  .upr-value {
    font-size: 1.05rem !important;
  }
  .upr-value .price-num {
    font-size: 1.2rem !important;
  }
  .unit-card-body {
    padding: 1.1rem !important;
  }
  .unit-card-actions {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .unit-book-btn, .btn-wa-card {
    width: 100% !important;
    padding: 0.85rem !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   CREATIVE MOBILE-FIRST DATA CARDS (NO HORIZONTAL SCROLL)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Disable Horizontal Overflow and make wrapper clean */
  .matrix-table-wrap,
  .price-table-container {
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
  }

  .matrix-section {
    padding: 1.25rem 0.85rem !important;
    background: #0a1628 !important;
    border: 1px solid rgba(201, 169, 110, 0.25) !important;
    border-radius: 18px !important;
  }

  .matrix-section h3 {
    color: #ffffff !important;
    font-size: 1.2rem !important;
  }

  /* Transform Table to Block Cards */
  .matrix-table,
  .price-custom-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    border: none !important;
  }

  /* Hide Desktop Table Header */
  .matrix-table thead,
  .price-custom-table thead {
    display: none !important;
  }

  .matrix-table tbody,
  .price-custom-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
    width: 100% !important;
  }

  /* Category Banners in Matrix Table */
  .matrix-table tr.matrix-cat {
    display: block !important;
    background: linear-gradient(135deg, #132a4e 0%, #0a1628 100%) !important;
    border: 1.5px solid rgba(201, 169, 110, 0.45) !important;
    border-radius: 12px !important;
    margin: 1.25rem 0 0.4rem !important;
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  .matrix-table tr.matrix-cat td {
    display: block !important;
    text-align: center !important;
    color: #e0c48a !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    padding: 0.85rem 1rem !important;
    border: none !important;
  }

  .matrix-table tr.matrix-cat td::before {
    display: none !important;
  }

  /* Each Row Becomes a Luxury Card */
  .matrix-table tr:not(.matrix-cat),
  .price-custom-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(135deg, #0d1e38 0%, #0a1628 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.3) !important;
    border-radius: 16px !important;
    padding: 1rem 1.15rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Each TD Becomes a Key-Value Pair Row */
  .matrix-table tr:not(.matrix-cat) td,
  .price-custom-table tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.55rem 0 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    font-size: 0.88rem !important;
    color: #ffffff !important;
    text-align: end !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Dynamic Labels from data-label */
  .matrix-table tr:not(.matrix-cat) td::before,
  .price-custom-table tr td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-inline-end: 0.75rem !important;
    text-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Top Card Header (Unit Title Row) */
  .matrix-table tr:not(.matrix-cat) td:first-child,
  .price-custom-table tr td:first-child {
    background: rgba(201, 169, 110, 0.12) !important;
    margin: -1rem -1.15rem 0.65rem -1.15rem !important;
    padding: 0.85rem 1.15rem !important;
    width: calc(100% + 2.3rem) !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom: 1.5px solid rgba(201, 169, 110, 0.35) !important;
    justify-content: flex-start !important;
  }

  .matrix-table tr:not(.matrix-cat) td:first-child::before,
  .price-custom-table tr td:first-child::before {
    display: none !important;
  }

  .matrix-table tr:not(.matrix-cat) td:first-child strong,
  .price-custom-table tr td:first-child {
    color: #e0c48a !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
  }

  /* Bottom Card Action (CTA Button Row) */
  .matrix-table tr:not(.matrix-cat) td:last-child,
  .price-custom-table tr td:last-child {
    border-bottom: none !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
  }

  .matrix-table tr:not(.matrix-cat) td:last-child::before,
  .price-custom-table tr td:last-child::before {
    display: none !important;
  }

  .matrix-table tr:not(.matrix-cat) td:last-child button,
  .matrix-table tr:not(.matrix-cat) td:last-child a,
  .price-custom-table tr td:last-child button,
  .price-custom-table tr td:last-child a {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #c9a96e 0%, #a8894d 100%) !important;
    color: #0a1628 !important;
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }

  /* Values Highlighting */
  .price-start-val {
    color: #34d399 !important;
    font-weight: 900 !important;
    font-size: 0.98rem !important;
  }

  .price-max-val {
    color: #f1f5f9 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
  }

  .price-area-val {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
  }
}


.price-cards-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.price-block-card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}



/* ══════════════════════════════════════════════════════════════════
   LUXURY BRANDED UNIT SELECTOR DRAWER & BOTTOM SHEET
   ══════════════════════════════════════════════════════════════════ */
.custom-unit-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(5, 12, 24, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-unit-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.custom-unit-drawer-card {
  background: linear-gradient(180deg, #0d1e38 0%, #0a1628 100%);
  border: 1.5px solid rgba(201, 169, 110, 0.45);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(201, 169, 110, 0.2);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-unit-drawer-backdrop.active .custom-unit-drawer-card {
  transform: translateY(0);
}

.custom-unit-drawer-head {
  padding: 1.2rem 1.4rem 1rem;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, rgba(10, 22, 40, 0.4) 100%);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer-title-wrap .drawer-icon {
  font-size: 1.25rem;
}

.drawer-title-wrap h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}

.drawer-close-btn:hover {
  background: rgba(201, 169, 110, 0.25);
  color: #ffffff;
  transform: scale(1.05);
}

.custom-unit-options-list {
  padding: 1rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-unit-opt {
  background: rgba(19, 42, 78, 0.7);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: start;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  width: 100%;
}

.custom-unit-opt:hover,
.custom-unit-opt:active {
  background: rgba(201, 169, 110, 0.18);
  border-color: var(--gold);
  transform: scale(0.99);
}

.opt-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.opt-emoji {
  font-size: 1.35rem;
  flex-shrink: 0;
}

.opt-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.opt-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.opt-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.3;
}

.opt-price-tag {
  font-size: 0.76rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Enhanced Form Select Input Look */
select.form-control {
  cursor: pointer !important;
  background: #0a1628 !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(201, 169, 110, 0.4) !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 0.8rem 1rem !important;
}

select.form-control option {
  background: #0a1628 !important;
  color: #ffffff !important;
  padding: 10px !important;
}

@media (min-width: 769px) {
  .custom-unit-drawer-card {
    border-radius: 24px !important;
    margin: auto !important;
    max-height: 80vh !important;
  }
}



/* ══ COMPACT UNIT DRAWER OPTIONS ══ */
.custom-unit-options-list {
  padding: 0.6rem 0.85rem calc(1rem + env(safe-area-inset-bottom)) !important;
  gap: 0.4rem !important;
}

.custom-unit-opt {
  padding: 0.55rem 0.75rem !important;
  border-radius: 10px !important;
}

.opt-emoji {
  font-size: 1rem !important;
}

.opt-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.opt-desc {
  font-size: 0.68rem !important;
}

.opt-price-tag {
  font-size: 0.68rem !important;
  padding: 0.18rem 0.4rem !important;
}

.custom-unit-drawer-head {
  padding: 0.85rem 1.1rem 0.75rem !important;
}

.drawer-title-wrap h3 {
  font-size: 0.95rem !important;
}

.drawer-close-btn {
  width: 28px !important;
  height: 28px !important;
}

.drawer-icon {
  font-size: 1rem !important;
}



/* ══ FORCED CONTENT VISIBILITY ══ */
.units-grid {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.unit-card {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.units-tabs,
.units-intro,
.price-cards-wrap,
.price-block-card,
.matrix-section {
  opacity: 1 !important;
  visibility: visible !important;
}



/* ══ CLEAN PRICE SHEET HEADER (MOBILE & DESKTOP) ══ */
.price-sheet-section {
  padding: 60px 0 !important;
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 50%, #0a1628 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.price-sheet-section .section-title {
  color: #ffffff !important;
  font-size: clamp(1.35rem, 4.5vw, 2.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.75rem !important;
  text-align: center !important;
  word-break: normal !important;
  display: block !important;
}

.price-sheet-section .section-title span {
  display: inline !important;
}

.price-sheet-section .section-sub {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: clamp(0.85rem, 2.5vw, 1.02rem) !important;
  line-height: 1.65 !important;
  margin: 0 auto 1.5rem !important;
  max-width: 680px !important;
  text-align: center !important;
  display: block !important;
}



/* ══ GPU TILE COMPOSITING & BLUR BUG FIX (MOBILE) ══ */
.price-sheet-section {
  isolation: isolate !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.price-sheet-section .section-title,
.price-sheet-section .section-sub,
.price-sheet-section .text-center {
  position: relative !important;
  z-index: 5 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
}

.price-block-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(135deg, #0d1e38 0%, #0a1628 100%) !important;
  border: 1px solid rgba(201, 169, 110, 0.35) !important;
}



/* ══ UNIFIED CLEAN PRICING TITLE ══ */
.pricing-main-title {
  font-size: clamp(1.35rem, 4.5vw, 2.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
  width: 100% !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  word-break: normal !important;
}

.pricing-main-title .txt-white {
  color: #ffffff !important;
  display: inline !important;
}

.pricing-main-title .txt-gold {
  color: var(--gold) !important;
  display: inline !important;
}



/* ══════════════════════════════════════════════════════════════════
   NATURAL CINEMATIC IMAGE PROPORTIONS (NO AGGRESSIVE MOBILE CROPPING)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Luxury Carousel Cards */
  .luxury-card {
    flex: 0 0 88% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
    border-radius: 16px !important;
  }

  .luxury-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* About Section Image */
  .about-image-wrap {
    width: 100% !important;
    border-radius: 16px !important;
  }

  .about-image-wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Video Showcase Container */
  .video-frame-card {
    height: auto !important;
    aspect-ratio: 16 / 9.5 !important;
    max-height: 250px !important;
    border-radius: 18px !important;
  }

  /* Gallery Grid Items */
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  .gallery-item img,
  .gallery-item.large img {
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 160px !important;
    object-fit: cover !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   MODON HOLDING DEVELOPER AUTHORITY SECTION (SEO & TRUST)
   ══════════════════════════════════════════════════════════════════ */
.developer-showcase-section {
  background: radial-gradient(circle at 50% 30%, #0d1e38 0%, #081222 65%, #050b16 100%);
  padding: 85px 0 95px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201, 169, 110, 0.25);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
}

.developer-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(201, 169, 110, 0.15);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 50px;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.developer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 2.5rem;
}

.developer-card {
  background: rgba(13, 30, 56, 0.65);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.developer-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(201, 169, 110, 0.2);
}

.dev-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.dev-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.dev-card-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}

.dev-card-metric {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(201, 169, 110, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid rgba(201, 169, 110, 0.2);
}

.developer-quote-box {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, rgba(13, 30, 56, 0.85) 100%);
  border: 1.5px solid rgba(201, 169, 110, 0.4);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.quote-content {
  flex: 1;
}

.quote-text {
  font-size: 1.02rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.75;
  margin-bottom: 0.85rem;
  font-style: italic;
}

.quote-author strong {
  color: var(--gold);
  font-size: 0.95rem;
  display: block;
}

.quote-author span {
  color: #94a3b8;
  font-size: 0.8rem;
}

.quote-action .btn {
  white-space: nowrap;
  padding: 1rem 1.8rem;
  font-weight: 800;
}

@media (max-width: 768px) {
  .developer-showcase-section { padding: 55px 0 65px; }
  .developer-grid { grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; }
  .developer-quote-box { flex-direction: column; padding: 1.5rem; text-align: center; }
  .quote-action { width: 100%; }
  .quote-action .btn { width: 100%; }
}



/* ══════════════════════════════════════════════════════════════════
   CRISP HIGH-CONTRAST UNIT ROWS (PERFECT READABILITY)
   ══════════════════════════════════════════════════════════════════ */
.unit-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.unit-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(19, 42, 78, 0.75) !important;
  border: 1px solid rgba(201, 169, 110, 0.28) !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.95rem !important;
  margin-bottom: 0.35rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

.ur-type {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  text-align: start !important;
}

.ur-type span:first-child,
.ur-type strong,
.ur-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.ur-area {
  color: #cbd5e1 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

.ur-price {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  text-align: end !important;
}

.ur-price-val {
  color: #e0c48a !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.ur-price-lbl {
  color: #38bdf8 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}



/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY & TOUCH TARGET OPTIMIZATION (LIGHTHOUSE 100)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn,
  .unit-cta,
  .cta-call,
  .unit-tab,
  .price-tab-btn,
  .price-book-btn,
  .unit-book-btn,
  .btn-wa-card,
  .custom-unit-opt {
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .faq-q {
    min-height: 52px !important;
    padding: 0.85rem 1rem !important;
  }
}

/* Ensure mobile nav drawer is hidden from screen readers when inactive */
#mobile-nav[hidden] {
  display: none !important;
}



/* ══════════════════════════════════════════════════════════════════
   HIGH CONTRAST FIX FOR LIGHTHOUSE ACCESSIBILITY (88 → 100)
   ══════════════════════════════════════════════════════════════════ */

/* Fix: all muted/light text must pass 4.5:1 ratio on dark backgrounds */
.text-muted, .var--text-muted {
  color: #94a3b8 !important; /* meets 4.5:1 on #0a1628 */
}

/* Stat labels on dark navy background */
.stat-label, .stat-label small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Price label in hero/table */
.ur-price-lbl {
  color: #7dd3fc !important; /* Bright sky blue - 5.2:1 on dark bg */
}

/* Form disclaimer */
.form-disclaimer {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer small text */
.footer-link, .footer-copy {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Badge text */
.badge-apts, .badge-townhouse, .badge-villas {
  color: #ffffff !important;
}

/* Designer tag */
.designer-tag {
  color: #ffffff !important;
}



/* ══════════════════════════════════════════════════════════════════
   SKIP NAVIGATION (LIGHTHOUSE KEYBOARD NAVIGATION)
   ══════════════════════════════════════════════════════════════════ */
.skip-nav {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  z-index: 99999 !important;
  background: #c9a96e !important;
  color: #0a1628 !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 0 0 8px 0 !important;
  transition: top 0.2s ease !important;
}
.skip-nav:focus {
  top: 0 !important;
}

/* Fix: heading order inside FAQ - use h3 not h4 for faq-q */
.faq-q[id] { display: block; }

/* ══════════════════════════════════════════════════════════════════
   CONTACT MENU DROPDOWN (replaces always-visible phone number)
   ══════════════════════════════════════════════════════════════════ */
.contact-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.contact-menu-trigger {
  display: flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.contact-menu-label {
  font-size: .8rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .contact-menu-label { display: none !important; }
}

/* Dropdown panel */
.contact-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #0d1f3c;
  border: 1px solid rgba(201,169,110,.25);
  border-radius: 14px;
  padding: .75rem;
  min-width: 230px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
}

html[dir="rtl"] .contact-dropdown {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-8px);
}

html[dir="ltr"] .contact-dropdown {
  right: auto;
  left: 0;
  transform: translateX(0) translateY(-8px);
}

.contact-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0) translateY(0) !important;
}

.contact-dropdown-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 .5rem .6rem;
  border-bottom: 1px solid rgba(201,169,110,.15);
  margin-bottom: .5rem;
}

.contact-dropdown-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s ease;
  margin-bottom: .35rem;
}

.contact-dropdown-item:last-child { margin-bottom: 0; }

.contact-dropdown-item svg {
  flex-shrink: 0;
  border-radius: 8px;
  padding: 6px;
  width: 32px !important;
  height: 32px !important;
}

.contact-item-call { color: #fff; }
.contact-item-call svg { background: rgba(201,169,110,.15); color: var(--gold); }
.contact-item-call:hover { background: rgba(201,169,110,.1); }

.contact-item-wa { color: #fff; }
.contact-item-wa svg { background: rgba(37,211,102,.12); color: #25D366; }
.contact-item-wa:hover { background: rgba(37,211,102,.1); }

.contact-item-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.contact-item-num {
  display: block;
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  direction: ltr;
}

/* Backdrop to close on outside click */
.contact-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.contact-backdrop.active { display: block; }

/* ══════════════════════════════════════════════════════════════════
   UNIT TABS — FORCE CLICKABLE (fix z-index / pointer-events block)
   ══════════════════════════════════════════════════════════════════ */
.units-tabs {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.unit-tab {
  position: relative !important;
  z-index: 11 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: rgba(201,169,110,0.2) !important;
}

.unit-tab:active {
  transform: scale(0.96) !important;
}

.units-grid {
  position: relative !important;
  z-index: 5 !important;
}


/* Unit card hidden state (toggled by JS tab filter) */
.unit-card.tab-hidden {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE UNIT TABS — PREMIUM REDESIGN (اختر الوحدة بوضوح)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Tab bar: compact scrollable row */
  .units-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: .5rem !important;
    padding: .5rem 1rem 1rem !important;
    margin-bottom: 1.5rem !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .units-tabs::before {
    content: 'اختر نوع الوحدة:';
    display: block;
    width: 100%;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .06em;
    text-align: center;
    margin-bottom: .35rem;
    flex-shrink: 0;
  }

  html[dir="ltr"] .units-tabs::before {
    content: 'Select Unit Type:';
  }

  /* Individual tab pill */
  .unit-tab {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    padding: .55em 1.3em !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    border: 2px solid rgba(201,169,110,.35) !important;
    background: rgba(10,22,40,.7) !important;
    color: rgba(255,255,255,.6) !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    transition: all .2s ease !important;
  }

  .unit-tab.active {
    background: linear-gradient(135deg, var(--gold), #e0c080) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
    box-shadow: 0 4px 16px rgba(201,169,110,.4) !important;
    transform: translateY(-1px) !important;
  }

  /* Section heading improvement */
  #units .section-title {
    font-size: 1.5rem !important;
    margin-bottom: .5rem !important;
  }

  /* Add breathing room between sections */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   UNIT TABS — LUXURY CLEAN BUTTONS (DESKTOP & MOBILE)
   ══════════════════════════════════════════════════════════════════ */
.units-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  z-index: 10 !important;
}

.unit-tab {
  padding: 0.65rem 1.4rem !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(201, 169, 110, 0.35) !important;
  background: #0d1e38 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.unit-tab:hover {
  border-color: var(--gold) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.unit-tab.active {
  background: linear-gradient(135deg, #c9a96e 0%, #dfc38d 100%) !important;
  border-color: #c9a96e !important;
  color: #0a1628 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(201, 169, 110, 0.45) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  .units-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0 0.25rem !important;
    margin-bottom: 1.25rem !important;
  }

  .unit-tab {
    width: 100% !important;
    padding: 0.7rem 0.5rem !important;
    font-size: 0.82rem !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   COMPACT LUXURY MOBILE UX (CLEAN & MINIMALIST)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ultra-sleek sticky bar on mobile */
  .sticky-mobile-bar {
    padding: 6px 12px !important;
    background: rgba(10, 22, 40, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(201, 169, 110, 0.3) !important;
  }

  .sticky-mobile-bar-inner {
    gap: 8px !important;
  }

  .sticky-mobile-bar {
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body {
    padding-bottom: 86px !important;
  }

  .sticky-bar-btn {
    height: 52px !important;
    min-height: 52px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    gap: 5px !important;
  }

  .sticky-bar-btn svg {
    width: 19px !important;
    height: 19px !important;
  }

  /* Compact unit cards */
  .unit-card {
    border-radius: 16px !important;
    margin-bottom: 0.5rem !important;
  }

  .unit-card-head {
    padding: 1.25rem 1.25rem 1rem !important;
  }

  .unit-card-name {
    font-size: 1.15rem !important;
    margin-bottom: 0.25rem !important;
  }

  .unit-card-sub {
    font-size: 0.78rem !important;
    margin-bottom: 0.5rem !important;
  }

  .unit-price-range-box {
    padding: 0.5rem 0.75rem !important;
    margin-top: 0.4rem !important;
    border-radius: 8px !important;
  }

  .unit-card-body {
    padding: 1rem 1.25rem 1.25rem !important;
  }

  .unit-rows {
    margin: 0.5rem 0 1rem !important;
    gap: 0.35rem !important;
  }

  .unit-row {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.78rem !important;
  }

  .unit-book-btn, .unit-cta {
    min-height: 44px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   ULTRA-LUXURY GLASSMORPHISM FOR STICKY & FLOATING BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.sticky-mobile-bar {
  background: rgba(10, 22, 40, 0.78) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.35) !important;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.sticky-bar-btn {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 1. Call Button - Dark Glass with Ice-Silver Highlight */
.sticky-bar-call {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}
.sticky-bar-call:hover, .sticky-bar-call:active {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* 2. WhatsApp Button - Emerald Crystal Glass */
.sticky-bar-wa {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.88) 0%, rgba(18, 140, 126, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}
.sticky-bar-wa:hover, .sticky-bar-wa:active {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.98) 0%, rgba(18, 140, 126, 0.98) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

/* 3. Book Now Button - Champagne Gold Frosted Glass */
.sticky-bar-book {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.92) 0%, rgba(243, 222, 171, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 22px rgba(201, 169, 110, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
  color: #0a1628 !important;
  font-weight: 800 !important;
}
.sticky-bar-book:hover, .sticky-bar-book:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(201, 169, 110, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* Shimmer animation across buttons */
.sticky-bar-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  animation: glassShimmer 3.5s infinite;
  pointer-events: none;
}

@keyframes glassShimmer {
  0% { left: -120%; }
  30%, 100% { left: 220%; }
}