/* --- TMX Luxury Dubai Link Page (Fixed Paths) --- */
:root{
  --bg1:#071028;
  --bg2:#0b1220;
  --accent:#ffd27a; /* soft gold */
  --accent-2:#c6a35b; /* deeper gold */
  --text:#eaf0ff;
  --muted:#a8b0c5;
  --ring:#1e2a4a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #13224d 0%, transparent 60%),
              radial-gradient(1000px 500px at 20% 0%, #152a5f 0%, transparent 60%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
 }

#stars{ position:fixed; inset:0; z-index:0; }

.container{
  position:relative; z-index:1;
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: clamp(20px, 3vw, 40px);
  gap:28px;
}

.hero{ text-align:center; max-width:820px; }

.avatar-wrap{
  position:relative; width:120px; height:120px; margin:0 auto 8px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.4));
}
.avatar{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; border:4px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,#1f2d53,#0f1730);
}
.ring{
  position:absolute; inset:-10px; border-radius:50%;
  background: conic-gradient(from 90deg, var(--accent), var(--accent-2), var(--accent));
  filter: blur(20px) opacity(.6);
  z-index:-1;
}

.handle{ font-weight:700; letter-spacing:.4px; margin:0; font-size: clamp(26px, 3.6vw, 34px); }
.headline{ font-size: clamp(20px, 2.6vw, 28px); line-height:1.2; font-weight:600; margin:10px 0 6px; }
.gold{ color: var(--accent); text-shadow:0 0 20px rgba(198,163,91,.35); }
.sub{
  color:var(--muted); margin:0 auto;
  max-width:600px;
}

.cta{ display:flex; flex-direction:column; gap:18px; width:min(720px,92vw); margin-top:10px; }

.button{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 22px;
  border-radius:20px;
  font-weight:600; text-decoration:none; color:#0c1222;
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 14px 0 #00000050, 0 20px 50px #00000060;
}
.button .icon{ width:28px; height:28px; display:grid; place-items:center; }
.button.primary{
  background: linear-gradient(180deg, #fff, #eaeef9);
  border:2px solid rgba(255,255,255,.6);
}
.button.primary::before{
  content:""; position:absolute; inset:-2px; border-radius:22px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.15), rgba(255,255,255,.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:2px; pointer-events:none;
}
.button.ghost{
  background: rgba(255,255,255,.06);
  color:var(--text);
  border:2px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
}

.button:hover{ transform: translateY(-2px); }
.button:active{ transform: translateY(0); box-shadow: 0 8px 0 #00000060, 0 12px 40px #00000050; }

/* Pulse to boost CTR */
@keyframes pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 14px 0 #00000050, 0 20px 50px #00000060; }
  50% { transform: translateY(-1px); box-shadow: 0 18px 0 #00000040, 0 30px 70px rgba(198,163,91,.55); }
}
.button.primary{ animation: pulse 2.4s ease-in-out infinite; }
.button.ghost{ animation: pulse 3s ease-in-out infinite .6s; }
@media (prefers-reduced-motion: reduce){
  .button.primary, .button.ghost { animation: none; }
}

.footer{ margin-top:6px; color:var(--muted); font-size:14px; }
.cred{ display:flex; align-items:center; gap:8px; opacity:.9 }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }

/* skyline at bottom */
.skyline{
  position:fixed; left:0; right:0; bottom:0; height:220px; z-index:0; opacity:.95;
}
.skyline svg{ width:100%; height:100%; display:block; }

@media (min-width: 900px){
  .cta .button{ padding:22px 26px; font-size:20px; }
}