/*
 * PortivaMedia New Site Stylesheet
 * This file defines the dark, futuristic aesthetic with golden highlights
 * used across all pages. It also includes responsive rules and custom
 * animations for a premium, immersive feel.
 */

/* CSS Variables */
:root {
  --primary-bg: #0a0a0a;
  --secondary: #d4af37; /* muted gold */
  --accent: #1f8ef1; /* cool blue accent for subtle highlights */
  --text-light: #f5f5f5;
  --text-muted: #999;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --transition: 0.3s ease;
  --glow-primary: 0 0 20px rgba(212, 175, 55, 0.3);
  --glow-secondary: 0 0 30px rgba(31, 142, 241, 0.2);
  --gradient-gold: linear-gradient(45deg, #d4af37, #f7d74c, #d4af37);
  --gradient-blue: linear-gradient(45deg, #1f8ef1, #4dabf7, #1f8ef1);
}

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

html {
  background-color: #0a0a0a !important;
}

body {
  font-family: var(--font-body);
  color: var(--text-light);
  background: var(--primary-bg);
  line-height: 1.6;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a {
  color: var(--secondary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: #f7d97c;
}

img {
  max-width: 100%;
  display: block;
}

/* Spectacular Loading Screen */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(31, 142, 241, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 60%, #0a0a0a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  perspective: 1000px;
}

.loading-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(212, 175, 55, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(31, 142, 241, 0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(212, 175, 55, 0.2), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(31, 142, 241, 0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particlesFloat 20s linear infinite;
  opacity: 0.6;
}

@keyframes particlesFloat {
  0% { transform: translateY(0px) translateX(0px); }
  100% { transform: translateY(-100vh) translateX(50px); }
}

.loading-grid {
  position: absolute;
  width: 120%;
  height: 120%;
  background-image: 
    linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 15s linear infinite;
  transform: perspective(500px) rotateX(60deg);
}

@keyframes gridMove {
  0% { transform: perspective(500px) rotateX(60deg) translateY(0px); }
  100% { transform: perspective(500px) rotateX(60deg) translateY(-50px); }
}

.loading-waves {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse 800px 200px at 50% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse 600px 150px at 50% 100%, rgba(31, 142, 241, 0.03) 0%, transparent 40%);
  animation: wavePulse 4s ease-in-out infinite alternate;
}

@keyframes wavePulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

.loading-content {
  position: relative;
  z-index: 5;
  text-align: center;
  transform-style: preserve-3d;
}

.loading-logo-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 3rem;
  transform-style: preserve-3d;
}

.holographic-ring {
  position: absolute;
  border: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  animation: ringRotate 4s linear infinite;
}

.holographic-ring:nth-child(1) {
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  border-color: rgba(212, 175, 55, 0.6);
  border-width: 3px;
  animation-duration: 4s;
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.3),
    inset 0 0 20px rgba(212, 175, 55, 0.1);
}

.holographic-ring.ring-2 {
  width: 150px;
  height: 150px;
  top: 25px;
  left: 25px;
  border-color: rgba(31, 142, 241, 0.5);
  border-width: 2px;
  animation-duration: 3s;
  animation-direction: reverse;
  box-shadow: 
    0 0 15px rgba(31, 142, 241, 0.3),
    inset 0 0 15px rgba(31, 142, 241, 0.1);
}

.holographic-ring.ring-3 {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  border-color: rgba(255, 255, 255, 0.4);
  border-width: 1px;
  animation-duration: 2s;
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
}

@keyframes ringRotate {
  0% { transform: rotateY(0deg) rotateX(0deg); }
  100% { transform: rotateY(360deg) rotateX(20deg); }
}

.loading-logo-professional {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 40px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%),
    linear-gradient(45deg, rgba(212, 175, 55, 0.08) 0%, rgba(31, 142, 241, 0.08) 100%);
  border: 3px solid rgba(212, 175, 55, 0.5);
  border-radius: 50%;
  backdrop-filter: blur(15px);
  box-shadow: 
    0 0 30px rgba(212, 175, 55, 0.4),
    inset 0 0 20px rgba(212, 175, 55, 0.1);
  animation: logo3DFloat 3s ease-in-out infinite alternate;
}

.logo-p, .logo-m {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #d4af37;
  text-shadow: 
    0 0 10px rgba(212, 175, 55, 0.8),
    0 0 20px rgba(212, 175, 55, 0.6),
    0 0 30px rgba(212, 175, 55, 0.4);
  position: relative;
  display: inline-block;
  margin: 0 2px;
}

.logo-p {
  transform: translateX(-3px);
}

.logo-m {
  transform: translateX(3px);
}

.logo-accent {
  position: absolute;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  animation: accentPulse 2s ease-in-out infinite alternate;
}

@keyframes accentPulse {
  0% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scaleX(0.8);
  }
  100% { 
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1.2);
  }
}

@keyframes logo3DFloat {
  0% { 
    transform: rotateY(0deg) translateZ(0px) scale(1);
    text-shadow: 
      0 0 10px rgba(212, 175, 55, 0.8),
      0 0 20px rgba(212, 175, 55, 0.6),
      0 0 30px rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 0.3);
  }
  100% { 
    transform: rotateY(15deg) translateZ(10px) scale(1.05);
    text-shadow: 
      0 0 15px rgba(212, 175, 55, 1),
      0 0 30px rgba(212, 175, 55, 0.8),
      0 0 45px rgba(31, 142, 241, 0.6);
    border-color: rgba(212, 175, 55, 0.6);
  }
}

.energy-pulse {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -50px;
  left: -50px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50%;
  animation: energyPulse 2s ease-out infinite;
}

@keyframes energyPulse {
  0% {
    transform: scale(0.3);
    opacity: 1;
    border-color: rgba(212, 175, 55, 0.8);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    border-color: rgba(212, 175, 55, 0);
  }
}

.loading-text-container {
  margin-bottom: 4rem;
}

.loading-text-main {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #d4af37, #f7d97c, #d4af37);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s ease-in-out infinite, textFloat 2s ease-in-out infinite alternate;
  letter-spacing: 0.1em;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
}

.loading-text-sub {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(212, 175, 55, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: -0.5rem;
  letter-spacing: 0.2em;
  animation: textGlow 2s ease-in-out infinite alternate;
}

.loading-tagline {
  font-size: 1rem;
  color: rgba(212, 175, 55, 0.9);
  margin-top: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  animation: taglineSlide 2s ease-out 1s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.loading-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
  font-style: italic;
  animation: taglineSlide 2s ease-out 1.5s forwards;
  opacity: 0;
  transform: translateY(15px);
}

@keyframes textShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

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

@keyframes textGlow {
  0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
  100% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(212, 175, 55, 0.4); }
}

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

.quantum-loader {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 3rem;
}

.quantum-orb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 1) 0%, rgba(212, 175, 55, 0.3) 70%, transparent 100%);
  animation: quantumOrbit 3s linear infinite;
}

.quantum-orb.orb-2 {
  background: radial-gradient(circle, rgba(31, 142, 241, 1) 0%, rgba(31, 142, 241, 0.3) 70%, transparent 100%);
  animation-duration: 2.5s;
  animation-delay: -0.8s;
}

.quantum-orb.orb-3 {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
  animation-duration: 3.5s;
  animation-delay: -1.6s;
}

@keyframes quantumOrbit {
  0% {
    transform: rotate(0deg) translateX(50px) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg) translateX(50px) rotate(-360deg);
    opacity: 1;
  }
}

.quantum-trail {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 10px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50%;
  animation: trailSpin 4s linear infinite;
}

@keyframes trailSpin {
  0% { transform: rotate(0deg) scale(1); opacity: 0.2; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.2; }
}

.loading-progress-container {
  width: 300px;
  margin: 0 auto;
  position: relative;
}

.loading-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.loading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), rgba(212, 175, 55, 1), rgba(212, 175, 55, 0.8), transparent);
  animation: progressFlow 2s ease-in-out infinite;
}

@keyframes progressFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

.loading-percentage {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(212, 175, 55, 0.9);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.loading-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.05), transparent 10%),
    conic-gradient(from 45deg, transparent, rgba(31, 142, 241, 0.03), transparent 10%);
  animation: raysRotate 20s linear infinite;
}

@keyframes raysRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Cursor Trail Canvas */
#cursor-trail-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Dynamic Color Overlay */
#dynamic-color-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: 
    radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at calc(100% - var(--mouse-x, 50%)) calc(100% - var(--mouse-y, 50%)), rgba(31, 142, 241, 0.03) 0%, transparent 50%);
  transition: all 0.3s ease;
}



/* Perspective Grid */
.perspective-grid {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
  background-image: 
    linear-gradient(rgba(212, 175, 55, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(800px) rotateX(60deg);
  animation: gridPerspective 20s linear infinite;
  opacity: 0.3;
}

@keyframes gridPerspective {
  0% { transform: perspective(800px) rotateX(60deg) translateY(0px) translateX(0px); }
  100% { transform: perspective(800px) rotateX(60deg) translateY(-80px) translateX(-40px); }
}

/* Enhanced Button Animations */
.enhanced-btn {
  position: relative;
  overflow: hidden;
}

.enhanced-btn .btn-text {
  position: relative;
  z-index: 2;
}

.btn-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.enhanced-btn:hover .btn-particles::before,
.enhanced-btn:hover .btn-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: particleExplode 0.6s ease-out forwards;
}

.enhanced-btn:hover .btn-particles::before {
  top: 20%;
  left: 30%;
  animation-delay: 0.1s;
}

.enhanced-btn:hover .btn-particles::after {
  top: 60%;
  right: 25%;
  animation-delay: 0.2s;
}

@keyframes particleExplode {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(3) translate(20px, -20px);
    opacity: 0;
  }
}

/* Enhanced Scroll Down Animation */
.animated-scroll {
  position: relative;
}

.scroll-indicator-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  animation: scrollRingPulse 2s ease-in-out infinite;
}

@keyframes scrollRingPulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
    border-color: rgba(212, 175, 55, 0.6);
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    border-color: rgba(212, 175, 55, 0);
  }
}

/* Additional Spectacular Keyframes */
@keyframes particleSparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes sparkleMove {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Holographic Effects */
.hero-title {
  position: relative;
  overflow: hidden;
}

.hero-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  animation: holographicScan 4s ease-in-out infinite;
}

@keyframes holographicScan {
  0%, 100% { left: -100%; opacity: 0; }
  50% { left: 100%; opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 2rem;
  overflow: hidden;
  position: relative;
}

.loading-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-gold);
  animation: progressFill 3s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

@keyframes progressFill {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: 100%; }
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 175, 55, 0.05);
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar.shrink {
  background: rgba(10, 10, 10, 0.98);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.9), 0 0 60px rgba(212, 175, 55, 0.1);
  padding: 0.5rem 0;
}
.navbar .brand {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}
.navbar .brand:hover {
  filter: brightness(1.2);
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links li a {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.5px;
}
.nav-links li a::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links li a.active,
.nav-links li a:hover {
  color: var(--secondary);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}
.nav-links li a.active::before,
.nav-links li a:hover::before {
  width: 100%;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.nav-agent-info {
  display: flex;
  align-items: center;
  margin-left: auto;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.nav-agent-info span {
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .nav-agent-info {
    display: none;
  }
}

/* Hero Section with New Integrated Logo Backgrounds */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../attached_assets/generated_images/Dystopian_cityscape_with_integrated_logo_3c0a3563.png');
  background-size: 120% 120%;
  background-position: center;
  overflow: hidden;
  animation: heroZoom 60s ease-in-out infinite alternate, heroShift 120s ease-in-out infinite, backgroundMove 40s ease-in-out infinite;
  perspective: 1000px;
  background-attachment: fixed;
}

/* Multiple Hero Backgrounds with Integrated Logos */
.hero.hero-alt-1 {
  background-image: url('../attached_assets/generated_images/Luxury_penthouse_with_integrated_logo_b378728d.png');
  background-size: 130% 130%;
  background-attachment: fixed;
  animation: backgroundMove 35s ease-in-out infinite, heroZoom 60s ease-in-out infinite alternate;
}

.hero.hero-alt-2 {
  background-image: url('../attached_assets/generated_images/Futuristic_office_with_integrated_logo_d4db7f47.png');
  background-size: 125% 125%;
  background-attachment: fixed;
  animation: backgroundMove 30s ease-in-out infinite reverse, heroZoom 60s ease-in-out infinite alternate;
}

.hero.hero-alt-3 {
  background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=2044&q=80');
  background-size: 140% 140%;
  background-attachment: fixed;
  animation: backgroundMove 45s ease-in-out infinite, heroZoom 60s ease-in-out infinite alternate;
}

.hero.hero-alt-4 {
  background-image: url('../attached_assets/Unknown_1754002532553.png');
  background-size: 135% 135%;
  background-position: center;
  background-attachment: fixed;
  animation: cityLightsMove 25s ease-in-out infinite, heroZoom 60s ease-in-out infinite alternate;
}

/* Hero Canvas Animation */
.pm-holo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes heroShift {
  0%, 33% {
    filter: hue-rotate(0deg) brightness(1) contrast(1.1);
  }
  34%, 66% {
    filter: hue-rotate(10deg) brightness(1.1) contrast(1.2);
  }
  67%, 100% {
    filter: hue-rotate(-5deg) brightness(0.95) contrast(1.15);
  }
}



/* Removed overlay logo since backgrounds now have integrated logos */

@keyframes logoGlow {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  100% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateX(20px) translateY(-10px) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-10px) translateY(15px) scale(0.9);
    opacity: 0.4;
  }
}

@keyframes holographicFloat {
  0% {
    filter: hue-rotate(0deg) brightness(1) saturate(1.2);
    transform: translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
  25% {
    filter: hue-rotate(30deg) brightness(1.2) saturate(1.5);
    transform: translateY(-10px) rotate(2deg);
    opacity: 1;
  }
  50% {
    filter: hue-rotate(60deg) brightness(0.9) saturate(1.8);
    transform: translateY(5px) rotate(-1deg);
    opacity: 0.9;
  }
  75% {
    filter: hue-rotate(90deg) brightness(1.1) saturate(1.3);
    transform: translateY(-5px) rotate(1.5deg);
    opacity: 0.95;
  }
  100% {
    filter: hue-rotate(120deg) brightness(1) saturate(1.2);
    transform: translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
}

@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

/* Moving Background Animations */
@keyframes backgroundMove {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 25%;
  }
  50% {
    background-position: 200% 50%;
  }
  75% {
    background-position: 100% 75%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes cityLightsMove {
  0% {
    background-position: 0% 0%;
    filter: brightness(1) contrast(1) hue-rotate(0deg);
  }
  25% {
    background-position: 50% 25%;
    filter: brightness(1.2) contrast(1.1) hue-rotate(10deg);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(0.9) contrast(1.2) hue-rotate(5deg);
  }
  75% {
    background-position: 150% 75%;
    filter: brightness(1.1) contrast(0.9) hue-rotate(-5deg);
  }
  100% {
    background-position: 0% 0%;
    filter: brightness(1) contrast(1) hue-rotate(0deg);
  }
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 1rem;
  animation: heroContentReveal 2s cubic-bezier(0.4, 0, 0.2, 1) forwards, heroFloat 6s ease-in-out infinite;
  opacity: 0;
  transform: translateY(50px) rotateX(5deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes heroContentReveal {
  0% {
    opacity: 0;
    transform: translateY(80px) rotateX(15deg) scale(0.9);
    filter: blur(10px);
  }
  50% {
    opacity: 0.7;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0px);
  }
}

@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-10px) rotateX(2deg);
  }
}

/* Hero Logo */
.hero-logo {
  width: 180px;
  margin: 0 auto 1rem;
  animation: float 6s ease-in-out infinite;
}
.hero-logo.small {
  width: 140px;
}

/* Blue variant for hero logos on the services page */
.hero-logo.blue {
  /* shift the hue to create a teal/blue glow and boost saturation */
  filter: hue-rotate(190deg) saturate(200%) brightness(1.2);
  /* reuse the floating animation for subtle motion */
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #f5f5f5, #d4af37, #f5f5f5);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGlow 3s ease-in-out infinite alternate, titleShimmer 4s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
  position: relative;
}

/* Disabled yellow streak animation
.hero-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  animation: titleScan 3s linear infinite;
  pointer-events: none;
}
*/

@keyframes titleGlow {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.2) saturate(1.3); }
}

@keyframes titleShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes titleScan {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--text-muted);
  opacity: 0.9;
  animation: subtitleFade 2s ease-out 0.5s forwards;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.hero-subtitle.premium-tagline {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: premiumTaglineFade 1.5s ease-out 0.8s forwards;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
  position: relative;
}

.hero-subtitle.premium-tagline::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

@keyframes premiumTaglineFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes subtitleFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 0.9; transform: translateY(0); }
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  animation: buttonReveal 2s ease-out 1s forwards;
  opacity: 0;
  transform: translateY(30px);
}

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

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn-primary {
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  color: #000;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.5);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5), 0 0 40px rgba(212, 175, 55, 0.3);
  filter: brightness(1.1);
}

.btn-secondary {
  background: rgba(31, 142, 241, 0.1);
  color: var(--text-light);
  border: 2px solid var(--accent);
  box-shadow: 0 4px 20px rgba(31, 142, 241, 0.2), inset 0 1px 0 rgba(31, 142, 241, 0.1);
}

.btn-secondary:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(31, 142, 241, 0.2);
  box-shadow: 0 8px 30px rgba(31, 142, 241, 0.4), 0 0 40px rgba(31, 142, 241, 0.2);
  border-color: #4dabf7;
  color: #4dabf7;
  text-shadow: 0 0 20px rgba(77, 171, 247, 0.5);
}

.btn:active {
  transform: translateY(-2px) scale(0.98);
}

/* Sections */
.section {
  padding: 5rem 0;
}
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.section-header h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.section-header p {
  color: var(--text-muted);
}

/* About */
.about-section {
  background: #0f0f0f;
}
.about-body {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-muted);
}

/* Services */
.services-section {
  background: #0c0c0c;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.service-card {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.service-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.1) 45deg,
    rgba(31, 142, 241, 0.05) 90deg,
    transparent 135deg,
    rgba(212, 175, 55, 0.08) 180deg,
    transparent 225deg,
    rgba(212, 175, 55, 0.05) 270deg,
    transparent 315deg,
    transparent 360deg
  );
  opacity: 0;
  animation: hologramSpin 10s linear infinite;
  transition: opacity 0.6s ease;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes hologramSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.service-card:hover {
  transform: translateY(-20px) rotateX(8deg) rotateY(5deg) scale(1.05);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.8), 
    0 0 50px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 175, 55, 0.5);
  filter: brightness(1.1);
}

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

.service-card:hover::after {
  opacity: 1;
}

.service-card .icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
}

.service-card:hover .icon {
  transform: scale(1.2) rotateY(15deg) rotateX(10deg) translateZ(20px);
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.7));
  animation: iconGlow 2s ease-in-out infinite alternate;
}

@keyframes iconGlow {
  0% { 
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.7));
  }
  100% { 
    filter: drop-shadow(0 0 50px rgba(212, 175, 55, 0.9)) drop-shadow(0 0 80px rgba(31, 142, 241, 0.3));
  }
}

.service-card h3 {
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
}

.service-card:hover h3 {
  transform: translateZ(10px);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.service-card p {
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
}

.service-card:hover p {
  transform: translateZ(5px);
}
.services-hint {
  text-align: center;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Process Timeline */
.process-section {
  background: #0f0f0f;
}
.process-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.process-step {
  background: #121212;
  padding: 2rem 1.5rem;
  border-radius: 15px;
  width: 260px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.process-step .step-number {
  display: inline-block;
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.process-step .step-icon {
  font-size: 1.5rem;
  color: var(--secondary);
  display: block;
  margin-bottom: 0.5rem;
}
.process-step h4 {
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
}
.process-step p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #111 0%, #090909 50%, #111 100%);
  text-align: center;
  color: var(--text-light);
  padding: 4rem 1rem;
}
.cta-section h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.cta-section p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Contact */
.contact-section {
  background: #0c0c0c;
}
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
}
.contact-form {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  background: #121212;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}
.contact-form .form-group {
  margin-bottom: 1rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  background: #1a1a1a;
  color: var(--text-light);
  resize: none;
}
.contact-form button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 30px;
  background: var(--secondary);
  color: #0a0a0a;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.contact-form button:hover {
  background: #f7d74c;
}
.contact-info {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  color: var(--text-muted);
}
.contact-info p {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-info a {
  color: var(--secondary);
}
.qr-wrapper {
  margin: 1rem 0;
}
.qr-wrapper img {
  width: 160px;
  height: 160px;
  border-radius: 8px;
}
.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.social-links a {
  color: var(--secondary);
  font-size: 1.2rem;
  transition: var(--transition);
}
.social-links a:hover {
  color: #f7d97c;
}

/* Inner Hero for Services & Portfolio */
.inner-hero {
  position: relative;
  height: 60vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: heroZoom 60s ease-in-out infinite alternate;
}

/* Scroll Down Arrow */
.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--secondary);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
  cursor: pointer;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, -8px);
  }
  60% {
    transform: translate(-50%, -4px);
  }
}
.inner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}
.inner-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.inner-hero h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.inner-hero p {
  color: var(--text-muted);
}

/* Portfolio Hero */
.portfolio-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-hero .hero-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.portfolio-hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  animation: backgroundMove 30s ease-in-out infinite alternate;
}

.portfolio-hero .hero-bg.active {
  opacity: 1;
}

.portfolio-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(16, 24, 40, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 0;
  mix-blend-mode: screen;
}

.portfolio-hero .hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(31, 142, 241, 0.1) 0%, transparent 50%);
  animation: particleFloat 20s ease-in-out infinite;
}

.portfolio-hero .hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  padding: 0 2rem;
}

.portfolio-hero .hero-text h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.portfolio-hero .hero-title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: heroTextSlide 1s ease-out forwards;
}

.portfolio-hero .hero-title-line:nth-child(2) {
  animation-delay: 0.3s;
  background: linear-gradient(135deg, var(--secondary) 0%, #f7d97c  100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-hero .hero-subtitle {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  opacity: 0;
  animation: heroTextSlide 1s ease-out 0.6s forwards;
}

.portfolio-hero .hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: heroTextSlide 1s ease-out 0.9s forwards;
}

.portfolio-hero .stat {
  text-align: center;
}

.portfolio-hero .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.portfolio-hero .stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.portfolio-hero .hero-cta {
  opacity: 0;
  animation: heroTextSlide 1s ease-out 1.2s forwards;
}

.portfolio-hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.portfolio-hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

@media (max-width: 768px) {
  .portfolio-hero .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .portfolio-hero .hero-stats .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  
  .portfolio-hero .stat-number {
    margin-bottom: 0;
  }
}

/* Services Hero */
.services-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-hero .hero-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.services-hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  animation: backgroundMove 35s ease-in-out infinite alternate;
}

.services-hero .hero-bg.active {
  opacity: 1;
}

.services-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(16, 24, 40, 0.65) 50%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 0;
  mix-blend-mode: screen;
}

.services-hero .hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: radial-gradient(circle at 25% 75%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 75% 25%, rgba(31, 142, 241, 0.12) 0%, transparent 50%);
  animation: particleFloat 25s ease-in-out infinite;
}

.services-hero .hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1000px;
  padding: 0 2rem;
}

.services-hero .hero-text h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.services-hero .hero-title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: heroTextSlide 1s ease-out forwards;
}

.services-hero .hero-title-line:nth-child(2) {
  animation-delay: 0.3s;
  background: linear-gradient(135deg, var(--secondary) 0%, #f7d97c  100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-hero .hero-subtitle {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: heroTextSlide 1s ease-out 0.6s forwards;
}

.services-hero .hero-services-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: heroTextSlide 1s ease-out 0.9s forwards;
}

.services-hero .service-preview {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(18, 18, 18, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.services-hero .service-preview:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.1);
}

.services-hero .service-preview i {
  font-size: 1.5rem;
  color: var(--secondary);
  min-width: 24px;
}

.services-hero .service-preview span {
  font-weight: 600;
  color: var(--text-primary);
}

.services-hero .hero-cta {
  opacity: 0;
  animation: heroTextSlide 1s ease-out 1.2s forwards;
}

.services-hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.services-hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

@media (max-width: 768px) {
  .services-hero .hero-services-preview {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .services-hero .service-preview {
    justify-content: center;
  }
}

/* Portfolio Grid */
.portfolio-section {
  background: #0f0f0f;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Removed duplicate - using enhanced version below */
/* Removed duplicate - using enhanced version below */
.portfolio-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  display: block;
}
.portfolio-item:hover img {
  transform: scale(1.02);
}

/* Video Grid */
.video-section {
  background: #0c0c0c;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.video-grid video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Detailed Services */
.detailed-services {
  background: #0f0f0f;
}
.detailed-services .service-details {
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.detailed-services h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.detailed-services p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* Service lists provide extra details under each service heading */
.service-list {
  margin: 0 0 1.5rem 0;
  padding-left: 1.5rem;
  list-style-type: disc;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #121212;
  padding: 2rem;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
  position: relative;
}
.modal-content h3 {
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}
.modal-content p {
  color: var(--text-muted);
  line-height: 1.6;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}
.modal-close:hover {
  color: var(--secondary);
}

/* Stats Section */
.stats-section {
  background: #0c0c0c;
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}
.stat {
  text-align: center;
  padding: 1rem 2rem;
}
.stat-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--secondary);
  display: block;
  margin-bottom: 0.5rem;
}
.stat p {
  color: var(--text-muted);
}

/* FAQ Section */
.faq-section {
  background: #0f0f0f;
}
.faq-item {
  border-bottom: 1px solid #222;
  padding: 1rem 0;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.faq-answer {
  display: none;
  padding-left: 1rem;
  padding-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.faq-item.active .faq-answer {
  display: block;
}
.faq-toggle i {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-toggle i {
  transform: rotate(45deg);
}
/* Scroll To Top */
#scrollToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--secondary);
  color: #0a0a0a;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--secondary);
  width: 0;
  z-index: 1000;
}
#scrollToTop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}
.fab-main {
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  color: #0a0a0a;
  border: 2px solid rgba(212, 175, 55, 0.3);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.2);
  cursor: pointer;
  font-size: 1.4rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.fab-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fab-main:hover {
  transform: scale(1.1) rotateZ(90deg);
  box-shadow: 0 12px 35px rgba(0,0,0,0.7), 0 0 30px rgba(212, 175, 55, 0.4);
  filter: brightness(1.2);
}

.fab-main:hover::before {
  opacity: 1;
}

.fab-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 0.8rem;
  animation: fabMenuSlide 0.3s ease-out forwards;
}

@keyframes fabMenuSlide {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fab.show .fab-menu {
  display: flex;
}
.fab-item {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  color: var(--secondary);
  border: 2px solid rgba(212, 175, 55, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 15px rgba(212, 175, 55, 0.1);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}
.fab-item:hover {
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  color: #0a0a0a;
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.7), 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Animations for elements when in view */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Advanced Animation Keyframes */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) scale(1);
    opacity: 0;
  }
}

@keyframes ripple {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 50px rgba(212, 175, 55, 0.3);
  }
}

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(15deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

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

/* Enhanced Section Headers */
.section-header h2 {
  background: linear-gradient(45deg, #f5f5f5, #d4af37, #f5f5f5);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s ease-in-out infinite;
}

/* Advanced Floating Elements */
.floating-element {
  animation: advancedFloat 8s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes advancedFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  25% {
    transform: translateY(-15px) rotateX(2deg) rotateZ(1deg);
  }
  50% {
    transform: translateY(-5px) rotateX(-1deg) rotateZ(-0.5deg);
  }
  75% {
    transform: translateY(-20px) rotateX(1deg) rotateZ(0.5deg);
  }
}

/* 3D Holographic Background Elements */
.hologram-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hologram-shape {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  animation: hologramFloat 20s linear infinite;
}

.hologram-shape:nth-child(1) {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.hologram-shape:nth-child(2) {
  top: 60%;
  right: 10%;
  animation-delay: -5s;
  animation-duration: 30s;
  border-radius: 20%;
}

.hologram-shape:nth-child(3) {
  top: 80%;
  left: 20%;
  animation-delay: -10s;
  animation-duration: 35s;
  border-radius: 0;
  transform: rotate(45deg);
}

@keyframes hologramFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.8);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-100px) rotate(180deg) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0) rotate(360deg) scale(0.8);
    opacity: 0.1;
  }
}

/* Enhanced 3D Process Steps */
.process-step {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.process-step::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.05) 90deg,
    rgba(31, 142, 241, 0.03) 180deg,
    transparent 270deg
  );
  animation: processHologram 8s linear infinite;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.process-step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.02) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes processHologram {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.process-step:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(3deg) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 175, 55, 0.4);
}

.process-step:hover::before {
  opacity: 1;
}

.process-step:hover::after {
  opacity: 1;
}

.process-step .step-number {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  transform-style: preserve-3d;
  transition: all 0.4s ease;
}

.process-step:hover .step-number {
  transform: translateZ(10px) scale(1.1);
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
}

/* Enhanced Contact Section */
.contact-section {
  position: relative;
}

/* Enhanced TidyCal Styling */
.tidycal-container {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border-radius: 16px;
  padding: 2.5rem;
  margin-top: 3rem;
  border: 2px solid rgba(212, 175, 55, 0.3);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  animation: tidyCalFloat 6s ease-in-out infinite alternate;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tidycal-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.03) 90deg,
    rgba(31, 142, 241, 0.02) 180deg,
    transparent 270deg
  );
  animation: tidyCalHologram 12s linear infinite;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.tidycal-container:hover::before {
  opacity: 1;
}

.tidycal-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.02) 0%, transparent 60%);
  pointer-events: none;
}

@keyframes tidyCalFloat {
  0% {
    transform: translateY(0px) rotateX(0deg);
    box-shadow: 
      0 15px 45px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(212, 175, 55, 0.1);
  }
  100% {
    transform: translateY(-10px) rotateX(2deg);
    box-shadow: 
      0 25px 60px rgba(0, 0, 0, 0.6),
      0 0 50px rgba(212, 175, 55, 0.2);
  }
}

@keyframes tidyCalHologram {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.02); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Enhanced TidyCal Elements */
.enhanced-tidycal {
  position: relative;
}

.tidycal-glow-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border: 2px solid rgba(212, 175, 55, 0.2);
  border-radius: 24px;
  animation: tidyCalRingGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes tidyCalRingGlow {
  0% {
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
  }
  100% {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
  }
}

.tidycal-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(2px 2px at 10% 20%, rgba(212, 175, 55, 0.3), transparent),
    radial-gradient(2px 2px at 90% 80%, rgba(31, 142, 241, 0.2), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(212, 175, 55, 0.2), transparent);
  background-size: 150px 150px;
  animation: tidyCalParticles 15s linear infinite;
  opacity: 0.6;
}

@keyframes tidyCalParticles {
  0% { background-position: 0% 0%, 100% 100%, 50% 50%, 25% 75%; }
  100% { background-position: -150px -150px, 250px 250px, 200px 200px, 175px 225px; }
}

.tidycal-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.tidycal-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.4));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border: 2px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(10px);
  animation: tidyCalIconFloat 3s ease-in-out infinite alternate;
  position: relative;
}

.tidycal-icon::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50%;
  animation: tidyCalIconRing 2s ease-out infinite;
}

@keyframes tidyCalIconFloat {
  0% { 
    transform: rotateY(0deg) scale(1);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3));
  }
  100% { 
    transform: rotateY(15deg) scale(1.05);
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
  }
}

@keyframes tidyCalIconRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.tidycal-icon i {
  font-size: 2rem;
  color: var(--secondary);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.tidycal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.tidycal-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0;
}

.tidycal-embed {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Client Video Testimonials */
.testimonials-section {
  background: #0a0a0a;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(31, 142, 241, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

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

.testimonial-video {
  display: none;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-video.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  opacity: 1;
  transform: translateX(0);
}

.video-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(212, 175, 55, 0.1);
  background: #111;
  aspect-ratio: 16/9;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.9), rgba(255, 215, 0, 0.8));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
}

.play-overlay i {
  color: #0a0a0a;
  font-size: 1.8rem;
  margin-left: 4px;
}

.testimonial-content {
  color: var(--text-light);
}

.testimonial-content blockquote {
  font-size: 1.3rem;
  font-style: italic;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 2rem;
  color: var(--text-light);
}

.testimonial-content blockquote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 3rem;
  color: var(--secondary);
  font-family: serif;
}

.testimonial-content cite {
  display: block;
  margin-bottom: 1rem;
  color: var(--secondary);
  font-weight: 600;
}

.testimonial-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.testimonial-stats span {
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  backdrop-filter: blur(10px);
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

.prev-testimonial,
.next-testimonial {
  background: transparent;
  border: 2px solid rgba(212, 175, 55, 0.3);
  color: var(--secondary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev-testimonial:hover,
.next-testimonial:hover {
  background: var(--secondary);
  color: #0a0a0a;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
}

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

.dot.active {
  background: var(--secondary);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* Before & After Showcase */
.before-after-section {
  background: #111;
  padding: 4rem 1rem;
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.comparison-card {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s ease;
}

.comparison-card:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.4);
}

.comparison-slider {
  position: relative;
  aspect-ratio: 16/12;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  cursor: grab;
  height: 400px;
}

.comparison-slider:active {
  cursor: grabbing;
}

.before-image,
.after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-image img,
.after-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.after-image {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  transition: clip-path 0.3s ease;
}

.label {
  position: absolute;
  top: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-light);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.before-image .label {
  left: 1rem;
}

.after-image .label {
  right: 1rem;
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  z-index: 5;
}

.slider-handle:active {
  cursor: grabbing;
}

.slider-handle i {
  color: #0a0a0a;
  font-size: 1.2rem;
}

.comparison-card h4 {
  font-family: var(--font-heading);
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.comparison-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Client Photos Section */
.client-photos-section {
  background: #0f0f0f;
  padding: 4rem 1rem;
  position: relative;
}

.client-photos-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(31, 142, 241, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.client-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.client-photo-card {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.client-photo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 0%, rgba(212, 175, 55, 0.05) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.client-photo-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.4);
}

.client-photo-card:hover::before {
  opacity: 1;
}

.client-photo-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border: 3px solid rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  filter: grayscale(30%);
}

.client-photo-card:hover img {
  filter: grayscale(0%);
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  transform: scale(1.05);
}

.client-info h4 {
  font-family: var(--font-heading);
  color: var(--text-light);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.client-info p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.client-info .result {
  display: inline-block;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  font-style: italic;
  backdrop-filter: blur(10px);
}

/* Floating PM Logo for TidyCal */
.floating-pm-logo {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 80px;
  height: 80px;
  animation: pmLogoFloat 4s ease-in-out infinite alternate;
  z-index: 10;
}

.floating-pm-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
  animation: pmLogoGlow 3s ease-in-out infinite alternate;
}

@keyframes pmLogoFloat {
  0% { 
    transform: translateY(0px) rotateY(0deg) scale(1);
  }
  100% { 
    transform: translateY(-15px) rotateY(10deg) scale(1.05);
  }
}

@keyframes pmLogoGlow {
  0% { 
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
  }
  100% { 
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.9));
  }
}

.floating-pm-logo .floating-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.floating-pm-logo .ring {
  position: absolute;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  animation: pmRingRotate 6s linear infinite;
}

.floating-pm-logo .ring-1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.floating-pm-logo .ring-2 {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  animation-direction: reverse;
  animation-duration: 8s;
}

.floating-pm-logo .ring-3 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  animation-duration: 4s;
}

@keyframes pmRingRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Before/After Transformation Section */
.before-after-section {
  padding: 8rem 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}

.before-after-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.before-after-container {
  margin-bottom: 6rem;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 3rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
  overflow: hidden;
}

.before-after-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

.before-after-header {
  text-align: center;
  margin-bottom: 3rem;
}

.before-after-header h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.agent-credit {
  display: inline-block;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.agent-credit span {
  color: var(--secondary);
  font-weight: 600;
  font-size: 1rem;
}

.before-after-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

.before-image, .after-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}

.before-image:hover, .after-image:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 80px rgba(212, 175, 55, 0.3);
}

.before-image img, .after-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: all 0.5s ease;
}

.image-label {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 0.5rem 1rem;
  border-radius: 15px;
  font-weight: 700;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.before-label {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}

.after-label {
  background: rgba(40, 167, 69, 0.8);
  color: white;
}

.transformation-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: arrowPulse 2s ease-in-out infinite;
}

.transformation-arrow i {
  font-size: 3rem;
  color: var(--secondary);
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.transformation-arrow span {
  color: var(--text-light);
  font-weight: 600;
  font-size: 1.1rem;
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes arrowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.transformation-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem 1rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s ease;
}

.stat:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.stat-label {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .before-after-comparison {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .transformation-arrow {
    order: 2;
  }
  
  .transformation-arrow i {
    transform: rotate(90deg);
  }
  
  .transformation-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .before-after-container {
    padding: 2rem;
  }
  
  .before-after-header h3 {
    font-size: 2rem;
  }
}

/* Live Chat Widget */
.chat-widget {
  position: fixed;
  bottom: 110px;
  right: 20px;
  z-index: 10000;
}

.chat-bubble {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  animation: chatPulse 3s ease-in-out infinite;
  border: 2px solid var(--secondary);
}

.chat-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.5);
  border-color: #f7d74c;
}

.chat-bubble i {
  color: var(--secondary);
  font-size: 1.5rem;
  margin-bottom: 0;
}

.chat-bubble-text {
  color: var(--secondary);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.chat-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 8px 30px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.3); }
}

.chat-window {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 320px;
  height: 450px;
  background: #1a1a1a;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-window.active {
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.chat-header {
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.chat-agent-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.5);
}

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

.agent-details h4 {
  color: var(--text-light);
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.agent-status {
  color: #4ade80;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.agent-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: statusPulse 2s infinite;
}

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

.chat-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.chat-close:hover {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.message {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.message-avatar {
  width: 32px;
  height: 32px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-avatar i {
  color: #0a0a0a;
  font-size: 0.9rem;
}

.message-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  border-radius: 12px;
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input-area {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0.75rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-send {
  background: var(--secondary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chat-send:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.chat-send i {
  color: #0a0a0a;
}

.chat-quick-options {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quick-option {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--secondary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.quick-option:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.5);
}

/* Lead Magnet Popup */
.lead-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lead-popup.active {
  display: flex;
  opacity: 1;
}

.popup-content {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 450px;
  width: 90%;
  text-align: center;
  border: 2px solid rgba(212, 175, 55, 0.3);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(212, 175, 55, 0.2);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lead-popup.active .popup-content {
  transform: scale(1);
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.popup-close:hover {
  color: var(--text-light);
}

.popup-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: popupIconFloat 3s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.popup-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.popup-icon i {
  color: #0a0a0a;
  font-size: 2rem;
}

@keyframes popupIconFloat {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-10px) scale(1.05); }
}

.popup-header h3 {
  font-family: var(--font-heading);
  color: var(--text-light);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.popup-header p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lead-form input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  color: var(--text-light);
  font-size: 1rem;
}

.lead-form input::placeholder {
  color: var(--text-muted);
}

.lead-form button {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
}

.popup-footer {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Professional Custom Cursor */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: normal;
}

.cursor-ring {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 50%;
  position: absolute;
  transition: all 0.15s ease-out;
  transform: translate(-50%, -50%);
  background: rgba(212, 175, 55, 0.05);
}

.cursor-dot {
  width: 3px;
  height: 3px;
  background: var(--secondary);
  border-radius: 50%;
  position: absolute;
  transition: all 0.1s ease-out;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* Cursor hover states */
.cursor-hover .cursor-ring {
  width: 30px;
  height: 30px;
  border-color: rgba(212, 175, 55, 0.8);
  background: rgba(212, 175, 55, 0.1);
}

.cursor-hover .cursor-dot {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

/* Cursor hover states */
.cursor-hover .cursor-ring {
  width: 30px;
  height: 30px;
  border-color: rgba(212, 175, 55, 0.8);
  background: rgba(212, 175, 55, 0.1);
}

.cursor-hover .cursor-dot {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonial-video.active {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .video-container {
    order: 2;
  }
  
  .testimonial-content {
    order: 1;
  }
  
  .before-after-grid {
    grid-template-columns: 1fr;
  }
  
  .logos-carousel {
    gap: 2rem;
  }
  
  .logo-item {
    width: 100px;
    height: 50px;
  }
  
  .chat-window {
    width: 280px;
    height: 400px;
  }
  
  .popup-content {
    padding: 2rem;
    margin: 1rem;
  }
}

.tidycal-container p {
  color: var(--text-primary);
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  animation: textGlow 3s ease-in-out infinite alternate;
}

@keyframes textGlow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.2); }
}

.tidycal-container:hover {
  transform: translateY(-8px) rotateX(3deg) scale(1.02);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Enhanced Portfolio Styling */
.portfolio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
  padding: 2rem 0;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}

.stat-item:hover::before {
  left: 100%;
}

.stat-item:hover {
  transform: translateY(-15px) scale(1.08) rotateY(5deg);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6), 
    0 0 40px rgba(212, 175, 55, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item:hover h3 {
  animation: textPulse 0.6s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.stat-item h3 {
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.stat-item p {
  color: rgba(200, 200, 200, 0.8);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 400;
  line-height: 1.5;
}

.fadeInUp-stat p {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(1) p {
  opacity: 0.85;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(2) p {
  opacity: 0.85;
  transform: translateY(0);
  transition-delay: 0.55s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(3) p {
  opacity: 0.85;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(4) p {
  opacity: 0.85;
  transform: translateY(0);
  transition-delay: 0.85s;
}

/* Smooth fade-in animation for stats - triggered on scroll */
.fadeInUp-stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.portfolio-stats.visible .fadeInUp-stat {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(1) {
  transition-delay: 0s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(2) {
  transition-delay: 0.15s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(3) {
  transition-delay: 0.3s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(4) {
  transition-delay: 0.45s;
}

/* Stat icon styling with subtle scale animation */
.stat-icon {
  font-size: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  display: inline-block;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(1) .stat-icon {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(3) .stat-icon {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
}

/* Subtle fade-in on stat headings */
.fadeInUp-stat h3 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(1) h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(2) h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(3) h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.portfolio-stats.visible .fadeInUp-stat:nth-child(4) h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}

/* Service pills - no separate pills, just display as text */
.service-pills-stat h3 {
  font-size: 1.2rem;
  line-height: 1.6;
}

.portfolio-filter {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.8rem 1.5rem;
  background: transparent;
  border: 2px solid rgba(212, 175, 55, 0.3);
  color: var(--text-muted);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--gradient-gold);
  color: var(--primary-bg);
  border-color: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.portfolio-item.featured {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border: 2px solid rgba(212, 175, 55, 0.2);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.portfolio-item.featured:hover {
  transform: translateY(-15px) rotateX(5deg) scale(1.02);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(212, 175, 55, 0.2);
}

.portfolio-item.featured img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-item.featured:hover img {
  transform: scale(1.1);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg, 
    rgba(10, 10, 10, 0.95) 0%, 
    rgba(18, 18, 18, 0.9) 50%, 
    rgba(10, 10, 10, 0.95) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(10px);
}

.portfolio-item.featured:hover .portfolio-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  padding: 2rem;
  transform: translateY(30px);
  transition: transform 0.4s ease 0.1s;
}

.portfolio-item.featured:hover .overlay-content {
  transform: translateY(0);
}

.project-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--gradient-gold);
  color: var(--primary-bg);
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.overlay-content h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.overlay-content p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.project-details {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.project-details span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary);
  font-size: 0.8rem;
  background: rgba(212, 175, 55, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
}

.video-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.video-item {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border-radius: 16px;
  border: 2px solid rgba(212, 175, 55, 0.2);
  overflow: hidden;
  transition: all 0.4s ease;
}

.video-item:hover {
  transform: translateY(-10px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.video-placeholder {
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
}

.video-placeholder i {
  font-size: 3rem;
  color: var(--secondary);
  margin-bottom: 1rem;
  opacity: 0.8;
}

.video-placeholder h4 {
  color: var(--text-primary);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.video-placeholder p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.video-stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.video-stats span {
  background: rgba(212, 175, 55, 0.1);
  color: var(--secondary);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.dropbox-access {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border-radius: 20px;
  padding: 3rem;
  margin: 3rem 0;
  border: 2px solid rgba(212, 175, 55, 0.3);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dropbox-access::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.03) 90deg,
    rgba(31, 142, 241, 0.02) 180deg,
    transparent 270deg
  );
  animation: dropboxHologram 15s linear infinite;
  opacity: 0.6;
}

@keyframes dropboxHologram {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dropbox-content {
  position: relative;
  z-index: 2;
}

.dropbox-content h3 {
  font-size: 2rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.video-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 10px;
  color: var(--secondary);
  font-size: 0.9rem;
}

.dropbox-btn {
  background: var(--gradient-gold);
  color: var(--primary-bg);
  padding: 1rem 2rem;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  margin-top: 2rem;
}

.dropbox-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
  filter: brightness(1.1);
}

.portfolio-testimonials {
  margin: 4rem 0;
  text-align: center;
}

.portfolio-testimonials h3 {
  font-size: 2rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-item {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.4s ease;
}

.testimonial-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.quote {
  font-style: italic;
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.client {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.rating {
  color: var(--secondary);
  font-size: 0.9rem;
}

.rating i {
  margin-right: 0.2rem;
}

/* Embedded Video Portfolio Styling */
.embedded-videos {
  margin: 4rem 0;
  text-align: center;
}

.embedded-videos h3 {
  font-size: 2.5rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 3rem;
  animation: textRotate 8s ease-in-out infinite;
}

@keyframes textRotate {
  0%, 100% { transform: rotateY(0deg) scale(1); }
  25% { transform: rotateY(5deg) scale(1.02); }
  50% { transform: rotateY(0deg) scale(1.05); }
  75% { transform: rotateY(-5deg) scale(1.02); }
}

.video-grid-embedded {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
  margin: 3rem 0;
}

.video-container {
  background: linear-gradient(145deg, #121212, #0f0f0f);
  border-radius: 20px;
  padding: 1.5rem;
  border: 2px solid rgba(212, 175, 55, 0.3);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: videoFloat 10s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes videoFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  }
  25% {
    transform: translateY(-10px) rotateX(2deg) rotateZ(0.5deg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  }
  50% {
    transform: translateY(-5px) rotateX(0deg) rotateZ(-0.3deg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  75% {
    transform: translateY(-15px) rotateX(-1deg) rotateZ(0.8deg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
  }
}

.video-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.02) 45deg,
    rgba(31, 142, 241, 0.01) 90deg,
    transparent 135deg,
    rgba(212, 175, 55, 0.03) 180deg,
    transparent 225deg,
    rgba(31, 142, 241, 0.02) 270deg,
    transparent 315deg
  );
  animation: videoHologram 20s linear infinite;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.video-container:hover::before {
  opacity: 1;
}

@keyframes videoHologram {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.video-container:hover {
  transform: translateY(-20px) rotateX(8deg) rotateY(5deg) scale(1.03);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.portfolio-video {
  width: 100%;
  height: 250px;
  border-radius: 12px;
  border: none;
  background: #000;
  transition: all 0.4s ease;
}

.video-container:hover .portfolio-video {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.2);
}

.video-info {
  padding: 1.5rem 0;
  text-align: left;
}

.video-info h4 {
  color: var(--text-primary);
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titlePulse 4s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.video-info p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.video-access-note {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(31, 142, 241, 0.03));
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  animation: noteGlow 6s ease-in-out infinite alternate;
}

/* Video Thumbnail Styles */
.video-thumbnail {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  height: 200px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-thumbnail:hover img {
  transform: scale(1.02);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-overlay {
  opacity: 1;
}

.play-button {
  width: 70px;
  height: 70px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: #ffd700;
  transform: scale(1.1);
}

.play-button i {
  font-size: 1.8rem;
  color: #1a1a2e;
  margin-left: 3px;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Video Preview Styles */
.video-preview {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
}

.video-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-item:hover .video-preview img {
  transform: scale(1.05);
}

.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-overlay:hover {
  background: #ffd700;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-overlay i {
  font-size: 1.5rem;
  color: #1a1a2e;
  margin-left: 3px;
}

.video-content {
  padding: 1.5rem;
}

.video-content h4 {
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.video-content p {
  color: #ccc;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.video-stats {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.video-stats span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffd700;
  font-size: 0.9rem;
}

/* Enhanced Testimonials Styles */
.client-photo {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
}

.client-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.testimonial-item:hover .client-photo {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.testimonial-item:hover .client-photo img {
  transform: scale(1.05);
}

.result {
  display: inline-block;
  background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1rem;
}

@keyframes noteGlow {
  0% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
    transform: scale(1.01);
  }
}

.video-access-note p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 1rem;
}

/* Maximum Rotating Portfolio Items */
.portfolio-item.featured {
  animation: itemRotate 15s ease-in-out infinite, itemFloat 8s ease-in-out infinite;
}

@keyframes itemRotate {
  0%, 100% {
    transform: translateY(0) rotateY(0deg) rotateX(0deg);
  }
  25% {
    transform: translateY(-5px) rotateY(1deg) rotateX(1deg);
  }
  50% {
    transform: translateY(-10px) rotateY(0deg) rotateX(2deg);
  }
  75% {
    transform: translateY(-5px) rotateY(-1deg) rotateX(1deg);
  }
}

@keyframes itemFloat {
  0%, 100% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5);
  }
}

/* Service card styles are defined in main styles section around line 1306 */

@keyframes serviceRotate {
  0%, 100% {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0);
  }
  33% {
    transform: rotateY(2deg) rotateX(1deg) translateZ(5px);
  }
  66% {
    transform: rotateY(-1deg) rotateX(-0.5deg) translateZ(3px);
  }
}

@keyframes servicePulse {
  0% {
    filter: brightness(1) contrast(1);
  }
  100% {
    filter: brightness(1.1) contrast(1.1);
  }
}

/* Enhanced Button Micro-Interactions */
.btn {
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

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

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

.btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

@keyframes btnRotate {
  0%, 100% {
    transform: rotateX(0deg) rotateY(0deg) scale(1);
  }
  25% {
    transform: rotateX(2deg) rotateY(1deg) scale(1.02);
  }
  50% {
    transform: rotateX(0deg) rotateY(-1deg) scale(1.01);
  }
  75% {
    transform: rotateX(-1deg) rotateY(0.5deg) scale(1.02);
  }
}

.btn:hover {
  transform: rotateX(5deg) rotateY(3deg) scale(1.05) translateZ(10px);
  animation: none;
}

/* Portfolio Statistics with Rotation */
.stat-item {
  animation: statRotate 10s ease-in-out infinite;
}

@keyframes statRotate {
  0%, 100% {
    transform: rotateZ(0deg) scale(1);
  }
  25% {
    transform: rotateZ(0.5deg) scale(1.01);
  }
  50% {
    transform: rotateZ(0deg) scale(1.02);
  }
  75% {
    transform: rotateZ(-0.5deg) scale(1.01);
  }
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
  animation: contactGlow 8s ease-in-out infinite alternate;
}

@keyframes contactGlow {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.4rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .process-step {
    width: 100%;
  }
  .contact-wrapper {
    flex-direction: column;
  }
  .hero {
    padding-top: 100px;
  }
}

/* Enhanced TidyCal Scheduling Section */
.tidycal-container {
  margin-top: 40px;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(26, 42, 108, 0.15) 0%, rgba(31, 142, 241, 0.1) 50%, rgba(212, 175, 55, 0.08) 100%);
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
  overflow: hidden;
  animation: scheduleGlow 4s ease-in-out infinite alternate;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 60px rgba(212, 175, 55, 0.1);
}

.tidycal-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.1), transparent 30%);
  animation: scheduleRotate 20s linear infinite;
  z-index: -1;
}

.tidycal-container p {
  color: var(--text-light);
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: scheduleTextGlow 3s ease-in-out infinite alternate;
}

.tidycal-embed {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.3);
  animation: scheduleEmbedFloat 6s ease-in-out infinite;
}

@keyframes scheduleGlow {
  0% {
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 60px rgba(212, 175, 55, 0.1);
  }
  100% {
    box-shadow: 
      0 25px 50px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 80px rgba(212, 175, 55, 0.2);
  }
}

@keyframes scheduleRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scheduleTextGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.4);
  }
}

@keyframes scheduleEmbedFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.01);
  }
}

/* Typing Indicator Animation */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: rgba(212, 175, 55, 0.8);
  border-radius: 50%;
  animation: typingBounce 1.5s infinite;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0ms;
}

.typing-dots span:nth-child(2) {
  animation-delay: 150ms;
}

.typing-dots span:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Enhanced Chat Messages */
.user-message {
  margin-left: 40px;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.user-message .message-content {
  background: transparent;
  color: var(--text-light);
}

/* Professional Chat Styling */
.chat-input-area {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
}

.chat-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  transition: all 0.3s ease;
}

.chat-input:focus {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.bot-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--secondary);
}

.chat-send {
  background: linear-gradient(45deg, var(--secondary), #f7d74c);
  border: none;
  color: #0a0a0a;
  border-radius: 25px;
  padding: 0.5rem 1rem;
  width: auto;
  height: auto;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.chat-send i {
  font-size: 0.9rem;
}

.send-text {
  display: inline;
  transition: all 0.3s ease;
}

.chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Instagram Reels Gallery Styles */
.reels-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.reels-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(31, 142, 241, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.reels-container {
  position: relative;
  z-index: 2;
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.reel-item {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  border: 2px solid rgba(212, 175, 55, 0.2);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  transform-style: preserve-3d;
}

.reel-item:hover {
  transform: translateY(-10px) rotateX(5deg) scale(1.02);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(212, 175, 55, 0.2);
}

.reel-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.1) 0%,
    rgba(31, 142, 241, 0.1) 50%,
    rgba(212, 175, 55, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.reel-play-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  animation: reelPulse 2s ease-in-out infinite;
}

@keyframes reelPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
}

.reel-item:hover .reel-play-button {
  transform: scale(1.2);
  background: rgba(212, 175, 55, 1);
}

.reel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 1.5rem 1rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.reel-item:hover .reel-overlay {
  transform: translateY(0);
  opacity: 1;
}

.reel-info h4 {
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.reel-info p {
  color: var(--text-muted);
  font-size: 0.75rem;
  opacity: 0.8;
}

.reels-integration-note {
  text-align: center;
  padding: 2rem;
  background: rgba(212, 175, 55, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.reels-integration-note p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.reels-integration-note .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Instagram Embeds Grid Styles */
.instagram-embeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.instagram-embeds-grid .instagram-media {
  margin: 0 auto !important;
  background: rgba(18, 18, 18, 0.6) !important;
  border-radius: 20px !important;
  border: 2px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.4s ease !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  width: 100% !important;
  max-width: 500px !important;
  min-height: 550px !important;
}

.instagram-embeds-grid .instagram-media:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 25px 60px rgba(212, 175, 55, 0.2) !important;
}

/* Hide Instagram likes/engagement text completely with multiple selectors */
.instagram-embeds-grid .instagram-media p,
.instagram-embeds-grid .instagram-media span[style*="color:#c9c8cd"],
.instagram-embeds-grid .instagram-media span[style*="font-size:14px"],
.instagram-embeds-grid .instagram-media div[style*="font-size:14px"],
.instagram-embeds-grid .instagram-media div[style*="line-height:18px"],
.instagram-embeds-grid .instagram-media div[style*="View this post on Instagram"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
}

/* Hide all Instagram attribution and link text */
.instagram-embeds-grid .instagram-media a[href*="instagram.com"],
.instagram-embeds-grid .instagram-media a[href*="View this post"] {
  display: none !important;
  visibility: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Target the specific likes/attribution area with enhanced selectors */
.instagram-embeds-grid .instagram-media div[style*="color:#c9c8cd"],
.instagram-embeds-grid .instagram-media div[style*="text-align:center"],
.instagram-embeds-grid .instagram-media div[style*="text-overflow:ellipsis"],
.instagram-embeds-grid .instagram-media div[style*="font-family:Arial"],
.instagram-embeds-grid .instagram-media div[style*="margin-bottom:14px"],
.instagram-embeds-grid .instagram-media div[style*="padding-top: 8px"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Completely hide Instagram likes and engagement elements */
.instagram-embeds-grid blockquote[data-instgrm-captioned] a[target="_blank"]:last-child,
.instagram-embeds-grid blockquote[data-instgrm-permalink] a[target="_blank"]:last-child,
.instagram-embeds-grid a[href*="instagram.com/p/"]:last-child,
.instagram-embeds-grid a[href*="instagram.com/reel/"]:last-child {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide the entire bottom section of Instagram embeds */
.instagram-embeds-grid .instagram-media > div:last-child,
.instagram-embeds-grid blockquote > div:last-child,
.instagram-embeds-grid blockquote > p:last-child {
  display: none !important;
}

/* Add solid overlay box to cover any remaining Instagram text */
.instagram-embeds-grid .instagram-media::after {
  content: 'PortivaMedia Instagram Reels';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0.9) 80%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 1000;
}

/* Additional Instagram text hiding */
.instagram-embeds-grid blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #0a0a0a;
  z-index: 999;
}

/* Force hide Instagram engagement elements with max specificity */
.instagram-embeds-grid blockquote[class] p,
.instagram-embeds-grid blockquote[class] a:not(:first-child),
.instagram-embeds-grid .instagram-media p,
.instagram-embeds-grid .instagram-media a:not(:first-child) {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Crop Instagram iframe content to hide bottom section */
.instagram-embeds-grid .instagram-media,
.instagram-media {
  position: relative;
  overflow: hidden !important;
  min-height: 500px;
  max-height: 600px !important;
}

/* Ensure Instagram iframe doesn't show bottom content */
.instagram-embeds-grid iframe,
.instagram-media iframe {
  margin-bottom: -80px !important;
  min-height: 500px !important;
  max-height: 600px !important;
  overflow: hidden !important;
}

/* Enhanced portfolio overlay visibility */
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: #1a1a1a;
  aspect-ratio: 4/3;
  height: auto;
  max-height: 400px;
  min-height: 250px;
}

.portfolio-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(30, 30, 30, 0.95) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 10;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

.overlay-content {
  text-align: center;
  padding: 30px;
  transform: translateY(30px);
  transition: transform 0.4s ease 0.1s;
}

.portfolio-item:hover .overlay-content {
  transform: translateY(0);
}

.project-tag {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f4d03f);
  color: #0a0a0a;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
}

.overlay-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0;
  color: #d4af37;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.overlay-content p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #e0e0e0;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.project-details {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.project-details span {
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(5px);
}

.project-details span i {
  margin-right: 5px;
}

/* Style the main Instagram content area */
.instagram-embeds-grid .instagram-media > div {
  background: rgba(10, 10, 10, 0.8) !important;
  border-radius: 18px !important;
}

/* Enhance the Instagram video/image area */
.instagram-embeds-grid .instagram-media a {
  border-radius: 15px !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .instagram-embeds-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .instagram-embeds-grid .instagram-media {
    min-width: 280px !important;
    max-width: 100% !important;
  }
}

/* Before & After Gallery Styles */
.before-after-section {
  background: linear-gradient(135deg, #121212 0%, #0a0a0a 50%, #121212 100%);
  padding: 5rem 0;
  position: relative;
}

.before-after-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(31, 142, 241, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.before-after-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-bottom: 4rem;
}

.comparison-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2rem;
  background: rgba(18, 18, 18, 0.3);
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.5s ease;
}

.comparison-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.comparison-item:nth-child(even) {
  grid-template-columns: 1fr 1fr;
}

.comparison-item:nth-child(even) .comparison-container {
  order: 2;
}

.comparison-item:nth-child(even) .comparison-info {
  order: 1;
}

.comparison-container {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  border: 2px solid rgba(212, 175, 55, 0.2);
}

.comparison-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
}

.before-image,
.after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-image img,
.after-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
}

.after-image {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  transition: clip-path 0.3s ease;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: rgba(212, 175, 55, 0.8);
  cursor: ew-resize;
  z-index: 10;
}

.slider-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(212, 175, 55, 0.8),
    rgba(212, 175, 55, 1),
    rgba(212, 175, 55, 0.8)
  );
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(212, 175, 55, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-size: 1rem;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.slider-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(212, 175, 55, 1);
}

.image-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.after-image .image-label {
  left: auto;
  right: 1rem;
  background: rgba(212, 175, 55, 0.9);
  color: #0a0a0a;
}

.comparison-info h3 {
  color: var(--text-primary);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comparison-info p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.comparison-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.comparison-stats span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.9rem;
}

.comparison-stats i {
  color: var(--secondary);
}

.before-after-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(31, 142, 241, 0.05));
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.before-after-cta h3 {
  color: var(--text-primary);
  font-size: 2rem;
  margin-bottom: 1rem;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.before-after-cta p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.before-after-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

.instagram-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

.instagram-placeholder i {
  font-size: 4rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.instagram-placeholder h3 {
  color: var(--text-light);
  margin-bottom: 1rem;
}

.instagram-placeholder p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Responsive Design for New Sections */
@media (max-width: 768px) {
  .reels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .comparison-item {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .comparison-item:nth-child(even) {
    grid-template-columns: 1fr;
  }
  
  .comparison-item:nth-child(even) .comparison-container,
  .comparison-item:nth-child(even) .comparison-info {
    order: initial;
  }
  
  .comparison-info h3 {
    font-size: 1.5rem;
  }
  
  .before-after-cta h3 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .reels-grid {
    grid-template-columns: 1fr;
  }
  
  .comparison-stats {
    justify-content: center;
  }
}/* Force cache refresh - Fri Aug  1 09:23:40 PM UTC 2025 */


/* CRITICAL LOGO FIX - FORCE OVERRIDE */
.loading-logo-3d {
  background-image: none !important;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%), linear-gradient(45deg, rgba(212, 175, 55, 0.08) 0%, rgba(31, 142, 241, 0.08) 100%) !important;
}

.loading-logo-3d::before {
  background-image: none !important;
}

.loading-logo-3d::after {
  background-image: none !important;
}

/* ================================================
   INTERACTIVE 3D FLOOR PLAN SECTION
   ================================================ */

.floor-plan-section {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.floor-plan-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Floor Plan Thumbnail Switcher Wrapper */
.fp-wrap {
  background: #0c0c0c;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 8px 24px rgba(0, 0, 0, 0.45);
  margin: 24px 0;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Interactive PM Shield Logo */
.pm-shield-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 240px;
  pointer-events: none;
  z-index: 2;
  cursor: pointer;
}

.pm-shield-svg {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  animation: shieldSpin 8s linear infinite;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

.pm-shield-svg:hover {
  animation-play-state: paused;
  transform: scale(1.3);
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.6));
}

.pm-shield-svg.zoomed {
  transform: scale(2);
  animation-play-state: paused;
}

.pm-shield-svg.reassembling {
  animation: shieldReassemble 1s ease-out;
}

/* Shield background pulse */
.shield-bg {
  animation: shieldPulse 3s ease-in-out infinite;
}

@keyframes shieldPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Shield spinning animation */
@keyframes shieldSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shieldReassemble {
  from {
    transform: scale(1.2);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* PM Letters in Shield */
.shield-letter {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  font-weight: 700;
  fill: rgba(212, 175, 55, 0.9);
  cursor: grab;
  transition: all 0.2s ease;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

.shield-letter:hover {
  fill: rgba(212, 175, 55, 1);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.8));
}

.shield-letter.dragging {
  cursor: grabbing;
  fill: rgba(31, 142, 241, 0.9);
  filter: drop-shadow(0 0 20px rgba(31, 142, 241, 0.8));
}

.shield-letter.returning {
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fp-stage {
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
  z-index: 0;
  mix-blend-mode: screen;
}

/* AR button (gold theme) */
.fp-ar-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--accent-gold);
  color: #111;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
  transition: all 0.3s ease;
}

.fp-ar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35);
}

/* Thumbnail strip */
.fp-strip {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.fp-thumb {
  flex: 0 0 auto;
  min-width: 140px;
  background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
  color: #e9e9e9;
  border: 2px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on hover */
.fp-thumb::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(212, 175, 55, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s ease;
}

.fp-thumb:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

.fp-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #cfcfcf;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 0;
  mix-blend-mode: screen;
  transition: color 0.3s ease;
}

.fp-thumb:hover {
  border-color: var(--accent-gold);
  box-shadow: 
    0 0 0 1px rgba(212, 175, 55, 0.3) inset,
    0 8px 24px rgba(212, 175, 55, 0.15),
    0 0 20px rgba(212, 175, 55, 0.1);
  transform: translateY(-3px) scale(1.02);
}

.fp-thumb:hover .fp-label {
  color: var(--accent-gold);
}

.fp-thumb.is-active {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-color: var(--accent-gold);
  box-shadow: 
    0 0 0 2px rgba(212, 175, 55, 0.4) inset,
    0 12px 32px rgba(212, 175, 55, 0.25),
    0 0 30px rgba(212, 175, 55, 0.2);
  transform: translateY(-4px) scale(1.05);
}

.fp-thumb.is-active .fp-label {
  color: var(--accent-gold);
  font-weight: 700;
}

model-viewer {
  border: 2px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.25), 0 0 40px rgba(255, 215, 0, 0.15);
  transition: all 0.3s ease;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, #0a0a0a 70%);
  /* Performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

model-viewer:hover {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 25px 80px rgba(212, 175, 55, 0.3);
}

/* Smooth loading state */
model-viewer[loading] {
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

model-viewer:not([loading]) {
  opacity: 1;
  animation: fpFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fpFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.floor-plan-info {
  margin-top: 3rem;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.info-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(30, 30, 30, 0.8) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.info-card i {
  font-size: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  display: block;
}

.info-card h4 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.info-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Responsive adjustments for floor plan */
@media (max-width: 768px) {
  model-viewer {
    height: 400px !important;
  }
  
  .fp-thumb {
    min-width: 120px;
    padding: 14px 16px;
  }
  
  .fp-label {
    font-size: 0.85rem;
  }
  
  #fpViewer {
    height: 440px !important;
  }
}

/* ================================================
   MAGICPLAN EMBEDDED VIEWER SECTION
   ================================================ */

.magicplan-section {
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.95) 0%, rgba(25, 25, 25, 0.9) 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.magicplan-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.magicplan-viewer {
  position: relative;
  margin-top: 3rem;
}

.magicplan-container {
  background: #0c0c0c;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease;
}

.magicplan-container:hover {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 12px 36px rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
}

.magicplan-container iframe {
  background: #0a0a0a;
  border-radius: 12px;
  display: block;
}

/* Responsive adjustments for MagicPlan */
@media (max-width: 768px) {
  .magicplan-container iframe {
    height: 450px !important;
  }
}

/* Sleek Page Title Overlay */
.page-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

.page-title-text {
  font-size: clamp(80px, 15vw, 160px);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: transparent;
  background: linear-gradient(135deg, 
    rgba(212, 175, 55, 0.4) 0%, 
    rgba(212, 175, 55, 0.3) 50%, 
    rgba(31, 142, 241, 0.25) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 60px rgba(212, 175, 55, 0.2);
  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.4));
  white-space: nowrap;
}

/* Responsive adjustments for page title */
@media (max-width: 768px) {
  .page-title-text {
    font-size: clamp(50px, 12vw, 90px);
    letter-spacing: 0.1em;
  }
}

/* New Testimonials Grid Section */
.tm-wrap {
  padding: 48px 0;
  background: #0b0b0b;
  border-radius: 16px;
  margin: 32px 0;
}

.tm-title {
  color: #f6d465;
  text-align: center;
  font-size: 2rem;
  margin: 0;
}

.tm-sub {
  color: #b9b9b9;
  text-align: center;
  margin: 6px 0 22px;
}

.tm-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.tm-card {
  background: #141414;
  border: 1px solid rgba(255, 215, 0, 0.14);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.tm-media video {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 215, 0, 0.08);
}

.tm-body {
  padding: 14px;
}

.tm-body h3 {
  margin: 0 0 4px;
  color: #fff;
}

.tm-role {
  margin: 0 0 10px;
  color: #c9c9c9;
  font-size: 0.92rem;
}

.tm-body blockquote {
  margin: 0;
  color: #e8e8e8;
  font-style: italic;
}

.tm-quote .tm-body {
  padding: 22px;
}

.tm-photo .tm-media img {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 215, 0, 0.08);
  object-fit: cover;
  object-position: center 20%;
  height: 300px;
}

.tm-photo .tm-body blockquote {
  font-size: 0.9rem;
  line-height: 1.5;
}

.tm-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.btn-gold {
  background: #ffd700;
  color: #111;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background: #d4af37;
  transform: scale(1.05);
}

.btn-ghost {
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #f6d465;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

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

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

/* ============= ENHANCED ANIMATIONS & EYE-CATCHING EFFECTS ============= */

/* Button Enhancements */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

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

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

.btn-gold:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 20px 50px rgba(212, 175, 55, 0.5) !important;
}

.btn-ghost {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.btn-ghost::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ghost:hover::after {
  width: 300px;
  height: 300px;
}

.btn-ghost:hover {
  transform: translateY(-5px) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}

/* Section Title Animations */
h2, h3, .section-title {
  position: relative;
  transition: all 0.3s ease;
}

h2::after, .section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
}

/* Card Hover Effects */
.service-card, .portfolio-item, .pm-col, .stat {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Removed conflicting hover - using 3D transforms from line 1362 */
.portfolio-item:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 25px 50px rgba(212, 175, 55, 0.25) !important;
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

.icon, .service-icon, i.fas, i.far {
  transition: all 0.3s ease;
}

.service-card:hover .icon,
.service-card:hover i {
  animation: float 2s ease-in-out infinite;
  color: #ffd700 !important;
}

/* Shimmer Text Effect */
.shimmer-text {
  background: linear-gradient(135deg, #ffffff 0%, #d4af37 50%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

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

/* Entrance Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

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

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRight 0.8s ease forwards;
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Pop Animation */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn 0.6s ease forwards;
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Magnetic Button Effect */
.magnetic-btn {
  transition: transform 0.2s ease;
}

.magnetic-btn:hover {
  transform: translate(var(--x, 0px), var(--y, 0px));
}

/* Particle Background Effect */
.section-with-particles {
  position: relative;
  overflow: hidden;
}

.section-with-particles::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: particleMove 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes particleMove {
  to { transform: translate(40px, 40px); }
}

/* Glow on Hover */
.glow-on-hover {
  position: relative;
}

.glow-on-hover::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #d4af37, #ffd700, #1f8ef1);
  border-radius: inherit;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.4s ease;
  z-index: -1;
}

.glow-on-hover:hover::before {
  opacity: 0.8;
}

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Image Lightbox */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.image-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 35px;
  width: 50px;
  height: 50px;
  font-size: 32px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lightbox-close:hover {
  color: #0a0a0a;
  background: var(--secondary);
  border-color: var(--secondary);
  transform: scale(1.1) rotate(90deg);
}