/* Global Cursor Glow Background */
#cursor-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
    will-change: transform;
}

#cursor-glow.active {
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   Secondary outlined buttons (accent-deep) — hover-state fix.

   17 buttons across the site use this pattern:
     style="border-color: var(--accent-deep, #007a6a);
            color:        var(--accent-deep, #007a6a); ..."
     class="... hover:bg-[var(--accent-deep)] hover:text-white"

   Inline `color` has higher specificity than the Tailwind hover class,
   so on hover the text stayed dark-teal on a dark-teal background —
   invisible. These two rules force the correct foreground on hover
   without touching every individual button.
─────────────────────────────────────────────────────────────────── */
a[style*="--accent-deep"]:hover,
button[style*="--accent-deep"]:hover {
    color: #ffffff !important;
    border-color: var(--accent-deep, #007a6a) !important;
}
a[style*="--accent-deep"]:hover *,
button[style*="--accent-deep"]:hover * {
    color: inherit;
}
a[style*="--accent-deep"]:focus-visible,
button[style*="--accent-deep"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-deep, #007a6a) 30%, transparent);
}