@media (max-width: 767px) {
    /* Footer Geometric Background - positioned behind the logos */
    .footer-geo-bg {
        position: absolute;
        top: 60px; /* Moved down */
        left: 50%;
        transform: translateX(-50%);
        width: 390px; /* Set to standard Figma mobile frame width so absolute left coords match perfectly */
        height: 187px;
        pointer-events: none;
        z-index: 0;
        overflow: visible;
    }

    .geo-dot {
        position: absolute;
        border-radius: 50%;
        background: #4BD7D8;
        box-shadow:
            0px 4px 4px 0px rgba(0, 0, 0, 0.25),
            0px 0px 50px 0px rgba(202, 252, 255, 0.3),
            0px 0px 4px 0px rgba(192, 253, 250, 0.6),
            0px 0px 4px 0px #B7FFFB;
    }

    /* Dot 1: Left side, top */
    .geo-dot-1 {
        width: 8px;
        height: 8px;
        top: 0px;
        left: 151px;
    }

    /* Dot 2: Right side */
    .geo-dot-2 {
        width: 10px;
        height: 10px;
        top: 54px;
        left: 332px;
    }

    /* Dot 3: Left side, bottom */
    .geo-dot-3 {
        width: 5px;
        height: 5px;
        top: 43px;
        left: 105px;
    }

    /* === Unified Dashed Line Base Style === */
    .geo-line, .geo-bar {
        position: absolute;
        display: block;
        border: none;
    }

    /* 3. Center Wave Curve (Figma Curve) */
    .geo-curve {
        position: absolute;
        display: block;
        width: 180px;
        height: 115px; /* Shortened to match the new logo distance */
        top: 78px; 
        left: 95px;
        background-image: url("data:image/svg+xml,%3Csvg width='180' height='115' viewBox='0 0 180 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M140,0 C180,0 180,38 90,50 C0,62 0,100 40,100' stroke='%2367FCFF' stroke-width='1' stroke-opacity='0.5' stroke-dasharray='5,5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 1;
    }

    /* 4. Top Right Angled Line 1 (Figma Line 1) */
    .geo-line-1 {
        width: 47.4px;
        height: 0;
        top: 4px;
        left: 260px;
        border-top: 1px dashed rgba(103, 252, 255, 0.5);
        transform: rotate(-50.33deg);
        transform-origin: left center;
    }

    /* 5. Top Right Curved Line 2 (Figma Line 2) */
    .geo-line-2 {
        width: 66.6px;
        height: 16px;
        top: 18px;
        left: 268px;
        border-bottom: 1px dashed rgba(103, 252, 255, 0.5);
        border-right: 1px dashed rgba(103, 252, 255, 0.5);
        border-bottom-right-radius: 100%;
        transform: rotate(-32.69deg);
        transform-origin: left center;
    }

    /* 6. Top Left Dashed Line */
    .geo-bar-1 {
        width: 92.5px;
        height: 0;
        top: 73px;
        left: 37px;
        border-top: 1px dashed rgba(103, 252, 255, 0.5);
    }

    /* 7. Bottom Left Dashed Line */
    .geo-bar-2 {
        width: 92.5px;
        height: 0;
        top: 121px;
        left: 35px;
        border-top: 1px dashed rgba(103, 252, 255, 0.5);
    }

    /* 1. Left Line (Comet) */
    .geo-bar-left {
        width: 85px;
        height: 1px;
        top: 92px; /* 3375 - 3283 = 92 */
        left: 40px;
        background: linear-gradient(to left, rgba(103, 252, 255, 0.5) 0%, rgba(103, 252, 255, 0) 100%);
        border: none;
        border-radius: 2px;
        filter: blur(0.5px);
        opacity: 1;
    }

    /* 2. Right Top Line (Comet) */
    .geo-bar-right-top {
        width: 92.5px;
        height: 1px;
        top: 92px; /* Matched exactly with the left comet's height */
        left: 250px; /* Manually adjusted to match user's drawing */
        background: linear-gradient(to left, rgba(103, 252, 255, 0.5) 0%, rgba(103, 252, 255, 0) 100%);
        border: none;
        border-radius: 2px;
        filter: blur(0.5px);
        opacity: 1;
    }

    /* 3. Right Bottom Line */
    .geo-bar-right-bottom {
        width: 92.5px;
        height: 0;
        top: 146px; /* 3429 - 3283 = 146 */
        left: 261px;
        background: transparent;
        border-top: 1px dashed rgba(103, 252, 255, 0.5);
    }
}