.hero-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #c9a84c, transparent 70%);
  top: -100px; left: -100px;
  animation-delay: 0s;
}
.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #8b6914, transparent 70%);
  top: 50%; right: -80px;
  animation-delay: 3s;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #c9a84c, transparent 70%);
  bottom: -60px; left: 40%;
  animation-delay: 5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 30px) scale(0.95); }
}

/* ── 2. ANIMATED GRID / DOT PATTERN BACKGROUND ── */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(201,168,76,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ── 3. GLOWING LINE BORDERS ON SECTIONS ── */
.glow-section {
  position: relative;
}

.glow-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,0.6),
    transparent
  );
  animation: glowLine 3s ease-in-out infinite;
}

@keyframes glowLine {
  0%, 100% { opacity: 0.4; width: 40%; }
  50%       { opacity: 1;   width: 70%; }
}

/* ── 4. FLOATING PARTICLES (canvas-based — see bg-animations.js) ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ── 5. CURSOR GLOW TRAIL ── */
#cursor-glow {
  position: fixed;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201,168,76,0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: left 0.1s ease, top 0.1s ease;
}

/* ── 6. GLOWING CARD BORDERS (hover) ── */
.glow-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(201,168,76,0) 0%,
    rgba(201,168,76,0.5) 50%,
    rgba(201,168,76,0) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

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

.glow-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.4),
    0 0 40px rgba(201,168,76,0.1);
}

/* ── 7. TEXT SHIMMER EFFECT for headings ── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #c9a84c 0%,
    #fff8e1 40%,
    #c9a84c 60%,
    #8b6914 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

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

/* ── 8. MORPHING BLOB (hero background shape) ── */
.blob {
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    rgba(201,168,76,0.08),
    transparent 70%
  );
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  animation: morphBlob 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes morphBlob {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1); }
  25%  { border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%; transform: rotate(90deg) scale(1.05); }
  50%  { border-radius: 50% 50% 30% 70% / 40% 70% 30% 60%; transform: rotate(180deg) scale(0.95); }
  75%  { border-radius: 70% 30% 60% 40% / 30% 50% 50% 70%; transform: rotate(270deg) scale(1.02); }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: rotate(360deg) scale(1); }
}

/* ── 9. PULSING DOT / LOCATION MARKER ── */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 12px; height: 12px;
}

.pulse-dot::before,
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #c9a84c;
}

.pulse-dot::after {
  animation: pulsePing 1.5s ease-out infinite;
  background: transparent;
  border: 2px solid #c9a84c;
}
@keyframes pulsePing {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
.typewriter::after {
  content: '|';
  color: #c9a84c;
  animation: blink 0.7s step-end infinite;
  margin-left: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.stat-number {
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
  animation: statGlow 3s ease-in-out infinite;
}
@keyframes statGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,168,76,0.3); }
  50%       { text-shadow: 0 0 40px rgba(201,168,76,0.7); }
}
.heading-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.heading-reveal.visible .word:nth-child(1) { opacity:1; transform:none; transition-delay:0.0s; }
.heading-reveal.visible .word:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.heading-reveal.visible .word:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.heading-reveal.visible .word:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.heading-reveal.visible .word:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }
.heading-reveal.visible .word:nth-child(6) { opacity:1; transform:none; transition-delay:0.5s; }