:root {
    --geo-bg: #ffffff;
    --geo-fg: #0f172a; /* teks */
    --grid-color: rgba(15, 23, 42, 0.06);
    --ring-1: rgba(116, 241, 99, 0.28); /* indigo */
    --ring-2: rgba(56, 189, 248, 0.25); /* sky */
    --ring-3: rgba(168, 85, 247, 0.22); /* violet */
}

/* Dark mode autodetect (boleh dicabut kalau ga perlu) */
@media (prefers-color-scheme: dark) {
    :root {
        --geo-bg: #ffffff;
        --geo-fg: #e5e7eb;
        --grid-color: rgba(148, 163, 184, 0.08);
        --ring-1: rgba(36, 167, 80, 0.32);
        --ring-2: rgba(56, 189, 248, 0.3);
        --ring-3: rgba(52, 177, 73, 0.28);
    }
}

/* Wrapper yang nempel ke body/section */
.geo-bg {
    position: relative;
    color: #383838;
    background: var(--geo-bg);
    min-height: 100dvh;
    /* overflow: clip; */
    isolation: isolate; /* biar z-index konten aman */
    overflow-x: clip;
    overflow-y: visible;  /* atau auto */
}

/* Layer background tetap (fixed) */
.geo-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* blur radial glows */ radial-gradient(
            600px circle at 20% 25%,
            var(--ring-3),
            transparent 40%
        ),
        radial-gradient(800px circle at 85% 35%, var(--ring-2), transparent 42%),
        radial-gradient(700px circle at 55% 80%, var(--ring-1), transparent 45%),
        /* subtle vertical gradient */
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.2),
                rgba(0, 0, 0, 0.03)
            ),
        /* grid (2 layers: horizontal + vertical) */
            linear-gradient(0deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);

    background-size: auto, auto, auto, 100% 100%, 40px 40px, 40px 40px;

    background-position: center center, center center, center center,
        center center, center center, center center;

    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
    mask-image: radial-gradient(
        100% 100% at 50% 50%,
        black 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        100% 100% at 50% 50%,
        black 70%,
        transparent 100%
    );
}

/* Bonus: glass card biar UI nyala */
.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
    .glass {
        background: rgba(16, 23, 42, 0.45);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* kalau tetap pengen parallax di mobile */
@media (min-width: 768px){
  .geo-bg::before{
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  }
}