:root { --bg:#2b0010; --surface:#3a0017; --muted:#cbbfa6; --text:#f5ecd6; --primary:#d4af37; --accent:#f6d26a; --border:#520022; --gold1:#c9961a; --gold2:#f6d26a; --maroonGlow:#6b0f2a; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:
  radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--gold1) 16%, transparent), transparent 60%),
  radial-gradient(1100px 800px at -10% 110%, color-mix(in srgb, var(--maroonGlow) 22%, transparent), transparent 60%),
  var(--bg);
  color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.container{ width:min(1280px,92vw); margin:0 auto; }
.row{ display:flex; }
.between{ justify-content:space-between }
.center{ align-items:center }
.gap{ gap:32px }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.section{ padding:80px 0; }
.section{ background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)); }
.section-title{ font-size:clamp(22px,2.6vw,34px); margin:0 0 24px; }
.section-title{ position:relative; display:inline-block }
.section-title:after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:999px; background:linear-gradient(90deg, transparent, var(--gold1), var(--gold2), transparent); opacity:.75 }
.muted{ color:var(--muted) }
.small{ font-size:14px }
.badge{ background:#0f1420; border:1px solid var(--border); color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px }
.dot{ width:6px; height:6px; background:var(--border); border-radius:50%; display:inline-block; margin:0 10px }

.site-header{ position:sticky; top:0; z-index:50; background:rgba(43,0,16,.86); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border) }
.site-header .container{ padding:14px 0 }
.brand{ display:flex; gap:10px; align-items:center }
.brand .logo{ height:40px }
.brand-text{ font-weight:700; letter-spacing:.3px }
.nav a{ color:var(--muted); text-decoration:none; margin-left:22px }
.nav .btn{ margin-left:14px }

/* Icons */
.icon{ width:16px; height:16px; margin-right:6px; display:inline-block; vertical-align:-2px; fill:currentColor }
.nav a .icon{ color:var(--muted) }
.nav a:hover .icon{ color:var(--primary) }

.hero{ position:relative; display:block; padding:0; border-bottom:1px solid var(--border); min-height:auto }
.hero .container{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:28px 0 48px }
.hero-content{ text-align:center; margin:0 auto }
.hero-content h1{ font-size:clamp(32px,5vw,52px); line-height:1.1; margin:0 0 12px }
.text-gold-gradient{ background:linear-gradient(135deg,var(--gold1),var(--gold2)); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Apply gold gradient to all major headings */
h1, .section-title, h3{ background:linear-gradient(135deg,var(--gold1),var(--gold2)); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Keep icons visible inside gradient headings */
h3 .icon{ color:var(--primary) }
.lead{ color:var(--muted); font-size:18px; margin:0 0 22px }
.cta-group{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.hero .trust{ margin-top:16px }
.hero-media{ position:relative; width:100%; height:56vh; min-height:420px; background:radial-gradient(1200px 400px at 70% -10%, #6b0f2a22, transparent), radial-gradient(800px 400px at 10% 110%, #d4af3718, transparent) }
.hero-media img{ display:block; width:100%; height:auto }

.cards .card{ background:var(--surface); border:1px solid var(--border); padding:18px; border-radius:14px }
.cards .card:hover{ border-color:color-mix(in srgb, var(--gold1) 40%, var(--border)); box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px color-mix(in srgb, var(--gold1) 30%, transparent) }

/* Apply same premium hover treatment to other sections */
.plan-card, .loc-card, .gallery-card{ transition:transform .25s ease, border-color .2s ease, box-shadow .3s ease }
.plan-card:hover, .loc-card:hover, .gallery-card:hover{ border-color:color-mix(in srgb, var(--gold1) 40%, var(--border)); box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px color-mix(in srgb, var(--gold1) 30%, transparent) }
.cards .card h3{ margin:4px 0 6px; font-size:clamp(16px,1.8vw,20px) }
.amenity-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:0 }
.amenity-list li{ background:var(--surface); border:1px solid var(--border); padding:12px 14px; border-radius:10px; color:var(--muted); transition:transform .2s ease, border-color .2s ease, background-color .2s ease }
.amenity-list li:hover{ transform:translateY(-2px); border-color:#6b0f2a; background-color:#2b0012 }

.plans .plans-wrap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.plan-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px }
.plan-thumb{ height:200px; background:linear-gradient(135deg,#22000d,#150009); border:1px dashed #5a1a2a; border-radius:10px; margin-bottom:12px; background-size:cover; background-position:center }
.plan-thumb.has-img{ border-style:solid; border-color:var(--border) }

.location .ticks{ list-style:none; padding:0; margin:0 }
.location .ticks li{ position:relative; padding-left:24px; margin:10px 0; color:var(--muted) }
.location .ticks li:before{ content:""; position:absolute; left:0; top:8px; width:10px; height:10px; background:var(--accent); border-radius:2px }
.map-skel{ height:360px; border-radius:12px; border:1px solid var(--border); background:#1a0008; overflow:hidden }
.map-embed{ width:100%; height:100%; border:0 }
/* Location grid */
.loc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.loc-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px }
.loc-card h3{ margin:0 0 8px; font-size:18px }

.lead .row{ align-items:stretch }
.form-col{ flex:1 }
.card-col{ width:360px; max-width:100% }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0 16px }
.field{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted) }
.field input, .field select{ background:#0b1016; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:12px 12px; outline:none }
.field input:focus, .field select:focus{ border-color:#d4af37; box-shadow:0 0 0 3px #d4af3722 }
.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:12px; padding:12px 16px; border:1px solid var(--border); color:var(--text); background:#12161c; transition:.2s ease all; font-weight:600 }
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:linear-gradient(135deg,var(--gold1),var(--gold2)); border-color:#b18e2c; color:#2b0010; text-shadow:none; box-shadow:0 2px 0 rgba(0,0,0,.12) inset }
.btn-primary:hover{ filter:brightness(1.04); box-shadow:0 3px 0 rgba(0,0,0,.16) inset; color:#2b0010 }
/* Ensure header Enquire button uses main CTA colors, not nav link color */
.nav a.btn-primary{ color:#2b0010 }
.nav a.btn-primary:hover{ color:#2b0010 }
.btn-ghost{ background:#0c1117 }
.btn-whatsapp{ background:#22c55e; color:#07120a; border-color:#129a43 }
.btn-lg{ padding:14px 20px }
.btn-sm{ padding:8px 12px; border-radius:10px }
.btn-block{ width:100% }
.contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; height:100%; display:flex; flex-direction:column; gap:12px }
.contact-actions{ display:flex; flex-direction:column; gap:10px }
.toast{ background:#2f0a19; border:1px solid #5a1a2a; color:#f3e8c0; padding:10px 12px; border-radius:10px; margin-top:8px }

.site-footer{ border-top:1px solid var(--border); padding:18px 0; background:#1a0008 }

.regulatory{ background:#1a0008; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.reg-wrap{ display:grid; grid-template-columns:2fr 1fr 3fr; gap:20px; padding:20px 0; align-items:center }
.reg-brand{ display:flex; align-items:center; gap:12px }
.reg-brand img{ height:clamp(44px, 7vw, 72px) }
.reg-meta{ display:flex; flex-direction:column; gap:4px }
.reg-qr img{ height:84px; width:84px; border:1px solid var(--border); border-radius:8px; background:#0f141b }
.reg-disclaimer h3{ margin:0 0 8px; font-size:16px }
.reg-disclaimer p{ margin:0 }
@media (max-width: 920px){
  .reg-wrap{ grid-template-columns:1fr; text-align:center }
  .reg-brand{ justify-content:center }
  .reg-qr{ justify-self:center }
}

/* Gallery grid */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; justify-content:center }
.gallery-card{ position:relative; display:flex; align-items:flex-end; justify-content:flex-start; height:220px; border-radius:12px; text-decoration:none; color:var(--text); padding:10px; border:1px solid var(--border); background:linear-gradient(135deg,#22000d,#150009); overflow:hidden; cursor:pointer; transition:transform .25s ease, background-size .4s ease, border-color .2s ease }
.gallery-card span{ background:rgba(0,0,0,.35); padding:6px 10px; border-radius:8px; border:1px solid var(--border); font-size:12px; color:var(--muted) }
.gallery-card:hover{ transform:translateY(-2px) scale(1.02); border-color:#5a1a2a; background-size:110% !important }

@media (max-width: 920px){
  .grid-3{ grid-template-columns:1fr 1fr }
  .amenity-list{ grid-template-columns:1fr 1fr }
  .plans .plans-wrap{ grid-template-columns:1fr 1fr }
  .loc-grid{ grid-template-columns:1fr 1fr }
  .row{ flex-direction:column }
  .nav{ display:none }
  .gallery-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 560px){
  .grid-3{ grid-template-columns:1fr }
  .amenity-list{ grid-template-columns:1fr }
  .plans .plans-wrap{ grid-template-columns:1fr }
  .loc-grid{ grid-template-columns:1fr }
  .hero-content h1{ font-size:clamp(28px,7vw,36px) }
  .hero{ min-height:62vh }
  .gallery-card{ height:180px }
}

/* Wide screens */
@media (min-width: 1280px){
  .hero{ min-height:84vh }
  .gallery-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}

@media (min-width: 1440px){
  .container{ width:min(1400px,92vw) }
}

/* Banking partners */
.partners{ padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#1a0008 }
.partners .strip{ position:relative; overflow:hidden }
.partners .track{ display:flex; gap:36px; align-items:center; animation:scroll-x 28s linear infinite; width:max-content }
.partners .logo{ height:56px; width:auto; filter:grayscale(100%) brightness(.95) contrast(1.05); opacity:.9; transition:filter .2s ease, opacity .2s ease }
.partners .logo:hover{ filter:none; opacity:1 }
@keyframes scroll-x{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width: 560px){
  .partners .logo{ height:44px }
}

/* Brands wall */
.brands{ padding:40px 0; border-top:1px solid var(--border); background:#1a0008 }
.brand-grid{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center }
.brand-card{ display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:0; padding:0; height:auto }
.brand-card:hover{ transform:none }
.brand-card img{ height:clamp(56px, 10vw, 110px); max-width:100%; filter:grayscale(100%) brightness(.95) contrast(1.05); opacity:.9; transition:filter .2s ease, opacity .2s ease }
.brand-card:hover img{ filter:none; opacity:1 }
@media (max-width: 920px){
  .brand-grid{ gap:20px }
}
@media (max-width: 560px){
  .brand-grid{ gap:16px }
}

/* Modal */
.modal[hidden]{ display:none }
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px) }
.modal-panel{ position:relative; width:min(560px,92vw); background:#0c1117; border:1px solid var(--border); border-radius:14px; padding:18px }
.modal-close{ position:absolute; top:8px; right:8px; background:#10151c; border:1px solid var(--border); color:var(--muted); border-radius:10px; width:32px; height:32px; cursor:pointer }
.modal-form{ display:grid; gap:10px; margin-top:8px }