/* Spotlight Effect for Cards */

.service-card,
.stat-card,
.pricing-card,
.question-card,
.card,
.glass-card {
    /* Ensure relative positioning for absolute children */
    position: relative !important;
    background-color: rgba(23, 23, 23, 0.8) !important;
    /* Darker base for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The Spotlight Overlay (Background Glow) */
.service-card::before,
.stat-card::before,
.pricing-card::before,
.question-card::before,
.card::before,
.glass-card::before {
    content: "";
    position: absolute;
    height: 100% !important;
    width: 100% !important;
    top: 0;
    left: 0;
    /* Gradient tracks variable --mouse-x and --mouse-y set by JS */
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(0, 110, 183, 0.15),
            transparent 40%) !important;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.5s ease;
    z-index: 0;
    /* 0 to sit ABOVE background. Text is z-index 2. */
    pointer-events: none;
    transform: none !important;
    /* Reset any conflicts from style.css */
}

/* Reveal on Hover */
.service-card:hover::before,
.stat-card:hover::before,
.pricing-card:hover::before,
.question-card:hover::before,
.card:hover::before,
.glass-card:hover::before {
    opacity: 1;
}

.service-card:hover,
.stat-card:hover,
.pricing-card:hover,
.question-card:hover,
.card:hover,
.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(0, 110, 183, 0.2);
    border-color: rgba(0, 145, 234, 0.5);
    /* Highlight border color */
}

/* Ensure text is readable */
.service-card h4,
.service-card p,
.service-card .icon-box,
.stat-card span,
.pricing-card span,
.pricing-card p,
.pricing-card ul,
.question-card h3,
.question-card .options,
.glass-card h4,
.glass-card p,
.glass-card .icon-box {
    position: relative;
    z-index: 2;
}