:root {
  --accent: #d0b36c;
  --dark: #131619;
  --text: #2b2b2b;
  --white: #ffffff;
  --soft: #f6f4ef;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: #fff; line-height: 1.7; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { max-width: 1160px; margin: auto; padding: 0 20px; }
.section-kicker { text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-size: .75rem; font-weight: 700; margin-bottom: 14px; }
.section-intro { max-width: 760px; color: #666; margin: 10px auto 0; text-align: center; }

.mall-navbar {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: min(1160px, calc(100% - 24px)); z-index: 1000;
  background: rgba(19,22,25,0.72); backdrop-filter: blur(12px); border-radius: 22px; border: 1px solid rgba(255,255,255,.08);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; gap: 18px; }
.logo-wrap { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .88rem; }
.mall-logo { height: 56px; width: auto; object-fit: contain; }
.mall-nav { display: flex; gap: 22px; }
.mall-nav a { color: #fff; font-weight: 500; }
.nav-toggle { display: none; background: transparent; border: 0; }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; }

.mall-hero {
  min-height: 88vh; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.58)), url('mall-wasl.jpg') center/cover no-repeat;
  display:flex; align-items:center; color:#fff; text-align:center;
}
.hero-inner { padding-top: 140px; padding-bottom: 80px; }
.mall-hero h1 { font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: 1.03; max-width: 980px; margin: 0 auto; }
.hero-subtext { max-width: 830px; margin: 18px auto 0; font-size: 1.08rem; color: #ececec; }
.overlay { display:none; }

.mall-section { padding: 86px 0; }
.alt-bg { background: var(--soft); }
.intro-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; }
.intro-grid h2, .mall-section h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--dark); margin-bottom: 16px; text-align: center; }
.intro-grid h2 { text-align: left; }
.intro-grid p { color:#555; margin-bottom: 14px; }
.stat-panel { display:grid; gap:16px; }
.stat-panel div { background:#fff; border:1px solid #eee2c4; border-radius:22px; padding:22px; box-shadow:0 14px 34px rgba(0,0,0,.06); }
.stat-panel strong { display:block; color:var(--dark); font-size:1.1rem; margin-bottom:6px; }
.stat-panel span { color:#666; }

.feature-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; margin-top:28px; }
.feature-card { background:#fff; border-radius:22px; padding:24px; box-shadow:0 14px 36px rgba(0,0,0,.06); }
.feature-card h3 { color:var(--dark); font-size:1.5rem; margin-bottom:14px; }
.facilities-list { list-style:none; display:grid; gap:10px; }
.facilities-list li::before { content:'✔ '; color:var(--accent); font-weight:700; }

.layout-section { background: linear-gradient(135deg, #f3f3f3, #ffffff); }
.layout-grid, .gallery-grid { display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:28px; }
.layout-card {
  background:#fff; border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.08); overflow:hidden; text-align:center;
}
.layout-card img, .gallery-grid img {
  width:100%; height:280px; object-fit:cover; cursor:pointer; transition:transform .3s ease;
}
.layout-card img:hover, .gallery-grid img:hover { transform: scale(1.02); }
.layout-card p { padding:16px; font-weight:600; color:var(--dark); }
.gallery-grid img { border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.08); }

.leasing-cta {
  background: var(--dark); color:#fff; text-align:center; border-top:4px solid var(--accent);
}
.leasing-cta h2 { color:#fff; }
.leasing-cta p { color:#e4e4e4; max-width:760px; margin:0 auto; }
.cta-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.cta-btn, .ghost-btn {
  display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:999px; font-weight:700; transition:.28s ease;
}
.cta-btn { background:var(--accent); color:var(--dark); }
.cta-btn:hover { background:#bf9f57; }
.ghost-btn { border:1px solid rgba(255,255,255,.24); color:#fff; }
.ghost-btn.dark:hover { background:rgba(255,255,255,.08); }

.mall-footer { background:#0f0f0f; color:#aaa; text-align:center; padding:28px 20px; }
.whatsapp-float {
  position:fixed; bottom:20px; left:20px; z-index:1500; width:56px; height:56px; background:#25d366; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.whatsapp-float img { width:28px; height:28px; filter:brightness(0) invert(1); }

.layout-modal {
  display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); justify-content:center; align-items:center; flex-direction:column; padding:20px;
}
.layout-modal-content { max-width:96vw; max-height:84vh; border-radius:14px; box-shadow:0 4px 40px rgba(0,0,0,.5); }
.layout-close {
  position:absolute; top:18px; right:24px; color:#fff; font-size:42px; line-height:1; background:transparent; border:0; cursor:pointer;
}
.modal-caption { color:#fff; margin-top:12px; text-align:center; }

@media (max-width: 900px) {
  .intro-grid, .feature-grid, .layout-grid, .gallery-grid { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .nav-toggle { display:block; }
  .mall-nav {
    display:none; position:absolute; top:calc(100% + 10px); left:8px; right:8px; background:rgba(19,22,25,.96); border-radius:18px; padding:16px; flex-direction:column; gap:12px;
  }
  .mall-nav.active { display:flex; }
  .logo-wrap span { display:none; }
}
@media (max-width: 640px) {
  .mall-logo { height:48px; }
  .mall-section { padding:72px 0; }
  .layout-card img, .gallery-grid img { height:230px; }
}