* {
            font-family: 'Inter', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(
            to right,
            rgb(106, 0, 255) 0%,
            rgb(255, 217, 0) 100%
            );
            min-height: 500px;
            padding: 100px 0;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .job-card {
            transition: all 0.3s ease;
        }
        
        .job-card:hover {
            border-color: #2d5a87;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        }
        
        .btn-primary {
            background-color: #FFC300;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(30, 58, 95, 0.3);
        }
        
        .stat-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }
        
        .benefit-icon {
            background: linear-gradient(135deg, #2d5a87 0%, #3d7ab5 100%);
        }
        
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .scroll-animate.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .tag {
            transition: all 0.2s ease;
        }
        
        .tag:hover {
            transform: scale(1.05);
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #2d5a87;
            box-shadow: 0 0 0 3px rgba(45, 90, 135, 0.1);
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(22, 124, 233, 0.2);
            background: linear-gradient(to right, #167CE9 0%, #FFC300 100%);
            color: white;
        }

        .card-hover:hover p,
        .card-hover:hover h3 {
            color: white;
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
        }

        
        .btn-outline {
            background-color: #167CE9;
            color: white;
            border: 2px solid white;
        }

        .btn-primary {
            background-color: #FFC300;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .btn-dan{
            background-color: #197CE9;
            color: white;
        }