/* New custom styling for scroll animation */
    .fade-in-on-scroll {
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        transform: translateY(40px);
        opacity: 0;
    }

    /* Animated border for apps */
    .animated-border {
        position: relative;
        border-radius: 0.75rem; /* rounded-lg */
        overflow: hidden;
    }

    .animated-border::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #4F46E5, #3B82F6, #10B981, #EC4899);
        background-size: 400%;
        border-radius: 1rem;
        animation: glowing 20s linear infinite;
        z-index: -1;
        opacity: 0.5;
    }

    @keyframes glowing {
        0% { background-position: 0 0; }
        50% { background-position: 400% 0; }
        100% { background-position: 0 0; }
    }
    :root {
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --secondary: #10b981;
        --dark: #0f172a;
        --darker: #0a0d14;
        --light: #f8fafc;
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: var(--darker);
        color: #c9d1d9;
        background-image:
            linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 20px 20px;
        scroll-behavior: smooth;
    }

    .bg-grid-dark {
        background-image:
            linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    .container-card {
        background: rgba(13, 17, 23, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(48, 54, 61, 0.5);
        transition: all 0.3s ease;
    }

    .container-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    }

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

    .pricing-card:hover {
        transform: scale(1.03);
    }

    .pricing-card.popular {
        border: 2px solid var(--primary);
        position: relative;
        overflow: hidden;
    }

    .popular-tag {
        position: absolute;
        top: 1rem;
        right: -2.5rem;
        background: var(--primary);
        color: white;
        padding: 0.25rem 2.5rem;
        transform: rotate(45deg);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .feature-icon {
        background: rgba(37, 99, 235, 0.1);
        padding: 0.75rem;
        border-radius: 12px;
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

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

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

    .stat-card:hover {
        background: rgba(16, 185, 129, 0.1);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }

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

    .container-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .container-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }
    .tab-button.active {
        border-color: #3b82f6;
        color: white;
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
    .full-content {
        display: none;
        animation: fadeInSlideUp 0.7s ease-out forwards;
    }
    .full-content.visible {
        display: block;
    }
    @keyframes fadeInSlideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* New: Dark Gradient Effects */
    .animated-gradient-border-blue {
        position: relative;
        z-index: 0;
        padding: 4px; /* Creates the border effect */
        background-clip: padding-box;
        background-color: transparent;
        border-radius: 1rem; /* rounded-xl */
    }

    .animated-gradient-border-blue::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.7), rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.2));
        z-index: -1;
        border-radius: 1rem;
    }

    .animated-gradient-border-green {
        position: relative;
        z-index: 0;
        padding: 4px; /* Creates the border effect */
        background-clip: padding-box;
        background-color: transparent;
        border-radius: 1rem; /* rounded-xl */
    }

    .animated-gradient-border-green::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.7), rgba(52, 211, 153, 0.4), rgba(245, 158, 11, 0.2));
        z-index: -1;
        border-radius: 1rem;
    }

    .container-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        }
        .animated-gradient-border-blue, .animated-gradient-border-green,
        .animated-gradient-border-purple, .animated-gradient-border-yellow {
            position: relative;
            z-index: 0;
            padding: 2px; /* Creates the border effect */
            border-radius: 1rem; /* rounded-xl */
            background-clip: padding-box;
            background-color: transparent;
        }
        .animated-gradient-border-blue::before, .animated-gradient-border-green::before,
        .animated-gradient-border-purple::before, .animated-gradient-border-yellow::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: -1;
            border-radius: 1rem;
            background-size: 200% 200%;
            animation: gradient-animation 8s ease infinite;
        }
        .animated-gradient-border-blue::before {
            background-image: linear-gradient(45deg, rgba(37, 99, 235, 0.7), rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.2));
        }
        .animated-gradient-border-green::before {
            background-image: linear-gradient(45deg, rgba(16, 185, 129, 0.7), rgba(52, 211, 153, 0.4), rgba(245, 158, 11, 0.2));
        }
        /* Added new gradients for variety */
        .animated-gradient-border-purple::before {
             background-image: linear-gradient(45deg, rgba(139, 92, 246, 0.7), rgba(167, 139, 250, 0.4), rgba(236, 72, 153, 0.2));
        }
        .animated-gradient-border-yellow::before {
             background-image: linear-gradient(45deg, rgba(245, 158, 11, 0.7), rgba(251, 191, 36, 0.4), rgba(239, 68, 68, 0.2));
        }

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