body {
            font-family: 'Inter', sans-serif;
        }

        /* Subtle animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .animate-delay-200 {
            animation-delay: 0.2s;
        }

        .animate-delay-400 {
            animation-delay: 0.4s;
        }

        /* Professional price highlighting */
        .price-highlight {
            background: linear-gradient(135deg, #1e40af, #3b82f6);
            color: white;
            padding: 6px 16px;
            border-radius: 8px;
            font-weight: 700;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
        }

        /* Subtle hover effects */
        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
        }

        /* Filter button styles */
        .filter-btn {
            transition: all 0.3s ease;
            border: 1px solid #e5e7eb;
            background: white;
            color: #6b7280;
        }

        /* Hidden class for demo items */
        .demo-item.hidden {
            display: none;
        }

        /* Hidden class for FAQ items */
        .faq-item.faq-hidden {
            display: none;
        }

        /* Load more button */
        .load-more-btn {
            background: #3b82f6;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .load-more-btn:hover {
            background: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        .filter-btn.active {
            background: #1e40af;
            color: white;
            border-color: #1e40af;
        }

        .filter-btn:hover:not(.active) {
            background: #f8fafc;
            border-color: #1e40af;
            color: #1e40af;
        }

        /* Demo item animation */
        .demo-item {
            transition: all 0.4s ease;
            opacity: 1;
            transform: scale(1);
        }

        .demo-item.hidden {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
        }

        /* Mobile menu styles */
        .mobile-menu {
            transition: all 0.3s ease;
            transform: translateX(-100%);
            opacity: 0;
            visibility: hidden;
        }

        .mobile-menu.active {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }

        /* Style untuk tombol WhatsApp */
        .whatsapp-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: #25D366;
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
        }

        .whatsapp-button:hover {
            background: #1db954;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
            color: white;
            text-decoration: none;
        }

        .whatsapp-icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Alternative dengan background icon */
        .whatsapp-button-alt {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: #25D366;
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
            margin-top: 20px;
        }

        .whatsapp-button-alt:hover {
            background: #1db954;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
            color: white;
            text-decoration: none;
        }

        .whatsapp-icon-bg {
            width: 24px;
            height: 24px;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZmZmZiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTS4wNTcgMjRsMS42ODctNi4xNjNjLTEuMDQxLTEuODA0LTEuNTg4LTMuODQ5LTEuNTg3LTUuOTQ2LjAwMy02LjU1NiA1LjMzOC0xMS44OTEgMTEuODkzLTExLjg5MSAzLjE4MS4wMDEgNi4xNjcgMS4yNCA4LjQxMyAzLjQ4OCAyLjI0NSAyLjI0OCAzLjQ4MSA1LjIzNiAzLjQ4IDguNDE0LS4wMDMgNi41NTctNS4zMzggMTEuODkyLTExLjg5MyAxMS44OTItMS45OS0uMDAxLTMuOTUxLS41LTUuNjg4LTEuNDQ4bC02LjMwNSAxLjY1NHptNi41OTctMy44MDdjMS42NzYuOTk1IDMuMjc2IDEuNTkxIDUuMzkyIDEuNTkyIDUuNDQ4IDAgOS44ODYtNC40MzQgOS44ODktOS44ODUuMDAyLTUuNDYyLTQuNDE1LTkuODktOS44ODEtOS44OTItNS40NTIgMC05Ljg4NyA0LjQzNC05Ljg4OSA5Ljg4NC0uMDAxIDIuMjI1LjY1MSAzLjg5MSAxLjc0NiA1LjYzNGwtLjk5OSAzLjY0OCAzLjc0Mi0uOTgxem0xMS4zODctNS40NjRjLS4wNzQtLjEyNC0uMjcyLS4xOTgtLjU3LS4zNDctLjI5Ny0uMTQ5LTEuNzU4LS44NjgtMi4wMzEtLjk2Ny0uMjcyLS4wOTktLjQ3LS4xNDktLjY2OS4xNDktLjE5OC4yOTctLjc2OC45NjctLjk0MSAxLjE2NS0uMTczLjE5OC0uMzQ3LjIyMy0uNjQ0LjA3NC0uMjk3LS4xNDktMS4yNTUtLjQ2Mi0yLjM5LTEuNDc1LS44ODMtLjc4OC0xLjQ4LTEuNzYxLTEuNjUzLTIuMDU5LS4xNzMtLjI5Ny0uMDE4LS40NTguMTMtLjYwNi4xMzQtLjEzMy4yOTctLjM0Ny40NDYtLjUyMS4xNTEtLjE3Mi4yLS4yOTYuMy0uNDk1LjA5OS0uMTk4LjA1LS4zNzItLjAyNS0uNTIxLS4wNzUtLjE0OC0uNjY5LTEuNjExLS45MTYtMi4yMDYtLjI0Mi0uNTc5LS40ODctLjUwMS0uNjY5LS41MWwtLjU3LS4wMWMtLjE5OCAwLS41Mi4wNzQtLjc5Mi4zNzJzLTEuMDQgMS4wMTYtMS4wNCAyLjQ3OSAxLjA2NSAyLjg3NiAxLjIxMyAzLjA3NGMuMTQ5LjE5OCAyLjA5NSAzLjIgNS4wNzYgNC40ODcuNzA5LjMwNiAxLjI2My40ODkgMS42OTQuNjI2LjcxMi4yMjYgMS4zNi4xOTQgMS44NzIuMTE4LjU3MS0uMDg1IDEuNzU4LS43MTkgMi4wMDYtMS40MTMuMjQ4LS42OTUuMjQ4LTEuMjkuMTczLTEuNDE0eiIvPgo8L3N2Zz4K');
            background-size: cover;
            flex-shrink: 0;
        }

        .hamburger {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hamburger-line {
            display: block;
            width: 24px;
            height: 2px;
            background-color: #374151;
            margin: 5px 0;
            transition: all 0.3s ease;
        }

        .hamburger.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        .menu-overlay {
            background: rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Clean button styles */
        .btn-primary {
            background: linear-gradient(135deg, #1e40af, #3b82f6);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
            cursor: pointer;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
        }

        .btn-secondary {
            background: white;
            color: #1e40af;
            border: 2px solid #1e40af;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: #1e40af;
            color: white;
        }

        /* Urgency badge */
        .urgency-badge {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 14px;
            display: inline-block;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        /* Slider Styles */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            to {
                transform: translateX(calc(-220px * 12));
            }
        }

        .slider {
            height: 420px;
            margin: auto;
            overflow: hidden;
            position: relative;
            width: 100%;
            background-color: #bfdbfe;
        }

        .slider .slide-track {
            animation: scroll 80s linear infinite;
            display: flex;
            width: calc(220px * 24);
        }

        .slider .slide {
            height: 420px;
            width: auto;
            padding: 10px;
        }

        .slider .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        /* iPad responsive styles for slider */
        @media (min-width: 768px) and (max-width: 1024px) {
            .slider {
                height: 420px;
            }

            .slider .slide {
                height: 420px;
                width: auto;
            }

            .slider .slide-track {
                width: calc(220px * 24);
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(calc(-220px * 12));
                }
            }
        }

        /* Mobile responsive styles for slider */
        @media (max-width: 767px) {
            .slider {
                height: 280px;
            }

            .slider .slide {
                height: 280px;
                width: auto;
            }

            .slider .slide-track {
                width: calc(150px * 24);
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(calc(-150px * 12));
                }
            }
        }

        /* iPad responsive styles for hero section */
        @media (min-width: 768px) and (max-width: 1024px) {
            #hero h2 {
                font-size: 2.25rem;
                line-height: 1.2;
            }
            
            #hero .text-5xl {
                font-size: 2.5rem;
            }
            
            #hero .text-2xl {
                font-size: 1.5rem;
            }
            
            #hero .text-1xl {
                font-size: 1.125rem;
            }
            
            #hero .h-20 {
                height: 5rem;
            }
            
            #hero .md\\:h-24 {
                height: 5.5rem;
            }
            
            #hero .grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
                align-items: center;
            }
            
            #hero .text-left {
                text-align: left;
            }
        }

        /* iPad responsive styles for features section */
        @media (min-width: 768px) and (max-width: 1024px) {
            #features .w-24 {
                width: 8rem;
                height: 8rem;
            }
            
            #features .h-24 {
                height: 8rem;
            }
            
            #features .md\\:w-56 {
                width: 12rem;
            }
            
            #features .md\\:h-56 {
                height: 12rem;
            }
            
            #features .text-xs {
                font-size: 0.875rem;
            }
            
            #features .md\\:text-base {
                font-size: 1rem;
            }
            
            #features .md\\:text-4xl {
                font-size: 2.5rem;
            }
            
            #features .md\\:text-3xl {
                font-size: 2rem;
            }
        }

        /* iPad responsive styles for demo section */
        @media (min-width: 768px) and (max-width: 1024px) {
            #demo #demo-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1.5rem;
            }
            
            #demo .demo-item {
                max-width: none;
            }
            
            #demo .demo-item .p-6 {
                padding: 1rem;
            }
            
            #demo .demo-item h4 {
                font-size: 1.125rem;
                margin-bottom: 0.5rem;
            }
            
            #demo .demo-item p {
                font-size: 0.875rem;
                margin-bottom: 1rem;
            }
            
            #demo .demo-item a {
                font-size: 0.875rem;
            }
        }

        /* iPad responsive styles for video cards section */
        @media (min-width: 768px) and (max-width: 1024px) {
            section.py-20.px-4.bg-gray-50 .max-w-7xl .grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 1.5rem !important;
            }
            
            section.py-20.px-4.bg-gray-50 .bg-white.border {
                margin-bottom: 0;
            }
            
            section.py-20.px-4.bg-gray-50 .p-6 {
                padding: 1rem;
            }
            
            section.py-20.px-4.bg-gray-50 .text-lg {
                font-size: 1rem;
            }
            
            section.py-20.px-4.bg-gray-50 .text-gray-600 {
                font-size: 0.875rem;
            }
        }