:root{
  --bg:#0b0b0b;
  --panel:rgba(18,18,18,.62);
  --text:#f5f5f5;
  --muted:#bdbdbd;
  --gold:#d9b85a;
  --gold2:#f1da86;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
}

.bg-elite{
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82) 55%, rgba(0,0,0,.90)),
    url("dubai-elite-bg.jpg") center / cover no-repeat fixed;
}

/* Additional legibility overlay on top of background */
.bg-elite::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(217,184,90,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(241,218,134,.07), transparent 55%);
  mix-blend-mode:screen;
  opacity:.55;
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  backdrop-filter: blur(8px);
  background:rgba(10,10,10,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .brand{display:flex; align-items:center;}
.brand-link{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.logo{
  height:56px;
  width:auto;
  display:block;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (max-width:520px){
  .logo{height:44px;}
}

.topbar .lang a{color:var(--muted); text-decoration:none; font-weight:800;}
.topbar .lang a.active{color:var(--text);}
.topbar .sep{color:rgba(255,255,255,.25); padding:0 8px;}

section{position:relative; z-index:1; padding:60px 18px; max-width:1040px; margin:0 auto;}
.hero{padding:74px 18px 42px; text-align:center;}
.hero-inner{max-width:860px; margin:0 auto;}
.hero h1{font-size:42px; margin:0 0 16px; line-height:1.15;}
.hero p{font-size:18px; max-width:780px; margin:0 auto 26px; color:var(--muted);}
.micro{margin-top:16px; font-size:13px; color:rgba(255,255,255,.70);}
.micro .dot{padding:0 10px; opacity:.65;}

.cta{
  display:inline-block;
  padding:14px 28px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#111;
  text-decoration:none;
  font-weight:900;
  border-radius:999px;
  box-shadow: var(--shadow);
}

.proof, .segments, .lead, .portfolio{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.muted{color:var(--muted);}
.proof h2, .segments h2, .lead h2, .portfolio h2{margin-top:0;}
.proof ul{list-style:none; padding:0; margin:0;}
.proof li{margin:10px 0; color:rgba(255,255,255,.88);}

.segments .grid, .portfolio .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}
.segments .grid div{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  padding:18px;
  border-radius:14px;
  text-align:center;
  color:rgba(255,255,255,.92);
}
.portfolio .card{
  display:block;
  text-decoration:none;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:18px;
  border-radius:14px;
  text-align:center;
  font-weight:900;
}
.portfolio .card:hover{transform:translateY(-1px);}

.lead p{color:var(--muted);}
.lead form{display:grid; gap:12px; max-width:520px; margin:16px auto 0;}
.lead input,.lead select,.lead button{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.38);
  color:var(--text);
  outline:none;
}
.lead input::placeholder{color:rgba(255,255,255,.55);}
.lead button{
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  border:none;
  color:#111;
  font-weight:900;
  cursor:pointer;
}
.fineprint{font-size:12px; color:rgba(255,255,255,.60); text-align:center; padding-top:2px;}

/* Screen-reader-only fields kept for endpoint compatibility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

footer{
  position:relative; z-index:1;
  padding:26px 18px 34px;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.60);
}

@media (max-width:520px){
  .hero h1{font-size:32px;}
  .hero p{font-size:16px;}
}

/* ===== Conversion upgrades (clusters + form) ===== */
.cta{position:relative}
.cta::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(217,184,90,.0), rgba(241,218,134,.28), rgba(217,184,90,.0));
  filter:blur(10px);
  opacity:.0;
  transition:opacity .25s ease;
}
.cta:hover::after{opacity:1}
.cta{transition:transform .2s ease}
.cta:hover{transform:translateY(-1px) scale(1.01)}
.cta:active{transform:translateY(0px) scale(.99)}

.benefits{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px;}
.benefits li{color:rgba(255,255,255,.88);}

.clusters{margin-top:14px}
.cluster-card{
  display:block;
  text-decoration:none;
  color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  padding:18px;
  border-radius:16px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transform:translateY(0) scale(1);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;
  overflow:hidden;
}
html[dir="rtl"] .cluster-card{ text-align:right; }
.cluster-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(700px 220px at 20% 0%, rgba(241,218,134,.16), transparent 55%),
             radial-gradient(620px 240px at 80% 100%, rgba(217,184,90,.12), transparent 55%);
  opacity:.0;
  transition:opacity .18s ease;
}
.cluster-card:hover::before{opacity:1}
.cluster-card:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:rgba(241,218,134,.35);
  background:rgba(255,255,255,.04);
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
}
.cluster-top{display:flex; align-items:center; gap:10px; font-weight:900;}
.cluster-icon{filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));}
.cluster-title{font-size:16px; letter-spacing:.2px;}
.cluster-desc{margin-top:10px; color:rgba(255,255,255,.74); font-size:13px; line-height:1.35;}
.cluster-action{margin-top:12px; font-weight:900; color:rgba(241,218,134,.92);}

/* Make primary button feel more "action" */
.btn-primary{transition:transform .16s ease, filter .16s ease}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0px) scale(.99)}

/* Sticky CTA bar */
.sticky-cta{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  z-index:50;
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:999px;
  background:rgba(10,10,10,.62);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}
.sticky-btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:900;
  font-size:13px;
}
.sticky-btn.ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}

/* Modal (clusters) */
.modal{display:none;}
.modal.open{display:block;}
.modal-backdrop{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.72);
}
.modal-card{
  position:fixed;
  z-index:61;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100% - 28px));
  background:rgba(14,14,14,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
  padding:18px 18px 16px;
  /* Mobile: allow scrolling inside the modal when content is taller than the viewport */
  max-height: calc(100dvh - 28px);
  max-height: calc(100vh - 28px); /* fallback */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.modal-open{overflow:hidden;}
.modal-x{
  position:absolute;
  top:10px; right:12px;
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:20px;
}
html[dir="rtl"] .modal-x{right:auto; left:12px;}
.modal-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(241,218,134,.12);
  border:1px solid rgba(241,218,134,.18);
  color:rgba(241,218,134,.95);
  font-weight:900;
  font-size:12px;
}
.modal-title{margin:12px 0 8px; font-size:20px;}
.modal-sub{margin:0; color:rgba(255,255,255,.72); line-height:1.45;}
.modal-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.modal-primary, .modal-secondary{
  text-decoration:none;
  padding:11px 14px;
  border-radius:14px;
  font-weight:900;
  display:inline-block;
}
.modal-primary{
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#111;
}
.modal-secondary{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
.modal-fine{margin-top:10px; font-size:12px; color:rgba(255,255,255,.58);}

/* On short viewports (mobile landscape / small screens), don't vertical-center the modal */
@media (max-height: 740px){
  .modal-card{
    top:14px;
    bottom:14px;
    transform:translateX(-50%);
    max-height: none;
    overflow-y: auto;
  }
}

/* Hide sticky bar on very large screens if you want less intrusion */
@media (min-width:1100px){
  .sticky-cta{bottom:18px;}
}

/* ===== Introducer program (referral) ===== */
.alt-path{margin-top:6px; text-align:center; font-size:13px; color:rgba(255,255,255,.72);}
.linklike{
  background:transparent;
  border:none;
  color:rgba(241,218,134,.95);
  font-weight:900;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.linklike:hover{filter:brightness(1.08)}

.modal-intro{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);
  font-size:13px;
}

.intro-form{display:grid; gap:12px; margin-top:12px;}
.intro-form input, .intro-form select, .intro-form textarea{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.38);
  color:var(--text);
  outline:none;
}
.intro-form textarea{resize:vertical; min-height:92px;}
.intro-form input::placeholder, .intro-form textarea::placeholder{color:rgba(255,255,255,.55);}