/**
 * AlJar JBD — Main Landing CSS
 * Vanilla CSS — No Tailwind dependency
 * Colors: navy #07131F | gold #C4A47C | red #C91626 | paper #FAF9F5
 */

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #07131F;
  --navy-l:    #0d2235;
  --red:       #C91626;
  --red-d:     #A8101D;
  --gold:      #C4A47C;
  --gold-l:    #F3EFE9;
  --paper:     #FAF9F5;
  --ink:       #1A1D20;
  --muted:     #5A626A;
  --white:     #ffffff;
  --wa:        #128c7e;
  --wa-d:      #075e54;
  --font-ar:   'Cairo', sans-serif;
  --font-en:   'Barlow', 'Inter', sans-serif;
  --font-ser:  'Playfair Display', serif;
  --font-gar:  'Cormorant Garamond', serif;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 24px rgba(7,19,31,0.12);
  --shadow-lg: 0 16px 48px rgba(7,19,31,0.22);
  --max-w:     1180px;
}

html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--font-ar);
  background: var(--paper);
  color: var(--ink);
  direction: rtl;
  overflow-x: hidden;
  padding-bottom: 80px;
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

a { text-decoration: none; color: inherit; transition: color .2s; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }
.en-text   { font-family: var(--font-en); direction: ltr; display: inline-block; }
.text-gold { color: var(--gold); }
.text-red  { color: var(--red); }
.text-navy { color: var(--navy); }
.text-muted{ color: var(--muted); }
.text-white{ color: var(--white); }
.font-bold { font-weight: 700; }
.font-black{ font-weight: 900; }
.section-divider { height:3px; width:3.5rem; background:var(--red); border-radius:99px; margin:0.5rem auto 0; }
.md-hidden { display: flex; }
.desktop-only { display: none; }
@media (min-width:768px) { .md-hidden { display:none!important; } .desktop-only { display:flex; } }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--red); color: var(--white);
  font-family: var(--font-ar); font-weight: 700; font-size: .8rem;
  padding: .7rem 1.4rem; border-radius: var(--radius-sm);
  border: none; cursor: pointer; transition: background .2s, transform .15s;
  text-decoration: none;
}
.btn-primary:hover { background: var(--red-d); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-full   { width: 100%; }
.btn-sm     { padding: .55rem 1rem; font-size: .75rem; }
.btn-navy   { background: var(--navy); }
.btn-navy:hover { background: var(--navy-l); }
.btn-white  { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--gold-l); }
.btn-wa     { background: var(--wa); }
.btn-wa:hover { background: var(--wa-d); }
.btn-gold   { background: var(--gold); color: var(--navy); }

/* ─── Section Eyebrow ─────────────────────────────────────────────────────── */
.section-eyebrow {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin-bottom: .4rem;
}
.section-eyebrow-gold { color: var(--gold); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.section-header h2 { font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 900; color: var(--navy); }
.section-header p  { font-size: .82rem; color: var(--muted); margin-top: .5rem; line-height: 1.7; }

/* ─── Sticky Nav ──────────────────────────────────────────────────────────── */
.sticky-nav-wrap { position: sticky; top: 0; z-index: 50; }
.glass-nav {
  background: rgba(7,19,31,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196,164,124,.15);
  padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
@media (min-width:768px) { .glass-nav { padding: .85rem 2rem; } }

.nav-brand { display:flex; align-items:center; gap:.6rem; color:var(--white); }
.nav-brand-code {
  font-family: var(--font-en); font-weight: 900;
  font-size: 1.2rem; letter-spacing: .02em; color: var(--white);
  border-left: 1px solid rgba(196,164,124,.3); padding-left: .6rem;
}
@media (min-width:768px) { .nav-brand-code { font-size: 1.5rem; } }
.nav-brand-info { display:flex; flex-direction:column; line-height:1; }
.nav-brand-info strong {
  font-family: var(--font-en); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.nav-brand-info small {
  font-family: var(--font-en); font-size: .5rem;
  color: rgba(255,255,255,.4); margin-top:1px;
}
.nav-actions { display:flex; align-items:center; gap:.7rem; }
@media (min-width:768px) { .nav-actions { gap:1rem; } }
.nav-phone {
  font-family: var(--font-en); color: var(--white); font-weight: 700;
  font-size: .75rem; transition: color .2s;
}
.nav-phone:hover { color: var(--gold); }
@media (min-width:768px) { .nav-phone { font-size: .88rem; } }
.btn-nav-cta {
  background: var(--red); color: var(--white);
  padding: .45rem .9rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .68rem;
  transition: background .2s; box-shadow: 0 2px 8px rgba(201,22,38,.3);
}
.btn-nav-cta:hover { background: var(--red-d); }
@media (min-width:768px) { .btn-nav-cta { font-size: .78rem; padding: .5rem 1.25rem; } }

/* ─── Hero Section ────────────────────────────────────────────────────────── */
.hero-section {
  position: relative; min-height: 85vh;
  display: flex; align-items: center;
  padding: 1.5rem 0 3rem;
  background: var(--navy); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.3) contrast(1.05); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--navy) 0%, rgba(7,19,31,.95) 60%, transparent 100%);
}
.hero-container { position:relative; z-index:1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width:1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 3rem; }
}

.hero-content { color: var(--white); text-align: center; }
@media (min-width:1024px) { .hero-content { text-align: right; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(196,164,124,.3);
  font-size: .7rem; color: var(--gold); font-weight: 700;
  margin-bottom: 1rem;
}
.hero-badge-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--red); animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.2)} }

.hero-title {
  font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 900;
  line-height: 1.2; margin-bottom: .75rem;
}
.hero-title .en-sub {
  font-family: var(--font-ser); font-style: italic; font-weight: 400;
  font-size: clamp(.9rem, 2vw, 1.4rem); color: var(--gold);
  letter-spacing: .08em; display: block; margin-top: .4rem;
}
.hero-subtitle {
  font-size: .82rem; color: rgba(255,255,255,.8);
  line-height: 1.8; max-width: 580px;
  margin: 0 auto .75rem;
}
@media (min-width:1024px) { .hero-subtitle { margin: 0 0 .75rem; } }
.hero-tags { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
@media (min-width:1024px) { .hero-tags { justify-content:flex-start; } }
.hero-tag {
  font-size: .7rem; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.05); padding: .3rem .65rem; border-radius: 6px;
}
.hero-tag i { color: var(--gold); font-size: .6rem; margin-left: .3rem; }

/* Lead Card */
.lead-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--gold);
  max-width: 420px; margin: 0 auto;
  width: 100%;
}
@media (min-width:768px) { .lead-card { padding: 2rem; } }
.lead-card-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.lead-card-sub { font-size: .72rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }

.lead-form { display:flex; flex-direction:column; gap:.75rem; }
.form-group { display:flex; flex-direction:column; gap:.3rem; }
.form-label { font-size: .72rem; font-weight: 700; color: var(--navy); }
.form-input, .form-select {
  height: 2.6rem; width: 100%;
  background: rgba(196,164,124,.12);
  border: 1px solid rgba(196,164,124,.25);
  border-radius: var(--radius-sm); padding: 0 .85rem;
  font-family: var(--font-ar); font-size: .82rem; color: var(--ink);
  transition: border-color .2s;
  appearance: none; -webkit-appearance: none;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,164,124,.15);
}
.form-input::placeholder { color: rgba(90,98,106,.5); }

/* ─── Metrics Bar ─────────────────────────────────────────────────────────── */
.metrics-section { background: var(--white); padding-bottom: 1.5rem; }
@media (min-width:768px) { .metrics-section { padding-bottom: 3rem; } }
.metrics-inner {
  background: var(--navy); color: var(--white);
  border: 1px solid rgba(196,164,124,.2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  margin-top: -1.5rem; position: relative; z-index: 20;
  overflow: hidden;
}
.metrics-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
}
@media (min-width:768px) { .metrics-grid { grid-template-columns: repeat(4,1fr); } }
.metric-item {
  padding: .85rem 1rem; text-align: center;
  border-bottom: 1px solid rgba(196,164,124,.1);
}
@media (min-width:768px) {
  .metric-item {
    padding: 1.5rem; border-bottom: none;
    border-left: 1px solid rgba(196,164,124,.1);
  }
  .metric-item:last-child { border-left: none; }
}
.metric-item:nth-child(odd) { border-right: 1px solid rgba(196,164,124,.1); }
@media (min-width:768px) { .metric-item:nth-child(odd) { border-right: none; } }
.metric-label {
  display: block; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold); font-weight: 600; margin-bottom: .2rem;
}
.metric-value {
  font-family: var(--font-en); font-size: 1.6rem; font-weight: 900; color: var(--white);
  display: block;
}
@media (min-width:768px) { .metric-value { font-size: 2.2rem; } }
.metric-sub { font-size: .6rem; color: rgba(255,255,255,.5); display: block; margin-top: .15rem; }

/* ─── Pain Points Section ─────────────────────────────────────────────────── */
.pain-section {
  padding: 2.5rem 0; background: var(--paper);
  border-bottom: 1px solid var(--gold-l);
}
@media (min-width:768px) { .pain-section { padding: 4rem 0; } }
.pain-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.5rem; }
@media (min-width:768px) { .pain-grid { grid-template-columns: repeat(3,1fr); } }
.pain-card {
  background: var(--white); padding: 1.25rem;
  border-radius: var(--radius); border-right: 4px solid var(--red);
  box-shadow: 0 2px 12px rgba(7,19,31,.07);
}
.pain-icon { font-size: 1.3rem; color: var(--red); margin-bottom: .5rem; }
.pain-title { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
@media (min-width:768px) { .pain-title { font-size: 1rem; } }
.pain-desc { font-size: .75rem; color: var(--muted); line-height: 1.7; }

.solution-box {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid rgba(196,164,124,.3);
}
@media (min-width:768px) { .solution-box { padding: 2rem; } }
.solution-title { font-size: .88rem; font-weight: 700; color: var(--gold); margin-bottom: .6rem; }
@media (min-width:768px) { .solution-title { font-size: 1rem; } }
.solution-text { font-size: .78rem; color: rgba(255,255,255,.8); line-height: 1.8; margin-bottom: 1rem; }

/* ─── Why Section ─────────────────────────────────────────────────────────── */
.why-section { padding: 2.5rem 0; background: var(--white); border-bottom: 1px solid var(--gold-l); }
@media (min-width:768px) { .why-section { padding: 4rem 0; } }
.why-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width:1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-points { display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; }
.why-point {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--gold-l);
  border-radius: var(--radius); padding: 1rem;
}
.why-point-num {
  width: 2.2rem; height: 2.2rem; min-width: 2.2rem;
  background: rgba(196,164,124,.12); color: var(--gold);
  font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.why-point-title { font-size: .82rem; font-weight: 700; color: var(--navy); }
@media (min-width:768px) { .why-point-title { font-size: .9rem; } }
.why-point-desc { font-size: .72rem; color: var(--muted); line-height: 1.7; margin-top: .2rem; }
.why-image-wrap {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid rgba(196,164,124,.25);
  height: 280px; background: var(--navy);
  display: none;
}
@media (min-width:640px) { .why-image-wrap { display: block; } }
@media (min-width:768px) { .why-image-wrap { height: 400px; } }
.why-image { width:100%; height:100%; object-fit:cover; }
.why-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.3); font-size: 1rem;
}

/* ─── Partners Section ────────────────────────────────────────────────────── */
.partners-section { padding: 2.5rem 0; background: var(--navy); color: var(--white); }
@media (min-width:768px) { .partners-section { padding: 4rem 0; } }
.partners-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
}
@media (min-width:1024px) { .partners-grid { grid-template-columns: 5fr 7fr; } }
.partners-header .section-eyebrow { color: var(--gold); }
.partners-header h2 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 800; }
.partners-cards {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
}
@media (min-width:640px) { .partners-cards { grid-template-columns: 1fr 1fr; } }
.partner-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 1rem;
}
.partner-name { font-size: .78rem; font-weight: 700; color: var(--gold); display:block; margin-bottom: .4rem; }
.partner-desc { font-size: .7rem; color: rgba(255,255,255,.6); line-height: 1.7; }
@media (min-width:768px) { .partner-desc { font-size: .75rem; } }

/* ─── Units Section ───────────────────────────────────────────────────────── */
.units-section { padding: 2.5rem 0; background: var(--white); }
@media (min-width:768px) { .units-section { padding: 4rem 0; } }
.units-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem;
}
@media (min-width:768px) { .units-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px) { .units-grid { grid-template-columns: repeat(3,1fr); } }

.unit-card {
  background: var(--paper); border: 1px solid rgba(196,164,124,.2);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow .2s, transform .2s;
}
.unit-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.unit-card-featured {
  background: var(--white); border: 2px solid var(--gold);
  box-shadow: var(--shadow);
  position: relative;
}
.unit-featured-badge {
  position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--white);
  font-size: .6rem; font-weight: 700; padding: .25rem .75rem; border-radius: 99px;
  white-space: nowrap;
}
.unit-type {
  font-size: .68rem; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .1em; display:block; margin-bottom: .3rem;
}
.unit-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .75rem; }
.unit-size-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; padding: .5rem 0;
  border-top: 1px solid rgba(196,164,124,.3); border-bottom: 1px solid rgba(196,164,124,.3);
  margin-bottom: .6rem;
}
.unit-size-row span { color: var(--muted); }
.unit-size-row strong { font-family: var(--font-en); color: var(--navy); }
.unit-price-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); border: 1px solid var(--gold-l);
  border-radius: var(--radius-sm); padding: .6rem .75rem; margin-bottom: .75rem;
}
.unit-card-featured .unit-price-row { background: var(--paper); }
.unit-price-row span { font-size: .7rem; color: var(--muted); }
.unit-price { font-family: var(--font-en); font-size: 1.1rem; font-weight: 900; color: var(--red); }
.unit-price small { font-family: var(--font-ar); font-size: .65rem; font-weight: 700; }
.unit-features { display:flex; flex-direction:column; gap:.45rem; margin-bottom: 1rem; }
.unit-feature { display:flex; align-items:center; gap:.5rem; font-size: .72rem; color: var(--muted); }
.unit-feature i { color: var(--red); font-size: .6rem; }
.unit-cta-btn {
  display: block; text-align: center;
  padding: .6rem; border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 700;
  transition: background .2s;
}

.payment-cta-box {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 1rem;
  border: 1px solid rgba(196,164,124,.2);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
@media (min-width:768px) {
  .payment-cta-box { flex-direction: row; text-align: right; }
}
.payment-cta-title { font-size: .95rem; font-weight: 700; color: var(--gold); }
.payment-cta-sub { font-size: .78rem; color: rgba(255,255,255,.7); margin-top: .2rem; }

/* ─── Aston Section ───────────────────────────────────────────────────────── */
.aston-section {
  padding: 2.5rem 0; background: var(--navy); color: var(--white);
  border-top: 1px solid rgba(196,164,124,.1);
}
@media (min-width:768px) { .aston-section { padding: 4rem 0; } }
.aston-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width:1024px) { .aston-grid { grid-template-columns: 8fr 4fr; } }
.aston-content .section-eyebrow { color: var(--gold); }
.aston-content h2 { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 900; margin-bottom: .75rem; }
.aston-desc { font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.9; }
.aston-badge-wrap {
  background: rgba(255,255,255,.05); border: 1px solid rgba(196,164,124,.25);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
}
.aston-badge-name {
  font-family: var(--font-gar); font-size: 1.1rem;
  letter-spacing: .15em; color: var(--gold); display:block; margin-bottom: .4rem;
}
.aston-badge-desc { font-size: .68rem; color: rgba(255,255,255,.6); margin-bottom: .6rem; }
.aston-badge-divider { height:1px; background:rgba(196,164,124,.2); width:30%; margin:0 auto .5rem; }
.aston-badge-meta { font-size: .55rem; color: rgba(255,255,255,.35); letter-spacing: .18em; text-transform: uppercase; }
.aston-badge-img { width: 100%; max-width: 180px; margin: 0 auto .75rem; }

/* ─── Location Section ────────────────────────────────────────────────────── */
.location-section { padding: 2.5rem 0; background: var(--paper); border-top: 1px solid var(--gold-l); border-bottom: 1px solid var(--gold-l); }
@media (min-width:768px) { .location-section { padding: 4rem 0; } }
.location-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
@media (min-width:1024px) { .location-grid { grid-template-columns: 1fr 1fr; } }
.location-desc { font-size: .82rem; color: var(--muted); line-height: 1.8; margin: .75rem 0 1rem; }
.location-points { display:flex; flex-direction:column; gap:.5rem; margin-bottom: 1rem; }
.location-point {
  display: flex; align-items: center; gap: .75rem;
  background: var(--white); border: 1px solid rgba(196,164,124,.15);
  border-radius: var(--radius-sm); padding: .75rem;
}
.location-point i { color: var(--red); font-size: .82rem; min-width: 1rem; }
.location-point-text { font-size: .8rem; font-weight: 700; color: var(--navy); }
@media (min-width:768px) { .location-point-text { font-size: .9rem; } }
.location-map-wrap { border: 1px solid rgba(196,164,124,.25); background: var(--white); border-radius: var(--radius); padding: .5rem; box-shadow: var(--shadow); }
.location-map { width:100%; height:280px; background:var(--navy); border-radius:var(--radius-sm); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
@media (min-width:768px) { .location-map { height: 340px; } }
.map-svg { position:absolute; inset:0; width:100%; height:100%; opacity:.1; }
.map-pin-wrap { position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; z-index:2; }
.map-ping { position:absolute; inset:-1rem; width:4rem; height:4rem; border-radius:50%; background:rgba(201,22,38,.25); animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.5);opacity:0} }
.map-pin-label { background:var(--red); color:var(--white); font-weight:800; font-size:.65rem; padding:.45rem 1rem; border-radius:var(--radius-sm); box-shadow:var(--shadow); position:relative; z-index:3; white-space:nowrap; }
.map-pin-sub { font-size:.55rem; color:var(--gold); margin-top:.4rem; font-weight:700; }

/* ─── Gallery Section ─────────────────────────────────────────────────────── */
.gallery-section { padding: 2.5rem 0; background: var(--white); }
@media (min-width:768px) { .gallery-section { padding: 4rem 0; } }
.gallery-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; grid-auto-rows: 130px; }
@media (min-width:768px) { .gallery-grid { grid-auto-rows: 200px; } }
.gallery-item { border-radius: var(--radius-sm); overflow:hidden; box-shadow: 0 2px 12px rgba(7,19,31,.1); background:var(--navy); }
.gallery-item-wide { grid-column: span 2; }
.gallery-img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-item:hover .gallery-img { transform: scale(1.04); }
.gallery-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(196,164,124,.4); font-size:.8rem; }

/* Slider */
.slider-section { margin-bottom: 2rem; overflow: hidden; }
.slider-wrap { display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.slider-wrap::-webkit-scrollbar { display:none; }
.slider-item { min-width: min(85vw, 500px); height: 240px; scroll-snap-align:start; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.slider-item img { width:100%; height:100%; object-fit:cover; }

/* ─── Lead Form Section ───────────────────────────────────────────────────── */
.lead-section { padding: 3rem 0; background: var(--navy); color: var(--white); position:relative; }
.lead-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
@media (min-width:1024px) { .lead-grid { grid-template-columns: 7fr 5fr; } }
.lead-text { text-align:center; }
@media (min-width:1024px) { .lead-text { text-align:right; } }
.lead-text .section-eyebrow { color: var(--gold); }
.lead-text h2 { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; }
.lead-text p { font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.8; margin-top: .75rem; max-width: 520px; margin-inline: auto; }
@media (min-width:1024px) { .lead-text p { margin-inline: 0; } }

/* ─── FAQ Section ─────────────────────────────────────────────────────────── */
.faq-section { padding: 2.5rem 0; background: var(--paper); border-top: 1px solid var(--gold-l); }
@media (min-width:768px) { .faq-section { padding: 4rem 0; } }
.faq-inner { max-width: 780px; margin: 0 auto; }
.faq-list { display:flex; flex-direction:column; gap:.65rem; }
.faq-item {
  background: var(--white); border: 1px solid rgba(196,164,124,.15);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 6px rgba(7,19,31,.06);
}
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.1rem; font-weight: 700; color: var(--navy); font-size: .85rem;
  cursor: pointer; user-select: none; list-style: none;
}
@media (min-width:768px) { .faq-question { font-size: .95rem; } }
.faq-question::-webkit-details-marker { display: none; }
.faq-toggle { color: var(--red); font-size: 1.1rem; font-weight: 400; line-height:1; }
details[open] .faq-toggle-plus { display: none; }
.faq-toggle-minus { display: none; }
details[open] .faq-toggle-minus { display: inline; }
.faq-answer {
  padding: .75rem 1.1rem 1.1rem;
  font-size: .78rem; color: var(--muted); line-height: 1.8;
  border-top: 1px solid rgba(196,164,124,.15);
}
@media (min-width:768px) { .faq-answer { font-size: .85rem; } }

/* ─── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: #040D15; color: var(--white); padding: 2.5rem 0; border-top: 1px solid rgba(196,164,124,.15); }
@media (min-width:768px) { .site-footer { padding: 4rem 0; } }
.footer-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media (min-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer-logo { font-family:var(--font-en); font-weight:800; font-size:.9rem; letter-spacing:.1em; display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
@media (min-width:768px) { .footer-logo { font-size:1rem; } }
.footer-badge { font-size:.55rem; background:rgba(196,164,124,.15); color:var(--gold); padding:.2rem .5rem; border-radius:4px; letter-spacing:.15em; text-transform:uppercase; }
.footer-desc { font-size:.75rem; color:rgba(255,255,255,.55); line-height:1.8; max-width:380px; }
.footer-disclaimer { font-size:.68rem; color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:.75rem; }
.footer-link { font-weight:700; font-size:.75rem; color:var(--gold); text-decoration:underline; text-underline-offset:4px; transition:color .2s; }
.footer-link:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; padding-top:1rem; font-size:.65rem; color:rgba(255,255,255,.4); }

/* ─── Mobile Bottom Bar ───────────────────────────────────────────────────── */
.mobile-cta-bar {
  position: fixed; bottom: .75rem; left: .75rem; right: .75rem; z-index: 40;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(196,164,124,.2); border-radius: var(--radius);
  padding: .5rem; gap: .5rem;
  box-shadow: 0 16px 45px rgba(7,19,31,.25);
}
.mobile-cta-btn {
  flex: 1; display:flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius: var(--radius-sm); padding: .65rem;
  font-weight: 700; font-size: .75rem; color: var(--white);
  transition: opacity .2s;
}
.mobile-cta-btn:active { opacity: .8; }
.mobile-cta-call { background: var(--navy); }
.mobile-cta-wa   { background: var(--wa); }

/* ─── Desktop Float Buttons ───────────────────────────────────────────────── */
.desktop-float { position:fixed; bottom:1.5rem; left:1.5rem; z-index:40; flex-direction:column; gap:.75rem; }
.float-btn {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.2rem; color: var(--white);
  box-shadow: var(--shadow-lg); transition: transform .25s;
}
.float-btn:hover { transform: scale(1.1); }
.float-wa   { background: var(--wa); }
.float-wa:hover { background: var(--wa-d); }
.float-call { background: var(--navy); border: 1px solid rgba(196,164,124,.3); }
.float-call i { color: var(--gold); }

/* ─── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7,19,31,.85); backdrop-filter: blur(6px);
  display: none; align-items:center; justify-content:center;
  padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-card {
  background: var(--white); border-radius: var(--radius);
  padding: 2rem 1.5rem; max-width: 380px; width: 100%;
  text-align: center; box-shadow: var(--shadow-lg);
  border-top: 8px solid var(--gold);
  animation: modalIn .3s ease;
}
@keyframes modalIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal-card-error { border-top-color: var(--red); }
.modal-icon { width:3.5rem; height:3.5rem; border-radius:50%; background:#f0faf0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#22c55e; margin:0 auto 1rem; border:1px solid #dcfce7; }
.modal-icon-error { background:#fff5f5; color:var(--red); border-color:#fecaca; }
.modal-title { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.modal-desc { font-size:.78rem; color:var(--muted); line-height:1.7; margin-bottom:1.25rem; }
.modal-close-btn {
  width: 100%; background: var(--navy); color: var(--white);
  font-family: var(--font-ar); font-weight: 700; font-size: .82rem;
  padding: .7rem; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .2s;
}
.modal-close-btn:hover { background: var(--navy-l); }

/* ─── Tracking Toast ──────────────────────────────────────────────────────── */
.track-toast {
  position: fixed; bottom: 6rem; right: 1.5rem; z-index: 55;
  background: var(--navy); border: 1px solid var(--gold);
  color: var(--white); padding: .85rem 1rem;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-width: 280px; font-size: .75rem;
  opacity: 0; transform: translateY(1rem);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.track-toast.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.track-toast-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:.4rem; margin-bottom:.4rem; color:var(--gold); font-weight:700; }
.track-toast-header button { background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:.85rem; }
.track-toast-badge { display:block; margin-top:.5rem; background:#16a34a; color:var(--white); font-size:.62rem; font-weight:700; text-align:center; padding:.2rem .5rem; border-radius:4px; }

/* ─── Animation Helpers ───────────────────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(1.5rem)} to{opacity:1;transform:translateY(0)} }
.animate-fade-in { animation: fadeInUp .5s ease forwards; }

/* ─── Responsive Tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lead-card { padding: 1.1rem; }
  .units-grid { gap: .75rem; }
  .unit-card { padding: 1rem; }
  .payment-cta-box { padding: 1.1rem; }
}