:root {
    --ink: #050505;
    --ink-soft: #0d0d0d;
    --line: rgba(255, 255, 255, 0.12);
    --blue: rgb(59 130 246);
    --violet: rgb(168 85 247);
}

body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--ink);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.08), transparent 28%);
    background-attachment: fixed;
}

.glass-panel {
    background: rgba(12, 12, 12, 0.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
}

/* Page-specific bg-grid removed to use global bg-grid from global.css */

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background:
        radial-gradient(circle at 14% 14%, rgba(56, 189, 248, 0.14), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(168, 85, 247, 0.12), transparent 30%),
        radial-gradient(circle at 58% 82%, rgba(59, 130, 246, 0.10), transparent 34%);
    filter: blur(20px);
    animation: ambientDrift 18s ease-in-out infinite alternate;
}

/* Page-specific reveal removed to use global reveal from global.css */

.halo::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.16), transparent 55%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

.metric-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

@media (hover: hover) {
    .metric-card:hover {
        transform: translateY(-6px);
        border-color: rgba(168, 85, 247, 0.4);
        box-shadow: 0 18px 36px -20px rgba(59, 130, 246, 0.55);
    }
}