/* XPANDSIA PREMIUM HERO BACKGROUNDS - 100% ORIGINAL */

/* Professional Gradient Backgrounds - No Stock Photos */
.hero-bg-office {
    background: linear-gradient(135deg, 
                rgba(17,24,39,0.9) 0%, 
                rgba(31,41,55,0.8) 30%,
                rgba(255,212,0,0.1) 50%, 
                rgba(17,24,39,0.85) 100%);
}

.hero-bg-corporate {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.9) 0%, 
                rgba(17,17,17,0.8) 25%,
                rgba(255,212,0,0.12) 50%, 
                rgba(0,0,0,0.85) 100%);
}

.hero-bg-handshake {
    background: linear-gradient(135deg, 
                rgba(31,41,55,0.9) 0%, 
                rgba(17,24,39,0.8) 30%,
                rgba(255,212,0,0.08) 60%, 
                rgba(0,0,0,0.9) 100%);
}

.hero-bg-workspace {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.88) 0%, 
                rgba(31,41,55,0.82) 25%,
                rgba(255,212,0,0.15) 45%, 
                rgba(17,24,39,0.8) 75%,
                rgba(0,0,0,0.9) 100%);
}

.hero-bg-team {
    background: linear-gradient(135deg, 
                rgba(17,24,39,0.9) 0%, 
                rgba(0,0,0,0.8) 30%,
                rgba(255,212,0,0.1) 50%, 
                rgba(31,41,55,0.85) 100%);
}

.hero-bg-meeting {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.9) 0%, 
                rgba(17,24,39,0.85) 25%,
                rgba(255,212,0,0.12) 40%, 
                rgba(31,41,55,0.8) 75%,
                rgba(0,0,0,0.88) 100%);
}

.hero-bg-growth {
    background: linear-gradient(135deg, 
                rgba(31,41,55,0.9) 0%, 
                rgba(17,24,39,0.8) 30%,
                rgba(255,212,0,0.1) 50%, 
                rgba(0,0,0,0.9) 100%);
}

/* XPANDSIA PREMIUM HERO BACKGROUNDS - UPDATED */

/* Background Option 8: International Business - ORIGINAL IMAGE */
.hero-bg-international {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.7) 0%, 
                rgba(0,0,0,0.5) 30%, 
                rgba(255,212,0,0.1) 50%, 
                rgba(0,0,0,0.6) 100%), 
                url('/images/shaftsburry.png') center/cover;
    background-attachment: fixed;
}

/* SERVICES SECTION - REMOVE UNSPLASH, USE GRADIENT */
.unified-section-bg {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%);
    position: relative;
    overflow: hidden;
}

.unified-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 25%, rgba(255, 212, 0, 0.05) 0%, transparent 50%), 
                radial-gradient(circle at 75% 75%, rgba(255, 212, 0, 0.03) 0%, transparent 50%);
    z-index: 1;
}

/* FORCE BACKGROUND UNIFICATION - NO MORE UNSPLASH */
#servis.fade-up-section {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%) !important;
}

#cara-kerja.fade-up-section {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%) !important;
}

/* Background Option 9: Digital Transformation - Pure Gradient */
.hero-bg-digital {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.9) 0%, 
                rgba(17,24,39,0.85) 20%,
                rgba(255,212,0,0.12) 35%, 
                rgba(31,41,55,0.8) 60%, 
                rgba(255,212,0,0.08) 75%,
                rgba(0,0,0,0.9) 100%);
}

/* Background Option 10: Premium Office Space - Pure Gradient */
.hero-bg-premium {
    background: linear-gradient(135deg, 
                rgba(31,41,55,0.9) 0%, 
                rgba(17,24,39,0.85) 25%,
                rgba(255,212,0,0.15) 45%, 
                rgba(0,0,0,0.8) 65%, 
                rgba(255,212,0,0.1) 80%,
                rgba(17,24,39,0.9) 100%);
}

/* Dynamic Background - Pure Gradients Animation */
.hero-bg-dynamic {
    animation: gradientSlideshow 30s infinite;
    background-size: 400% 400%;
}

@keyframes gradientSlideshow {
    0%, 20% {
        background: linear-gradient(135deg, 
                    rgba(0,0,0,0.9) 0%, 
                    rgba(17,24,39,0.8) 50%, 
                    rgba(255,212,0,0.1) 100%);
    }
    25%, 45% {
        background: linear-gradient(135deg, 
                    rgba(31,41,55,0.9) 0%, 
                    rgba(255,212,0,0.12) 50%, 
                    rgba(0,0,0,0.85) 100%);
    }
    50%, 70% {
        background: linear-gradient(135deg, 
                    rgba(17,24,39,0.9) 0%, 
                    rgba(0,0,0,0.8) 50%, 
                    rgba(255,212,0,0.15) 100%);
    }
    75%, 95% {
        background: linear-gradient(135deg, 
                    rgba(0,0,0,0.88) 0%, 
                    rgba(255,212,0,0.1) 50%, 
                    rgba(31,41,55,0.9) 100%);
    }
}

/* Responsive Background Adjustments */
@media (max-width: 768px) {
    .hero-bg-office,
    .hero-bg-corporate,
    .hero-bg-handshake,
    .hero-bg-workspace,
    .hero-bg-team,
    .hero-bg-meeting,
    .hero-bg-growth,
    .hero-bg-international,
    .hero-bg-digital,
    .hero-bg-premium {
        background-attachment: scroll;
        background-size: cover;
    }
}

/* High-end gradient overlays */
.hero-gradient-luxury {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.8) 0%, 
                rgba(0,0,0,0.6) 30%, 
                rgba(255,212,0,0.1) 70%, 
                rgba(0,0,0,0.5) 100%);
}

.hero-gradient-professional {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.75) 0%, 
                rgba(0,0,0,0.5) 50%, 
                rgba(0,0,0,0.7) 100%);
}

.hero-gradient-premium {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.8) 0%, 
                rgba(255,212,0,0.05) 25%, 
                rgba(0,0,0,0.6) 50%, 
                rgba(255,212,0,0.08) 75%, 
                rgba(0,0,0,0.7) 100%);
}

/* Dark Gold Gradient - Perfect for International Business */
.hero-gradient-dark-gold {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.85) 0%, 
                rgba(17,17,17,0.8) 20%,
                rgba(255,212,0,0.12) 35%, 
                rgba(0,0,0,0.75) 50%, 
                rgba(255,212,0,0.08) 65%,
                rgba(17,17,17,0.8) 80%,
                rgba(0,0,0,0.9) 100%);
}

/* Corporate Dark Gradient */
.hero-gradient-corporate-dark {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.9) 0%, 
                rgba(17,24,39,0.85) 25%,
                rgba(255,212,0,0.1) 40%, 
                rgba(17,24,39,0.8) 60%, 
                rgba(255,212,0,0.06) 75%,
                rgba(0,0,0,0.88) 100%);
}

/* Elegant Business Gradient */
.hero-gradient-elegant {
    background: linear-gradient(135deg, 
                rgba(0,0,0,0.88) 0%, 
                rgba(31,41,55,0.82) 30%,
                rgba(255,212,0,0.15) 45%, 
                rgba(17,24,39,0.75) 55%, 
                rgba(255,212,0,0.1) 70%,
                rgba(31,41,55,0.85) 85%,
                rgba(0,0,0,0.9) 100%);
}

/* UNIFIED BACKGROUND ANIMATIONS FOR SERVICES & HOW IT WORKS SECTIONS */

/* Enhanced floating animation with subtle variations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-15px) translateX(5px) scale(1.05);
        opacity: 1;
    }
    50% {
        transform: translateY(-8px) translateX(-3px) scale(0.95);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-20px) translateX(-8px) scale(1.02);
        opacity: 0.85;
    }
}

/* Subtle background pulse animation */
@keyframes backgroundPulse {
    0%, 100% {
        opacity: 0.04;
        transform: scale(1);
    }
    50% {
        opacity: 0.06;
        transform: scale(1.02);
    }
}

/* Gentle gradient shift animation */
@keyframes gradientShiftSubtle {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 25% 25%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 75% 75%;
    }
}

/* Enhanced section background classes - NO UNSPLASH */
.unified-section-bg {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%);
    position: relative;
    overflow: hidden;
    animation: gradientShiftSubtle 20s ease-in-out infinite;
}

.unified-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.02) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 212, 0, 0.01) 70%, rgba(255, 255, 255, 0.04) 100%);
    animation: backgroundPulse 15s ease-in-out infinite;
    z-index: 1;
}

/* Floating elements animation enhancement */
.floating-element {
    animation: float ease-in-out infinite;
    will-change: transform, opacity;
}

.floating-element-1 {
    animation-duration: 11s;
    animation-delay: 0s;
}

.floating-element-2 {
    animation-duration: 13s;
    animation-delay: 2s;
}

.floating-element-3 {
    animation-duration: 9s;
    animation-delay: 4s;
}

/* Responsive adjustments for unified background */
@media (max-width: 768px) {
    .unified-section-bg {
        background-attachment: scroll;
        background-size: cover;
    }
    
    .floating-element {
        animation-duration: 8s;
    }
}

/* Performance optimization for animations */
.floating-element,
.unified-section-bg::before {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* FORCE BACKGROUND UNIFICATION - NO MORE UNSPLASH */
#servis.fade-up-section {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%) !important;
}

#cara-kerja.fade-up-section {
    background: linear-gradient(135deg, 
                rgba(248, 249, 250, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 30%, 
                rgba(248, 249, 250, 0.92) 70%, 
                rgba(255, 255, 255, 0.96) 100%) !important;
}

/* Enhanced unified background animation */
#servis .floating-bg-element,
#cara-kerja .floating-bg-element {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 212, 0, 0.08), transparent);
    animation: float ease-in-out infinite;
    pointer-events: none;
}

/* Cache busting - force refresh */
.unified-sections-v2 {
    background-attachment: scroll;
    will-change: background-position;
}