:root {
  --plum: #5e2a9e;
  --lavender: #d9c5ef;
  --gold: #c7a46b;
  --teal: #61b4a4;
  --dark: #1a222d;
  --light-gold: #cebb96;
}

/* Base */
body {
  font-family: 'Raleway', sans-serif;
  background: #0f0a1f;
  color: white;
}

.serif { 
  font-family: 'Playfair Display', serif; 
}

/* ====================== GLASSMORPHISM ====================== */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ====================== HERO ====================== */
.hero-bg {
  filter: brightness(1.18) contrast(1.28) saturate(1.4) hue-rotate(5deg);
  transition: filter 0.6s ease;
}

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(94, 42, 158, 0.28) 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

/* ====================== CARDS & INTERACTIONS ====================== */
.card-lift {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-lift:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(94, 42, 158, 0.3);
}

.image-zoom img {
  transition: transform 0.55s ease;
}

.image-zoom:hover img {
  transform: scale(1.05);
}

/* Pulse Button */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5); }
  70% { box-shadow: 0 0 0 18px rgba(234, 179, 8, 0); }
}

.pulse-button {
  animation: pulse 2.2s infinite;
}

/* ====================== MODAL ====================== */
.modal-panel {
  animation: modalIn 0.3s ease both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Screenshot Animation */
.screenshot {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.screenshot:hover {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 
              0 8px 10px -6px rgb(0 0 0 / 0.5);
  border-color: rgba(217, 197, 239, 0.6);
}

/* Better scrollbar hiding */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ====================== TEXT & SHADOWS ====================== */
h1, h2, h3 {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.text-shadow {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Scrollbar for screenshots */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Mobile Menu Fix */
#mobileMenu a {
  color: #1a222d;
}