:root {
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(15, 23, 42, 0.1);
}

body {
    background-image: radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.18), transparent 32%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.12), transparent 30%);
}

.hero-shell {
    min-height: 100vh;
    position: relative;
}

.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.15rem;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(6px);
}

.metric-card {
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: '';
    position: absolute;
    top: -26px;
    right: -26px;
    width: 70px;
    height: 70px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
}

.heat-cell {
    min-width: 44px;
    text-align: center;
    border-radius: 0.4rem;
    transition: transform 0.18s ease;
}

.heat-cell:hover {
    transform: translateY(-1px) scale(1.03);
}

.fade-up {
    animation: fadeUp 0.36s ease forwards;
}

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