/* ---------------- footer ---------------- */
.ftWrap{
    position: relative;
    background-color: #000;
    overflow: hidden;
    /* ---- main columns ---- */
    .ftMain{
        padding: 85px 0 70px;
        .ftGrid{
            gap: 70px;
        }
        .ftTitle{
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 28px;
            position: relative;
            padding-bottom: 14px;
            &::after{
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 34px;
                height: 2px;
                border-radius: 2px;
                background: #0075ff;
            }
        }
        .ftBrand{
            flex: 0 0 30%;
            min-width: 0;
            .ftLogo{
                max-width: 200px;
                margin-bottom: 24px;
                img{ width: 100%; }
            }
            p{
                color: #9a9a9a;
                font-size: 14px;
                line-height: 1.8;
                margin-bottom: 18px;
            }
            .ftCin{
                font-family: monospace;
                font-size: 12px;
                letter-spacing: 1px;
                color: #5f5f5f;
                margin-bottom: 26px;
            }
            .ftSocials{
                gap: 12px;
                .ftSocial{
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: 15px;
                    border: 1px solid #ffffff2e;
                    background: #ffffff0f;
                    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
                    &:hover{
                        color: #fff;
                        border-color: transparent;
                        background: #0075ff;
                    }
                    &:focus-visible{
                        outline: 1px solid #0075ff;
                        outline-offset: 3px;
                    }
                }
            }
        }
        .ftCol{
            flex: 0 0 auto;
            min-width: 0;
            ul li{
                margin-bottom: 15px;
                &:last-child{ margin-bottom: 0; }
            }
            .ftLink{
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 0;
                color: #bdbdbd;
                font-size: 15px;
                letter-spacing: 0.3px;
                padding-bottom: 3px;
                transition: color 0.35s ease;
                span{
                    transition: transform 0.35s ease;
                }
                i,
                svg{
                    font-size: 12px;
                    width: 1em;
                    color: #0075ff;
                    opacity: 0;
                    transform: translateX(-8px) rotate(-45deg);
                    transition: opacity 0.35s ease, transform 0.35s ease;
                    margin-left: 8px;
                }
                /* underline draws itself in from the left */
                &::after{
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background: #0075ff;
                    transform: scaleX(0);
                    transform-origin: left center;
                    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
                }
                &:hover{
                    color: #fff;
                    span{ transform: translateX(4px); }
                    i,
                    svg{
                        opacity: 1;
                        transform: translateX(0) rotate(-45deg);
                    }
                    &::after{ transform: scaleX(1); }
                }
            }
        }
        .ftTouch{
            flex: 1 1 auto;
            min-width: 0;
            .ftAddress{
                gap: 14px;
                margin-bottom: 26px;
                i,
                svg{
                    flex: 0 0 auto;
                    color: #0075ff;
                    font-size: 17px;
                    width: 1em;
                    margin-top: 4px;
                }
                p{
                    color: #9a9a9a;
                    font-size: 14px;
                    line-height: 1.8;
                    margin: 0;
                    b{ color: #fff; font-weight: 600; }
                }
            }
            .ftReach{
                margin-bottom: 18px;
                &:last-child{ margin-bottom: 0; }
                .ftReachLabel{
                    color: #0075ff;
                    font-size: 14px;
                    font-weight: 700;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    margin-bottom: 10px;
                }
                .ftChips{
                    flex-wrap: wrap;
                    gap: 10px;
                    .ftChip{
                        gap: 9px;
                        padding: 10px 18px;
                        border-radius: 50px;
                        border: 1px solid #ffffff2e;
                        background: #ffffff0f;
                        color: #bdbdbd;
                        font-size: 13px;
                        letter-spacing: 0.3px;
                        white-space: nowrap;
                        transition: 0.4s;
                        i,
                        svg{
                            color: #0075ff;
                            font-size: 12px;
                            width: 1em;
                            transition: color 0.4s ease;
                        }
                        &:hover{
                            color: #fff;
                            border-color: transparent;
                            background: #0075ff;
                            transform: translateY(-3px);
                            i,
                            svg{ color: #fff; }
                        }
                    }
                }
            }
        }
    }
    /* ---- legal strip ---- */
    .ftBottom{
        border-top: 1px solid #ffffff1a;
        padding: 24px 0;
        .ftBottomInner{
            gap: 20px;
            flex-wrap: wrap;
        }
        .ftCopy,
        .ftMade{
            color: #5f5f5f;
            font-size: 13px;
            letter-spacing: 0.5px;
            margin: 0;
        }
        .ftLegal{
            gap: 26px;
            li a{
                color: #9a9a9a;
                font-size: 13px;
                letter-spacing: 0.5px;
                transition: color 0.35s ease;
                &:hover{ color: #0075ff; }
            }
        }
    }
}
/* ---- back to top: fixed ring that fills with scroll progress ---- */
.ftTop{
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
    background: #101216e6;
    border: 1px solid #ffffff2b;
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.4s ease;
    /* the progress ring only — font awesome swaps the arrow <i> for an svg too,
       and this rule must not catch that one */
    > svg:not(.svg-inline--fa):not(.ftTopArrow):not([data-icon]){   /* D239: the arrow itself is never turned (Font Awesome svgs carry data-icon) */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        circle{
            fill: none;
            stroke-width: 2.5;
            &.ftTopTrack{ stroke: #ffffff1a; }
            &.ftTopFill{
                stroke: #0075ff;
                stroke-linecap: round;
                stroke-dasharray: 157;
                stroke-dashoffset: 157;
            }
        }
    }
    /* the arrow: centred, upright, on top of the ring */
    > i, > .svg-inline--fa{
        position: relative;
        z-index: 1;
        width: 15px;
        height: 15px;
        transform: none;
        transition: transform 0.35s ease;
    }
    &:hover > i, &:hover > .svg-inline--fa{ transform: translateY(-3px); }
    &.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    &:hover{
        background: #1b1e24;
    }
    &:focus-visible{
        outline: 1px solid #0075ff;
        outline-offset: 3px;
    }
}

@media (max-width: 1199px){
    .ftWrap{
        .ftMain{
            padding: 60px 0 50px;
            .ftGrid{
                flex-wrap: wrap;
                gap: 45px;
            }
            .ftBrand{ flex: 0 0 100%; max-width: 480px; }
            .ftTouch{ flex: 1 1 340px; }
        }
    }
}

@media (max-width: 767px){
    .ftWrap{
        .ftMain{
            padding: 45px 0 40px;
            .ftGrid{
                flex-direction: column;
                gap: 35px;
            }
            .ftTitle{ margin-bottom: 20px; }
            .ftBrand p{ font-size: 13px; }
            .ftTouch .ftChips .ftChip{ font-size: 12px; padding: 9px 14px; }
        }
        .ftBottom{
            .ftBottomInner{
                flex-direction: column;
                gap: 8px;
                text-align: center;
            }
        }
    }
    .ftTop{
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
        font-size: 13px;
    }
}

/* ================= footer: interactive layer ================= */
.ftWrap{
    /* soft blue spotlight that follows the cursor (--mx / --my set by js) */
    &::before{
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgb(0 117 255 / 12%), transparent 60%);
        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;
    }
    &:hover::before{ opacity: 1; }
    > *{ position: relative; z-index: 1; }
    > .ftTop{ position: fixed; z-index: 90; } /* keep the back-to-top ring fixed */
}
/* ---- contact strip ---- */
.ftCta{
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 70px);
    .ftCtaInner{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
        flex-wrap: wrap;
    }
    .ftCtaEyebrow{
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        font-family: "Space Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgb(241 237 228 / 60%);
        &::before{ content: ""; width: 30px; height: 1px; background: #0075ff; }
    }
    .ftMail{
        position: relative;
        display: inline-flex;
        align-items: flex-start;
        gap: 0.2em;
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: clamp(26px, 5vw, 84px);
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: #fff;
        text-decoration: none;
        word-break: break-all;
        span{
            font-size: 0.5em;
            color: #0075ff;
            transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
        }
        /* underline sweeps in from the left */
        &::after{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 3px;
            background: #0075ff;
            transform: scaleX(0);
            transform-origin: 0 50%;
            transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        }
        &:hover{ color: #0075ff; }
        &:hover span{ transform: translate(6px, -6px); }
        &:hover::after{ transform: scaleX(1); }
    }
    .ftCtaSide{
        display: grid;
        justify-items: end;
        gap: 14px;
    }
    .ftCopyBtn{
        height: 46px;
        padding: 0 24px;
        border: 1px solid rgb(255 255 255 / 20%);
        border-radius: 50px;
        background: none;
        font-family: "Space Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f1ede4;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        &:hover{ background: #f1ede4; border-color: #f1ede4; color: #0b0b0b; }
        &.is-done{ background: #0075ff; border-color: #0075ff; color: #fff; }
        &:focus-visible{ outline: 2px solid #0075ff; outline-offset: 3px; }
    }
    .ftClock{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-family: "Space Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgb(241 237 228 / 55%);
        b{ font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
        /* live dot */
        i{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #0075ff;
            box-shadow: 0 0 0 0 rgb(0 117 255 / 60%);
            animation: ftLive 2s ease-out infinite;
        }
    }
}
@keyframes ftLive{
    0%{ box-shadow: 0 0 0 0 rgb(0 117 255 / 60%); }
    100%{ box-shadow: 0 0 0 10px rgb(0 117 255 / 0%); }
}
/* ---- giant wordmark: letters rise in on scroll, lift + fill blue on hover ---- */
.ftMark{
    display: flex;
    justify-content: center;
    padding: 0 clamp(16px, 2vw, 40px);
    overflow: hidden;
    font-family: "Archivo", "Montserrat", sans-serif;
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    font-weight: 800;
    /* "PROMOTEDGE" is ~9.6em wide in this face: fill the width without overflowing */
    font-size: calc((100vw - 2 * clamp(16px, 2vw, 40px)) / 10);
    line-height: 0.82;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    user-select: none;
    .ftLetter{
        display: inline-block;
        color: transparent;
        -webkit-text-stroke: 1px rgb(255 255 255 / 18%);
        transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: transform;
        &:hover{
            color: #0075ff;
            -webkit-text-stroke-color: #0075ff;
            transform: translateY(-8%);
        }
    }
}
@media (max-width: 767px){
    .ftCta{
        .ftCtaInner{ flex-direction: column; align-items: flex-start; }
        .ftCtaSide{ justify-items: start; }
    }
    .ftWrap::before{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .ftCta .ftClock i{ animation: none; } }
/* D239: back-to-top arrow points up (an inline svg, never turned with the ring) */
.ftTop > .ftTopArrow{ position: relative; z-index: 1; transform: none !important; }