@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Playfair+Display:wght@700;900&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --gold: #C9A84C;
  --gold-light: #E2C97E;
  --gold-dark: #A68B3C;
  --black: #0A0A0A;
  --black-deep: #050505;
  --black-soft: #111111;
  --white: #FFFFFF;
  --white-soft: #E0E0E0;
  --gray: #888888;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Cairo', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* ======================== */
/*     LOADING SCREEN       */
/* ======================== */

#loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--black-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 6px;
  text-shadow: 0 0 30px rgba(201, 168, 76, 0.3),
               0 0 60px rgba(201, 168, 76, 0.1);
  opacity: 0;
  animation: loaderFadeIn 1s ease forwards;
  position: relative;
}

.loader-logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: lineExpand 1.5s 0.5s ease forwards;
}

@keyframes lineExpand { to { width: 100%; } }

@keyframes loaderFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loader-bar-container {
  margin-top: 50px;
  width: clamp(250px, 50vw, 400px);
  opacity: 0;
  animation: loaderFadeIn 0.8s 0.5s ease forwards;
}

.loader-bar-bg {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 10px;
  transition: width 0.15s ease;
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.4);
  position: relative;
}

.loader-bar-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--gold-light);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
}

.loader-percentage {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 4px;
  opacity: 0;
  animation: loaderFadeIn 0.8s 0.7s ease forwards;
}

.loader-percentage span {
  font-size: 1.4rem;
  font-weight: 900;
}

.loader-tagline {
  margin-top: 30px;
  font-size: 0.8rem;
  color: var(--gray);
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  animation: loaderFadeIn 0.8s 0.9s ease forwards;
}

/* ======================== */
/*         NAVBAR           */
/* ======================== */

#navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 20px);
  z-index: 5000;
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  background: transparent;
}

#navbar.scrolled {
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 30px rgba(0,0,0,0.5);
}

#navbar.menu-active {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#navbar.menu-active .nav-logo {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.nav-logo {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
  transition: opacity 0.4s ease, transform 0.4s ease, text-shadow 0.3s ease;
}

.nav-logo:hover {
  text-shadow: 0 0 25px rgba(201, 168, 76, 0.35);
}

.menu-btn {
  width: 50px; height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 7px;
  background: none;
  border: none;
  position: relative;
  z-index: 6000;
  padding: 10px;
}

.menu-btn span {
  display: block;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-btn span:nth-child(1) { width: 28px; }
.menu-btn span:nth-child(2) { width: 20px; align-self: flex-end; }
.menu-btn span:nth-child(3) { width: 24px; }
.menu-btn:hover span { background: var(--gold-light); }

.menu-btn.active span:nth-child(1) {
  width: 28px;
  transform: rotate(45deg) translate(6px, 6px);
}
.menu-btn.active span:nth-child(2) {
  opacity: 0; width: 0;
}
.menu-btn.active span:nth-child(3) {
  width: 28px;
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ======================== */
/*       SIDE MENU          */
/* ======================== */

.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 4000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  top: 0; left: 0;
  width: 70%;
  max-width: 600px;
  height: 100%;
  z-index: 4500;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-menu.active {
  transform: translateX(0);
}

.menu-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background: #060608;
  overflow: hidden;
}

.menu-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(201,168,76,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201,168,76,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,168,76,0.02) 0%, transparent 70%);
}

.menu-bg::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 5%, rgba(201,168,76,0.4) 30%, rgba(201,168,76,0.6) 50%, rgba(201,168,76,0.4) 70%, transparent 95%);
}

.menu-bg-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(0,0,0,0.4) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(0,0,0,0.4) 0%, transparent 70%);
}

.menu-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(30px, 5vh, 60px) clamp(25px, 5vw, 50px);
  padding-top: clamp(25px, 4vh, 50px);
}

.menu-brand {
  margin-bottom: clamp(20px, 3.5vh, 40px);
  position: relative;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  text-align: center;
  padding: clamp(20px, 3vh, 40px) 0;
}

.side-menu.active .menu-brand {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.menu-brand::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.8s ease, width 0.8s ease;
}

.side-menu.active .menu-brand::before {
  opacity: 1;
  width: 120px;
  transition-delay: 0.3s;
}

.menu-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.side-menu.active .menu-brand::after {
  width: 80%;
  transition-delay: 0.5s;
}

.menu-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1.3;
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, var(--gold-light) 0%, #F5E6A3 15%, var(--gold) 30%, var(--gold-dark) 50%, var(--gold) 70%, #F5E6A3 85%, var(--gold-light) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease infinite paused;
  filter: drop-shadow(0 0 25px rgba(201, 168, 76, 0.25));
}

.side-menu.active .menu-brand-name {
  animation-play-state: running;
}

@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.menu-brand-diamonds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.side-menu.active .menu-brand-diamonds {
  opacity: 0.7;
  transform: translateY(0);
  transition-delay: 0.35s;
}

.menu-brand-diamonds .diamond {
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

.menu-brand-diamonds .diamond-line {
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

.menu-brand-tagline {
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  color: var(--gold-light);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-weight: 600;
}

.side-menu.active .menu-brand-tagline {
  opacity: 0.85;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.menu-nav-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1vh, 10px);
}

.menu-nav-label {
  font-size: 0.55rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: clamp(5px, 1vh, 12px);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.side-menu.active .menu-nav-label {
  opacity: 0.6;
  transform: translateX(0);
  transition-delay: 0.15s;
}

.menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 0.1vh, 4px);
}

.menu-items li {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.side-menu.active .menu-items li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.side-menu.active .menu-items li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.27s; }
.side-menu.active .menu-items li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.34s; }
.side-menu.active .menu-items li:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.41s; }
.side-menu.active .menu-items li:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.48s; }
.side-menu.active .menu-items li:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.55s; }
.side-menu.active .menu-items li:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 0.62s; }

.menu-items a {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--white-soft);
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  font-weight: 700;
  padding: clamp(6px, 1vh, 10px) 0;
  position: relative;
  transition: color 0.3s ease, padding-right 0.3s ease;
}

.menu-items a .menu-number {
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--gold-dark);
  letter-spacing: 2px;
  min-width: 22px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.menu-items a::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 36px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s ease;
}

.menu-items a:hover {
  color: var(--gold);
  padding-right: 8px;
}

.menu-items a:hover::after { width: 30px; }
.menu-items a:hover .menu-number { opacity: 1; }


.side-menu.active{
  opacity: 1;
  transition-delay: 0.45s;
}



.side-menu.active .menu-secondary-label {
  opacity: 0.6;
  transform: translateX(0);
  transition-delay: 0.5s;
}

.menu-footer {
  margin-top: auto;
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.side-menu.active .menu-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.menu-footer p {
  font-size: 0.65rem;
  color: var(--gray);
  letter-spacing: 2px;
  line-height: 1.8;
  margin-bottom: 4px;
}

.menu-footer .footer-email {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.3s ease;
  letter-spacing: 1px;
}

.menu-footer .footer-email:hover {
  color: var(--gold-light);
}

.menu-social {
  display: flex;
  gap: 14px;
  margin-top: clamp(8px, 1.5vh, 15px);
}

.menu-social a {
  width: 32px; height: 32px;
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  text-decoration: none;
  font-size: 0.6rem;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.menu-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}

/* ======================== */
/*       HERO SECTION       */
/* ======================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  padding: 100px clamp(20px, 5vw, 80px) 60px;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background: #030308;
  overflow: hidden;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(201,168,76,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 90% 60%, rgba(201,168,76,0.03) 0%, transparent 50%),
    linear-gradient(180deg, #030308 0%, #080812 40%, #0a0a14 70%, #040408 100%);
}

.hero-wave {
  position: absolute;
  width: 200%; height: 200%;
  opacity: 0.035;
}

.hero-wave-1 {
  top: -60%; left: -50%;
  background: radial-gradient(ellipse 40% 20% at 50% 50%, var(--gold) 0%, transparent 70%);
  animation: waveFloat1 20s ease-in-out infinite;
}

.hero-wave-2 {
  bottom: -80%; right: -60%;
  background: radial-gradient(ellipse 35% 25% at 50% 50%, var(--gold-light) 0%, transparent 70%);
  animation: waveFloat2 25s ease-in-out infinite;
}

.hero-wave-3 {
  top: -40%; right: -40%;
  background: radial-gradient(ellipse 30% 15% at 50% 50%, var(--gold-dark) 0%, transparent 70%);
  animation: waveFloat3 30s ease-in-out infinite;
}

@keyframes waveFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(5%, 8%) rotate(5deg); }
  66% { transform: translate(-3%, -5%) rotate(-3deg); }
}

@keyframes waveFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-6%, -4%) rotate(-4deg); }
  66% { transform: translate(4%, 6%) rotate(3deg); }
}

@keyframes waveFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(3%, -7%) rotate(6deg); }
}

.hero-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0.02) 30%, transparent 65%);
  animation: corePulse 8s ease-in-out infinite;
}

@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; }
}

.hero-grid {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 70%);
}

.hero-vignette {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(3,3,8,0.8) 100%);
  z-index: 1;
  pointer-events: none;
}



.hero-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.hero-text-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-brand {
  margin-bottom: clamp(20px, 3vh, 40px);
  position: relative;
  opacity: 0;
  animation: heroFadeSlideUp 0.8s 0.2s ease forwards;
  animation-play-state: paused;
  align-items: center;
  justify-content: center;
}

.hero-brand-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 150px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  align-items: center;
  justify-content: center;
}

.hero-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1.3;
  padding-bottom: 10px;
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, var(--gold-light) 0%, #F5E6A3 10%, var(--gold) 20%, #DFC06A 35%, var(--gold-dark) 50%, var(--gold) 65%, #F5E6A3 80%, var(--gold-light) 90%, var(--gold) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease infinite;
  filter: drop-shadow(0 0 30px rgba(201, 168, 76, 0.2)) drop-shadow(0 0 60px rgba(201, 168, 76, 0.08));
  justify-content: center;
}

.hero-brand-line {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 5px;
  opacity: 0;
  animation: heroFadeSlideUp 0.6s 0.5s ease forwards;
  animation-play-state: paused;
  justify-content: center;
}

.hero-brand-line .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  align-items: center;
  justify-content: center;

}

.hero-brand-line .line:last-child {
  background: linear-gradient(90deg, transparent, var(--gold));
  align-items: center;
  justify-content: center;

}

.hero-brand-line .diamond {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
  justify-content: center;  /* في النص أفقي */
  align-items: center; 
  text-align: center; /* 👈 ده المهم */
}

.hero-brand-tagline {
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
  color: var(--gold-light);
  letter-spacing: clamp(3px, 0.8vw, 8px);
  margin-top: 12px;
  font-weight: 600;
  opacity: 0;
  animation: heroFadeSlideUp 0.6s 0.7s ease forwards;
  animation-play-state: paused;
  justify-content: center;  /* في النص أفقي */
  align-items: center; 
  text-align: center; /* 👈 ده المهم */
}

.hero-title {
  font-size: clamp(1.2rem, 2vw, 2.1rem);
  font-weight: 900;
  line-height: 1.5;
  opacity: 0;
  animation: heroFadeSlideUp 0.7s 0.9s ease forwards;
  animation-play-state: paused;
}

.gold-text {
  color: transparent;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  color: var(--white-soft);
  margin-bottom: 10px;
  opacity: 0;
  animation: heroFadeSlideUp 0.6s 1.1s ease forwards;
  animation-play-state: paused;
  letter-spacing: 1px;
}

.hero-subtitle span {
  color: var(--gold);
  font-weight: 700;
}

.hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeSlideUp 0.6s 1.3s ease forwards;
  animation-play-state: paused;
}

@keyframes heroFadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--black);
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 25px rgba(201, 168, 76, 0.3);
  letter-spacing: 0.5px;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 38px;
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  letter-spacing: 0.5px;
}

.btn-secondary:hover {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.06);
  transform: translateY(-2px);
}

.hero-showcase {
  position: relative;
  width: 100%;
  height: clamp(400px, 55vh, 600px);
  opacity: 0;
  animation: heroFadeSlideUp 1s 0.6s ease forwards;
  animation-play-state: paused;
}

.showcase-card {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 15, 20, 0.9);
  border: 1px solid rgba(201, 168, 76, 0.15);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.05);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
  cursor: default;
}

.showcase-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.1);
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.showcase-card:hover img {
  transform: scale(1.05);
}

.showcase-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, transparent 50%, rgba(3, 3, 8, 0.7) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.showcase-card:hover::after {
  opacity: 0.5;
}

.showcase-label {
  position: absolute;
  bottom: 14px;
  right: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(5, 5, 10, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(201, 168, 76, 0.1);
}

.showcase-label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
}

.showcase-label-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white-soft);
  letter-spacing: 0.5px;
}

.showcase-label-tag {
  margin-right: auto;
  font-size: 0.6rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-card-1 {
  top: 0; right: 0;
  width: 65%; height: 58%;
  z-index: 3;
  animation: cardFloat1 6s ease-in-out infinite;
}

.showcase-card-2 {
  top: 12%; left: 0;
  width: 45%; height: 45%;
  z-index: 4;
  animation: cardFloat2 7s ease-in-out infinite;
}

.showcase-card-3 {
  bottom: 0; right: 5%;
  width: 50%; height: 42%;
  z-index: 2;
  animation: cardFloat3 8s ease-in-out infinite;
}

.showcase-card-4 {
  bottom: 8%; left: 8%;
  width: 35%; height: 32%;
  z-index: 5;
  animation: cardFloat4 6.5s ease-in-out infinite;
}

@keyframes cardFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes cardFloat2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes cardFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes cardFloat4 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.showcase-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: showcaseGlow 5s ease-in-out infinite;
}

@keyframes showcaseGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.showcase-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 350px; height: 350px;
  border: 1px solid rgba(201, 168, 76, 0.06);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.showcase-ring-2 {
  width: 500px; height: 500px;
  border-color: rgba(201, 168, 76, 0.03);
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.7); }
}


/* ================================== */
/*   INTERACTIVE SHOWCASE SECTION     */
/* ================================== */

.showcase-section {
  position: relative;
  min-height: 100vh;
  background: #040406;
  overflow: hidden;
  padding: 20px;
}

/* Section Background */
.showcase-sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}


.showcase-sec-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(0,0,0,0.4) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(0,0,0,0.4) 0%, transparent 80%);
}

/* Section Container */
.showcase-sec-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Header */
.showcase-sec-header {
  text-align: center;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.showcase-sec-header.visible {
  opacity: 1;
  transform: translateY(0);
}

.showcase-sec-header h2 {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  margin-bottom: 6px;
  color: #fff;
}

.showcase-sec-header h2 .gold-accent {
  color: transparent;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.showcase-sec-header p {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.5);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Category Tabs */
.showcase-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.showcase-tabs.visible {
  opacity: 1;
  transform: translateY(0);
}

.showcase-tab {
  padding: 12px 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  color: rgba(255,255,255,0.6);
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.showcase-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(201,168,76,0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.showcase-tab:hover {
  border-color: rgba(201,168,76,0.3);
  color: var(--gold-light);
}

.showcase-tab:hover::before {
  opacity: 1;
}

.showcase-tab.active {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 25px rgba(201,168,76,0.15);
}

.showcase-tab.active::before {
  opacity: 1;
}

/* Service Cards Grid */
.showcase-services-wrapper {
  position: relative;
  min-height: 400px;
}

.showcase-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.showcase-services-grid.visible {
  opacity: 1;
  transform: translateY(0);
}

.showcase-services-grid.fade-out {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Service Card */
.svc-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
}

.svc-card.show {
  opacity: 1;
  transform: translateY(0);
}

.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,168,76,0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.svc-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(201,168,76,0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.svc-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.3), 0 0 30px rgba(201,168,76,0.06);
}

.svc-card:hover::before,
.svc-card:hover::after {
  opacity: 1;
}

.svc-card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

.svc-card:hover .svc-card-icon {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 0 20px rgba(201,168,76,0.12);
}

.svc-card-title {
  font-family: 'Cairo', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.svc-card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-card:hover .svc-card-link {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Expanded Service View ===== */
.showcase-expanded {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.showcase-expanded.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.expanded-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  margin-bottom: 40px;
  transition: all 0.3s ease;
}

.expanded-back:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Service Hero */
.svc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.svc-hero-text h3 {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.4;
}

.svc-hero-text p {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.9;
  margin-bottom: 24px;
}

.svc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svc-hero-tag {
  padding: 6px 16px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
}

/* Service Gallery */
.svc-gallery {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid rgba(201,168,76,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.svc-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.svc-gallery-slide.active {
  opacity: 1;
}

.svc-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(4,4,6,0.85) 100%);
  pointer-events: none;
}

.svc-gallery-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.svc-gallery-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.svc-gallery-dot.active {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(201,168,76,0.5);
  width: 24px;
  border-radius: 4px;
}

/* Features Spotlight */
.svc-features {
  margin-bottom: 60px;
  position: relative;
}

.svc-features-title {
  font-family: 'Cairo', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.svc-features-title::after {
  content: '';
  display: block;
  width: 50px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 12px auto 0;
}

/* Spotlight Display Area */
.features-spotlight {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  overflow: hidden;
}

.spotlight-card {
  position: absolute;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 35px 40px;
  background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, rgba(0,0,0,0.4) 100%);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 20px;
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.spotlight-card.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,168,76,0.3), transparent 50%, rgba(201,168,76,0.1));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.spotlight-card.active::before {
  opacity: 1;
}

.spotlight-icon-wrap {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 50%;
  position: relative;
}

.spotlight-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.08);
  animation: spotlightPulse 2.5s ease-in-out infinite;
}

@keyframes spotlightPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.3; }
}

.spotlight-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 15px rgba(201,168,76,0.3));
}

.spotlight-text h4 {
  font-family: 'Cairo', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}

.spotlight-text p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
}

.spotlight-number {
  position: absolute;
  top: 15px;
  left: 20px;
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(201,168,76,0.06);
  line-height: 1;
}

/* Timeline Navigation */
.features-timeline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 20px;
}

.features-timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2) 20%, rgba(201,168,76,0.2) 80%, transparent);
  transform: translateY(-50%);
}

.timeline-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
  padding: 10px 5px;
  z-index: 1;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(201,168,76,0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.timeline-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.3), transparent);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s ease;
}

.timeline-node.active .timeline-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201,168,76,0.5);
  transform: scale(1.3);
}

.timeline-node.active .timeline-dot::after {
  opacity: 1;
  transform: scale(1);
}

.timeline-node:hover .timeline-dot {
  border-color: rgba(201,168,76,0.5);
  transform: scale(1.15);
}

.timeline-label {
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  transition: all 0.3s ease;
  white-space: nowrap;
  text-align: center;
}

.timeline-node.active .timeline-label {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.75rem;
}

.timeline-node:hover .timeline-label {
  color: rgba(255,255,255,0.6);
}

/* Progress line between nodes */
.timeline-progress {
  position: absolute;
  top: 50%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #c9a84c4d);
  transform: translateY(-50%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  border-radius: 2px;
  box-shadow: 0 0 8px #c9a84c4d;
}

/* Before / After */
.svc-compare {
  margin-bottom: 60px;
}

.svc-compare-title {
  font-family: 'Cairo', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 35px;
}

.svc-compare-title::after {
  content: '';
  display: block;
  width: 50px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 12px auto 0;
}

.svc-compare-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(201,168,76,0.15);
  cursor: ew-resize;
  user-select: none;
}

.compare-img {
  position: absolute;
  inset: 0;
}

.compare-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-after {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}

.compare-slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: var(--gold);
  z-index: 3;
  transition: left 0.05s linear;
  box-shadow: 0 0 15px rgba(201,168,76,0.4);
}

.compare-slider::after {
  content: '⟷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(201,168,76,0.5);
}

.compare-label {
  position: absolute;
  top: 16px;
  padding: 6px 16px;
  background: rgba(5,5,10,0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 4;
  border: 1px solid rgba(255,255,255,0.1);
  
}

.compare-label-before {
  right: 16px;
  color: rgba(255,255,255,0.6);

}

.compare-label-after {
  left: 16px;
  color: var(--gold);
  border-color: rgba(201,168,76,0.2);
}

/* Results / Stats */
.svc-results {
  margin-bottom: 60px;
}

.svc-results-title {
  font-family: 'Cairo', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 35px;
}

.svc-results-title::after {
  content: '';
  display: block;
  width: 50px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 12px auto 0;
}

.svc-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.svc-stat {
  text-align: center;
  padding: 28px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: all 0.4s ease;
  opacity: 0;
  transform: scale(0.9);
}

.svc-stat.show {
  opacity: 1;
  transform: scale(1);
}

.svc-stat:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}

.svc-stat-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 4px;
}

.svc-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}

/* CTA inside expanded */
.svc-cta-section {
  text-align: center;
  padding: 50px 30px;
  background: rgba(201,168,76,0.03);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.svc-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.06), transparent 70%);
}

.svc-cta-section h3 {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
}

.svc-cta-section p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
  position: relative;
}

.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 42px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: #000;
  font-family: 'Cairo', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 30px rgba(201,168,76,0.3);
  position: relative;
}

.svc-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 40px rgba(201,168,76,0.45);
}


/* ======================== */
/*      RESPONSIVE          */
/* ======================== */

@media (max-width: 1024px) {
  .hero-content-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-text-side {
    align-items: center;
    text-align: center;
  }

  .hero-brand-line .line {
    max-width: 200px;
    align-items: center;
    justify-content: center;

  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-showcase {
    height: clamp(350px, 50vw, 500px);
    max-width: 600px;
    margin: 0 auto;
  }

  .showcase-card-1 { width: 60%; height: 55%; }
  .showcase-card-2 { width: 42%; height: 42%; }
  .showcase-card-3 { width: 48%; height: 40%; }
  .showcase-card-4 { width: 33%; height: 30%; }

  .showcase-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .spotlight-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 25px;
    max-width: 500px;
  }

  .spotlight-icon-wrap {
    width: 75px;
    height: 75px;
  }

  .timeline-label {
    font-size: 0.6rem;
  }

  .svc-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .side-menu {
    width: 100%;
    max-width: 100%;
  }

  .hero {
    padding: 100px 20px 80px;
  }

  .hero-brand-name {
    font-size: clamp(2.0rem, 8vw, 2.5rem);
  }

  .hero-title {
    font-size: clamp(1.0rem, 2.5vw, 1.2rem);
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-showcase {
    height: clamp(300px, 60vw, 420px);
  }

  .showcase-card-1 { width: 62%; height: 52%; }
  .showcase-card-2 { width: 44%; height: 40%; }
  .showcase-card-3 { width: 50%; height: 38%; }
  .showcase-card-4 { width: 36%; height: 30%; }

  .showcase-label {
    padding: 7px 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
  }

  .showcase-label-text { font-size: 0.65rem; }
  .showcase-label-tag { font-size: 0.5rem; }
  .showcase-label-dot { width: 6px; height: 6px; }

  .btn-primary, .btn-secondary {
    padding: 14px 30px;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
  }

  .hero-buttons {
    width: 100%;
    max-width: 350px;
  }

  .hero-brand-tagline {
    letter-spacing: 3px;
  }

  .showcase-services-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
  }

  .showcase-tab {
    padding: 10px 20px;
    font-size: 0.8rem;
  }

  .svc-features-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .svc-results-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .hero-showcase {
    height: clamp(260px, 70vw, 350px);
  }

  .showcase-card-1 { width: 60%; height: 50%; top: 0; right: 0; }
  .showcase-card-2 { width: 48%; height: 38%; top: 15%; left: 0; }
  .showcase-card-3 { width: 52%; height: 36%; bottom: 0; right: 2%; }
  .showcase-card-4 { width: 38%; height: 28%; bottom: 5%; left: 5%; }

  .showcase-label {
    padding: 5px 8px;
    bottom: 6px; right: 6px; left: 6px;
    border-radius: 6px;
  }

  .showcase-label-text { font-size: 0.55rem; }
  .showcase-label-tag { display: none; }

  .svc-results-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (min-height: 900px) {
  .menu-items a { padding: 10px 0; }
}

@media (max-height: 600px) {
  .menu-items a { font-size: 0.85rem; padding: 4px 0; }
  .menu-brand { margin-bottom: 10px; padding: 12px 0; }
  .menu-brand-name { font-size: 1.3rem; }
  .menu-brand-tagline { margin-top: 6px; font-size: 0.55rem; }
  .menu-brand-diamonds { margin-top: 6px; }
  .menu-footer { padding-top: 8px; }
  .menu-social { margin-top: 5px; }
}

body.no-scroll { overflow: hidden; }

body.loading .hero-brand,
body.loading .hero-brand-name,
body.loading .hero-brand-line,
body.loading .hero-brand-tagline,
body.loading .hero-title,
body.loading .hero-subtitle,
body.loading .hero-buttons,
body.loading .hero-showcase,
body.loading  {
  animation-play-state: paused;
}
  /* ========== HEADER ========== */
  .site-header {
          text-align: center;
          padding: 50px 20px 10px;
          position: relative;
      }

      .logo {
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          margin: 8px;
          padding: 5px;
          width: 100px;
          height: auto;
      }

      /* ========== SECTION TITLE ========== */
      .section-wrapper {
          max-width: 1200px;
          margin: 0 auto;
          padding: 40px 24px 60px;
      }

      .section-title {
          text-align: center;
          margin-bottom: 45px;
      }

      .section-title h2 {
        font-family: 'Cairo', sans-serif;
        font-size: clamp(1.4rem, 3vw, 2rem);
        font-weight: 900;
        margin-bottom: 6px;
        color: #fff;
      }

      .section-title h2 em {
          font-style: normal;
          color: var(--gold);
      }

      .section-title p {
        font-size: clamp(0.7rem, 1.0vw, 0.8rem);
        color: rgba(255,255,255,0.5);
        max-width: 550px;
        margin: 0 auto;
        line-height: 1.8;
      }

      /* ========== CARDS GRID ========== */
      .cards-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          perspective: 1000px;
      }

      /* ========== CARD ========== */
      .card {
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          aspect-ratio: 3 / 4;
          background: var(--black-card);
          transform-style: preserve-3d;
          transition: transform 0.5s var(--transition-smooth),
                      box-shadow 0.5s var(--transition-smooth);
          will-change: transform;
      }

      .card:hover {
          transform: translateY(-8px) scale(1.02);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                      0 0 30px var(--gold-glow),
                      0 0 60px rgba(201, 168, 76, 0.15);
      }

      .card-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.7s var(--transition-smooth);
          display: block;
      }

      .card:hover .card-img {
          transform: scale(1.1);
      }

      .card-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.9) 0%,
              rgba(0, 0, 0, 0.3) 50%,
              rgba(0, 0, 0, 0.1) 100%
          );
          transition: background 0.5s ease;
      }

      .card:hover .card-overlay {
          background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.95) 0%,
              rgba(201, 168, 76, 0.08) 50%,
              rgba(201, 168, 76, 0.03) 100%
          );
      }

      .card-content {
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          padding: 24px;
          transform: translateY(10px);
          transition: transform 0.4s var(--transition-smooth);
      }

      .card:hover .card-content {
          transform: translateY(0);
      }

      .card-tag {
          display: inline-block;
          padding: 4px 12px;
          background: rgba(201, 168, 76, 0.2);
          border: 1px solid rgba(201, 168, 76, 0.3);
          border-radius: 20px;
          font-size: 0.7rem;
          color: var(--gold-light);
          margin-bottom: 10px;
          letter-spacing: 1px;
          text-transform: uppercase;
      }

      .card-title {
          font-size: 1.15rem;
          font-weight: 700;
          color: var(--white);
          margin-bottom: 6px;
          line-height: 1.4;
      }

      .card-desc {
          font-size: 0.8rem;
          color: var(--white-dim);
          line-height: 1.5;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.4s var(--transition-smooth) 0.1s;
      }

      .card:hover .card-desc {
          opacity: 1;
          transform: translateY(0);
      }

      .card-arrow {
          position: absolute;
          top: 20px;
          left: 20px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(201, 168, 76, 0.15);
          border: 1px solid rgba(201, 168, 76, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transform: scale(0.5);
          transition: all 0.4s var(--transition-bounce);
      }

      .card:hover .card-arrow {
          opacity: 1;
          transform: scale(1);
      }

      .card-arrow svg {
          width: 16px;
          height: 16px;
          fill: none;
          stroke: var(--gold);
          stroke-width: 2;
      }

      /* Gold border glow on hover */
      .card::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 16px;
          border: 1px solid transparent;
          transition: border-color 0.5s ease;
          z-index: 2;
          pointer-events: none;
      }

      .card:hover::before {
          border-color: rgba(201, 168, 76, 0.3);
      }

      /* ========== FULLSCREEN OVERLAY ========== */
      .fullscreen-overlay {
          position: fixed;
          inset: 0;
          z-index: 1000;
          background: rgba(0, 0, 0, 0.92);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.5s ease, visibility 0.5s ease;
      }

      .fullscreen-overlay.active {
          opacity: 1;
          visibility: visible;
      }

      .overlay-container {
          width: 95%;
          max-width: 1000px;
          max-height: 70vh;
          overflow-y: auto;
          overflow-x: hidden;
          background: linear-gradient(145deg, #141414, #0e0e0e);
          border-radius: 20px;
          border: 1px solid rgba(201, 168, 76, 0.15);
          box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8),
                      0 0 40px rgba(201, 168, 76, 0.1);
          transform: scale(0.85) translateY(30px);
          transition: transform 0.6s var(--transition-bounce);
          position: relative;
      }

      .fullscreen-overlay.active .overlay-container {
          transform: scale(1) translateY(0);
      }

      /* Custom scrollbar */
      .overlay-container::-webkit-scrollbar {
          width: 4px;
      }
      .overlay-container::-webkit-scrollbar-track {
          background: transparent;
      }
      .overlay-container::-webkit-scrollbar-thumb {
          background: var(--gold-dark);
          border-radius: 4px;
      }

      /* Close button */
      .close-btn {
          position: sticky;
          top: 16px;
          left: 16px;
          float: left;
          margin: 16px;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.7);
          border: 1px solid rgba(201, 168, 76, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 10;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
      }

      .close-btn:hover {
          background: rgba(201, 168, 76, 0.2);
          border-color: var(--gold);
          transform: rotate(90deg);
      }

      .close-btn svg {
          width: 20px;
          height: 20px;
          fill: none;
          stroke: var(--gold);
          stroke-width: 2;
      }

      /* ========== HERO SECTION (inside overlay) ========== */
      .overlay-hero {
          position: relative;
          height: 320px;
          overflow: hidden;
          border-radius: 20px 20px 0 0;
      }

      .overlay-hero-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transform: scale(1.1);
          transition: all 0.8s var(--transition-smooth) 0.2s;
      }

      .fullscreen-overlay.active .overlay-hero-img {
          opacity: 1;
          transform: scale(1);
      }

      .overlay-hero-gradient {
          position: absolute;
          inset: 0;
          background: linear-gradient(
              to top,
              #141414 0%,
              rgba(20, 20, 20, 0.6) 40%,
              transparent 100%
          );
      }

      .overlay-hero-content {
          position: absolute;
          bottom: 30px;
          right: 40px;
          left: 40px;
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.6s var(--transition-smooth) 0.4s;
      }

      .fullscreen-overlay.active .overlay-hero-content {
          opacity: 1;
          transform: translateY(0);
      }

      .overlay-hero-tag {
          display: inline-block;
          padding: 5px 16px;
          background: rgba(201, 168, 76, 0.2);
          border: 1px solid rgba(201, 168, 76, 0.4);
          border-radius: 20px;
          font-size: 0.75rem;
          color: var(--gold-light);
          margin-bottom: 12px;
          letter-spacing: 1px;
      }

      .overlay-hero-title {
          font-size: 1.5rem;
          font-weight: 800;
          color: var(--white);
          line-height: 1.2;
      }

      .overlay-hero-subtitle {
          font-size: 1rem;
          color: var(--white-dim);
          max-width: 500px;
          line-height: 1.6;
      }

      /* ========== OVERLAY BODY ========== */
      .overlay-body {
          padding: 40px;
      }

      /* Features */
      .features-section {
          margin-bottom: 40px;
      }

      .section-label {
          font-size: 0.75rem;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: var(--gold);
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .section-label::after {
          content: '';
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, rgba(201, 168, 76, 0.3), transparent);
      }

      .features-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
      }

      .feature-card {
          padding: 24px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 14px;
          opacity: 0;
          transform: translateY(20px);
          transition: all 0.5s var(--transition-smooth);
      }

      .fullscreen-overlay.active .feature-card {
          opacity: 1;
          transform: translateY(0);
      }

      .feature-card:nth-child(1) { transition-delay: 0.5s; }
      .feature-card:nth-child(2) { transition-delay: 0.65s; }
      .feature-card:nth-child(3) { transition-delay: 0.8s; }

      .feature-icon {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05));
          border: 1px solid rgba(201, 168, 76, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 14px;
      }

      .feature-icon svg {
          width: 22px;
          height: 22px;
          fill: none;
          stroke: var(--gold);
          stroke-width: 1.8;
      }

      .feature-title {
          font-size: 0.95rem;
          font-weight: 600;
          color: var(--white);
          margin-bottom: 6px;
      }

      .feature-text {
          font-size: 0.8rem;
          color: var(--white-dim);
          line-height: 1.6;
      }

      /* Before / After */
      .compare-section {
          margin-bottom: 40px;
      }

      .compare-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
      }

      .compare-card {
          padding-top: 40px;
          padding-right: 20px;
          border-radius: 14px;
          position: relative;
          overflow: hidden;
          opacity: 0;
          transform: translateX(30px);
          transition: all 0.6s var(--transition-smooth) 0.6s;
      }

      .fullscreen-overlay.active .compare-card {
          opacity: 1;
          transform: translateX(0);
      }

      .compare-card.before {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
      }

      .compare-card.after {
          background: rgba(201, 168, 76, 0.06);
          border: 1px solid rgba(201, 168, 76, 0.2);
      }

      .compare-label {
          font-size: 0.7rem;
          letter-spacing: 2px;
          text-transform: uppercase;
          margin-bottom: 14px;
          padding: 3px 10px;
          border-radius: 4px;
          display: inline-block;
      }

      .compare-card.before .compare-label {
          color: #888;
          background: rgba(255, 255, 255, 0.05);
          
      }

      .compare-card.after .compare-label {
          color: var(--gold);
          background: rgba(201, 168, 76, 0.15);
      }

      .compare-items {
          list-style: none;
      }

      .compare-items li {
          font-size: 0.85rem;
          color: var(--white-dim);
          padding: 6px 0;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .compare-items li svg {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
      }

      .compare-card.before .compare-items li svg {
          stroke: #666;
      }

      .compare-card.after .compare-items li svg {
          stroke: var(--gold);
      }

      /* Result */
      .result-section {
          text-align: center;
          padding: 40px;
          background: linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.02));
          border: 1px solid rgba(201, 168, 76, 0.15);
          border-radius: 16px;
          opacity: 0;
          transform: scale(0.9);
          transition: all 0.7s var(--transition-bounce) 0.7s;
      }

      .fullscreen-overlay.active .result-section {
          opacity: 1;
          transform: scale(1);
      }

      .result-number {
          font-size: 4rem;
          font-weight: 900;
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1;
          margin-bottom: 8px;
      }

      .result-label {
          font-size: 1.1rem;
          color: var(--white);
          font-weight: 600;
          margin-bottom: 6px;
      }

      .result-sub {
          font-size: 0.85rem;
          color: var(--white-dim);
      }

      /* ========== CANVAS PARTICLES ========== */
      .particles-canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
      }

      .section-wrapper {
          position: relative;
          z-index: 1;
      }

      /* ========== RESPONSIVE ========== */
      @media (max-width: 1024px) {
          .cards-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 16px;
          }
      }

      @media (max-width: 640px) {
          .cards-grid {
              grid-template-columns: 1fr;
              gap: 14px;
              max-width: 360px;
              margin: 0 auto;
          }

          .card {
              aspect-ratio: 16 / 9;
          }

          .card-desc {
              display: none;
          }

          .logo {
              font-size: 2rem;
          }

          .overlay-hero {
              height: 220px;
          }

          .overlay-hero-title {
              font-size: 1.0rem;
          }

          .overlay-hero-content {
              right: 20px;
              left: 20px;
              bottom: 20px;
          }

          .overlay-body {
              padding: 24px;
          }

          .features-grid {
              grid-template-columns: 1fr;
          }

          .compare-grid {
              grid-template-columns: 1fr;
          }

          .result-number {
              font-size: 3rem;
          }

          .section-title h2 {
              font-size: 1.4rem;
          }

          .fullscreen-overlay .overlay-container {
              width: 100%;
              max-width: 100%;
              max-height: 77vh;
              height: 90vh;
              border-radius: 0;
          }

          .overlay-hero {
              border-radius: 0;
          }
      }

      /* ========== LOADING ANIMATION ========== */
      .card {
          opacity: 0;
          transform: translateY(30px);
          animation: cardReveal 0.6s var(--transition-smooth) forwards;
      }

      .card:nth-child(1) { animation-delay: 0.1s; }
      .card:nth-child(2) { animation-delay: 0.2s; }
      .card:nth-child(3) { animation-delay: 0.3s; }
      .card:nth-child(4) { animation-delay: 0.4s; }

      @keyframes cardReveal {
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* Subtle float animation for result */
      @keyframes subtlePulse {
          0%, 100% { opacity: 0.8; }
          50% { opacity: 1; }
      }

      .result-number {
          animation: subtlePulse 3s ease-in-out infinite;
      }

      /* Background pattern */
      .bg-pattern {
          position: fixed;
          inset: 0;
          z-index: 0;
          opacity: 0.03;
          background-image: 
              radial-gradient(circle at 25% 25%, var(--gold) 1px, transparent 1px),
              radial-gradient(circle at 75% 75%, var(--gold) 1px, transparent 1px);
          background-size: 60px 60px;
          pointer-events: none;
      }

      /* Ambient glow */
      .ambient-glow {
          position: fixed;
          width: 500px;
          height: 500px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.06), transparent 70%);
          pointer-events: none;
          z-index: 0;
          top: -200px;
          right: -200px;
      }

      .ambient-glow-2 {
          position: fixed;
          width: 400px;
          height: 400px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.04), transparent 70%);
          pointer-events: none;
          z-index: 0;
          bottom: -150px;
          left: -150px;
      }
          /* ========== RESET & BASE ========== */
          *, *::before, *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      :root {
          --black-deep: #0a0a0a;
          --black-card: #111111;
          --black-overlay: #0d0d0d;
          --gold: #c9a84c;
          --gold-light: #e8d48b;
          --gold-dark: #9a7b2e;
          --gold-glow: rgba(201, 168, 76, 0.4);
          --white: #f5f5f5;
          --white-dim: #cccccc;
          --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      html {
          scroll-behavior: smooth;
      }


      /* ===== HERO SECTION ===== */
      .hero-section {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
      }

      .hero-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(ellipse at 50% 50%, rgba(212, 168, 67, 0.05) 0%, transparent 70%);
      }

      .hero-content {
          text-align: center;
          z-index: 2;
          padding: 2rem;
      }

      .hero-badge {
          display: inline-block;
          padding: 8px 24px;
          border: 1px solid var(--gold);
          border-radius: 50px;
          color: var(--gold);
          font-size: 0.85rem;
          font-weight: 600;
          letter-spacing: 2px;
          margin-bottom: 2rem;
          animation: fadeInDown 1s ease;
      }

      .hero-title {
          font-size: clamp(1.0rem, 3vw, 2.0rem);
          font-weight: 900;
          line-height: 1.3;
          animation: fadeInUp 1s ease 0.3s both;
      }

      .hero-title .gold-text {
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .hero-subtitle {
          font-size: clamp(1rem, 2.5vw, 1.3rem);
          color: var(--gray-light);
          max-width: 600px;
          margin: 0 auto 1rem;
          line-height: 1.8;
          animation: fadeInUp 1s ease 0.6s both;
      }


      .scroll-arrow {
          display: inline-block;
          width: 30px;
          height: 50px;
          border: 2px solid var(--gold);
          border-radius: 15px;
          position: relative;
          cursor: pointer;
          transition: all 0.3s;
      }

      .scroll-arrow::before {
          content: '';
          position: absolute;
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
          width: 4px;
          height: 10px;
          background: var(--gold);
          border-radius: 2px;
          animation: scrollBounce 2s infinite;
      }

      .scroll-arrow:hover {
          box-shadow: 0 0 20px var(--gold-glow);
      }

      /* ===== SECTION HEADER ===== */
      .section-header {
          text-align: center;
          margin-bottom: 4rem;
          opacity: 0;
          transform: translateY(40px);
          transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .section-header.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .section-label {
          display: inline-block;
          padding: 6px 20px;
          border: 1px solid rgba(212, 168, 67, 0.3);
          border-radius: 50px;
          color: var(--gold);
          font-size: 0.8rem;
          font-weight: 600;
          letter-spacing: 2px;
          margin-bottom: 1.5rem;
          text-transform: uppercase;
      }

      .section-title {
          font-size: clamp(1.8rem, 4vw, 2.8rem);
          font-weight: 800;
          line-height: 1.4;
          margin-bottom: 1rem;
      }

      .section-title .gold-text {
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .section-desc {
          color: var(--gray);
          font-size: 1.05rem;
          max-width: 550px;
          margin: 0 auto;
          line-height: 1.8;
      }

      /* ===== STATS SECTION ===== */
      .stats-section {
          padding: 6rem 2rem;
          position: relative;
      }

      .stats-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
      }

      .stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
          max-width: 1000px;
          margin: 0 auto;
      }

      .stat-card {
          text-align: center;
          padding: 3rem 1.5rem;
          background: linear-gradient(145deg, var(--black-card), var(--black-light));
          border: 1px solid rgba(212, 168, 67, 0.1);
          border-radius: 20px;
          position: relative;
          overflow: hidden;
          opacity: 0;
          transform: translateY(50px);
          transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .stat-card.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .stat-card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
          opacity: 0;
          transition: opacity 0.5s;
      }

      .stat-card:hover::before {
          opacity: 1;
      }

      .stat-card:hover {
          border-color: rgba(212, 168, 67, 0.3);
          transform: translateY(-5px);
          box-shadow: 0 20px 60px rgba(212, 168, 67, 0.1);
      }

      .stat-icon {
          width: 60px;
          height: 60px;
          margin: 0 auto 1.5rem;
          background: linear-gradient(135deg, var(--gold), var(--gold-dark));
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          position: relative;
          z-index: 1;
      }

      .stat-number {
          font-size: clamp(2.5rem, 5vw, 3.5rem);
          font-weight: 900;
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          position: relative;
          z-index: 1;
          line-height: 1;
          margin-bottom: 0.5rem;
          text-shadow: 0 0 40px var(--gold-glow);
      }

      .stat-suffix {
          font-size: 0.6em;
          opacity: 0.8;
      }

      .stat-label {
          color: var(--gray-light);
          font-size: 1rem;
          font-weight: 600;
          position: relative;
          z-index: 1;
      }

      .stat-bar {
          width: 60%;
          height: 3px;
          background: rgba(212, 168, 67, 0.1);
          border-radius: 2px;
          margin: 1.2rem auto 0;
          overflow: hidden;
          position: relative;
          z-index: 1;
      }

      .stat-bar-fill {
          height: 100%;
          background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
          border-radius: 2px;
          width: 0;
          transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .stat-card.visible .stat-bar-fill {
          width: var(--fill-width);
      }

      /* ===== TESTIMONIALS SECTION ===== */
      .testimonials-section {
          padding: 6rem 2rem;
          position: relative;
          overflow: hidden;
      }

      .testimonials-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
      }

      .testimonials-wrapper {
          max-width: 900px;
          margin: 0 auto;
          position: relative;
      }

      .testimonials-track {
          overflow: hidden;
          border-radius: 24px;
      }

      .testimonials-slider {
          display: flex;
          transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .testimonial-slide {
          min-width: 100%;
          padding: 3rem;
          opacity: 0;
          transition: opacity 0.7s ease;
      }

      .testimonial-slide.active {
          opacity: 1;
      }

      .testimonial-card {
          background: linear-gradient(145deg, var(--black-card), #1a1a1a);
          border: 1px solid rgba(212, 168, 67, 0.15);
          border-radius: 20px;
          padding: 2.5rem;
          position: relative;
          overflow: hidden;
      }

      .testimonial-card::before {
          content: '"';
          position: absolute;
          top: -10px;
          right: 20px;
          font-size: 8rem;
          font-family: Georgia, serif;
          color: rgba(212, 168, 67, 0.07);
          line-height: 1;
      }

      .testimonial-stars {
          display: flex;
          gap: 4px;
          margin-bottom: 1.5rem;
      }

      .star {
          color: var(--gold);
          font-size: 1.1rem;
      }

      .testimonial-text {
          font-size: 1.15rem;
          line-height: 2;
          color: var(--gray-light);
          margin-bottom: 2rem;
          position: relative;
          z-index: 1;
      }

      .testimonial-author {
          display: flex;
          align-items: center;
          gap: 1rem;
      }

      .author-avatar {
          width: 55px;
          height: 55px;
          border-radius: 50%;
          border: 2px solid var(--gold);
          overflow: hidden;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, var(--gold-dark), var(--gold));
          font-size: 1.3rem;
          font-weight: 800;
          color: var(--black);
      }

      .author-info h4 {
          font-size: 1rem;
          font-weight: 700;
          color: var(--white);
      }

      .author-info p {
          font-size: 0.85rem;
          color: var(--gold);
          font-weight: 500;
      }

      .testimonial-badge {
          display: inline-block;
          padding: 4px 12px;
          background: rgba(212, 168, 67, 0.1);
          border: 1px solid rgba(212, 168, 67, 0.2);
          border-radius: 20px;
          color: var(--gold);
          font-size: 0.75rem;
          font-weight: 600;
          margin-top: 0.5rem;
      }

      /* Slider Controls */
      .slider-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1.5rem;
          margin-top: 2.5rem;
      }

      .slider-btn {
          width: 48px;
          height: 48px;
          border: 1px solid rgba(212, 168, 67, 0.3);
          border-radius: 50%;
          background: transparent;
          color: var(--gold);
          font-size: 1.2rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s;
      }

      .slider-btn:hover {
          background: var(--gold);
          color: var(--black);
          box-shadow: 0 0 25px var(--gold-glow);
      }

      .slider-dots {
          display: flex;
          gap: 8px;
      }

      .slider-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(212, 168, 67, 0.2);
          cursor: pointer;
          transition: all 0.4s;
      }

      .slider-dot.active {
          background: var(--gold);
          box-shadow: 0 0 12px var(--gold-glow);
          transform: scale(1.2);
      }

      .slider-progress {
          width: 100%;
          height: 2px;
          background: rgba(212, 168, 67, 0.1);
          margin-top: 1.5rem;
          border-radius: 1px;
          overflow: hidden;
      }

      .slider-progress-bar {
          height: 100%;
          background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
          width: 0;
          transition: width 0.1s linear;
      }

      /* ===== TRUST ELEMENTS ===== */
      .trust-section {
          padding: 6rem 2rem;
          position: relative;
      }

      .trust-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
      }

      .trust-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;
          max-width: 1000px;
          margin: 0 auto;
      }

      .trust-card {
          text-align: center;
          padding: 2rem 1rem;
          background: linear-gradient(145deg, var(--black-card), var(--black-light));
          border: 1px solid rgba(212, 168, 67, 0.08);
          border-radius: 16px;
          transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          opacity: 0;
          transform: translateY(40px);
      }

      .trust-card.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .trust-card:hover {
          border-color: rgba(212, 168, 67, 0.3);
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(212, 168, 67, 0.08);
      }

      .trust-icon {
          width: 50px;
          height: 50px;
          margin: 0 auto 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
      }

      .trust-card h4 {
          font-size: 0.95rem;
          font-weight: 700;
          color: var(--white);
          margin-bottom: 0.5rem;
      }

      .trust-card p {
          font-size: 0.8rem;
          color: var(--gray);
          line-height: 1.6;
      }
      /* ===== CTA SECTION ===== */
      .cta-section {
          padding: 6rem 2rem;
          position: relative;
      }

      .cta-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
      }

      .cta-box {
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
          padding: 4rem 3rem;
          background: linear-gradient(145deg, var(--black-card), #1a1a1a);
          border: 1px solid rgba(212, 168, 67, 0.2);
          border-radius: 24px;
          position: relative;
          overflow: hidden;
          opacity: 0;
          transform: translateY(40px);
          transition: all 0.8s;
      }

      .cta-box.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .cta-box::before {
          content: '';
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          background: linear-gradient(135deg, var(--gold), transparent, var(--gold));
          border-radius: 25px;
          z-index: -1;
          opacity: 0.1;
      }

      .cta-box h3 {
          font-size: clamp(1.5rem, 3vw, 2.2rem);
          font-weight: 800;
          margin-bottom: 1rem;
      }

      .cta-box p {
          color: var(--gray-light);
          margin-bottom: 2rem;
          font-size: 1.05rem;
          line-height: 1.8;
      }

      .cta-btn {
          display: inline-block;
          padding: 14px 40px;
          background: linear-gradient(135deg, var(--gold), var(--gold-dark));
          color: var(--black);
          font-family: 'Cairo', sans-serif;
          font-size: 1rem;
          font-weight: 700;
          border: none;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s;
          text-decoration: none;
          position: relative;
          overflow: hidden;
      }

      .cta-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
          transition: left 0.5s;
      }

      .cta-btn:hover::before {
          left: 100%;
      }

      .cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 40px var(--gold-glow);
      }

      /* ===== FLOATING PARTICLES ===== */
      .particles {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
          overflow: hidden;
      }

      .particle {
          position: absolute;
          width: 2px;
          height: 2px;
          background: var(--gold);
          border-radius: 50%;
          opacity: 0;
          animation: floatParticle linear infinite;
      }

      /* ===== ANIMATIONS ===== */
      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(30px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      @keyframes fadeInDown {
          from {
              opacity: 0;
              transform: translateY(-30px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      @keyframes scrollBounce {
          0%, 100% { transform: translate(-50%, 0); opacity: 1; }
          50% { transform: translate(-50%, 12px); opacity: 0.3; }
      }

      @keyframes pulse {
          0% { transform: scale(1); opacity: 0.6; }
          100% { transform: scale(2); opacity: 0; }
      }

      @keyframes floatParticle {
          0% {
              opacity: 0;
              transform: translateY(100vh) scale(0);
          }
          10% {
              opacity: 0.6;
          }
          90% {
              opacity: 0.6;
          }
          100% {
              opacity: 0;
              transform: translateY(-10vh) scale(1);
          }
      }

      @keyframes shimmer {
          0% { background-position: -200% center; }
          100% { background-position: 200% center; }
      }

      @keyframes glowPulse {
          0%, 100% { box-shadow: 0 0 20px var(--gold-glow); }
          50% { box-shadow: 0 0 40px var(--gold-glow), 0 0 60px rgba(212, 168, 67, 0.1); }
      }

      /* ===== RESPONSIVE ===== */
      @media (max-width: 768px) {
          .stats-grid {
              grid-template-columns: 1fr;
              gap: 1.5rem;
          }

          .stat-card {
              padding: 2rem 1.5rem;
          }

          .trust-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 1rem;
          }


          .testimonial-slide {
              padding: 1.5rem;
          }

          .testimonial-card {
              padding: 1.5rem;
          }

          .testimonial-text {
              font-size: 1rem;
          }

          .cta-box {
              padding: 2.5rem 1.5rem;
          }

          .section-header {
              margin-bottom: 2.5rem;
          }
      }

      @media (max-width: 480px) {
          .trust-grid {
              grid-template-columns: 1fr;
          }

          .slider-controls {
              gap: 1rem;
          }
      }

      /* ===== COUNTER GLOW EFFECT ===== */
      .stat-number.glowing {
          animation: glowPulse 2s ease-in-out infinite;
          -webkit-text-fill-color: transparent;
          background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
          -webkit-background-clip: text;
          background-clip: text;
          filter: drop-shadow(0 0 8px var(--gold-glow));
      }
    /* ═══════════════════════════════════════
         HERO / INTRO SECTION (above footer)
         ═══════════════════════════════════════ */
         .hero-section {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
      }

      .hero-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(ellipse at 50% 50%, rgba(201, 168, 76, 0.03) 0%, transparent 70%);
          pointer-events: none;
      }

      .hero-badge {
          display: inline-block;
          padding: 8px 24px;
          border: 1px solid var(--gold-dim);
          border-radius: 50px;
          font-size: 0.85rem;
          color: var(--gold);
          letter-spacing: 2px;
          text-transform: uppercase;
          margin-bottom: 40px;
          opacity: 0;
          transform: translateY(20px);
          animation: fadeSlideUp 1s var(--transition-smooth) 0.3s forwards;
      }

      .hero-title {
          font-size: clamp(1.4rem, 3vw, 2.5rem);
          font-weight: 300;
          text-align: center;
          line-height: 1.3;
          max-width: 800px;
          padding: 0 20px;
          opacity: 0;
          transform: translateY(30px);
          animation: fadeSlideUp 1.2s var(--transition-smooth) 0.6s forwards;
      }

      .hero-title span {
          color: var(--gold);
          font-weight: 600;
      }

      .hero-subtitle {
          font-size: clamp(1rem, 2vw, 1.2rem);
          color: var(--white-dim);
          text-align: center;
          margin-top: 24px;
          max-width: 600px;
          padding: 0 20px;
          opacity: 0;
          transform: translateY(20px);
          animation: fadeSlideUp 1s var(--transition-smooth) 0.9s forwards;
      }
      @keyframes scrollPulse {
          0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
          50% { opacity: 1; transform: scaleY(1); }
      }

      /* ═══════════════════════════════════════
         SERVICES PREVIEW SECTION
         ═══════════════════════════════════════ */
      .services-section {
          padding: 120px 20px;
          position: relative;
      }

      .section-label {
          text-align: center;
          font-size: 0.8rem;
          color: var(--gold);
          letter-spacing: 4px;
          text-transform: uppercase;
          margin-bottom: 16px;
      }

      .section-heading {
          text-align: center;
          font-size: clamp(1.8rem, 4vw, 2.8rem);
          font-weight: 300;
          margin-bottom: 60px;
      }

      .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 30px;
          max-width: 1000px;
          margin: 0 auto;
      }

      .service-card {
          background: var(--black-light);
          border: 1px solid rgba(255,255,255,0.04);
          border-radius: 16px;
          padding: 40px 30px;
          text-align: center;
          transition: all 0.5s var(--transition-smooth);
          position: relative;
          overflow: hidden;
          opacity: 0;
          transform: translateY(40px);
      }

      .service-card.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .service-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
          transition: all 0.5s var(--transition-smooth);
      }

      .service-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--gold-dim);
          border-color: rgba(201, 168, 76, 0.1);
      }

      .service-card:hover::before {
          width: 100%;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
      }

      .service-icon {
          font-size: 2.5rem;
          margin-bottom: 20px;
          display: block;
          transition: transform 0.4s var(--transition-bounce);
      }

      .service-card:hover .service-icon {
          transform: scale(1.15);
      }

      .service-card h3 {
          font-size: 1.2rem;
          font-weight: 500;
          margin-bottom: 12px;
          color: var(--white);
      }

      .service-card p {
          font-size: 0.9rem;
          color: var(--white-dim);
          line-height: 1.7;
      }

      /* ═══════════════════════════════════════
         CINEMATIC FOOTER
         ═══════════════════════════════════════ */
      .cinematic-footer {
          position: relative;
          padding: 20px 20px 0;
          overflow: hidden;
          background: var(--black-deep);
      }

      /* Parallax Background Elements */
      .parallax-layer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
      }

      .parallax-orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(80px);
          opacity: 0;
          transition: opacity 1.5s ease;
      }

      .parallax-orb.active {
          opacity: 1;
      }

      .parallax-orb-1 {
          width: 400px;
          height: 400px;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.06), transparent);
          top: -100px;
          right: -100px;
      }

      .parallax-orb-2 {
          width: 300px;
          height: 300px;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.04), transparent);
          bottom: 100px;
          left: -80px;
      }

      .parallax-orb-3 {
          width: 200px;
          height: 200px;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.05), transparent);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }

      /* Grid Lines Background */
      .grid-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image:
              linear-gradient(rgba(201, 168, 76, 0.02) 1px, transparent 1px),
              linear-gradient(90deg, rgba(201, 168, 76, 0.02) 1px, transparent 1px);
          background-size: 80px 80px;
          pointer-events: none;
          z-index: 0;
      }

      .footer-content {
          position: relative;
          z-index: 1;
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
      }

      /* Divider Line */
      .footer-divider {
          width: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
          margin: 0 auto 80px;
          transition: width 1.5s var(--transition-smooth);
      }

      .footer-divider.visible {
          width: 120px;
      }

      /* Main Statement */
      .footer-statement {
          font-size: clamp(1.1rem, 2.5vw, 1.5rem);
          font-weight: 300;
          color: var(--white-dim);
          line-height: 2;
          margin-bottom: 50px;
          opacity: 0;
          transform: translateY(30px);
          transition: all 1s var(--transition-smooth);
      }

      .footer-statement.visible {
          opacity: 1;
          transform: translateY(0);
      }

      /* Brand Name */
      .footer-brand {
          font-size: clamp(3rem, 8vw, 6rem);
          font-weight: 700;
          letter-spacing: 6px;
          color: transparent;
          background: linear-gradient(135deg, var(--gold-light), var(--gold), #A07C2A);
          -webkit-background-clip: text;
          background-clip: text;
          margin-bottom: 16px;
          position: relative;
          display: inline-block;
          opacity: 0;
          transform: translateY(40px) scale(0.95);
          transition: all 1.2s var(--transition-smooth);
      }

      .footer-brand.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
      }

      .footer-brand::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent);
          transition: width 1.5s var(--transition-smooth) 0.5s;
      }

      .footer-brand.visible::after {
          width: 80%;
      }

      .footer-tagline {
          font-size: 0.85rem;
          color: var(--white-dim);
          letter-spacing: 6px;
          text-transform: uppercase;
          margin-bottom: 60px;
          opacity: 0;
          transition: all 1s var(--transition-smooth) 0.4s;
      }

      .footer-tagline.visible {
          opacity: 1;
      }

      /* Navigation Links */
      .footer-nav {
          display: flex;
          justify-content: center;
          gap: 40px;
          flex-wrap: wrap;
          margin-bottom: 60px;
          opacity: 0;
          transform: translateY(20px);
          transition: all 1s var(--transition-smooth) 0.6s;
      }

      .footer-nav.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .footer-nav a {
          position: relative;
          color: var(--white);
          text-decoration: none;
          font-size: 0.95rem;
          font-weight: 400;
          letter-spacing: 1px;
          padding: 8px 0;
          transition: color 0.3s ease;
      }

      .footer-nav a::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0;
          height: 1px;
          background: var(--gold);
          transition: width 0.4s var(--transition-smooth);
      }

      .footer-nav a:hover {
          color: var(--gold);
      }

      .footer-nav a:hover::after {
          width: 100%;
      }

      /* Contact Section */
      .footer-contact {
          display: flex;
          justify-content: center;
          gap: 50px;
          flex-wrap: wrap;
          margin-bottom: 60px;
          opacity: 0;
          transform: translateY(20px);
          transition: all 1s var(--transition-smooth) 0.8s;
      }

      .footer-contact.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .contact-item {
          display: flex;
          align-items: center;
          gap: 12px;
          color: var(--white-dim);
          font-size: 0.9rem;
          transition: all 0.4s var(--transition-smooth);
          cursor: default;
      }

      .contact-item:hover {
          color: var(--white);
          transform: translateY(-2px);
          text-shadow: 0 0 20px var(--gold-dim);
      }

      .contact-icon {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border: 1px solid rgba(201, 168, 76, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.85rem;
          transition: all 0.4s var(--transition-smooth);
          flex-shrink: 0;
      }

      .contact-item:hover .contact-icon {
          border-color: var(--gold);
          background: var(--gold-dim);
          box-shadow: 0 0 20px var(--gold-dim);
      }

      /* Social Links */
      .footer-social {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-bottom: 60px;
          opacity: 0;
          transform: translateY(20px);
          transition: all 1s var(--transition-smooth) 1s;
      }

      .footer-social.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .social-link {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 1px solid rgba(255,255,255,0.08);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--white-dim);
          text-decoration: none;
          font-size: 1.1rem;
          transition: all 0.4s var(--transition-smooth);
          position: relative;
          overflow: hidden;
      }

      .social-link::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: var(--gold-dim);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.4s var(--transition-smooth);
      }

      .social-link:hover {
          border-color: var(--gold);
          color: var(--gold);
          transform: translateY(-4px) scale(1.05);
          box-shadow: 0 8px 30px rgba(201, 168, 76, 0.15);
      }

      .social-link:hover::before {
          width: 100%;
          height: 100%;
      }

      .social-link svg {
          position: relative;
          z-index: 1;
          width: 18px;
          height: 18px;
          fill: currentColor;
      }

      /* CTA Button */
      .footer-cta {
          margin-bottom: 80px;
          opacity: 0;
          transform: translateY(20px);
          transition: all 1s var(--transition-smooth) 1.2s;
      }

      .footer-cta.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .cta-button {
          display: inline-block;
          padding: 16px 48px;
          border: 1px solid var(--gold);
          border-radius: 50px;
          color: var(--gold);
          text-decoration: none;
          font-size: 0.95rem;
          letter-spacing: 2px;
          position: relative;
          overflow: hidden;
          transition: all 0.5s var(--transition-smooth);
          cursor: pointer;
          background: transparent;
          font-family: inherit;
      }

      .cta-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--gold), #A07C2A);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.5s var(--transition-smooth);
          z-index: 0;
      }

      .cta-button span {
          position: relative;
          z-index: 1;
          transition: color 0.5s var(--transition-smooth);
      }

      .cta-button:hover {
          transform: scale(1.05);
          box-shadow: 0 0 40px var(--gold-glow), 0 0 80px var(--gold-dim);
      }

      .cta-button:hover::before {
          transform: scaleX(1);
          transform-origin: left;
      }

      .cta-button:hover span {
          color: var(--black-deep);
      }

      .cta-button:active {
          transform: scale(0.97);
      }

      /* Bottom Bar */
      .footer-bottom {
          border-top: 1px solid rgba(255,255,255,0.04);
          padding: 30px 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 30px;
          flex-wrap: wrap;
          opacity: 0;
          transition: all 1s var(--transition-smooth) 1.4s;
      }

      .footer-bottom.visible {
          opacity: 1;
      }

      .footer-bottom p {
          font-size: 0.8rem;
          color: rgba(255,255,255,0.3);
          letter-spacing: 1px;
      }

      .footer-bottom p span {
          color: var(--gold);
      }

      /* ═══════════════════════════════════════
         FLOATING PARTICLES
         ═══════════════════════════════════════ */
      .particles-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
          overflow: hidden;
      }

      .particle {
          position: absolute;
          width: 2px;
          height: 2px;
          background: var(--gold);
          border-radius: 50%;
          opacity: 0;
          animation: particleFloat linear infinite;
      }

      @keyframes particleFloat {
          0% {
              opacity: 0;
              transform: translateY(0) scale(0);
          }
          10% {
              opacity: 0.6;
              transform: scale(1);
          }
          90% {
              opacity: 0.2;
          }
          100% {
              opacity: 0;
              transform: translateY(-100vh) scale(0);
          }
      }

      /* ═══════════════════════════════════════
         ANIMATIONS
         ═══════════════════════════════════════ */
      @keyframes fadeSlideUp {
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      @keyframes glowPulse {
          0%, 100% { text-shadow: 0 0 20px transparent; }
          50% { text-shadow: 0 0 30px var(--gold-dim); }
      }

      .glow-text {
          animation: glowPulse 4s ease-in-out infinite;
      }

      /* ═══════════════════════════════════════
         RESPONSIVE
         ═══════════════════════════════════════ */
      @media (max-width: 768px) {
          .hero-section {
              min-height: 100vh;
              padding: 40px 20px;
          }

          .services-grid {
              grid-template-columns: 1fr;
              max-width: 400px;
          }

          .cinematic-footer {
              padding: 80px 20px 0;
          }

          .footer-nav {
              gap: 24px;
          }

          .footer-contact {
              flex-direction: column;
              align-items: center;
              gap: 20px;
          }

          .footer-social {
              gap: 14px;
          }

          .footer-bottom {
              flex-direction: column;
              gap: 12px;
              text-align: center;
          }

          .footer-brand {
              letter-spacing: 3px;
          }

          .footer-tagline {
              letter-spacing: 3px;
              font-size: 0.75rem;
          }
      }

      @media (max-width: 480px) {
          .footer-nav {
              gap: 16px;
          }

          .footer-nav a {
              font-size: 0.85rem;
          }

          .cta-button {
              padding: 14px 36px;
              font-size: 0.85rem;
          }
      }

      /* ═══════════════════════════════════════
         CURSOR GLOW (Desktop only)
         ═══════════════════════════════════════ */
      .cursor-glow {
          position: fixed;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(201, 168, 76, 0.04), transparent 70%);
          pointer-events: none;
          z-index: 9999;
          transform: translate(-50%, -50%);
          transition: opacity 0.3s ease;
          opacity: 0;
      }

      .cursor-glow.active {
          opacity: 1;
      }

      @media (max-width: 768px) {
          .cursor-glow {
              display: none;
          }
      }