/* Custom styles for background gradient and subtle card animations */
body {
    font-family: 'Inter', sans-serif;
    /* Tailwind classes are used directly in HTML. This is for custom CSS rules. */
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #f9fafb; /* gray-50 */
    --tw-gradient-to: #f3f4f6;   /* gray-100 */
    color: #374151; /* gray-800 */
}
.site-card {
    /* Tailwind classes are used directly in HTML. This is for custom CSS rules. */
    position: relative;
    overflow: hidden;
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    transition: all 500ms ease-in-out;
    transform: translateZ(0); /* Initiates hardware acceleration */
}
.site-card:hover {
    transform: translateY(-4px) scale(1.02); /* scale-[1.02] combined with translateY for lift */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
    outline: 2px solid rgba(59, 130, 246, 0.6); /* ring-2 ring-blue-500 ring-opacity-60 */
    outline-offset: 0px; /* Adjust if needed */
}
.site-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #eff6ff; /* blue-50 */
    --tw-gradient-to: #e0e7ff;   /* indigo-50 */
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    z-index: 0;
}
.site-card:hover::before {
    opacity: 1;
}
.site-card img, .site-card p {
    position: relative;
    z-index: 10; /* Ensure image and text are above pseudo-element */
}
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb; /* blue-600 */
    color: white;
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 300ms ease-in-out;
    transform: translateZ(0); /* Initiates hardware acceleration */
}
.cta-button:hover {
    background-color: #1d4ed8; /* blue-700 */
    transform: scale(1.05);
}
.cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); /* focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 */
}

/* Specific styling for the gradient text in the heading */
.text-blue-700.bg-clip-text {
    background-clip: text;
    -webkit-background-clip: text; /* For Safari/Chrome */
    color: transparent;
    background-image: linear-gradient(to right, #2563eb, #4f46e5); /* from-blue-600 to-indigo-600 */
}