:root {
        --bs-primary: #5d5f5f;
        --bs-secondary: #565e74;
        --bs-tertiary: #005ac2;
        --bs-body-bg: #ffffff;
        --bs-body-font-family: 'Hanken Grotesk', sans-serif;
        --on-surface: #0b1c30;
        --on-surface-variant: #444748;
        --surface-container: #e5eeff;
        --surface-container-high: #dce9ff;
        --outline-variant: #c4c7c8;
    }

    body {
        color: var(--on-surface);
        background-color: var(--bs-body-bg);
        font-family: var(--bs-body-font-family);
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
    }

    .navbar-brand {
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--on-surface) !important;
    }

    .nav-link {
        font-weight: 500;
        color: var(--on-surface-variant) !important;
        padding: 0.5rem 1rem !important;
    }

    .nav-link.active {
        color: var(--bs-tertiary) !important;
        border-bottom: 2px solid var(--bs-tertiary);
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .text-tertiary {
        color: var(--bs-tertiary);
    }

    .btn-dark-sphere {
        background-color: #213145;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
        border-radius: 4px;
    }

    .btn-outline-sphere {
        border: 1px solid var(--outline-variant);
        color: var(--on-surface);
        padding: 0.75rem 2rem;
        font-weight: 600;
        border-radius: 4px;
    }

    .metric-card {
        background-color: #ffffff;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: 1.5rem;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .metric-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }

    .metric-icon-box {
        background-color: var(--surface-container);
        color: var(--bs-tertiary);
        padding: 8px;
        border-radius: 8px;
        display: inline-flex;
    }

    .label-mono {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .featured-card {
        border-radius: 20px;
        border: 1px solid #E2E8F0;
        background-color: #ffffff;
        padding: 2.5rem;
    }

    .viz-placeholder {
        background-color: #f8f9ff;
        border: 1px solid var(--outline-variant);
        border-radius: 12px;
        height: 400px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .viz-dot-grid {
        position: absolute;
        inset: 0;
        opacity: 0.1;
        background-image: radial-gradient(var(--bs-tertiary) 0.5px, transparent 0.5px);
        background-size: 24px 24px;
    }

    .footer-link {
        text-decoration: underline;
        text-underline-offset: 4px;
        color: var(--on-surface-variant);
        font-size: 0.875rem;
    }

    @media (min-width: 992px) {
        .metric-card-offset {
            margin-top: 2rem;
        }
    }

    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .5;
        }
    }