:root{
    --cta-cyan:#00dce8;
    --cta-cyan-light:#39f4ff;
    --cta-cyan-dark:#008b95;
    --cta-gold:#ffd34e;
    --cta-gold-dark:#b88708;
    --cta-black:#02090b;
    --cta-dark:#031518;
}

/* =========================
   FOOTER CTA WRAPPER
   ========================= */

.footer-cta,
.footer-cta *{
    box-sizing:border-box;
}

.footer-cta{
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100% - 24px);
    max-width:1280px;

    padding:14px;
    border-radius:22px;

    z-index:9999;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(
            900px 220px at 15% 0%,
            rgba(0,220,232,.20),
            transparent 60%
        ),
        radial-gradient(
            900px 240px at 85% 120%,
            rgba(255,211,78,.16),
            transparent 60%
        ),
        repeating-linear-gradient(
            45deg,
            rgba(0,220,232,.035) 0 1px,
            transparent 1px 8px
        ),
        linear-gradient(
            180deg,
            rgba(5,47,51,.88),
            rgba(2,9,11,.94)
        );

    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);

    box-shadow:
        0 14px 40px rgba(0,0,0,.85),
        0 0 24px rgba(0,220,232,.22),
        0 0 18px rgba(255,211,78,.14);

    animation:
        floatUpDown 3.2s ease-in-out infinite,
        glassPulse 3.2s ease-in-out infinite;
}


/* =========================
   ANIMATED OUTER BORDER
   ========================= */

.footer-cta::before{
    content:"";
    position:absolute;
    inset:0;

    padding:3px;

    border-radius:inherit;

    z-index:0;
    pointer-events:none;

    background:
        conic-gradient(
            from 0deg,
            var(--cta-gold),
            var(--cta-cyan) 18%,
            var(--cta-cyan-light) 32%,
            var(--cta-gold) 48%,
            var(--cta-cyan) 65%,
            var(--cta-cyan-dark) 82%,
            var(--cta-gold)
        );

    animation:borderSpin 7s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    filter:
        drop-shadow(0 0 5px rgba(0,220,232,.30));
}


/* GLASS REFLECTION */
.footer-cta::after{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;

    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14),
            transparent 38%
        );

    opacity:.55;
}


/* =========================
   WRAPPER ANIMATIONS
   ========================= */

@keyframes borderSpin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatUpDown{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-8px);
    }
}

@keyframes glassPulse{
    0%,100%{
        box-shadow:
            0 14px 38px rgba(0,0,0,.85),
            0 0 18px rgba(0,220,232,.18),
            0 0 14px rgba(255,211,78,.12);
    }

    50%{
        box-shadow:
            0 18px 46px rgba(0,0,0,.90),
            0 0 28px rgba(0,220,232,.30),
            0 0 20px rgba(255,211,78,.20);
    }
}


/* =========================
   INNER CTA AREA
   ========================= */

.cta-footer{
    display:flex;
    flex-wrap:nowrap;

    gap:10px;

    align-items:center;

    width:100%;

    padding:10px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(2,9,11,.72),
            rgba(5,47,51,.58)
        );

    box-shadow:
        inset 0 0 0 1px rgba(0,220,232,.38),
        inset 0 0 28px rgba(0,220,232,.09),
        0 0 12px rgba(255,211,78,.06);

    position:relative;

    z-index:2;

    overflow:hidden;
}


/* INNER LIGHT EFFECT */
.cta-footer::before{
    content:"";

    position:absolute;

    inset:8px;

    border-radius:14px;

    pointer-events:none;

    opacity:.9;

    background:
        radial-gradient(
            160px 48px at 18% 15%,
            rgba(0,220,232,.18),
            transparent 70%
        ),
        radial-gradient(
            160px 48px at 82% 85%,
            rgba(255,211,78,.15),
            transparent 70%
        );
}


/* =========================
   CTA BUTTON
   ========================= */

.cta-footer .btn{
    flex:1 1 0;

    min-width:105px;

    padding:12px 10px;

    font-size:13px;
    font-weight:900;

    border-radius:999px;

    text-decoration:none;
    text-align:center;

    letter-spacing:.9px;

    text-transform:uppercase;

    position:relative;

    overflow:hidden;

    border:none;

    color:#ffffff;

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;

    isolation:isolate;

    white-space:nowrap;
}


/* =========================
   BUTTON ANIMATED BORDER
   ========================= */

.cta-footer .btn::before{
    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:inherit;

    z-index:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            var(--cta-gold),
            var(--cta-cyan),
            var(--cta-cyan-light),
            var(--cta-gold),
            var(--cta-cyan),
            var(--cta-gold)
        );

    background-size:300% 300%;

    animation:
        borderFlow 4.2s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;
}


/* =========================
   BUTTON DARK GLASS
   ========================= */

.cta-footer .btn::after{
    content:"";

    position:absolute;

    inset:2px;

    border-radius:inherit;

    z-index:1;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.20) 22%,
            transparent 45%
        ) no-repeat,

        linear-gradient(
            180deg,
            #063b40 0%,
            #031518 48%,
            #02090b 100%
        );

    background-size:
        220% 100%,
        100% 100%;

    background-position:
        -130% 0,
        0 0;

    animation:
        shineMove 4.6s ease-in-out infinite;
}


/* BUTTON TEXT */
.cta-footer .btn span{
    position:relative;

    z-index:2;

    color:#ffffff;

    text-shadow:
        0 0 5px rgba(0,220,232,.35),
        0 2px 8px rgba(0,0,0,.90);
}


/* =========================
   BUTTON HOVER
   ========================= */

.cta-footer .btn:hover{
    transform:
        translateY(-2px)
        scale(1.03);

    filter:
        brightness(1.10);

    box-shadow:
        0 0 20px rgba(0,220,232,.35),
        0 0 14px rgba(255,211,78,.22);
}

.cta-footer .btn:hover span{
    color:#ffd34e;

    text-shadow:
        0 0 6px rgba(255,211,78,.45),
        0 0 12px rgba(0,220,232,.25);
}

.cta-footer .btn:active{
    transform:
        translateY(0)
        scale(.98);
}


/* =========================
   BUTTON ANIMATIONS
   ========================= */

@keyframes borderFlow{
    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

@keyframes shineMove{
    0%,55%{
        background-position:
            -130% 0,
            0 0;
    }

    70%{
        background-position:
            130% 0,
            0 0;
    }

    100%{
        background-position:
            130% 0,
            0 0;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width:760px){

    .footer-cta{
        width:calc(100% - 12px);
        bottom:8px;

        padding:
            9px;

        border-radius:
            18px;
    }

    .cta-footer{
        overflow-x:auto;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;

        padding:
            8px;

        gap:
            8px;
    }

    .cta-footer::-webkit-scrollbar{
        display:none;
    }

    .cta-footer .btn{
        flex:
            0 0 120px;

        min-width:
            120px;

        padding:
            11px 8px;

        font-size:
            12px;
    }
}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion:reduce){

    .footer-cta,
    .footer-cta::before,
    .cta-footer .btn::before,
    .cta-footer .btn::after{
        animation:none !important;
    }
}