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

            :root {
                --primary-yellow: #FFD400;
                --primary-yellow-light: #FFED4E;
                --black: #000000;
                --white: #FFFFFF;
                --gray-900: #111827;
                --gray-600: #4B5563;
                --gray-400: #9CA3AF;
                --gray-200: #E5E7EB;
                --space-8: 0.5rem;
                --space-10: 0.625rem;
                --space-12: 0.75rem;
                --space-14: 0.875rem;
                --space-16: 1rem;
                --space-18: 1.125rem;
                --space-20: 1.25rem;
                --space-24: 1.5rem;
                --space-32: 2rem;
                --space-48: 3rem;
                --space-64: 4rem;
                --space-80: 5rem;
                --font-size-xs: 0.75rem;
                --font-size-sm: 0.875rem;
                --font-size-base: 1rem;
                --font-size-lg: 1.125rem;
                --font-size-xl: 1.25rem;
                --font-size-2xl: 1.5rem;
                --font-size-3xl: 1.875rem;
                --font-size-4xl: 2.25rem;
                --font-size-5xl: 3rem;
                --line-height-normal: 1.5;
                --line-height-relaxed: 1.65;
                --radius-base: 0.75rem;
                --radius-lg: 1rem;
                --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);
                --container-max-width: 1400px;
                --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }

            html {
                scroll-behavior: smooth;
                font-size: 16px;
            }

            body {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                line-height: var(--line-height-normal);
                color: var(--gray-900);
                background-color: var(--white);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                transition: all 0.3s ease;
            }

            /* PROFESSIONAL LANDING PAGE ANIMATIONS - DISABLED FOR PERFORMANCE */
            
            /* All animation classes now show content immediately */
            .fade-in,
            .fade-up,
            .fade-down,
            .fade-left,
            .fade-right,
            .scale-in,
            .slide-up,
            .fade-in-blur,
            .zoom-in,
            .slide-in-bounce,
            .flip-in,
            .fade-in-scale,
            .slide-in-left,
            .slide-in-right,
            .bounce-in,
            .rotate-in {
                opacity: 1 !important;
                transform: none !important;
                filter: none !important;
                animation: none !important;
            }

            /* Enhanced Staggered Animation Delays - DISABLED */
            .delay-50,
            .delay-100,
            .delay-150,
            .delay-200,
            .delay-250,
            .delay-300,
            .delay-350,
            .delay-400,
            .delay-450,
            .delay-500,
            .delay-600,
            .delay-700,
            .delay-800,
            .delay-900,
            .delay-1000,
            .delay-1200,
            .delay-1400,
            .delay-1600,
            .delay-1800,
            .delay-2000 {
                animation-delay: 0s !important;
            }

            /* Premium Keyframe Animations */
            @keyframes fadeInPremium {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

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

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

            @keyframes fadeLeftPremium {
                from {
                    opacity: 0;
                    transform: translateX(-50px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }

            @keyframes fadeRightPremium {
                from {
                    opacity: 0;
                    transform: translateX(50px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }

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

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

            @keyframes fadeInBlur {
                from {
                    opacity: 0;
                    filter: blur(10px);
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    filter: blur(0px);
                    transform: translateY(0);
                }
            }

            @keyframes zoomInRotate {
                from {
                    opacity: 0;
                    transform: scale(0.5) rotate(-5deg);
                }
                to {
                    opacity: 1;
                    transform: scale(1) rotate(0deg);
                }
            }

            @keyframes slideInBounce {
                0% {
                    opacity: 0;
                    transform: translateY(100px);
                }
                60% {
                    opacity: 1;
                    transform: translateY(-10px);
                }
                80% {
                    transform: translateY(5px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes flipIn {
                from {
                    opacity: 0;
                    transform: rotateY(-90deg) scale(0.8);
                }
                to {
                    opacity: 1;
                    transform: rotateY(0deg) scale(1);
                }
            }

            /* Keyframe Animations */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

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

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

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

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

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

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

            /* ENHANCED SCROLL ANIMATIONS - DISABLED FOR PERFORMANCE */
            .scroll-reveal {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }

            .scroll-reveal.revealed {
                opacity: 1 !important;
                transform: none !important;
            }

            /* SCROLL DOWN ANIMATIONS (Standard) */
            .scroll-down-reveal {
                animation: slideInFromBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .scroll-down-exit {
                animation: slideOutToTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            /* SCROLL UP ANIMATIONS (More Dramatic) */
            .scroll-up-reveal {
                animation: slideInFromTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .scroll-up-exit {
                animation: slideOutToBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            /* KEYFRAME ANIMATIONS FOR BIDIRECTIONAL SCROLL */
            @keyframes slideInFromBottom {
                0% {
                    opacity: 0;
                    transform: translateY(60px) scale(0.9);
                    filter: blur(5px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                    filter: blur(0px);
                }
            }

            @keyframes slideInFromTop {
                0% {
                    opacity: 0;
                    transform: translateY(-60px) scale(0.9) rotateX(15deg);
                    filter: blur(8px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1) rotateX(0deg);
                    filter: blur(0px);
                }
            }

            @keyframes slideOutToTop {
                0% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                    filter: blur(0px);
                }
                100% {
                    opacity: 0;
                    transform: translateY(-40px) scale(0.95);
                    filter: blur(3px);
                }
            }

            @keyframes slideOutToBottom {
                0% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                    filter: blur(0px);
                }
                100% {
                    opacity: 0;
                    transform: translateY(40px) scale(0.95);
                    filter: blur(3px);
                }
            }

            /* SCROLL REVEAL ANIMATIONS - ONE TIME ONLY */
            .service-card {
                opacity: 0;
                transform: translateY(40px);
                filter: blur(8px);
                transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .service-card.revealed {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }

            /* Stagger delays for service cards */
            .service-card:nth-child(1) {
                transition-delay: 0ms;
            }

            .service-card:nth-child(2) {
                transition-delay: 150ms;
            }

            .service-card:nth-child(3) {
                transition-delay: 300ms;
            }
                    transform: translateY(0) scale(1);
                }
            }

            @keyframes blurInSpiral {
                0% {
                    opacity: 0;
                    filter: blur(20px);
                    transform: translateY(-40px) scale(0.8) rotate(-10deg);
                }
                50% {
                    opacity: 0.7;
                    filter: blur(5px);
                    transform: translateY(10px) scale(1.05) rotate(5deg);
                }
                100% {
                    opacity: 1;
                    filter: blur(0px);
                    transform: translateY(0) scale(1) rotate(0deg);
                }
            }

            /* STAGGERED ANIMATIONS - DISABLED FOR PERFORMANCE */
            .fade-up,
            .fade-left,
            .fade-right {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }

            .fade-up.revealed,
            .fade-left.revealed,
            .fade-right.revealed {
                opacity: 1 !important;
                transform: none !important;
            }

            .scale-in {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }

            .scale-in.revealed {
                opacity: 1 !important;
                transform: none !important;
            }

            .slide-up {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }

            .slide-up.revealed {
                opacity: 1 !important;
                transform: none !important;
            }

            /* Premium Hover Animations */
            .hover-lift {
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .hover-lift:hover {
                transform: translateY(-8px) scale(1.02);
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            }

            .hover-glow {
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .hover-glow:hover {
                box-shadow: 0 0 30px rgba(255, 212, 0, 0.4);
                transform: translateY(-3px) scale(1.01);
            }

            /* Magnetic Hover Effect */
            .hover-magnetic {
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .hover-magnetic:hover {
                transform: scale(1.05);
            }

            /* Floating Animation with Variations */
            .float-animation {
                animation: floatPremium 8s ease-in-out infinite;
            }

            .float-animation-slow {
                animation: floatPremium 12s ease-in-out infinite;
            }

            .float-animation-reverse {
                animation: floatPremium 10s ease-in-out infinite reverse;
            }

            @keyframes floatPremium {
                0%, 100% {
                    transform: translateY(0px) rotate(0deg);
                }
                25% {
                    transform: translateY(-15px) rotate(2deg);
                }
                50% {
                    transform: translateY(-8px) rotate(-1deg);
                }
                75% {
                    transform: translateY(-20px) rotate(3deg);
                }
            }

            /* Pulse Animation with Glow */
            .pulse-glow {
                animation: pulseGlowPremium 3s ease-in-out infinite;
            }

            @keyframes pulseGlowPremium {
                0%, 100% {
                    box-shadow: 0 0 10px rgba(255, 212, 0, 0.3);
                    transform: scale(1);
                }
                50% {
                    box-shadow: 0 0 25px rgba(255, 212, 0, 0.6);
                    transform: scale(1.02);
                }
            }

            /* PARALLAX SCROLLING EFFECT */
            .parallax-section {
                position: relative;
                overflow: hidden;
            }

            .parallax-bg {
                position: absolute;
                top: -20%;
                left: 0;
                right: 0;
                bottom: -20%;
                will-change: transform;
                z-index: 0;
                transition: transform 0.1s ease-out;
            }

            /* Smooth parallax animation */
            @media (prefers-reduced-motion: no-preference) {
                .parallax-bg {
                    transform: translateY(var(--parallax-offset, 0));
                }
            }

            /* Disable parallax on mobile for performance */
            @media (max-width: 768px) {
                .parallax-bg {
                    top: 0;
                    bottom: 0;
                    transform: none !important;
                }
            }

            /* ENHANCED CIRCULAR FAVICON STYLING - ULTRA CLEAN VERSION */
            link[rel="icon"], 
            link[rel="shortcut icon"], 
            link[rel="apple-touch-icon"] {
                border-radius: 0 !important;
                background: none !important;
                padding: 0 !important;
                box-shadow: none !important;
                border: none !important;
            }

            /* Favicon container - completely clean */
            .favicon-style {
                background: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                border: none !important;
                position: static !important;
                overflow: visible !important;
            }

            .favicon-style::before {
                display: none !important;
            }

            /* Ensure favicon image is clean without any modifications */
            .favicon-style img {
                border-radius: 0 !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;
                background: none !important;
                padding: 0 !important;
                border: none !important;
            }

            /* LOGO STYLES - SEPARATE FROM FAVICON */
            .logo-container {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--primary-yellow), #FFE55C);
                padding: 2px;
                box-shadow: 0 4px 15px rgba(255, 212, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
                transition: all var(--transition-base);
                position: relative;
                overflow: hidden;
            }

            .logo-container::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2));
                border-radius: 50%;
                opacity: 0;
                transition: opacity var(--transition-base);
            }

            .logo-container::after {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(45deg, var(--primary-yellow), #FFE55C, var(--primary-yellow));
                border-radius: 50%;
                z-index: -1;
                opacity: 0;
                transition: opacity var(--transition-base);
            }

            .logo-container:hover {
                transform: translateY(-2px) scale(1.05);
                box-shadow: 0 8px 25px rgba(255, 212, 0, 0.4), 0 0 20px rgba(255, 212, 0, 0.2);
            }

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

            .logo-container:hover::after {
                opacity: 0.3;
            }

            .logo-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                background: white;
                padding: 1px;
                transition: all var(--transition-base);
                border: 1px solid rgba(255, 212, 0, 0.1);
            }

            .logo-container:hover .logo-image {
                transform: rotate(5deg);
                border-color: rgba(255, 212, 0, 0.3);
            }

            /* DESKTOP NAVIGATION STYLES */
            #desktopNav {
                margin: 0;
                padding: 0;
            }

            #desktopNav li a {
                position: relative;
                padding: var(--space-8) 0;
            }

            /* Exclude dropdown menu items from global nav styling */
            #desktopNav > li > a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background: var(--primary-yellow);
                transition: width 0.3s ease;
            }

            #desktopNav > li > a:hover {
                color: var(--primary-yellow) !important;
            }

            #desktopNav > li > a:hover::after {
                width: 100%;
            }

            /* DROPDOWN NAVIGATION STYLES */
            .nav-dropdown {
                position: relative;
                z-index: 1001;
            }

            /* DROPDOWN NAVIGATION - IMPROVED HOVER BEHAVIOR */
            .nav-dropdown {
                position: relative;
                z-index: 1001;
            }

            /* Hover dengan delay lebih lama untuk mencegah dropdown menutup terlalu cepat */
            .nav-dropdown:hover .dropdown-menu {
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateY(0) !important;
                pointer-events: auto !important;
                transition-delay: 0s !important; /* Langsung buka tanpa delay */
            }

            .dropdown-menu {
                pointer-events: none;
                transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
                transition-delay: 0.3s; /* Delay 300ms sebelum menutup - lebih lama */
                z-index: 1002 !important;
            }

            /* Tambah padding area untuk "safe zone" hover */
            .dropdown-menu::before {
                content: '';
                position: absolute;
                top: -12px;
                left: -12px;
                right: -12px;
                bottom: -12px;
                z-index: -1;
            }

            .dropdown-menu li a {
                position: relative;
                padding: 12px 24px !important;
            }

            .dropdown-menu li a::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 3px;
                background: var(--primary-yellow);
                transform: scaleY(0);
                transition: transform 0.2s ease;
            }

            .dropdown-menu li a:hover {
                background: linear-gradient(90deg, rgba(255, 212, 0, 0.1), transparent);
                color: var(--primary-yellow) !important;
                padding-left: 28px !important;
            }

            .dropdown-menu li a:hover::before {
                transform: scaleY(1);
            }

            .dropdown-menu li a::after {
                display: none !important;
            }

            /* Dropdown arrow styling - IMPROVED VISIBILITY */
            .dropdown-arrow {
                display: inline-block !important;
                opacity: 1 !important;
                visibility: visible !important;
                flex-shrink: 0 !important;
                transition: transform 0.3s ease, color 0.3s ease !important;
                color: rgba(255, 255, 255, 0.9) !important;
                font-size: 10px !important;
                line-height: 1 !important;
            }

            /* Maximum specificity to prevent any override */
            header nav ul li.nav-dropdown a span.dropdown-arrow,
            nav ul#desktopNav li.nav-dropdown a.nav-dropdown-toggle span.dropdown-arrow {
                display: inline-block !important;
                opacity: 1 !important;
                visibility: visible !important;
                color: rgba(255, 255, 255, 0.9) !important;
            }

            /* Arrow inherits color from parent link */
            .nav-dropdown-toggle {
                color: rgba(255, 255, 255, 0.9) !important;
                display: flex !important;
                align-items: center !important;
                gap: 4px !important;
            }

            .nav-dropdown-toggle:hover {
                color: var(--primary-yellow) !important;
            }

            .nav-dropdown-toggle:hover .dropdown-arrow,
            .nav-dropdown:hover .dropdown-arrow,
            .nav-dropdown:focus-within .dropdown-arrow {
                color: var(--primary-yellow) !important;
                transform: rotate(180deg) !important;
            }

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

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

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

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

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

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

            /* LOGIN BUTTON ANIMATIONS */
            @keyframes badgePulse {
                0%, 100% {
                    transform: scale(1);
                    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
                }
                50% {
                    transform: scale(1.1);
                    box-shadow: 0 0 0 4px rgba(255, 68, 68, 0);
                }
            }

            @keyframes loginGlow {
                0%, 100% {
                    box-shadow: 0 4px 15px rgba(255, 212, 0, 0.3);
                }
                50% {
                    box-shadow: 0 4px 25px rgba(255, 212, 0, 0.6), 0 0 30px rgba(255, 212, 0, 0.3);
                }
            }

            #loginBtn {
                animation: loginGlow 3s ease-in-out infinite;
                position: relative;
            }

            #loginBtn:hover {
                transform: translateY(-2px) scale(1.05);
                box-shadow: 0 6px 20px rgba(255, 212, 0, 0.5) !important;
            }

            #loginBtn:hover .login-badge {
                animation: badgePulse 1s ease-in-out infinite;
            }

            /* Hide badge on mobile */
            @media (max-width: 768px) {
                .login-badge {
                    display: none !important;
                }
            }

            /* ===== VISION & MISSION ANIMATIONS ===== */
            
            /* Badge Scale Animation */
            @keyframes badgeScaleIn {
                from {
                    opacity: 0;
                    transform: scale(0.8);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            /* Vision/Mission Text Fade Up */
            @keyframes visionFadeUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* Mission Item Fade Up */
            @keyframes missionFadeUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* Vision & Mission Animation Classes */
            .vision-badge.animate {
                animation: badgeScaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .vision-text.animate {
                animation: visionFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
            }

            .mission-badge.animate {
                animation: badgeScaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
            }

            .mission-item.animate {
                animation: missionFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            /* Stagger delays for mission items */
            .mission-item-1.animate { animation-delay: 0.7s; }
            .mission-item-2.animate { animation-delay: 0.85s; }
            .mission-item-3.animate { animation-delay: 1s; }
            .mission-item-4.animate { animation-delay: 1.15s; }
            .mission-item-5.animate { animation-delay: 1.3s; }

            /* Hover effect with VERY CLEAR highlight */
            .mission-item {
                position: relative;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border: 2px solid transparent;
            }

            .mission-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255, 212, 0, 0.2), rgba(255, 212, 0, 0.1));
                border-radius: var(--radius-base);
                opacity: 0;
                transition: opacity 0.4s ease;
                pointer-events: none;
                z-index: -1;
            }

            .mission-item:hover::before {
                opacity: 1;
            }

            .mission-item:hover {
                transform: translateY(-8px) scale(1.02);
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.4);
                border-color: rgba(255, 212, 0, 0.5);
                background: rgba(255, 255, 255, 0.95);
            }

            .mission-item:hover h4 {
                color: var(--primary-yellow);
                transform: scale(1.05);
                transition: all 0.3s ease;
            }

            .mission-item:hover .mission-icon {
                transform: scale(1.2) rotate(5deg);
                transition: all 0.3s ease;
            }

            /* Target icon div inside mission-item */
            .mission-item > div:first-child {
                transition: all 0.3s ease;
            }

            .mission-item:hover > div:first-child {
                transform: scale(1.2) rotate(5deg);
            }

            /* PARTNER CAROUSEL ANIMATIONS - TEMPORARILY DISABLED */
            /*
            @keyframes scroll-logos {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-50%);
                }
            }

            /* Partner Logo Hover Effects */
            .partner-logo:hover {
                transform: translateY(-5px) scale(1.05);
                box-shadow: 0 8px 25px rgba(255, 212, 0, 0.2);
                border-color: rgba(255, 212, 0, 0.3);
            }

            .partner-logo:hover img {
                filter: grayscale(0%) !important;
                transform: scale(1.05);
            }

            /* Pause animation on hover */
            .carousel-container:hover .carousel-track {
                animation-play-state: paused;
            }
            */

            /* Responsive Partner Section */
            @media (max-width: 768px) {
                .partners-logos > div {
                    flex-direction: column !important;
                    gap: var(--space-32) !important;
                }
                
                .partner-logo {
                    width: 200px !important;
                    height: 100px !important;
                }
                
                .partner-logo img {
                    max-width: 160px !important;
                    max-height: 60px !important;
                }
                
                .partners-stats {
                    gap: var(--space-24) !important;
                }
            }

            @keyframes backgroundFloat {
                0%, 100% {
                    transform: translateX(0) translateY(0);
                }
                25% {
                    transform: translateX(10px) translateY(-5px);
                }
                50% {
                    transform: translateX(-5px) translateY(-10px);
                }
                75% {
                    transform: translateX(-10px) translateY(5px);
                }
            }

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

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

            @keyframes bounceIn {
                0% {
                    opacity: 0;
                    transform: scale(0.3) translateY(50px);
                }
                50% {
                    opacity: 1;
                    transform: scale(1.05) translateY(-10px);
                }
                70% {
                    transform: scale(0.9) translateY(0);
                }
                100% {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }

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

            /* PREMIUM HERO ANIMATIONS - Background animations removed */

            @keyframes titleSlideIn {
                0% {
                    opacity: 0;
                    transform: translateY(50px) scale(0.9);
                }
                60% {
                    opacity: 0.8;
                    transform: translateY(-5px) scale(1.02);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            /* TYPING EFFECT COMPATIBILITY FIX */
            .hero-title.typing-active {
                animation: none !important; /* Disable CSS animation when typing is active */
                opacity: 1 !important;
                transform: translateY(0) !important;
            }

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

            @keyframes statSlideIn {
                0% {
                    opacity: 0;
                    transform: translateY(20px) scale(0.9);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

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

            @keyframes iconPulse {
                0%, 100% {
                    transform: scale(1);
                    filter: brightness(1);
                }
                50% {
                    transform: scale(1.1);
                    filter: brightness(1.2);
                }
            }

            /* SECTION ANIMATIONS */
            .animate-on-scroll {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .animate-on-scroll.animate {
                opacity: 1;
                transform: translateY(0);
            }

            .stagger-animation {
                animation: fadeInUp 0.8s ease-out forwards;
            }

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

            /* CARD HOVER ANIMATIONS */
            .service-card {
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

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

            .service-card:hover::before {
                left: 100%;
            }

            .service-card:hover {
                transform: translateY(-10px) scale(1.02);
                background: rgba(255, 255, 255, 0.95) !important;
                border-color: rgba(255, 212, 0, 0.8);
                box-shadow: 0 20px 40px rgba(255, 212, 0, 0.25), 0 0 0 1px rgba(255, 212, 0, 0.2);
            }

            /* CONTACT INFO CARDS HOVER EFFECTS */
            .contact-info-card:hover {
                transform: translateY(-5px) scale(1.03);
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.3);
            }

            .contact-info-card:hover > div:first-child {
                transform: scale(1.15) rotate(5deg);
            }

            /* DISCLAIMER CARD HOVER EFFECTS */
            .disclaimer-card {
                cursor: default;
            }

            .disclaimer-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(255, 212, 0, 0.3) !important;
                border-color: var(--primary-yellow) !important;
            }

            .disclaimer-card:hover > div:first-child {
                opacity: 0.15;
                transform: scale(1.1) rotate(5deg);
            }

            /* STEP ANIMATIONS */
            .step-item {
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
            }

            .step-item:hover {
                transform: translateY(-5px);
            }

            .step-item:hover .step-number {
                animation: pulse 1s ease-in-out;
            }

            /* Enhanced step item hover effects for transparent design */
            .step-item:hover > div:nth-child(2) {
                background: rgba(255, 255, 255, 0.4) !important;
                border-color: rgba(255, 212, 0, 0.6) !important;
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.2) !important;
            }

            .step-item:hover h3 {
                color: var(--gray-900) !important;
                text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9) !important;
            }

            .step-item:hover p {
                background: rgba(255, 255, 255, 0.85) !important;
                color: var(--gray-800) !important;
            }

            /* COUNT UP ANIMATION STYLES - ENHANCED VERSION */
            .count-up {
                display: inline-block;
                font-weight: 900;
                color: var(--primary-yellow);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                opacity: 1 !important; /* Ensure visibility */
            }

            .count-up.animated {
                animation: countUpGlow 0.5s ease-out;
            }

            @keyframes countUpGlow {
                0% {
                    text-shadow: 0 0 5px rgba(255, 212, 0, 0.3);
                    transform: scale(1);
                }
                50% {
                    text-shadow: 0 0 20px rgba(255, 212, 0, 0.6);
                    transform: scale(1.05);
                }
                100% {
                    text-shadow: 0 0 10px rgba(255, 212, 0, 0.4);
                    transform: scale(1);
                }
            }

            /* Enhanced hover effects for stat cards with count up */
            .hero-stat-card:hover .count-up,
            .scroll-reveal:hover .count-up {
                transform: scale(1.1);
                text-shadow: 0 0 15px rgba(255, 212, 0, 0.5);
            }

            /* RTL support for count up numbers */
            [dir="rtl"] .count-up {
                direction: ltr;
                display: inline-block;
            }
            /* WHY CHOOSE US SECTION - PROFESSIONAL DESIGN */
            .why-choose-us-container {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
            }

            /* WHY CHOOSE US CAROUSEL - NONSTOP LOOPING */
            .why-choose-carousel-container {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 450px;
                margin: var(--space-12) auto;
                mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
                -webkit-mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
            }

            .why-choose-carousel {
                display: flex !important;
                gap: var(--space-32) !important;
                animation: whyChooseSlide 60s linear infinite !important;
                width: max-content !important;
                align-items: stretch !important;
                will-change: transform !important;
            }

            .why-choose-carousel:hover {
                animation-play-state: paused !important;
            }

            @keyframes whyChooseSlide {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(-50% - var(--space-16)));
                }
            }

            .why-choose-card {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(15px);
                border: 2px solid rgba(255, 212, 0, 0.2);
                border-radius: var(--radius-lg);
                padding: var(--space-32);
                text-align: center;
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
                flex: 0 0 380px !important;
                min-width: 380px !important;
                max-width: 380px !important;
                height: 400px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

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

            .why-choose-card:hover::before {
                left: 100%;
            }

            .why-choose-card:hover {
                transform: translateY(-10px) scale(1.02);
                background: rgba(255, 255, 255, 0.98);
                border-color: rgba(255, 212, 0, 0.6);
                box-shadow: 0 20px 40px rgba(255, 212, 0, 0.2);
            }

            .why-choose-icon {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, var(--primary-yellow), #FFE55C);
                border-radius: var(--radius-lg);
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto var(--space-24);
                font-size: var(--font-size-2xl);
                box-shadow: 0 8px 25px rgba(255, 212, 0, 0.3);
                transition: all 0.4s ease;
                animation: float 6s ease-in-out infinite;
            }

            .why-choose-card:hover .why-choose-icon {
                transform: scale(1.1) rotate(5deg);
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.4);
            }

            .why-choose-card h3 {
                font-size: var(--font-size-xl);
                font-weight: 700;
                margin-bottom: var(--space-16);
                color: var(--gray-900);
            }

            .why-choose-card p {
                color: var(--gray-600);
                line-height: var(--line-height-relaxed);
                margin-bottom: var(--space-20);
                flex-grow: 1;
            }

            .why-choose-features {
                list-style: none;
                text-align: left;
                padding: 0;
                margin-top: auto;
            }

            .why-choose-features li {
                display: flex;
                align-items: center;
                gap: var(--space-12);
                margin-bottom: var(--space-12);
                color: var(--gray-600);
                transition: all 0.3s ease;
            }

            .why-choose-features li:hover {
                color: var(--gray-900);
                transform: translateX(5px);
            }

            .why-choose-features li::before {
                content: '✓';
                color: var(--primary-yellow);
                font-weight: bold;
                font-size: 1.2em;
                flex-shrink: 0;
                transition: all 0.3s ease;
            }

            .why-choose-features li:hover::before {
                transform: scale(1.2);
            }

            /* Mobile responsive untuk Why Choose Us Carousel - DISABLED (handled by mobile-fixes.css) */
            /* @media (max-width: 768px) {
                .why-choose-carousel-container {
                    height: 420px !important;
                    margin: var(--space-8) auto !important;
                }
                
                .why-choose-card {
                    flex: 0 0 280px !important;
                    min-width: 280px !important;
                    max-width: 280px !important;
                    height: 380px !important;
                    padding: var(--space-20) !important;
                }
                
                .why-choose-icon {
                    width: 60px !important;
                    height: 60px !important;
                    font-size: var(--font-size-xl) !important;
                    margin-bottom: var(--space-16) !important;
                }
                
                .why-choose-card h3 {
                    font-size: var(--font-size-lg) !important;
                    margin-bottom: var(--space-12) !important;
                }
                
                .why-choose-card p {
                    font-size: var(--font-size-sm) !important;
                    margin-bottom: var(--space-16) !important;
                }
                
                .why-choose-features li {
                    font-size: var(--font-size-sm) !important;
                    margin-bottom: var(--space-8) !important;
                }
            } */

            /* Small phones - Why Choose Us - DISABLED (handled by mobile-fixes.css) */
            /* @media (max-width: 480px) {
                .why-choose-carousel-container {
                    height: 400px !important;
                }
                
                .why-choose-card {
                    flex: 0 0 260px !important;
                    min-width: 260px !important;
                    max-width: 260px !important;
                    height: 360px !important;
                    padding: var(--space-16) !important;
                }
                
                .why-choose-icon {
                    width: 50px !important;
                    height: 50px !important;
                    font-size: var(--font-size-lg) !important;
                }
                
                .why-choose-card h3 {
                    font-size: var(--font-size-base) !important;
                }
                
                .why-choose-card p {
                    font-size: var(--font-size-xs) !important;
                }
                
                .why-choose-features li {
                    font-size: var(--font-size-xs) !important;
                }
            } */

            /* Tablet responsive */
            @media (min-width: 769px) and (max-width: 1024px) {
                .why-choose-carousel-container {
                    height: 430px !important;
                }
                
                .why-choose-card {
                    flex: 0 0 350px !important;
                    min-width: 350px !important;
                    max-width: 350px !important;
                    height: 390px !important;
                }
            }

            /* TESTIMONIALS SECTION - PROFESSIONAL CAROUSEL */
            .testimonials-container {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
            }

            .testimonials-carousel-container {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 400px;
                margin: var(--space-12) auto;
                mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
                -webkit-mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
            }

            .testimonials-carousel {
                display: flex;
                gap: var(--space-32);
                animation: testimonialsSlide 50s linear infinite;
                width: max-content;
                align-items: stretch;
                will-change: transform;
                height: 100%;
            }

            .testimonials-carousel:hover {
                animation-play-state: running;
            }

            @keyframes testimonialsSlide {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(-50% - var(--space-16)));
                }
            }

            .testimonial-card {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(15px);
                border: 2px solid rgba(255, 212, 0, 0.2);
                border-radius: var(--radius-lg);
                padding: var(--space-24);
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
                
                /* Fixed dimensions untuk consistency */
                flex: 0 0 380px;
                width: 380px;
                min-width: 380px;
                max-width: 380px;
                height: 350px;
                
                /* Layout internal */
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: stretch;
                
                /* Force layout stability */
                box-sizing: border-box;
            }

            /* Ensure testimonial cards don't collapse */
            .testimonial-card * {
                box-sizing: border-box;
            }

            .testimonial-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: linear-gradient(135deg, var(--primary-yellow), #FFE55C);
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            }

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

            .testimonial-card:hover::after {
                left: 100%;
            }

            .testimonial-card:hover {
                transform: translateY(-10px) scale(1.02);
                background: rgba(255, 255, 255, 1);
                border-color: rgba(255, 212, 0, 0.6);
                box-shadow: 0 20px 40px rgba(255, 212, 0, 0.2);
            }

            .testimonial-header {
                display: flex;
                align-items: flex-start;
                gap: var(--space-16);
                margin-bottom: var(--space-20);
                flex-shrink: 0;
            }

            .testimonial-avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: linear-gradient(135deg, #E5E7EB, #F3F4F6);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--font-size-xl);
                font-weight: 700;
                color: #6B7280;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                transition: all 0.4s ease;
                flex-shrink: 0;
                position: relative;
                overflow: hidden;
                border: 2px solid rgba(255, 255, 255, 0.8);
            }

            /* Different avatar colors for variety */
            .testimonial-avatar.avatar-1 {
                background: linear-gradient(135deg, #FEF3C7, #FDE68A);
            }

            .testimonial-avatar.avatar-2 {
                background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
            }

            .testimonial-avatar.avatar-3 {
                background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
            }

            .testimonial-avatar.avatar-4 {
                background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
            }

            .testimonial-avatar.avatar-5 {
                background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
            }

            .testimonial-avatar.avatar-6 {
                background: linear-gradient(135deg, #FEF2F2, #FECACA);
            }

            .testimonial-card:hover .testimonial-avatar {
                transform: scale(1.1) rotate(5deg);
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.4);
            }

            .testimonial-info {
                flex: 1;
                min-width: 0;
            }

            .testimonial-name {
                font-size: var(--font-size-lg);
                font-weight: 700;
                color: var(--gray-900);
                margin: 0 0 var(--space-4) 0;
                line-height: 1.2;
            }

            .testimonial-position {
                font-size: var(--font-size-sm);
                color: var(--gray-600);
                margin: 0 0 var(--space-8) 0;
                line-height: 1.3;
            }

            .testimonial-rating {
                display: flex;
                gap: var(--space-2);
                font-size: var(--font-size-base);
                color: var(--primary-yellow);
                filter: drop-shadow(0 2px 4px rgba(255, 212, 0, 0.3));
            }

            .testimonial-text {
                font-size: var(--font-size-base);
                line-height: var(--line-height-relaxed);
                color: var(--gray-700);
                font-style: italic;
                position: relative;
                padding-left: var(--space-20);
                flex: 1;
                display: flex;
                align-items: center;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .testimonial-text::before {
                content: '"';
                position: absolute;
                left: 0;
                top: -10px;
                font-size: 3rem;
                color: var(--primary-yellow);
                opacity: 0.4;
                font-family: Georgia, serif;
                font-weight: 700;
                line-height: 1;
            }

            /* Force testimonials section visibility and layout */
            #testimonials {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
            }

            #testimonials .testimonials-carousel-container {
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
            }

            #testimonials .testimonials-carousel {
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
            }

            #testimonials .testimonial-card {
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
            }

            .testimonial-position {
                font-size: var(--font-size-base);
                color: var(--gray-600);
                margin-bottom: var(--space-8);
            }

            .testimonial-rating {
                display: flex;
                gap: var(--space-2);
                font-size: var(--font-size-lg);
                color: var(--primary-yellow);
                filter: drop-shadow(0 2px 4px rgba(255, 212, 0, 0.3));
            }

            .testimonial-text {
                font-size: var(--font-size-lg);
                line-height: var(--line-height-relaxed);
                color: var(--gray-700);
                font-style: italic;
                position: relative;
                padding-left: var(--space-20);
                flex-grow: 1;
                display: flex;
                align-items: center;
            }

            .testimonial-text::before {
                content: '"';
                position: absolute;
                left: 0;
                top: -10px;
                font-size: 3rem;
                color: var(--primary-yellow);
                opacity: 0.4;
                font-family: Georgia, serif;
                font-weight: 700;
                line-height: 1;
            }

            /* Mobile responsive untuk Testimonials - DISABLED (handled by mobile-fixes.css) */
            /* @media (max-width: 768px) {
                .testimonials-carousel-container {
                    height: 380px;
                    margin: var(--space-8) auto;
                }
                
                .testimonial-card {
                    flex: 0 0 280px;
                    width: 280px;
                    min-width: 280px;
                    max-width: 280px;
                    height: 360px;
                    padding: var(--space-16);
                }
                
                .testimonial-avatar {
                    width: 50px;
                    height: 50px;
                    font-size: var(--font-size-lg);
                }
                
                .testimonial-name {
                    font-size: var(--font-size-base);
                }
                
                .testimonial-position {
                    font-size: var(--font-size-xs);
                }
                
                .testimonial-text {
                    font-size: var(--font-size-sm);
                    padding-left: var(--space-12);
                }
                
                .testimonial-text::before {
                    font-size: 2rem;
                }
            } */

            /* Small phones - Testimonials - DISABLED (handled by mobile-fixes.css) */
            /* @media (max-width: 480px) {
                .testimonials-carousel-container {
                    height: 360px;
                }
                
                .testimonial-card {
                    flex: 0 0 260px;
                    width: 260px;
                    min-width: 260px;
                    max-width: 260px;
                    height: 340px;
                    padding: var(--space-12);
                }
                
                .testimonial-avatar {
                    width: 45px;
                    height: 45px;
                    font-size: var(--font-size-base);
                }
                
                .testimonial-name {
                    font-size: var(--font-size-sm);
                }
                
                .testimonial-position {
                    font-size: 0.7rem;
                }
                
                .testimonial-text {
                    font-size: var(--font-size-xs);
                    padding-left: var(--space-8);
                }
                
                .testimonial-text::before {
                    font-size: 1.5rem;
                }
            } */

            /* Tablet responsive untuk Testimonials */
            @media (min-width: 769px) and (max-width: 1024px) {
                .testimonials-carousel-container {
                    height: 390px;
                }
                
                .testimonial-card {
                    flex: 0 0 340px;
                    width: 340px;
                    min-width: 340px;
                    max-width: 340px;
                    height: 360px;
                    padding: var(--space-20);
                }
                
                .testimonial-avatar {
                    width: 55px;
                    height: 55px;
                }
            }
                }
                
                .testimonial-position {
                    font-size: var(--font-size-sm) !important;
                }
                
                .testimonial-text {
                    font-size: var(--font-size-base) !important;
                    padding-left: var(--space-16) !important;
                }
                
                .testimonial-text::before {
                    font-size: 2.5rem !important;
                }
            }

            /* Tablet responsive untuk Testimonials */
            @media (min-width: 769px) and (max-width: 1024px) {
                .testimonials-carousel-container {
                    height: 390px;
                }
                
                .testimonial-card {
                    flex: 0 0 360px;
                    min-width: 360px;
                    max-width: 360px;
                    height: 340px;
                    padding: var(--space-20);
                }
                
                .testimonial-avatar {
                    width: 60px;
                    height: 60px;
                }
            }

            /* RTL SUPPORT FOR CAROUSELS */
            /* RTL Animation Direction Reversal */
            [dir="rtl"] .why-choose-carousel {
                animation: whyChooseSlideRTL 60s linear infinite !important;
            }

            [dir="rtl"] .testimonials-carousel {
                animation: testimonialsSlideRTL 50s linear infinite;
            }

            /* RTL Keyframe Animations - Reversed Direction */
            @keyframes whyChooseSlideRTL {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(50% + var(--space-16)));
                }
            }

            @keyframes testimonialsSlideRTL {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(50% + var(--space-16)));
                }
            }

            /* RTL Gradient Masking - Reversed */
            [dir="rtl"] .why-choose-carousel-container {
                mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
                -webkit-mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
            }

            [dir="rtl"] .testimonials-carousel-container {
                mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
                -webkit-mask: linear-gradient(90deg, transparent 0%, white 10%, white 90%, transparent 100%);
            }

            /* RTL Text Alignment for Cards */
            [dir="rtl"] .why-choose-card {
                text-align: right;
            }

            [dir="rtl"] .testimonial-card {
                text-align: right;
            }

            /* RTL Testimonial Text Padding */
            [dir="rtl"] .testimonial-text {
                padding-left: 0;
                padding-right: var(--space-20);
            }

            [dir="rtl"] .testimonial-text::before {
                left: auto;
                right: 0;
            }

            /* RTL Features List Alignment */
            [dir="rtl"] .why-choose-features {
                text-align: right;
            }

            [dir="rtl"] .why-choose-features li {
                flex-direction: row-reverse;
            }

            [dir="rtl"] .why-choose-features li:hover {
                transform: translateX(-5px);
            }

            /* RTL Testimonial Header - Avatar on Right */
            [dir="rtl"] .testimonial-header {
                flex-direction: row-reverse;
            }

            /* RTL Rating Stars - Right to Left */
            [dir="rtl"] .testimonial-rating {
                flex-direction: row-reverse;
            }

            /* CONTACT CARD ANIMATIONS */
            .contact-card {
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }

            .contact-card::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255, 212, 0, 0.1), transparent);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

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

            .contact-card:hover {
                transform: translateY(-8px) scale(1.02);
                box-shadow: 0 20px 40px rgba(255, 212, 0, 0.15);
            }

            /* FOOTER ANIMATIONS */
            .footer-section {
                opacity: 0;
                transform: translateY(30px);
                animation: slideInFromBottom 0.8s ease-out forwards;
            }

            .footer-link:hover {
                color: var(--primary-yellow) !important;
                transform: translateX(5px);
            }

            .footer-link:hover span {
                width: 8px;
                height: 8px;
                background: var(--primary-yellow);
                box-shadow: 0 0 10px rgba(255, 212, 0, 0.5);
            }

            /* ENSURE FOOTER DOTS ARE ALWAYS VISIBLE */
            .footer-link span {
                width: 4px !important;
                height: 4px !important;
                background: var(--primary-yellow) !important;
                border-radius: 50% !important;
                display: inline-block !important;
                flex-shrink: 0 !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* SPECIFIC STYLING FOR CARA KERJA DOTS */
            a[data-translate="nav-how-it-works"] span {
                width: 4px !important;
                height: 4px !important;
                background: #FFD400 !important;
                border-radius: 50% !important;
                display: inline-block !important;
                flex-shrink: 0 !important;
                opacity: 1 !important;
                visibility: visible !important;
                position: relative !important;
                z-index: 10 !important;
            }

            /* FORCE VISIBILITY FOR ALL FOOTER DOTS */
            .footer-link span,
            footer span[style*="width: 4px"],
            footer span[style*="height: 4px"] {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
                background: #FFD400 !important;
                width: 4px !important;
                height: 4px !important;
                border-radius: 50% !important;
                flex-shrink: 0 !important;
            }

            .social-link:hover {
                background: linear-gradient(135deg, var(--primary-yellow), #FFE55C) !important;
                color: var(--black) !important;
                transform: translateY(-3px) scale(1.1);
                box-shadow: 0 10px 20px rgba(255, 212, 0, 0.3);
            }

            .footer-logo:hover {
                animation: rotateGlow 2s linear infinite;
            }

            /* BUTTON ANIMATIONS */
            .btn-primary {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, var(--primary-yellow), #FFE55C);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

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

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

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px rgba(255, 212, 0, 0.4);
            }

            /* HERO ANIMATIONS */
            .hero-content > * {
                opacity: 0;
                transform: translateY(30px);
                animation: fadeInUp 0.8s ease-out forwards;
            }

            .hero-content > *:nth-child(1) { animation-delay: 0.2s; }
            .hero-content > *:nth-child(2) { animation-delay: 0.4s; }
            .hero-content > *:nth-child(3) { animation-delay: 0.6s; }
            .hero-content > *:nth-child(4) { animation-delay: 0.8s; }

            /* PREMIUM HERO HOVER EFFECTS */
            .hero-stat-card:hover {
                transform: translateY(-5px) scale(1.05);
                background: rgba(255, 255, 255, 0.18);
                border-color: rgba(255, 212, 0, 0.4);
                box-shadow: 0 15px 40px rgba(255, 212, 0, 0.2);
            }

            /* Enhanced background visibility for sections */
            #servis {
                background-attachment: fixed !important;
                background-size: cover !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
            }

            #cara-kerja {
                background-attachment: fixed !important;
                background-size: cover !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
            }

            /* Improved text contrast on background images */
            #servis h2, #cara-kerja h2 {
                text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5) !important;
            }

            #servis p, #cara-kerja p {
                text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7) !important;
            }

            /* Service cards with better contrast */
            .service-card {
                background: rgba(255, 255, 255, 0.95) !important;
                backdrop-filter: blur(15px) !important;
                border: 2px solid rgba(255, 212, 0, 0.4) !important;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
            }

            .service-card:hover {
                background: rgba(255, 255, 255, 0.98) !important;
                border-color: rgba(255, 212, 0, 0.8) !important;
                box-shadow: 0 20px 40px rgba(255, 212, 0, 0.25), 0 0 0 1px rgba(255, 212, 0, 0.3) !important;
            }

            /* Step items with better visibility */
            .step-item h3 {
                text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9) !important;
            }

            .step-item p {
                background: rgba(255, 255, 255, 0.85) !important;
                backdrop-filter: blur(10px) !important;
                border: 1px solid rgba(255, 212, 0, 0.2) !important;
            }

            /* Mobile optimization for background images */
            @media (max-width: 768px) {
                #servis, #cara-kerja {
                    background-attachment: scroll !important;
                    background-size: cover !important;
                }
                
                .service-card {
                    background: rgba(255, 255, 255, 0.98) !important;
                }

                /* Mobile flow layout */
                .step-flow-container {
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: var(--space-32) !important;
                }

                .step-item {
                    max-width: 300px !important;
                }

                /* Hide horizontal flow elements on mobile */
                .flow-line,
                .arrow-1,
                .arrow-2,
                .arrow-3 {
                    display: none !important;
                }

                /* Add vertical arrows for mobile */
                .step-item:not(:last-child)::after {
                    content: '';
                    position: absolute;
                    bottom: -20px;
                    left: 50%;
                    width: 0;
                    height: 0;
                    border-top: 12px solid var(--primary-yellow);
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    z-index: 2;
                    transform: translateX(-50%);
                }
            }

            /* Flow arrows for cara kerja section */
            .step-flow-container {
                position: relative;
            }

            /* Enhanced step hover effects */
            .step-item:hover .step-number {
                transform: scale(1.1);
                box-shadow: 0 8px 25px rgba(255, 212, 0, 0.5);
            }

            .step-item:hover > div:nth-child(2) {
                transform: translateY(-5px);
                box-shadow: 0 12px 30px rgba(255, 212, 0, 0.3);
            }

            /* Tablet responsive - 5 steps */
            @media (min-width: 769px) and (max-width: 1024px) {
                .step-flow-container {
                    flex-wrap: wrap !important;
                    justify-content: center !important;
                    gap: var(--space-24) !important;
                }

                .step-item {
                    flex: 0 1 45% !important;
                    max-width: 280px !important;
                }

                .flow-line {
                    display: none !important;
                }

                .arrow-1,
                .arrow-2,
                .arrow-3,
                .arrow-4 {
                    display: none !important;
                }
            }

            /* Large desktop optimization - 5 steps - FIXED ARROWS */
            @media (min-width: 1200px) {
                .step-flow-container {
                    max-width: 1500px !important;
                }

                .step-item {
                    max-width: 240px !important;
                }

                .flow-line {
                    left: 8% !important;
                    right: 8% !important;
                }

                .arrow-1 {
                    left: 22% !important;
                }

                .arrow-2 {
                    left: 42% !important;
                }

                .arrow-3 {
                    left: 62% !important;
                }

                .arrow-4 {
                    left: 78% !important;
                }
            }

            /* PROFESSIONAL HERO CTA BUTTONS - STATS CARD STYLE */
            .hero-btn-primary,
            .hero-btn-secondary {
                display: inline-flex;
                align-items: center;
                gap: var(--space-12);
                font-weight: 700;
                font-size: var(--font-size-lg);
                padding: var(--space-20) var(--space-32);
                border-radius: var(--radius-lg);
                background: rgba(255, 255, 255, 0.04);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                text-decoration: none;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
                min-width: 240px;
                justify-content: center;
                text-transform: none;
                letter-spacing: normal;
            }

            .hero-btn-primary {
                color: var(--white);
                background: rgba(255, 212, 0, 0.06);
                border: 1px solid rgba(255, 212, 0, 0.2);
            }

            .hero-btn-secondary {
                color: var(--white);
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.15);
            }

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

            .hero-btn-primary:hover,
            .hero-btn-secondary:hover {
                transform: translateY(-5px) scale(1.05);
                background: rgba(255, 212, 0, 0.25);
                border-color: rgba(255, 212, 0, 0.6);
                box-shadow: 0 15px 40px rgba(255, 212, 0, 0.25);
                color: var(--primary-yellow);
            }

            .hero-btn-primary:hover::before,
            .hero-btn-secondary:hover::before {
                left: 100%;
            }

            .hero-btn-primary:hover span:last-child,
            .hero-btn-secondary:hover span:last-child {
                transform: translateX(8px) scale(1.2);
            }

            .hero-btn-primary:active,
            .hero-btn-secondary:active {
                transform: translateY(-2px) scale(1.02);
            }

            /* Enhanced for Dark Gold Theme */
            .hero-bg-international .hero-btn-primary {
                background: rgba(255, 212, 0, 0.05);
                border: 1px solid rgba(255, 212, 0, 0.25);
                color: var(--primary-yellow);
            }

            .hero-bg-international .hero-btn-secondary {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 212, 0, 0.2);
                color: var(--white);
            }

            .hero-bg-international .hero-btn-primary:hover {
                background: rgba(255, 212, 0, 0.3);
                border-color: rgba(255, 212, 0, 0.8);
                box-shadow: 0 20px 50px rgba(255, 212, 0, 0.3);
                color: var(--black);
            }

            .hero-bg-international .hero-btn-secondary:hover {
                background: rgba(255, 212, 0, 0.2);
                border-color: rgba(255, 212, 0, 0.6);
                box-shadow: 0 15px 40px rgba(255, 212, 0, 0.25);
                color: var(--primary-yellow);
            }

            /* Button text animations */
            .hero-btn-primary span:last-child,
            .hero-btn-secondary span:last-child {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-size: 1.2em;
                font-weight: 900;
            }

            /* Responsive adjustments for CTA buttons */
            @media (max-width: 768px) {
                .hero-btn-primary,
                .hero-btn-secondary {
                    padding: var(--space-16) var(--space-24);
                    font-size: var(--font-size-base);
                    min-width: 200px;
                }
            }

            /* PROGRESSIVE ENHANCEMENT - ANIMATIONS WORK BUT DON'T HIDE CONTENT */
            @media (prefers-reduced-motion: no-preference) {
                .fade-up {
                    animation: fadeUpSafe 0.8s ease-out forwards;
                }
                
                .scale-in {
                    animation: scaleInSafe 0.8s ease-out forwards;
                }
                
                .fade-in {
                    animation: fadeInSafe 0.8s ease-out forwards;
                }
            }

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

            @keyframes scaleInSafe {
                from {
                    opacity: 0.8;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            @keyframes fadeInSafe {
                from {
                    opacity: 0.8;
                }
                to {
                    opacity: 1;
                }
            }

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

            @keyframes scaleInSafe {
                from {
                    opacity: 0.8;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            @keyframes fadeInSafe {
                from {
                    opacity: 0.8;
                }
                to {
                    opacity: 1;
                }
            }

            /* REMOVE GAP BETWEEN HERO AND SERVICES */
            #hero {
                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
            }

            #servis {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

            /* ENHANCED STATS ALIGNMENT FIX - PROFESSIONAL SPACING */
            .hero-stats {
                display: flex !important;
                justify-content: center !important;
                align-items: stretch !important;
                gap: var(--space-24) !important; /* Reduced gap for better spacing */
                flex-wrap: wrap !important;
                margin-bottom: var(--space-48) !important;
                padding: 0 var(--space-16) !important; /* Add horizontal padding */
                max-width: 1000px !important; /* Limit max width */
                margin-left: auto !important;
                margin-right: auto !important;
            }

            .hero-stat-card {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                min-height: 80px !important;
                flex: 1 1 280px !important; /* Better flex properties */
                max-width: 320px !important; /* Increased max width */
                min-width: 250px !important; /* Increased min width */
                padding: var(--space-20) var(--space-24) !important; /* Consistent padding */
                box-sizing: border-box !important;
            }

            /* Mobile responsive stats spacing */
            /* MOBILE RESPONSIVE HERO SECTION */
            @media (max-width: 768px) {
                #hero {
                    padding: var(--space-48) var(--space-16) 0 !important;
                    min-height: calc(100vh - 70px) !important;
                }
                
                .hero-title {
                    font-size: clamp(2rem, 8vw, 3rem) !important;
                    margin-bottom: var(--space-16) !important;
                    text-align: center;
                }
                
                .hero-subtitle {
                    font-size: clamp(1rem, 4vw, 1.25rem) !important;
                    margin-bottom: var(--space-32) !important;
                    text-align: center;
                    padding: 0 var(--space-8);
                }
                
                .hero-buttons {
                    flex-direction: column !important;
                    gap: var(--space-16) !important;
                    align-items: center !important;
                    width: 100% !important;
                }
                
                .hero-btn-primary,
                .hero-btn-secondary {
                    width: 100% !important;
                    max-width: 280px !important;
                    padding: var(--space-16) var(--space-24) !important;
                    font-size: var(--font-size-base) !important;
                    text-align: center !important;
                }
                
                .hero-stats {
                    gap: var(--space-16) !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    padding: 0 var(--space-16) !important;
                    margin-top: var(--space-48) !important;
                }
                
                .hero-stat-card {
                    max-width: 100% !important;
                    min-width: 260px !important;
                    margin-bottom: var(--space-12) !important;
                    flex: none !important;
                }
            }

            /* GENERAL MOBILE RESPONSIVE IMPROVEMENTS */
            @media (max-width: 768px) {
                /* Section padding adjustments */
                section {
                    padding: var(--space-48) var(--space-16) !important;
                }
                
                .container {
                    padding: 0 var(--space-16) !important;
                    max-width: 100% !important;
                }
                
                /* Headings responsive sizing */
                h1 {
                    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
                    line-height: 1.2 !important;
                    margin-bottom: var(--space-16) !important;
                }
                
                h2 {
                    font-size: clamp(1.5rem, 5vw, 2rem) !important;
                    line-height: 1.3 !important;
                    margin-bottom: var(--space-16) !important;
                }
                
                h3 {
                    font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
                    line-height: 1.4 !important;
                    margin-bottom: var(--space-12) !important;
                }
                
                /* Paragraph spacing */
                p {
                    font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
                    line-height: 1.6 !important;
                    margin-bottom: var(--space-16) !important;
                }
                
                /* Button improvements */
                .btn, button {
                    min-height: 44px !important; /* iOS touch target minimum */
                    padding: var(--space-12) var(--space-20) !important;
                    font-size: var(--font-size-base) !important;
                }
                
                /* Service cards mobile */
                .service-card {
                    margin-bottom: var(--space-24) !important;
                    padding: var(--space-20) !important;
                }
                
                /* Grid layouts to single column */
                .grid-2, .grid-3, .grid-4 {
                    grid-template-columns: 1fr !important;
                    gap: var(--space-24) !important;
                }
                
                /* Flex layouts adjustments */
                .flex-row {
                    flex-direction: column !important;
                    gap: var(--space-16) !important;
                }
                
                /* Contact info cards - stack vertically on mobile */
                #hubungi-kami .contact-info-card {
                    width: 100% !important;
                }
                
                /* Contact section - main grid to single column */
                #hubungi-kami > div > div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
                    display: flex !important;
                    flex-direction: column !important;
                    gap: var(--space-32) !important;
                }
                
                /* Contact cards grid - single column */
                #hubungi-kami div[style*="display: grid; grid-template-columns: repeat(2, 1fr)"] {
                    grid-template-columns: 1fr !important;
                    gap: var(--space-20) !important;
                }
                
                /* Contact card - full width */
                #hubungi-kami a[style*="display: flex; flex-direction: column"] {
                    width: 100% !important;
                    max-width: 100% !important;
                }
                
                /* CTA card spanning 2 columns - make it span 1 */
                #hubungi-kami div[style*="grid-column: span 2"] {
                    grid-column: span 1 !important;
                }
                
                /* Map height adjustment */
                #hubungi-kami iframe {
                    height: 300px !important;
                }
                
                /* Quick info cards below map - single column */
                #hubungi-kami div[style*="display: grid; grid-template-columns: 1fr 1fr"]:not([style*="repeat"]) {
                    grid-template-columns: 1fr !important;
                }
                
                /* Why Choose Us - carousel to vertical stack */
                .why-choose-carousel-container {
                    height: auto !important;
                    overflow: visible !important;
                }
                
                .why-choose-carousel {
                    flex-direction: column !important;
                    animation: none !important;
                    gap: var(--space-24) !important;
                }
                
                .why-choose-card {
                    min-width: 100% !important;
                    width: 100% !important;
                    margin: 0 0 var(--space-24) 0 !important;
                }
                
                /* Testimonials - carousel to vertical stack */
                .testimonials-carousel-container {
                    height: auto !important;
                    overflow: visible !important;
                }
                
                .testimonials-carousel {
                    flex-direction: column !important;
                    animation: none !important;
                    gap: var(--space-24) !important;
                    width: 100% !important;
                }
                
                .testimonial-card {
                    min-width: 100% !important;
                    width: 100% !important;
                    margin: 0 0 var(--space-24) 0 !important;
                }
            }

            /* Small phones specific improvements */
            @media (max-width: 480px) {
                section {
                    padding: var(--space-32) var(--space-12) !important;
                }
                
                .container {
                    padding: 0 var(--space-12) !important;
                }
                
                h1 {
                    font-size: clamp(1.5rem, 8vw, 2rem) !important;
                }
                
                h2 {
                    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
                }
                
                p {
                    font-size: clamp(0.85rem, 4vw, 0.95rem) !important;
                }
                
                .service-card {
                    padding: var(--space-16) !important;
                }
                
                /* Contact section - smaller spacing */
                #hubungi-kami {
                    padding: var(--space-32) var(--space-12) !important;
                }
                
                #hubungi-kami a[style*="display: flex; flex-direction: column"] {
                    padding: var(--space-20) var(--space-16) !important;
                }
                
                #hubungi-kami div[style*="width: 60px; height: 60px"] {
                    width: 50px !important;
                    height: 50px !important;
                }
                
                #hubungi-kami svg {
                    width: 28px !important;
                    height: 28px !important;
                }
                
                /* Testimonial cards - smaller */
                .testimonial-card {
                    padding: var(--space-20) var(--space-16) !important;
                }
                
                .testimonial-avatar {
                    width: 45px !important;
                    height: 45px !important;
                }
                
                /* Why Choose Us cards - smaller */
                .why-choose-card {
                    padding: var(--space-20) var(--space-16) !important;
                }
                
                .why-choose-card div[style*="font-size: 48px"] {
                    font-size: 36px !important;
                }
            }

            /* Landscape phone orientation */
            @media (max-width: 768px) and (orientation: landscape) {
                #hero {
                    min-height: 100vh !important;
                    padding: var(--space-24) var(--space-16) 0 !important;
                }
                
                .hero-title {
                    font-size: clamp(1.5rem, 6vw, 2rem) !important;
                    margin-bottom: var(--space-12) !important;
                }
                
                .hero-subtitle {
                    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
                    margin-bottom: var(--space-20) !important;
                }
                
                .hero-stats {
                    margin-top: var(--space-24) !important;
                }
            }

            /* Tablet responsive stats spacing */
            @media (min-width: 769px) and (max-width: 1024px) {
                .hero-stats {
                    gap: var(--space-20) !important;
                    max-width: 800px !important;
                }
                
                .hero-stat-card {
                    max-width: 280px !important;
                    min-width: 220px !important;
                    flex: 1 1 250px !important;
                }
            }

            /* Large screen optimization */
            @media (min-width: 1200px) {
                .hero-stats {
                    gap: var(--space-32) !important;
                    max-width: 1100px !important;
                }
                
                .hero-stat-card {
                    max-width: 340px !important;
                    min-width: 280px !important;
                }
            }

            /* REMOVE GAP BETWEEN HERO AND SERVICES - SEAMLESS TRANSITION */
            #hero {
                margin-bottom: 0 !important;
            }

            #servis {
                margin-top: 0 !important;
            }

            /* SEAMLESS SECTION TRANSITION */
            #hero .hero-content {
                margin-bottom: 0 !important;
            }

            #hero .hero-cta {
                margin-bottom: var(--space-32) !important; /* Add some space after CTA */
            }

            /* ENSURE SEAMLESS TRANSITION */
            #hero,
            #servis {
                box-sizing: border-box !important;
                display: block !important;
            }

            /* REMOVE ANY POTENTIAL SPACING */
            #hero + #servis {
                margin-top: 0 !important;
            }

            /* FORCE SEAMLESS CONNECTION - ZERO GAP */
            section#hero {
                border-bottom: none !important;
                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
            }

            /* TRUSTED PARTNERS CSS - TEMPORARILY DISABLED */
            /*
            section#trusted-partners {
                border-top: none !important;
                margin-top: 0 !important;
                padding-top: var(--space-32) !important;
            }
            */

            section#servis-cara-kerja {
                border-top: none !important;
                margin-top: 0 !important;
                padding-top: var(--space-32) !important;
            }

            /* ELIMINATE ANY BROWSER DEFAULT SPACING */
            #hero::after,
            #servis::before {
                content: none !important;
                display: none !important;
            }

            /* AGGRESSIVE GAP ELIMINATION */
            body {
                margin: 0 !important;
                padding: 0 !important;
            }

            main {
                margin: 0 !important;
                padding: 0 !important;
            }

            /* ENSURE NO VERTICAL SPACING BETWEEN SECTIONS */
            section {
                vertical-align: top !important;
                margin: 0 !important;
            }

            /* SPECIFIC HERO-SERVICES CONNECTION */
            #hero {
                position: relative !important;
                z-index: 1 !important;
            }

            #servis {
                position: relative !important;
                z-index: 1 !important;
            }

            /* Dark Gold Theme Enhancement - Background Animation Removed */

            @keyframes backgroundPulse {
                0%, 100% {
                    opacity: 0.3;
                    transform: scale(1);
                }
                50% {
                    opacity: 0.6;
                    transform: scale(1.1);
                }
            }

            /* SCROLL ANIMATIONS */
            .scroll-reveal {
                opacity: 1;
                transform: translateY(0);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .scroll-reveal.animate-in {
                opacity: 1;
                transform: translateY(0);
            }

            .scroll-reveal.animate-out {
                opacity: 0;
                transform: translateY(50px);
            }

            /* LOADING ANIMATIONS */
            .loading-shimmer {
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: shimmer 2s infinite;
            }

            /* LANGUAGE TOGGLE - OPTIMIZED FUNCTIONALITY */
            .lang-toggle {
                position: relative;
                display: inline-block;
                z-index: 1002;
            }

            #langToggleBtn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 212, 0, 0.2);
                color: var(--white);
                padding: var(--space-8) var(--space-16);
                border-radius: var(--radius-base);
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: var(--space-10);
                transition: all var(--transition-base);
                backdrop-filter: blur(10px);
                min-width: 70px;
                justify-content: space-between;
            }

            #currentFlag {
                width: 20px !important;
                height: 15px !important;
                object-fit: cover !important;
                border-radius: 2px !important;
                display: inline-block;
                transition: all 0.3s ease;
            }

            #currentFlag:hover {
                transform: scale(1.05);
            }

            #langToggleBtn:hover {
                background: rgba(255, 212, 0, 0.15);
                border-color: var(--primary-yellow);
                transform: translateY(-1px);
            }

            #langToggleBtn.active {
                background: rgba(255, 212, 0, 0.2);
                border-color: var(--primary-yellow);
            }

            #langToggleBtn.active span:last-child {
                transform: rotate(180deg);
            }

            #langDropdown {
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                background: var(--white);
                border: 1px solid var(--gray-200);
                border-radius: var(--radius-base);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
                min-width: 160px;
                z-index: 1003;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px) scale(0.95);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: blur(20px);
                display: none;
                pointer-events: none;
                overflow: hidden;
            }

            #langDropdown.show {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateY(0) scale(1) !important;
                pointer-events: auto !important;
            }

            .lang-btn {
                width: 100%;
                text-align: left;
                padding: var(--space-12) var(--space-16);
                border: none;
                background: transparent;
                color: var(--gray-900);
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                gap: var(--space-12);
                font-size: var(--font-size-sm);
            }

            .lang-btn img {
                width: 18px !important;
                height: 13px !important;
                object-fit: cover !important;
                border-radius: 2px !important;
                display: inline-block;
                min-width: 18px;
                transition: all 0.2s ease;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }

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

            /* Responsive flag sizing */
            @media (max-width: 768px) {
                #currentFlag {
                    width: 18px !important;
                    height: 13px !important;
                }
                
                .lang-btn img {
                    width: 16px !important;
                    height: 12px !important;
                }
                
                #langToggleBtn {
                    min-width: 60px;
                    padding: var(--space-6) var(--space-12);
                }
            }

            /* NAVIGATION DEFAULT STYLES - ENSURE VISIBILITY */
            nav {
                max-width: var(--container-max-width);
                margin: 0 auto;
                padding: 0 var(--space-48);
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            #desktopNav {
                display: flex !important;
                list-style: none;
                gap: var(--space-32);
                align-items: center;
                margin: 0;
                padding: 0;
            }

            #desktopNav li {
                margin: 0;
                padding: 0;
            }

            /* Only apply to direct children, not dropdown menu items */
            #desktopNav > li > a {
                color: rgba(255, 255, 255, 0.9);
                text-decoration: none;
                font-weight: 500;
                transition: all var(--transition-base);
                display: block;
                padding: var(--space-8) 0;
            }

            #desktopNav > li > a:hover {
                color: var(--primary-yellow);
                transform: translateY(-2px);
            }

            /* ── OLD MOBILE NAV STYLES NEUTRALIZED ──────────────────────────────
               These were replaced by mobile-improvements.css (loaded after this file).
               Rules kept as empty shells so line numbers stay predictable.
               ──────────────────────────────────────────────────────────────────── */
            .mobile-menu-btn { display: none; }

            /* .mobile-nav layout fully owned by mobile-improvements.css */
            .mobile-nav { display: none; }

            /* Old button shape — overridden by mobile-improvements.css */
            /* .mobile-menu-btn shape rules removed to avoid conflict */

            /* Old span bars — no longer used (button uses SVG now) */
            .mobile-menu-btn span { display: none; }

            /* Old active-state bar animations — no longer used */

            /* Old .mobile-nav drawer styles — replaced by mobile-improvements.css */

            /* Old .mobile-nav.active transform — replaced by mobile-improvements.css */

            /* Old .mobile-nav link styles — kept for text colour only */
            .mobile-nav a {
                display: block;
                color: var(--white);
                text-decoration: none;
                font-weight: 500;
            }

            .mobile-nav a:hover,
            .mobile-nav a:active {
                color: var(--primary-yellow);
            }

            /* MOBILE RESPONSIVE STYLES - SIMPLIFIED */
            @media (max-width: 768px) {
                /* Header adjustments */
                header {
                    height: 70px !important;
                }
                
                nav {
                    padding: 0 var(--space-16) !important;
                }
                
                /* Hide desktop navigation ON MOBILE ONLY */
                #desktopNav {
                    display: none !important;
                }
                
                /* Hide dropdown on mobile */
                .nav-dropdown .dropdown-menu {
                    display: none !important;
                }
                
                /* Show mobile menu button ON MOBILE ONLY */
                .mobile-menu-btn {
                    display: flex !important;
                }
                
                /* Logo adjustments */
                .logo-container {
                    width: 35px !important;
                    height: 35px !important;
                }
                
                .logo-text {
                    font-size: var(--font-size-lg) !important;
                }
                
                /* Login button - show icon only */
                .login-text-translate {
                    display: none !important;
                }
                
                .login-door-icon {
                    display: inline !important;
                }
                
                #loginBtn {
                    padding: var(--space-10) var(--space-12) !important;
                    min-width: auto !important;
                }
                
                /* Language toggle adjustments */
                .lang-toggle {
                    margin-right: var(--space-8);
                }
            }

            /* CRITICAL DESKTOP NAVIGATION FIX — scoped to desktop only */
            @media (min-width: 769px) {
                body #desktopNav {
                    display: flex !important;
                }
            }
            
            /* REMOVED: `body .mobile-menu-btn { display: none !important }`
               This unconditional rule was preventing the hamburger from EVER
               showing — it overrode the mobile media query's `display: flex`
               because `body .mobile-menu-btn` (specificity 0,1,1) outranks
               `.mobile-menu-btn` (0,1,0). The desktop hide is handled by the
               `@media (min-width: 769px)` block farther down. */

            /* FORCE DESKTOP NAVIGATION VISIBILITY - CRITICAL FIX */
            @media screen and (min-width: 769px) {
                header nav #desktopNav {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                }
                
                header nav .mobile-menu-btn {
                    display: none !important;
                }
                
                header nav .mobile-nav {
                    display: none !important;
                }
            }

            /* DESKTOP STYLES - SIMPLIFIED */
            @media (min-width: 769px) {
                /* FORCE desktop navigation visible */
                #desktopNav {
                    display: flex !important;
                    list-style: none !important;
                    gap: var(--space-32) !important;
                    align-items: center !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                
                #desktopNav li {
                    margin: 0 !important;
                    padding: 0 !important;
                }
                
                /* Only apply to direct children, not dropdown menu items */
                #desktopNav > li > a {
                    color: rgba(255, 255, 255, 0.9) !important;
                    text-decoration: none !important;
                    font-weight: 500 !important;
                    transition: all var(--transition-base) !important;
                    display: block !important;
                    padding: var(--space-8) 0 !important;
                }
                
                #desktopNav > li > a:hover {
                    color: var(--primary-yellow) !important;
                    transform: translateY(-2px) !important;
                }
                
                /* FORCE mobile elements hidden on desktop */
                .mobile-menu-btn {
                    display: none !important;
                }
                
                .mobile-nav {
                    display: none !important;
                }
                
                /* Desktop login button - show full text */
                .login-text-translate {
                    display: inline !important;
                }
                
                .login-door-icon {
                    display: inline !important;
                }
                
                /* Proper header height on desktop */
                header {
                    height: 80px !important;
                }
                
                /* Proper nav padding on desktop */
                nav {
                    padding: 0 var(--space-48) !important;
                    display: flex !important;
                    justify-content: space-between !important;
                    align-items: center !important;
                }
                
                /* Logo container desktop */
                .logo-container {
                    width: 45px !important;
                    height: 45px !important;
                }
                
                .logo-text {
                    font-size: var(--font-size-xl) !important;
                    display: inline !important;
                }
            }

            /* Small phones (< 480px) */
            @media (max-width: 480px) {
                header {
                    height: 60px !important;
                }
                
                nav {
                    padding: 0 var(--space-12) !important;
                }
                
                .logo-container {
                    width: 30px !important;
                    height: 30px !important;
                }
                
                .logo-text {
                    font-size: var(--font-size-base) !important;
                }
                
                #langToggleBtn {
                    min-width: 50px !important;
                    padding: var(--space-4) var(--space-8) !important;
                }
                
                #currentFlag {
                    width: 16px !important;
                    height: 12px !important;
                }
                
                .mobile-nav {
                    top: 60px;
                }
                
                .mobile-nav a {
                    padding: var(--space-12) var(--space-16);
                    font-size: var(--font-size-base);
                }
            }

            .lang-btn:hover {
                background: rgba(255, 212, 0, 0.1) !important;
                color: var(--black) !important;
            }

            .lang-btn.active {
                background: var(--primary-yellow) !important;
                color: var(--black) !important;
                font-weight: 700 !important;
            }
                gap: var(--space-12);
            }

            .lang-btn:hover {
                background: rgba(255, 212, 0, 0.1) !important;
                color: var(--black) !important;
            }

            .lang-btn.active {
                background: var(--primary-yellow) !important;
                color: var(--black) !important;
                font-weight: 700 !important;
            }

            /* Fade transition for language changes */
            .fade-transition {
                transition: opacity 0.3s ease-in-out;
            }

            /* RTL Support for Arabic */
            [dir="rtl"] {
                font-family: 'Amiri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            }

            [dir="rtl"] .logo-container {
                margin-left: var(--space-12);
                margin-right: 0;
            }

            [dir="rtl"] #langDropdown {
                left: 0;
                right: auto;
            }

            /* FLOATING WHATSAPP BUTTON - PROFESSIONAL & CLEAN */
            .whatsapp-float {
                position: fixed;
                bottom: 30px;
                right: 30px;
                width: 60px;
                height: 60px;
                background: linear-gradient(135deg, #25D366, #128C7E);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1000;
                text-decoration: none;
                color: white;
                animation: whatsappPulse 3s ease-in-out infinite;
                backdrop-filter: blur(10px);
                border: 2px solid rgba(255, 255, 255, 0.2);
            }

            .whatsapp-float:hover {
                transform: translateY(-3px) scale(1.05);
                box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
                background: linear-gradient(135deg, #128C7E, #25D366);
            }

            .whatsapp-float svg {
                width: 32px;
                height: 32px;
                color: white;
                transition: all 0.3s ease;
            }

            .whatsapp-float:hover svg {
                transform: scale(1.1);
            }

            /* WHATSAPP MODAL STYLES */
            .whatsapp-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(5px);
                z-index: 10000;
                align-items: center;
                justify-content: center;
                animation: fadeIn 0.3s ease;
            }

            .whatsapp-modal.active {
                display: flex;
            }

            .whatsapp-modal-content {
                background: white;
                border-radius: 16px;
                width: 90%;
                max-width: 450px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                animation: slideUp 0.3s ease;
                overflow: hidden;
            }

            .whatsapp-modal-header {
                padding: 24px;
                background: linear-gradient(135deg, #25D366, #128C7E);
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .whatsapp-modal-header h3 {
                margin: 0;
                font-size: 20px;
                font-weight: 600;
            }

            .whatsapp-modal-close {
                background: none;
                border: none;
                color: white;
                font-size: 32px;
                cursor: pointer;
                line-height: 1;
                padding: 0;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.3s ease;
            }

            .whatsapp-modal-close:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: rotate(90deg);
            }

            .whatsapp-modal-body {
                padding: 24px;
            }

            .whatsapp-option {
                display: flex;
                align-items: center;
                padding: 20px;
                border: 2px solid #e5e7eb;
                border-radius: 12px;
                margin-bottom: 16px;
                text-decoration: none;
                color: inherit;
                transition: all 0.3s ease;
                cursor: pointer;
            }

            .whatsapp-option:last-child {
                margin-bottom: 0;
            }

            .whatsapp-option:hover {
                border-color: #25D366;
                background: #f0fdf4;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
            }

            .whatsapp-option-icon {
                width: 48px;
                height: 48px;
                background: linear-gradient(135deg, #25D366, #128C7E);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                margin-right: 16px;
            }

            .whatsapp-option-icon svg {
                width: 24px;
                height: 24px;
                color: white;
            }

            .whatsapp-option-text {
                flex: 1;
            }

            .whatsapp-option-text h4 {
                margin: 0 0 4px 0;
                font-size: 16px;
                font-weight: 600;
                color: #1f2937;
            }

            .whatsapp-option-text p {
                margin: 0;
                font-size: 14px;
                color: #6b7280;
            }

            .whatsapp-option-arrow {
                color: #9ca3af;
                transition: all 0.3s ease;
            }

            .whatsapp-option:hover .whatsapp-option-arrow {
                color: #25D366;
                transform: translateX(4px);
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

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

            /* Mobile Responsive for Modal */
            @media (max-width: 768px) {
                .whatsapp-modal-content {
                    width: 95%;
                    max-width: none;
                    margin: 20px;
                }

                .whatsapp-modal-header {
                    padding: 20px;
                }

                .whatsapp-modal-header h3 {
                    font-size: 18px;
                }

                .whatsapp-modal-body {
                    padding: 20px;
                }

                .whatsapp-option {
                    padding: 16px;
                }

                .whatsapp-option-icon {
                    width: 40px;
                    height: 40px;
                    margin-right: 12px;
                }

                .whatsapp-option-icon svg {
                    width: 20px;
                    height: 20px;
                }

                .whatsapp-option-text h4 {
                    font-size: 15px;
                }

                .whatsapp-option-text p {
                    font-size: 13px;
                }
            }

            @keyframes whatsappPulse {
                0%, 100% {
                    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
                }
                50% {
                    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5), 0 0 0 10px rgba(37, 211, 102, 0.1);
                }
            }

            /* Mobile Responsive */
            @media (max-width: 768px) {
                .whatsapp-float {
                    width: 55px;
                    height: 55px;
                    bottom: 20px;
                    right: 20px;
                }

                .whatsapp-float svg {
                    width: 28px;
                    height: 28px;
                }

                .whatsapp-tooltip {
                    display: none;
                }
            }

            /* RTL Support */
            [dir="rtl"] .whatsapp-float {
                left: 30px;
                right: auto;
            }

            @media (max-width: 768px) {
                [dir="rtl"] .whatsapp-float {
                    left: 20px;
                    right: auto;
                }
            }
            
            
            /* FORCE BACKGROUND OPACITY OVERRIDE - CRITICAL */
            #servis > div:first-child {
                opacity: 0.02 !important;
            }
            
            #cara-kerja > div:first-child {
                opacity: 0.03 !important;
            }
            
            footer > div:first-child {
                opacity: 0.01 !important;
            }
            
            /* ========================================
               CRITICAL FIX - MOBILE HAMBURGER MENU
               ======================================== */
            @media (max-width: 768px) {
                /* FORCE SHOW hamburger on mobile */
                .mobile-menu-btn,
                #mobileMenuBtn,
                button.mobile-menu-btn {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: relative !important;
                    z-index: 1001 !important;
                }
                
                /* FORCE HIDE desktop nav on mobile */
                #desktopNav,
                ul#desktopNav {
                    display: none !important;
                    visibility: hidden !important;
                }
            }
            
            /* FORCE HIDE hamburger on desktop */
            @media (min-width: 769px) {
                .mobile-menu-btn,
                #mobileMenuBtn,
                button.mobile-menu-btn {
                    display: none !important;
                }
                
                #desktopNav,
                ul#desktopNav {
                    display: flex !important;
                }
            }