.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.22;
    z-index: -1;
    pointer-events: none;
}
.blob1 {
    width: 360px; height: 360px;
    top: -120px; left: -120px;
    background: var(--bs-primary);
}
.blob2 {
    width: 360px; height: 360px;
    bottom: -120px; right: -120px;
    background: var(--bs-success);
}

/* Optional third blob for depth */
.blob3 {
    width: 280px; height: 280px;
    top: 40%;
    left: -80px;
    background: var(--bs-info);
}

/* Glassy cards (use class .glass-card on any card) */
.glass-card {
    border: none !important;
    border-radius: 1rem !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(8px);
}

/* Dark mode friendly */
@media (prefers-color-scheme: dark) {
    .blob { opacity: 0.18; }
    .glass-card {
        background: rgba(20,20,20,0.6) !important;
    }
}

/* Keep main above blobs */
.main { position: relative; z-index: 1; }