/* =========================================
   BACKGROUND SYSTEM
   ========================================= */

body {
    background:
        radial-gradient(circle at 10% 8%, rgba(179, 164, 128, 0.11), transparent 24rem),
        radial-gradient(circle at 92% 20%, rgba(10, 61, 66, 0.08), transparent 28rem),
        var(--color-bg);
}

.site-body {
    position: relative;
    isolation: isolate;
}

.site-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(21, 35, 38, 0.03) 100%);
    opacity: 0.45;
}

.brand-decoration {
    position: fixed;
    z-index: -2;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(0.2px);
    opacity: 0.45;
}

.brand-decoration-teal {
    width: 320px;
    height: 320px;
    left: -180px;
    top: 34%;
    background: rgba(10, 61, 66, 0.08);
}

.brand-decoration-gold {
    width: 260px;
    height: 260px;
    right: -130px;
    top: 9%;
    background: rgba(179, 164, 128, 0.14);
}

@media (max-width: 768px) {
    .brand-decoration-teal {
        width: 220px;
        height: 220px;
        left: -150px;
    }

    .brand-decoration-gold {
        width: 180px;
        height: 180px;
        right: -100px;
    }
}